Job Tracking System

A modern, responsive web application for tracking construction/contracting jobs, built with vanilla HTML/CSS/JavaScript and PocketBase.

Features

• Job Management: Create, read, update, and delete job records
• Comprehensive Job Information: Track all job details including:
  • Basic information (Job Number, Name, Address, Type, Status, Division)
  • Team assignments (Estimator, Office Rep, Project Manager)
  • Client information (Company, Contact Person, Phone, Email)
  • Dates and scheduling (Start Date, Due Date, Submission Date)
  • Links and references (QB Link, Voxer Link, Folder Link)
  • Status flags (Active, Tax Exempt, Docs Uploaded, etc.)
• Notes System: Add rich text notes to jobs with sentiment tracking
• Search & Filter: Search jobs by number, name, or client; filter by status
• Dashboard: View job statistics and quick actions
• Responsive Design: Works on mobile, tablet, and desktop

Technology Stack

• Frontend: Vanilla HTML/CSS/JavaScript
• CSS Framework: Tailwind CSS (via CDN)
• Rich Text Editor: Quill.js
• Backend: PocketBase
• Design: Modern, clean UI with Indigo/Green/Purple color scheme

Setup Instructions

1. Install PocketBase

Download PocketBase from https://pocketbase.io/docs/ and start it:

./pocketbase serve

By default, PocketBase runs on http://127.0.0.1:8090

2. Configure PocketBase

1. Open PocketBase Admin UI at http://127.0.0.1:8090/_/
2. Create an admin account
3. Create the following collections:

Job_Info Collection

Create a collection named Job_Info with the following fields:

• id (Auto) - Auto-generated ID
• Job_Number (Text)
• Job_Full_Name (Text)
• Job_Name (Text)
• Job_Address (Text)
• Job_Type (Text)
• Job_Status (Text)
• Job_Division (Text)
• Estimator (Text)
• Office_Rep (Text)
• Project_Manager (Text)
• Company_Client (Text)
• Contact_Person (Text)
• Phone_Number (Text)
• Email (Text)
• Due_Date_Source (Text)
• Due_Date_Counter (Text)
• Due_Time (Text)
• Schedule_Confidence (Text)
• Notes (Text)
• Job_QB_Link (Text)
• Voxer_Link (Text)
• Job_Codes (Text)
• Job_Folder_Link (Text)
• Has_Attachments (Boolean)
• Attachment_List (JSON)
• Note_Ref (JSON - Array of relation IDs)
• latest_note_summary (JSON)
• note_thread_text (JSON)
• note_count (Number)
• last_note_at (Date)
• Job_Number_Parent (Text)
• Start_Date (Date)
• Submission_Date (Date)
• Flag (Boolean)
• Tax_Exempt (Boolean)
• Active (Boolean)
• Due_Date (Date)
• Docs_Uploaded (Boolean)
• Tax_Exempt_Docs_Uploaded (Boolean)
• Estimate_Approved (Boolean)
• QB_Created (Boolean)
• Added_To_Calendar (Boolean)
• PSwift_Uploaded (Boolean)
• Voxer_Created (Boolean)
• Estimate_Reviewed (Boolean)
• Estimate_Draft (Boolean)

Notes Collection

Create a collection named notes with the following fields:

• id (Auto) - Auto-generated ID
• content (Text) - Rich text content
• sentiment (Text) - Positive, Negative, or Neutral
• date (Date)
• job (Relation) - Link to Job_Info collection (optional)

3. Configure PocketBase URL

Update the PocketBase URL in js/pocketbase.js if your instance is running on a different address:

const POCKETBASE_URL = 'http://127.0.0.1:8090';

4. Set Up Authentication

1. In PocketBase Admin UI, go to Settings > Users
2. Create user accounts for your team members
3. Users can log in using their email and password

5. Set Collection Permissions

For both Job_Info and notes collections:

1. Go to the collection settings
2. Set List/Search rule: @request.auth.id != "" (authenticated users only)
3. Set View rule: @request.auth.id != "" (authenticated users only)
4. Set Create rule: @request.auth.id != "" (authenticated users only)
5. Set Update rule: @request.auth.id != "" (authenticated users only)
6. Set Delete rule: @request.auth.id != "" (authenticated users only)

6. Run the Application

1. Install dependencies (if using Bun):

bun install

2. Start the development server:

bun run dev

The server will start on http://localhost:3075

3. Open http://localhost:3075 in your browser
4. Log in with your PocketBase user credentials

Alternative: If you prefer a different server:

# Using Python 3
python3 -m http.server 8000

# Using Node.js (http-server)
npx http-server -p 8000

# Using PHP
php -S localhost:8000

File Structure

Job-Pages/
├── index.html          # Login page
├── dashboard.html      # Dashboard with stats
├── jobs.html          # Jobs list and management
├── notes.html         # Notes/reports page
├── js/
│   ├── pocketbase.js  # PocketBase client
│   ├── auth.js        # Authentication
│   ├── jobs.js        # Job CRUD operations
│   └── notes.js       # Notes operations
├── css/
│   └── custom.css     # Custom styles
└── README.md          # This file

Usage

Adding a Job

1. Click "Add Job" on the jobs page
2. Fill in the job information across the 8 tabs:
   • Basic Info: Job number, name, address, type, status, division
   • Team: Estimator, Office Rep, Project Manager
   • Client: Company, contact person, phone, email
   • Dates: Start date, due date, submission date, scheduling info
   • Links: QB link, Voxer link, folder link, job codes
   • Flags: Checkboxes for various status flags
   • Notes: Add notes to the job (for existing jobs)
   • Attachments: View attachments (for existing jobs)
3. Click "Save Job"

Adding Notes

1. Open a job for editing
2. Go to the "Notes" tab
3. Click "+ Add Note"
4. Enter note content using the rich text editor
5. Select sentiment (Positive, Negative, Neutral)
6. Click "Save Note"

Searching and Filtering

• Use the search bar to search by job number, name, or client
• Use filter buttons to show All, Active, or Inactive jobs

Troubleshooting

CORS Errors

Make sure you're serving the files through a web server, not opening them directly as files.

Authentication Issues

• Verify PocketBase is running
• Check the PocketBase URL in js/pocketbase.js
• Ensure user accounts exist in PocketBase
• Check collection permissions

Data Not Loading

• Check browser console for errors
• Verify PocketBase collections are created correctly
• Ensure field names match exactly (case-sensitive)

License

See LICENSE file for details.