# 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/](https://pocketbase.io/docs/) and start it:

```bash
./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:

```javascript
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):

```bash
bun install
```

2. Start the development server:

```bash
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:

```bash
# 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.