# 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/](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)

### 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 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):

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

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