235 lines
6.4 KiB
Markdown
235 lines
6.4 KiB
Markdown
# 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.
|