104 lines
4.7 KiB
Markdown
104 lines
4.7 KiB
Markdown
# Requirements
|
|
|
|
### Overview & Goals
|
|
Build an offline-first PWA for construction workers to track time quickly and easily on-site.
|
|
|
|
### User Stories
|
|
- As a worker, I want to quickly log my time (start/end, task, client) so that I don't lose time during my workday.
|
|
- As a worker, I want the app to suggest previous clients/tasks so I don't have to re-type everything.
|
|
- As a worker, I want to copy my previous day's report so I can quickly start a new day.
|
|
- As a worker, I want to use the app without an internet connection so that I can work in remote areas.
|
|
- As a worker, I want the app to be readable and usable in all lighting conditions and with messy hands/gloves.
|
|
- As a worker, I want the summary of my previous day to be read-only so I don't accidentally modify it.
|
|
- As a worker, I want to configure how long historical reports are kept, while ensuring the last day's report is always available.
|
|
|
|
### Functional Requirements
|
|
- Log time entry (Start time, End time, Task name, Client name).
|
|
- Suggest frequent/recent values for Task and Client.
|
|
- View previous day's report and copy it to current day.
|
|
- Offline-first storage (IndexedDB).
|
|
- PWA installable on mobile devices.
|
|
- High-contrast, easy-to-use mobile UI (large hit targets).
|
|
- Previous day report is read-only.
|
|
- Configurable retention time for historical reports in Settings.
|
|
- Retention policy ensures the most recent report is never deleted.
|
|
|
|
# Technical Design
|
|
|
|
### Technical Stack
|
|
- **Framework**: Svelte
|
|
- **Build Tool**: Vite
|
|
- **Database**: IndexedDB (via `Dexie.js`)
|
|
- **PWA**: `vite-plugin-pwa` (Service Worker)
|
|
|
|
### Key Decisions
|
|
- **Offline-first**: All data stored locally using `Dexie.js`/IndexedDB. No backend required.
|
|
- **UI Design**: Minimalist design with large touch targets for easy use with gloves.
|
|
- **Svelte Stores**: For local state management within the app.
|
|
- **Data Retention**: Periodic cleanup of logs based on user-defined retention policy, excluding the latest day.
|
|
- **Read-Only UI**: Dedicated components or read-only mode for historical reports.
|
|
|
|
### File Structure
|
|
- `src/lib/db.js` — Database setup, Dexie instance, and retention cleanup logic.
|
|
- `src/lib/stores/` — Svelte stores for app state.
|
|
- `src/components/` — Reusable UI components.
|
|
- `src/routes/` — Application pages (Input, Summary, Settings).
|
|
|
|
### Architecture Diagram
|
|
```mermaid
|
|
graph LR
|
|
UI[Svelte UI] -->|Read/Write| State[Svelte Stores]
|
|
State -->|Persist| DB[(IndexedDB)]
|
|
SW[Service Worker] -->|Cache| UI
|
|
DB -->|Read| UI
|
|
```
|
|
|
|
# Testing
|
|
|
|
### Validation Approach
|
|
- Verify PWA manifest installation.
|
|
- Test offline functionality (turn off network, reload).
|
|
- Test CRUD operations on time logs in offline mode.
|
|
- Verify UI responsiveness and touch-target size on simulated mobile view.
|
|
|
|
### Key Scenarios
|
|
- Adding a time log entry while offline.
|
|
- Suggesting a previously added client.
|
|
- Copying yesterday's entries to today.
|
|
- Verifying data persists after browser refresh.
|
|
|
|
# Delivery Steps
|
|
|
|
### ✓ Step 1: Setup Project and PWA Infrastructure
|
|
Initialize the project and configure PWA capabilities.
|
|
- Set up a Svelte project with Vite.
|
|
- Configure `vite-plugin-pwa` for offline support (manifest, service worker).
|
|
- Setup essential project structure (directories for components, stores, services, models).
|
|
|
|
### ✓ Step 2: Implement Local Database and Data Models
|
|
Implement the local database layer and data models.
|
|
- Set up `Dexie.js` for IndexedDB management.
|
|
- Define data models for reports, clients, tasks, and historical data.
|
|
- Create service methods to handle CRUD operations on the local database and retention policy settings.
|
|
|
|
### ✓ Step 3: Develop Core UI and Input Features
|
|
Develop core UI components and input forms.
|
|
- Build the main input screen for adding time logs (designed for large touch targets).
|
|
- Create a list view to display the current day's entries.
|
|
- Implement the 'Copy from Yesterday' functionality.
|
|
- Ensure the UI is responsive, high-contrast, and optimized for mobile usage.
|
|
|
|
### * Step 4: Implement Features and Data Logic
|
|
Implement automatic suggestions, retention logic, and read-only views.
|
|
- Integrate logic to suggest recent/frequent clients and tasks based on previous entries.
|
|
- Implement sorting and filtering for the \"summary\" view of the previous day.
|
|
- Add read-only enforcement for historical reports.
|
|
- Implement data cleanup job based on user-defined retention policy.
|
|
- Add basic data validation and formatting to ensure error-free entry.
|
|
|
|
### Step 5: Final Polish and UX Optimization
|
|
Perform UI polish and accessibility testing.
|
|
- Optimize the interface for usability with gloves/messy hands (e.g., larger tap areas).
|
|
- Add high-contrast mode or ensure default theme is clear.
|
|
- Perform final testing of offline behavior and PWA installation.
|