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
• Employee Management:
  • Create, read, update, and delete employee records
  • Track employee information (Name, Email, Phone, Voxer ID, Status)
  • Employee reports system for tracking employee-related notes
  • Table and card view options
  • Search functionality
• User Preferences:
  • Dark mode toggle
  • Default view preferences (Table/Card)
  • User-specific settings stored in PocketBase
• Search & Filter: Search jobs by number, name, or client; filter by status
• Dashboard: View job statistics and quick actions with navigation to all modules
• 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
• Development Server: Bun (or any static file server)
• 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)

Employee_Records Collection

Create a collection named Employee_Records with the following fields:

• id (Auto) - Auto-generated ID
• First_Name (Text)
• Last_Name (Text)
• Email_Address (Text)
• Phone_Number (Text)
• Voxer_ID (Text)
• Status (Text)
• Additional fields can be added dynamically as needed

Employee_Reports Collection

Create a collection named Employee_Reports with the following fields:

• id (Auto) - Auto-generated ID
• row (Text)
• entered_by (Text)
• entered_date (Date)
• id_number (Text)
• report (Text)
• employee (Relation) - Link to Employee_Records collection

User Preferences

User preferences are stored in the users collection. Add a field named PRISM (Text) to the users collection. This field stores JSON data containing:

• dark_mode (Boolean)
• default_view (Text) - "table" or "card"

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 all collections (Job_Info, notes, Employee_Records, Employee_Reports):

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)

Note: For the users collection, ensure users can update their own records to save preferences:

• Update rule: @request.auth.id = id (users can only update their own record)

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

Prism/
├── index.html              # Login page
├── dashboard.html          # Dashboard with stats and navigation
├── jobs.html              # Jobs list and management
├── notes.html             # Notes/reports page
├── employees.html          # Employee management page
├── preferences.html       # User preferences page
├── js/
│   ├── pocketbase.js      # PocketBase client configuration
│   ├── config.js          # Application configuration
│   ├── auth.js            # Authentication functions
│   ├── jobs.js            # Job CRUD operations
│   ├── notes.js           # Notes operations
│   ├── employees.js       # Employee CRUD operations
│   ├── employee-reports.js # Employee reports management
│   ├── preferences.js    # User preferences management
│   └── custom-dropdown.js # Custom dropdown component
├── css/
│   └── custom.css         # Custom styles
├── config.json            # Application configuration (collections, pagination, etc.)
├── server.js              # Bun development server
├── package.json           # Project dependencies and scripts
└── 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"

Managing Employees

1. Navigate to the Employees page from the dashboard
2. Click "+ Add Employee" to create a new employee
3. Fill in employee information (First Name, Last Name, Email, Phone, Voxer ID, Status)
4. For existing employees, you can:
   • Edit employee information
   • Add employee reports
   • View employee reports
5. Use the search bar to search by name, email, phone, or department
6. Toggle between Table and Card views

User Preferences

1. Click on your user avatar in the top right corner
2. Select "Preferences"
3. Toggle dark mode on/off
4. Set your default view preference (Table or Card)
5. Click "Save Preferences"

Searching and Filtering

• Jobs: Use the search bar to search by job number, name, or client
• Jobs: Use filter buttons to show All, Active, or Inactive jobs
• Employees: Use the search bar to search by name, email, phone, or department

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.