feat: add payroll, time clocks, and leave request modules
- Implemented PayrollPage for managing payroll runs with CRUD operations. - Created TimeClocksPage for tracking employee clock-ins and clock-outs. - Developed TimeSheetsPage for displaying employee timesheets. - Added EmployeeCertificationForm and EmployeeDocumentForm for managing employee certifications and documents. - Introduced LeaveRequestForm for submitting and managing leave requests. - Added usePermissions hook for UI-side permission checks. - Created LeaveRequestsClient and PayrollClient for API interactions.
This commit is contained in:
parent
0d591b9807
commit
3c55be5052
1
.gitignore
vendored
1
.gitignore
vendored
@ -11,6 +11,7 @@ node_modules
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.prod
|
||||
|
||||
# Testing
|
||||
coverage
|
||||
|
||||
486
FEATURE_GAP_PLAN.md
Normal file
486
FEATURE_GAP_PLAN.md
Normal file
@ -0,0 +1,486 @@
|
||||
# Garage ERP — Feature Gap Plan vs. Industry Leaders
|
||||
|
||||
> Comparison of the current Reparee Garage ERP against established automotive
|
||||
> workshop management platforms (GarageBox, Tekmetric, Shopmonkey, AutoLeap,
|
||||
> Garage Hive, Mitchell 1 Manager SE, MaxxTraxx, Workshop Software).
|
||||
>
|
||||
> Goal: list what does **not** yet exist in this codebase, group it by impact,
|
||||
> and give each gap an implementation hint so it can be picked up later.
|
||||
|
||||
---
|
||||
|
||||
## 1. What Reparee already has (baseline)
|
||||
|
||||
Captured from the current backend (`reparee_backend/`) controllers/models and
|
||||
dashboard navigation (`apps/dashboard/config/navGroups.tsx`):
|
||||
|
||||
**Sales & service workflow**
|
||||
- Customers (with notes, types, referral sources, import/export)
|
||||
- Vehicles (owners, makes/models, body types, fuel, transmission, colors,
|
||||
documents, mileage history, import/export)
|
||||
- Inspections + Inspection Templates (categories, checkpoints, labels)
|
||||
- Public share link for inspections (token-based, rate-limited)
|
||||
- Estimates → Job Cards → Invoices (services, parts, expense items, internal
|
||||
notes, labels, document attachments)
|
||||
- Credit Notes
|
||||
- Payments Received
|
||||
- Appointments (calendar)
|
||||
|
||||
**Purchases**
|
||||
- Vendors (addresses, status, credits)
|
||||
- Expenses & Expense Items
|
||||
- Purchase Orders (with internal notes, labels)
|
||||
- Bills
|
||||
- Payments Made
|
||||
- Vendor Credits
|
||||
|
||||
**Items / inventory**
|
||||
- Services and Service Groups (with includes/pricing/parts)
|
||||
- Parts (with categories, unit types)
|
||||
- Inventory Adjustments
|
||||
- Labor Rates, Taxes
|
||||
|
||||
**HR / productivity**
|
||||
- Employees (with documents, certifications, avatar, performance, permissions)
|
||||
- Departments, Roles (with `permission.check` middleware on every route)
|
||||
- Leave Requests + Leave Balance
|
||||
- Payroll Runs + Entries + Slips
|
||||
- Tasks, Task Sections, Task Types, TimeSheet
|
||||
- Shop Calendar, Shop Timing, Holidays
|
||||
|
||||
**Platform**
|
||||
- PDF generation via `DocumentPrintController` + Blade templates
|
||||
- Document share tokens
|
||||
- Settings (company, including logo + Terms & Conditions in `privacy_policy`)
|
||||
- i18n EN/AR with RTL
|
||||
- OpenAPI client (`packages/api/`) regenerated from backend spec
|
||||
|
||||
**Sidebar shows planned-but-disabled groups** (commented out in
|
||||
`navGroups.tsx`): CRM (leads/calls/tasks), Marketing (service reminders,
|
||||
ratings/reviews, Google reviews), Accountants (manual journals, chart of
|
||||
accounts), Reports, Payroll, Integrations, Templates.
|
||||
|
||||
---
|
||||
|
||||
## 2. Priority matrix
|
||||
|
||||
| Tier | Meaning |
|
||||
|------|---------|
|
||||
| **P0** | Table-stakes for a modern garage SaaS — competitors all ship it, customers ask first |
|
||||
| **P1** | Significant value-add, expected by mid-market shops |
|
||||
| **P2** | Differentiators / nice-to-haves |
|
||||
| **P3** | Long-tail integrations and advanced workflows |
|
||||
|
||||
---
|
||||
|
||||
## 3. P0 — Table-stakes gaps
|
||||
|
||||
### 3.1 Reporting & Analytics dashboard
|
||||
**Status:** No `/reports` route exists; sidebar entry is commented out. A
|
||||
`/` dashboard page exists but is not analytics-rich.
|
||||
|
||||
**What competitors ship:**
|
||||
- Revenue by day/week/month, by service category, by technician
|
||||
- Open jobs / WIP value, ARO (Average Repair Order), gross profit %
|
||||
- Aging receivables (already implicit in invoices, no view)
|
||||
- Parts margin, labor margin
|
||||
- Technician productivity (billed hours vs. clocked hours)
|
||||
- Inventory turnover, stock-outs
|
||||
- Customer retention / first-visit vs. repeat
|
||||
|
||||
**Plan:**
|
||||
- New backend controllers: `ReportController` exposing aggregations
|
||||
(revenue, AR aging, technician utilization, inventory turnover).
|
||||
- New dashboard area: `apps/dashboard/app/(authenticated)/reports/`
|
||||
with sub-routes per report.
|
||||
- Re-use TanStack Query + a chart lib already approved (or ask before adding
|
||||
recharts / visx). KPIs on home page should pull from the same endpoints.
|
||||
|
||||
### 3.2 Service Reminders (mileage- and time-based)
|
||||
**Status:** `Vehicle` has mileage logs (`VehicleMileAndKm`) and documents
|
||||
have expiry dates, but no reminder engine. Sidebar Marketing group is
|
||||
commented out.
|
||||
|
||||
**What competitors ship:**
|
||||
- "Next service in 5,000 km" rules per vehicle/service
|
||||
- Insurance / registration / inspection expiry reminders
|
||||
- Auto-send via email/SMS X days before due
|
||||
- Customer can click to book
|
||||
|
||||
**Plan:**
|
||||
- New model: `ServiceReminderRule` (per vehicle or template per make/model:
|
||||
due_at_date, due_at_mileage, service_group_id, channel).
|
||||
- Scheduled job (Laravel scheduler) that scans daily and queues notifications.
|
||||
- Channel adapters wired to the notification stack from §3.3.
|
||||
- UI under `productivity` or new `marketing/` area.
|
||||
|
||||
### 3.3 Customer notifications (Email / SMS / WhatsApp)
|
||||
**Status:** No notification channels found beyond document share links. No
|
||||
`Notification` or messaging tables in models.
|
||||
|
||||
**What competitors ship:**
|
||||
- Twilio/Vonage SMS, WhatsApp Business API
|
||||
- Two-way SMS thread per customer/job (Tekmetric, Shopmonkey)
|
||||
- Templated estimate-ready / job-ready / pickup-ready messages
|
||||
- Inbox view of all customer conversations
|
||||
|
||||
**Plan:**
|
||||
- Add `notification_channels` config + adapter interface
|
||||
(`App\Services\Notifications\Channel`).
|
||||
- Provider drivers behind feature flags (SMS via Twilio/MessageBird, email
|
||||
via existing Laravel mail, WhatsApp via Meta Cloud API).
|
||||
- Tables: `customer_messages` (inbound + outbound), `notification_templates`
|
||||
(subject/body, locale, type).
|
||||
- Dashboard inbox under `/sales/customers/[id]/messages` + global `/inbox`.
|
||||
|
||||
### 3.4 Customer-facing portal (estimate approval, history)
|
||||
**Status:** Only `PublicInspectionController` exists for public viewing.
|
||||
Estimates and invoices have no customer-side approval flow.
|
||||
|
||||
**What competitors ship:**
|
||||
- Customer logs in (or magic-link) and sees: vehicles, history, estimates,
|
||||
invoices, upcoming appointments.
|
||||
- One-click approve / decline / partial-approve on estimate line items
|
||||
(digital authorization with audit trail).
|
||||
- Pay invoice via portal.
|
||||
|
||||
**Plan:**
|
||||
- Reuse `DocumentShare` token pattern, broaden into a `customer_portal_token`.
|
||||
- New `PublicEstimateController` mirroring `PublicInspectionController`,
|
||||
with POST endpoints for approve/decline per line item.
|
||||
- Persist signature/IP/timestamp on `EstimateAuthorisationHistory` (model
|
||||
already exists — confirm fields cover approvals from portal).
|
||||
- Frontend: new public route group `app/portal/` (no auth, token-scoped).
|
||||
|
||||
### 3.5 Online payments
|
||||
**Status:** `PaymentMode` table exists, payments are recorded manually. No
|
||||
gateway integration.
|
||||
|
||||
**What competitors ship:**
|
||||
- Stripe / Square / regional gateway integration
|
||||
- "Pay invoice" link inside email/SMS
|
||||
- Saved cards, partial payments, tips
|
||||
- Reconciliation back to `PaymentRecieved`
|
||||
|
||||
**Plan:**
|
||||
- Pluggable gateway driver under `App\Services\Payments\`.
|
||||
- New endpoint `POST /api/invoices/{id}/payment-link` returns hosted URL.
|
||||
- Webhook handler that creates `PaymentRecieved` rows on capture.
|
||||
- Frontend `pay/[token]` page bundled with the portal in §3.4.
|
||||
|
||||
### 3.6 Audit log
|
||||
**Status:** No audit/activity table found.
|
||||
|
||||
**What competitors ship:** Who changed what, when, on every business
|
||||
record. Required for shops with multiple staff.
|
||||
|
||||
**Plan:**
|
||||
- Adopt `spatie/laravel-activitylog` (request before adding the dep) or
|
||||
hand-roll a polymorphic `activity_log` table.
|
||||
- Log on estimate/job-card/invoice state transitions, permission changes,
|
||||
payment events.
|
||||
- Read-only view at `/settings/activity-log`.
|
||||
|
||||
### 3.7 Workflow / Kanban board for Job Cards
|
||||
**Status:** Job Cards live in a list view. No status pipeline UI.
|
||||
|
||||
**What competitors ship:** Drag-and-drop columns ("Checked-in", "Awaiting
|
||||
Parts", "In Progress", "QC", "Ready for Pickup"). Drives the shop's day.
|
||||
|
||||
**Plan:**
|
||||
- Add `job_card_status` (enum or FK to `job_card_statuses` table editable
|
||||
in settings).
|
||||
- Backend: status transition endpoint with allowed-transition guard.
|
||||
- Frontend: new `/sales/job-cards/board` route using dnd-kit (already in
|
||||
the React ecosystem; confirm dep). Cards link to existing detail page.
|
||||
|
||||
### 3.8 Vehicle service history (per VIN, cross-customer)
|
||||
**Status:** History is currently scoped via the vehicle's job cards, but
|
||||
there is no consolidated "vehicle history" tab summarizing services,
|
||||
inspections, mileage, and recommendations together.
|
||||
|
||||
**Plan:**
|
||||
- New endpoint `GET /api/vehicles/{id}/timeline` merging job cards,
|
||||
inspections, recommendations, document expiries, mileage events into a
|
||||
single chronological feed.
|
||||
- Tab on the vehicle detail page rendering the timeline.
|
||||
|
||||
### 3.9 Recommended / deferred work tracking
|
||||
**Status:** `FastShopRecommendation` and `ShopRecommendation` models exist
|
||||
but there is no "deferred services" view that follows the vehicle across
|
||||
visits.
|
||||
|
||||
**Plan:**
|
||||
- Extend recommendations with `status` (open/accepted/declined/expired) and
|
||||
`next_followup_at`.
|
||||
- Surface on vehicle detail, estimate creation ("pull deferred items"), and
|
||||
in service-reminder logic (§3.2).
|
||||
|
||||
---
|
||||
|
||||
## 4. P1 — Significant value-add
|
||||
|
||||
### 4.1 Technician time tracking on job cards (clock in/out per labor line)
|
||||
**Status:** Generic `TimeSheet` exists but is not bound to job-card lines.
|
||||
The sidebar already shows "Time Clocks" — confirm whether implemented or
|
||||
stubbed.
|
||||
|
||||
**Plan:**
|
||||
- New table `job_card_labor_time` (job_card_service_id, employee_id,
|
||||
started_at, stopped_at).
|
||||
- Mobile-friendly start/stop UI on the job-card page (tap-and-go).
|
||||
- Feed billed-vs-clocked into the productivity report (§3.1).
|
||||
|
||||
### 4.2 Estimate templates / service packages with menus
|
||||
**Status:** Service Groups exist (`ServiceGroup`, `ServiceGroupService`,
|
||||
`ServiceGroupPart`, `ServiceGroupPricing`). Gap: no canned "menus" UI
|
||||
(e.g., "30k-mile service" preset that drops services + parts + labor onto
|
||||
an estimate in one click).
|
||||
|
||||
**Plan:**
|
||||
- Repurpose Service Groups as menus; add a "Add menu" picker on the
|
||||
estimate editor that expands the group into individual lines (so they
|
||||
can still be edited).
|
||||
|
||||
### 4.3 Customer digital signature on documents
|
||||
**Status:** Documents print to PDF; no signature capture.
|
||||
|
||||
**Plan:**
|
||||
- Add a signature pad component (svg path → PNG) on the customer portal
|
||||
approval screen (§3.4) and in-shop tablet flow.
|
||||
- Persist as a `document_signatures` row (signer name, type, timestamp,
|
||||
IP/UA, image blob in storage).
|
||||
- Embed signature in printed PDF.
|
||||
|
||||
### 4.4 Parts barcode / QR scanning
|
||||
**Status:** Parts have SKUs but no barcode field or scan UI.
|
||||
|
||||
**Plan:**
|
||||
- Add `barcode` column to `parts`.
|
||||
- Use the device camera (BarcodeDetector API) on the inventory adjustment
|
||||
and job-card "Add part" dialogs.
|
||||
|
||||
### 4.5 Tablet / shop-floor UI
|
||||
**Status:** UI is desktop-first.
|
||||
|
||||
**Plan:**
|
||||
- Audit job-card detail, inspection editor, and time-clock screens for
|
||||
touch targets and one-hand portrait use.
|
||||
- Optional dedicated route `/floor/[job-card]` with a stripped-down layout.
|
||||
|
||||
### 4.6 Photos & videos on inspections (with public share)
|
||||
**Status:** `InspectionCheckPointAttachment` and `InspectionAttachment`
|
||||
models exist — confirm whether the share link renders attachments.
|
||||
|
||||
**Plan:**
|
||||
- Verify the public inspection view (`PublicInspectionController@show`)
|
||||
exposes media URLs with signed access.
|
||||
- Add front-camera capture in the inspection editor for fast photo-taking.
|
||||
|
||||
### 4.7 Multi-location / branch support
|
||||
**Status:** `Settings` is single-tenant; no `branch_id` scoping on
|
||||
business records.
|
||||
|
||||
**Plan:** This is a bigger lift. Phased:
|
||||
1. Add `branches` table and `branch_id` FK on the major aggregates
|
||||
(job_cards, invoices, vehicles, parts, employees).
|
||||
2. Default to a single seeded branch for existing deployments.
|
||||
3. Add branch selector in header and scope queries via global scope.
|
||||
|
||||
### 4.8 Custom fields
|
||||
**Status:** No custom-field infrastructure.
|
||||
|
||||
**Plan:**
|
||||
- New `custom_field_definitions` (entity_type, key, label, type, options)
|
||||
and `custom_field_values` (polymorphic).
|
||||
- Render dynamically on customer/vehicle/job-card forms.
|
||||
|
||||
### 4.9 Marketing campaigns
|
||||
**Status:** Sidebar has the group commented out.
|
||||
|
||||
**Plan:**
|
||||
- Reuse §3.3 channels.
|
||||
- New `marketing_campaigns` (name, audience filter, template_id, schedule)
|
||||
and `marketing_sends` (per-recipient log).
|
||||
- Audience builder uses the customer/vehicle filters already in the table
|
||||
views.
|
||||
|
||||
### 4.10 Ratings & reviews capture
|
||||
**Plan:**
|
||||
- Post-pickup auto-message asking for a rating (1–5) and free text.
|
||||
- If 4–5, deep-link to Google review URL (configurable in settings).
|
||||
- Internal review wall + ability to publish to a public testimonials
|
||||
endpoint.
|
||||
|
||||
### 4.11 Accounting export (QuickBooks / Xero / Zoho)
|
||||
**Status:** No GL / chart of accounts (sidebar group is disabled).
|
||||
|
||||
**Plan (lightweight first):**
|
||||
- CSV export of invoices, payments, bills, payments-made tagged with
|
||||
configurable account codes.
|
||||
- Later: OAuth integration with QuickBooks Online / Xero APIs.
|
||||
|
||||
### 4.12 Tire & wheel module (heavy in GarageBox, Tekmetric)
|
||||
**Plan:** Tire size lookup, DOT tracking, storage racks (off-season tire
|
||||
storage is a common revenue line in cold-climate markets). Skip unless
|
||||
target market needs it.
|
||||
|
||||
### 4.13 Warranty tracking on parts and services
|
||||
**Plan:**
|
||||
- Add `warranty_months` / `warranty_km` on parts and services.
|
||||
- Show "under warranty" badge when re-invoicing the same VIN within the
|
||||
window. Block billing or flag for review.
|
||||
|
||||
### 4.14 Fleet customer accounts
|
||||
**Plan:**
|
||||
- Allow a customer to own many vehicles already supported, but add a
|
||||
"fleet" customer type with: bulk PO upload, monthly statement instead of
|
||||
per-invoice billing, optional driver/vehicle list.
|
||||
|
||||
### 4.15 Online appointment booking widget
|
||||
**Plan:**
|
||||
- Public route `/book` that surfaces shop services + free calendar slots
|
||||
(derived from `ShopTiming` and existing appointments).
|
||||
- Creates a draft `Appointment` + customer/vehicle if new.
|
||||
- Embed snippet for the shop's marketing site.
|
||||
|
||||
---
|
||||
|
||||
## 5. P2 — Differentiators
|
||||
|
||||
### 5.1 VIN decoder integration (NHTSA free API + paid Carfax)
|
||||
- NHTSA `vpic.nhtsa.dot.gov/api/` is free, no auth — wire it into the
|
||||
vehicle create form to auto-fill make/model/year/engine from VIN.
|
||||
- Carfax/AutoCheck for paid history reports (US/CA).
|
||||
|
||||
### 5.2 OEM repair info integration (Mitchell 1, AllData, Identifix, Haynes)
|
||||
- Big lift, paid feeds. Out of scope for v1; design the parts/services
|
||||
data model so labor times can be imported.
|
||||
|
||||
### 5.3 Parts catalog integrations (WorldPac, NAPA PROLink, PartsTech)
|
||||
- Real-time pricing + availability + ordering from inside a job card.
|
||||
- Phase 1: PartsTech (aggregator) since it covers the most vendors.
|
||||
|
||||
### 5.4 Two-way calendar sync (Google / Microsoft)
|
||||
- iCal feed for read-only first.
|
||||
- Full two-way sync via Google Calendar API later.
|
||||
|
||||
### 5.5 AI-assisted estimate writer
|
||||
- "Customer says: knocking noise on left front when braking" → suggested
|
||||
service lines + parts list from history of similar jobs. Useful and
|
||||
novel; defer until enough invoice data exists.
|
||||
|
||||
### 5.6 Mobile apps (technician + customer)
|
||||
- React Native (or PWA first) sharing `@garage/api`.
|
||||
- Technician: today's jobs, start/stop labor, take photos, mark complete.
|
||||
- Customer: portal features (§3.4) packaged as an app.
|
||||
|
||||
### 5.7 OBD-II / telematics integration
|
||||
- Long tail. Plan only the data model now (`vehicle_telemetry_events`).
|
||||
|
||||
### 5.8 Loyalty / gift cards / membership plans
|
||||
- "Service plan: 2 oil changes/year + 10% off for $X/mo".
|
||||
- Recurring billing on top of §3.5.
|
||||
|
||||
### 5.9 Discounts and promo codes at line-item or document level
|
||||
- Currently no promo entity. Add `discounts` (code, type, %/amount, scope,
|
||||
expiry, usage cap) with hook in estimate/invoice totals.
|
||||
|
||||
### 5.10 Multi-currency
|
||||
- `Settings` is implicitly single-currency. Add currency on documents and a
|
||||
daily rates table if shops need cross-border invoicing.
|
||||
|
||||
---
|
||||
|
||||
## 6. P3 — Long-tail / future
|
||||
|
||||
- Insurance claim workflow (estimator → adjuster handoff, photos packet,
|
||||
EMS export).
|
||||
- Inventory replenishment automation (min/max → auto PO draft).
|
||||
- Bay / lift management (assign job card to a bay; show bay utilization).
|
||||
- AI photo damage assessment for inspections.
|
||||
- Recall lookup (NHTSA recall API by VIN).
|
||||
- TPMS / tire pressure history per vehicle.
|
||||
- Public price-list / "instant quote" widget.
|
||||
- Webhook system for third-party integrators.
|
||||
- Bring-your-own-domain customer portal branding.
|
||||
- Backup export of entire tenant data (GDPR-friendly).
|
||||
|
||||
---
|
||||
|
||||
## 7. Cross-cutting platform work
|
||||
|
||||
These aren't a single feature, but unlock many of the above:
|
||||
|
||||
1. **Background job runner** — Laravel Horizon + Redis if not already set
|
||||
up; required for §3.2, §3.3, §4.9.
|
||||
2. **Storage policy** — confirm S3-compatible storage so signatures,
|
||||
media, and PDFs scale.
|
||||
3. **Feature flag system** — many of the above are tenant-gated; even a
|
||||
simple `tenant_features` table beats hard-coded toggles.
|
||||
4. **OpenAPI coverage** — every new backend endpoint must add an
|
||||
annotation so `packages/api` stays in sync (already a project
|
||||
convention).
|
||||
5. **Permission seeds** — every new route requires a matching permission
|
||||
(project rule: routes are gated by `permission.check`).
|
||||
6. **Lang pairs** — every `lang/en/*.php` key must have a matching
|
||||
`lang/ar/*.php` key (project rule).
|
||||
7. **PDF template** — every new printable type needs an entry in
|
||||
`DocumentPrintController::TYPES` plus a Blade template under
|
||||
`resources/views/pdf/`.
|
||||
|
||||
---
|
||||
|
||||
## 8. Suggested phased roadmap
|
||||
|
||||
A pragmatic build order that maximizes early customer value and reuses
|
||||
infrastructure:
|
||||
|
||||
**Phase 1 — "Looks competitive"** (P0 core)
|
||||
- Reporting dashboard (§3.1)
|
||||
- Workflow board for job cards (§3.7)
|
||||
- Audit log (§3.6)
|
||||
- Vehicle timeline (§3.8)
|
||||
- Recommended / deferred work tracking (§3.9)
|
||||
|
||||
**Phase 2 — "Talks to the customer"**
|
||||
- Notifications channel (§3.3) — SMS + email first
|
||||
- Customer portal w/ estimate approval (§3.4)
|
||||
- Online payments (§3.5)
|
||||
- Service reminders (§3.2)
|
||||
- Ratings & reviews capture (§4.10)
|
||||
|
||||
**Phase 3 — "Runs the shop floor"**
|
||||
- Technician time tracking on labor (§4.1)
|
||||
- Estimate menus / service packages UI (§4.2)
|
||||
- Photos on inspections, end-to-end (§4.6)
|
||||
- Customer digital signature (§4.3)
|
||||
- Tablet / shop-floor UI polish (§4.5)
|
||||
|
||||
**Phase 4 — "Scales the business"**
|
||||
- Multi-location (§4.7)
|
||||
- Custom fields (§4.8)
|
||||
- Marketing campaigns (§4.9)
|
||||
- Online booking widget (§4.15)
|
||||
- Accounting exports (§4.11)
|
||||
|
||||
**Phase 5 — "Differentiators"**
|
||||
- VIN decoder (§5.1)
|
||||
- Parts catalog integrations (§5.3)
|
||||
- Calendar sync (§5.4)
|
||||
- Loyalty / memberships (§5.8)
|
||||
- Mobile apps (§5.6)
|
||||
|
||||
---
|
||||
|
||||
## 9. Open questions to confirm before starting
|
||||
|
||||
1. Target market geography — drives gateway choice (Stripe vs. local), SMS
|
||||
provider, accounting integration (QuickBooks vs. Zoho vs. Tally), and
|
||||
whether tire/snow modules matter.
|
||||
2. Is multi-tenancy single-DB (current) or DB-per-tenant?
|
||||
3. Are Horizon + Redis available in production today?
|
||||
4. Is there an approved chart library, or does adding one need a green
|
||||
light? (CLAUDE.md says no new deps without approval.)
|
||||
5. Should the customer portal share auth with the dashboard (Sanctum) or
|
||||
use a token-only public route like inspections do today?
|
||||
551
Reparee Full Version .md
Normal file
551
Reparee Full Version .md
Normal file
@ -0,0 +1,551 @@
|
||||
# Reparee → Garage Box Feature Parity — Implementation Roadmap
|
||||
|
||||
> **Purpose of this doc.** Single source of truth for closing the gap between Reparee's current dashboard and Garage Box. Captures the gap analysis, the canonical Reparee patterns to mimic, and a per-phase implementation spec detailed enough for a fresh agent to pick up any phase and ship it without re-discovering conventions.
|
||||
|
||||
> **Status (2026-05-21).** Phase 1 (Integrations placeholder) is the only phase ready to execute. Phases 2–8 are spec'd here but not started. Pick one, re-open it in a focused planning session, and implement.
|
||||
|
||||
---
|
||||
|
||||
## 0. Reading order
|
||||
|
||||
1. **Part A — Gap analysis** (what's missing and why).
|
||||
2. **Part B — Project conventions cheatsheet** (the patterns every phase MUST follow).
|
||||
3. **Part C — Phase index** (the at-a-glance table).
|
||||
4. **Part D — Per-phase implementation specs** (Phases 1–8, in recommended build order).
|
||||
|
||||
---
|
||||
|
||||
## Part A — Gap analysis (Garage Box vs Reparee)
|
||||
|
||||
Legend: ✅ exists ⚠️ partial / different location ❌ missing
|
||||
|
||||
### Already covered
|
||||
- **Sales** (Customers, Vehicles, Inspections, Estimates, Job Cards, Invoices, Payments Received, Credit Notes) — ✅
|
||||
- **Purchases** (Vendors, Expenses, POs, Bills, Payments Made, Vendor Credits) — ✅
|
||||
- **Employees / Productivity** (Employees, Time Clocks, Time Sheets, Payroll, Shop Calendars, Shop Timing, Holidays, Tasks, Leave Requests) — ✅ (Reparee adds Leave Requests beyond Garage Box)
|
||||
- **Items** (Services, Parts, Expense Item, Service Group, Inventory Adjustments) — ✅
|
||||
- **Settings** Company / Shop Types / Tax & Rates / Configurations — ✅
|
||||
|
||||
### Gaps
|
||||
| Garage Box | Status in Reparee | Phase |
|
||||
|---|---|---|
|
||||
| Settings → Integrations | ❌ → placeholder | **Phase 1** |
|
||||
| Settings → Master (hub for body types + make & model + other lookups) | ❌ as a hub (data scattered) | **Phase 2** |
|
||||
| Settings → Templates (notification template library, ~35 templates × 4 channels) | ⚠️ only inspection templates | **Phase 3** |
|
||||
| Reports (top-level module) | ❌ | **Phase 4** |
|
||||
| CRM (Leads pipeline, Calls log + calendar, Tasks pipeline) | ❌ (Reparee has only productivity tasks, not CRM tasks) | **Phase 5** |
|
||||
| Marketing (Service Reminders, Rating & Reviews, Google Business Reviews) | ❌ | **Phase 6** |
|
||||
| Settings → Integrations (real connectors: Google, Microsoft, Zoho, Interakt, Respond, Vonage, Geidea, MSG91, Wati, Xero, WhatsApp) | ❌ | **Phase 7** |
|
||||
| Accountants (Chart of Accounts + Manual Journals + default account wiring) | ❌ | **Phase 8** |
|
||||
|
||||
### Cross-cutting Garage Box conventions to mimic
|
||||
- **Pipelines** (Leads, Tasks) have user-editable column **sections** (add / rename / reorder). Default sections seeded on first run.
|
||||
- **`+ Label`** chip on every record (taxonomy / colored tags).
|
||||
- **Configurable doc-number sequences** with a gear icon next to the `#` field (`LD-000001`, `CL-000001`, `TK-000001`, `JN-000001`, etc.).
|
||||
- **Notification templates** are channel-aware (SMS / WhatsApp / Email / Push) with per-channel toggles.
|
||||
- **Per-row Department filter** is universal — every list view has a Department dropdown in the toolbar.
|
||||
|
||||
---
|
||||
|
||||
## Part B — Project conventions cheatsheet (MUST follow in every phase)
|
||||
|
||||
> Every phase below assumes these patterns. Don't re-invent.
|
||||
|
||||
### B1. Frontend module structure
|
||||
- **Modules live at** `garage-erp/apps/dashboard/modules/<area>/`.
|
||||
- Each resource gets: `<resource>-form.tsx`, `<resource>.schema.ts` (Zod), optional `<resource>-actions.tsx`, optional inline section components (e.g. `<resource>-services-section.tsx`).
|
||||
- **Reference**: `garage-erp/apps/dashboard/modules/estimates/` is the canonical example. Mirror its file layout for any new resource.
|
||||
|
||||
### B2. Routes (Next.js App Router)
|
||||
- List page: `app/(authenticated)/<area>/<resource>/page.tsx` (`"use client"` + `ResourcePage<Client>`).
|
||||
- Detail page: `app/(authenticated)/<area>/<resource>/[id]/page.tsx` (async server component, uses `getServerApi()` + `DashboardPage`).
|
||||
- Sub-tabs of a detail (e.g. notes, documents): `[id]/<subroute>/page.tsx`.
|
||||
- **Reference**: `app/(authenticated)/sales/estimates/page.tsx` (list) + `[id]/page.tsx` (detail).
|
||||
|
||||
### B3. Tables & row actions
|
||||
- Use TanStack Table via `ResourcePage` wrapper.
|
||||
- Row actions via `actionsColumn({ extraItems: (row) => [...] })`.
|
||||
- Print buttons via `useDocumentPrint(type, id)` from `apps/dashboard/shared/hooks/use-document-print.ts`.
|
||||
|
||||
### B4. Forms
|
||||
- React Hook Form 7 + Zod 4. Schema lives in `<resource>.schema.ts`.
|
||||
- Use `useResourceForm<FormValues, ApiPayload>({ schema, resourceId, initialize, mapToFormValues })` from `apps/dashboard/shared/hooks/`.
|
||||
- Mutations: `useFormMutation` for create/update; invalidate via `tableQuery.invalidateQuery()` or the resource's query key.
|
||||
|
||||
### B5. Sidebar navigation
|
||||
- Single source: `garage-erp/apps/dashboard/config/navGroups.tsx` — hard-coded, **no i18n layer**.
|
||||
- Add a new group entry or a sub-item; pick a `lucide-react` icon already imported (or add to the import block at top of file).
|
||||
|
||||
### B6. API client (`@garage/api`)
|
||||
- All clients extend `CrudClient<INDEX_ROUTE, BY_ID_ROUTE>` (path: `packages/api/src/clients/<name>.ts`).
|
||||
- After backend changes, **regenerate**: `pnpm --filter @garage/api generate` (runs `generate:openapi && generate:types`).
|
||||
- The generated files in `packages/api/` are NOT hand-edited; only the thin client wrappers are.
|
||||
|
||||
### B7. Backend routes
|
||||
- **Legacy string controller resolution** in `reparee_backend/routes/api.php`:
|
||||
```php
|
||||
Route::get('/leads', 'LeadController@index');
|
||||
Route::post('/leads', 'LeadController@store');
|
||||
// etc.
|
||||
```
|
||||
- **Every route is gated** by `permission.check` middleware (auto-applied group-wide).
|
||||
|
||||
### B8. Backend controllers
|
||||
- Standard CRUD shape: `index`, `show`, `store`, `update`, `destroy` returning `JsonResponse`.
|
||||
- Path: `reparee_backend/app/Http/Controllers/Api/<Name>Controller.php`.
|
||||
- Use `vyuldashev/laravel-openapi` annotations so OpenAPI spec stays in sync (mirror `EstimateController`).
|
||||
|
||||
### B9. Models & migrations
|
||||
- Models in `reparee_backend/app/Models/`. Use `$fillable`, `$casts`, relations.
|
||||
- Migrations: `php artisan make:migration create_<table>_table` → standard `Schema::create` with `$table->id()` + `timestamps()`.
|
||||
|
||||
### B10. Permissions
|
||||
- Permissions are **columns on the `roles` table**: `can_{view|create|update|delete}_{resource}`.
|
||||
- To add a new resource:
|
||||
1. Create a migration that adds the four boolean columns to `roles` (default `false`).
|
||||
2. Update `database/seeders/RoleSeeder.php` so Super Admin gets `true` for all new columns (it auto-discovers `can_*` columns — verify).
|
||||
3. The `permission.check` middleware reads the column name from the route name; ensure route is named `<resource>.<ability>` or matches its existing convention.
|
||||
- **Reference migration**: `2026_04_06_120000_create_roles_table_and_refactor_employee_permissions.php`.
|
||||
|
||||
### B11. i18n (backend)
|
||||
- Pairs required: every new key in `lang/en/<file>.php` MUST have the matching `lang/ar/<file>.php` key in the same change.
|
||||
- Use `__('api.<area>.<key>')` in controllers and responses.
|
||||
- Dashboard nav labels are NOT translated (hard-coded in `navGroups.tsx`).
|
||||
|
||||
### B12. Document-print (PDF)
|
||||
- Single entry: `POST /api/document-print` → `DocumentPrintController@handle`.
|
||||
- To add a printable type:
|
||||
1. Add string to `DocumentPrintController::TYPES`.
|
||||
2. Add `payload<Type>()` method on the controller.
|
||||
3. Add `resources/views/pdf/document-print-<type>.blade.php`.
|
||||
4. Add the type to the `DocumentPrintType` union in `packages/api/src/clients/document-print.ts`.
|
||||
|
||||
### B13. Pipeline-with-sections precedent
|
||||
- `TaskSection` model + `task-section-form.tsx` already exist. Fields: `title`, `arrangement` (sort order), `is_default`.
|
||||
- Reuse this pattern for `LeadSection`, `CallSection` (if needed), `JournalSection`, etc.
|
||||
|
||||
### B14. House rules (from `CLAUDE.md`)
|
||||
- Never `git commit / push / tag / reset --hard / rebase` — stop at file edits.
|
||||
- Don't add new dependencies without explicit approval.
|
||||
- After edits, run `pnpm --filter dashboard typecheck`, `pnpm --filter dashboard lint`, and `php -l` on changed PHP files, then report results.
|
||||
- Match existing conventions before introducing new patterns.
|
||||
|
||||
---
|
||||
|
||||
## Part C — Phase index
|
||||
|
||||
| # | Phase | Effort | Backend changes | Frontend changes | Depends on |
|
||||
|---|---|---|---|---|---|
|
||||
| 1 | Integrations placeholder | XS (1 hr) | none | 2 files | — |
|
||||
| 2 | Settings → Master hub | S (1 day) | none (regroup) | 1 layout + tabs | — |
|
||||
| 3 | Notification Templates library | M (3 days) | new table + CRUD + permission | full module | — |
|
||||
| 4 | Reports (4 reports locked) | M (1 wk) | 4 aggregation endpoints | reports module + 4 reports w/ Recharts | reads existing data |
|
||||
| 5 | CRM (Leads, Calls, Tasks-CRM) | XL (2–3 wks) | 3 resources + sections + permissions + i18n | 3 modules + pipelines | reuses TaskSection pattern |
|
||||
| 6 | Marketing (Reminders email+SMS, Reviews) | L (1–2 wks) | reminder engine + Twilio integration + reviews | 3 sub-pages | needs Phase 3 (templates); Twilio composer dep |
|
||||
| 7 | ~~Integrations (real)~~ | DEFERRED | — | — | — |
|
||||
| 8A | Accountants — COA + Manual Journals | L (1.5 wks) | ledger UI only, no auto-post | 3 sub-pages | — |
|
||||
| 8B | Accountants — auto-posting | L (1–2 wks) | observers on Invoice/Bill/Payment/Expense + reversal | linkage panels on source docs | requires 8A stable |
|
||||
|
||||
---
|
||||
|
||||
## Part D — Per-phase implementation specs
|
||||
|
||||
# Phase 1 — Settings → Integrations (Coming Soon)
|
||||
|
||||
**Goal.** Add an Integrations entry under Settings that renders a "Coming soon" placeholder.
|
||||
|
||||
### Backend
|
||||
None.
|
||||
|
||||
### Frontend
|
||||
1. **Edit** `garage-erp/apps/dashboard/config/navGroups.tsx` (around line 183):
|
||||
- There is already a commented-out entry:
|
||||
```tsx
|
||||
// { title: "Integrations", href: "/settings/integrations/providers", icon: <PlugZapIcon /> }
|
||||
```
|
||||
- Uncomment it but change `href` to `/settings/integrations` (single page, no sub-tabs yet).
|
||||
- Insert between `Inspection Templates` and `Configurations`. Confirm `PlugZapIcon` is in the top-of-file imports; if not, add `PlugZapIcon` to the `lucide-react` import.
|
||||
|
||||
2. **Create** `garage-erp/apps/dashboard/app/(authenticated)/settings/integrations/page.tsx`:
|
||||
- Use `DashboardPage` with `headerProps={{ title: "Integrations" }}` (match `settings/insurance-types/page.tsx`).
|
||||
- Centered `Empty` block (from `@/shared/components/ui/empty`):
|
||||
- `EmptyMedia`: `<PlugZapIcon className="size-12 text-muted-foreground" />`
|
||||
- `EmptyTitle`: "Coming soon"
|
||||
- `EmptyDescription`: "Connect WhatsApp, payments, accounting and email providers. Available in an upcoming release."
|
||||
|
||||
### Verification
|
||||
1. `pnpm --filter dashboard dev`.
|
||||
2. Sidebar → Settings expands → new "Integrations" entry visible between Inspection Templates and Configurations.
|
||||
3. Click → page renders with the Empty state.
|
||||
4. `pnpm --filter dashboard typecheck && pnpm --filter dashboard lint`.
|
||||
|
||||
### Out of scope
|
||||
Sub-tabs (Providers / Integrations), any provider logic, backend.
|
||||
|
||||
---
|
||||
|
||||
# Phase 2 — Settings → Master hub
|
||||
|
||||
**Goal.** Group existing lookup data screens under one "Master" sidebar entry with tabs, matching Garage Box's UX.
|
||||
|
||||
### Tabs (in order)
|
||||
1. Body Types (existing `/settings/...`)
|
||||
2. Make & Model (existing `/settings/make-and-models`)
|
||||
3. Insurance Types (existing `/settings/insurance-types`)
|
||||
4. Departments (existing `/settings/departments`)
|
||||
5. Shop Types (move from top-level OR alias)
|
||||
6. Vehicle Transmissions, Fuel Types, Colors, Unit Types, Payment Terms, Payment Modes, Labor Rates, Reasons, Referral Sources, Document Types, Labels — surface those that currently lack a dedicated screen.
|
||||
|
||||
### Backend
|
||||
None new. Verify every tab's data source has a controller in `app/Http/Controllers/Api/` (most already do: `MakeAndModelController`, `InsuranceTypeController`, `DepartmentController`, `VehicleBodyTypeController`, `VehicleTransmissionController`, `VehicleFuelTypeController`, `VehicleColorController`, `UnitTypeController`, `PaymentTermController`, `PaymentModeController`, `LaborRateController`, `ReasonController`, `ReferralSourceController`, `DocumentTypeController`, `LabelController`).
|
||||
|
||||
### Frontend
|
||||
1. **Create** `app/(authenticated)/settings/master/layout.tsx` with a `Tabs` header (use existing `Tabs` from `packages/ui`) and the 11+ tab labels above.
|
||||
2. **Create** `app/(authenticated)/settings/master/page.tsx` that redirects to `./body-types`.
|
||||
3. **Create** `app/(authenticated)/settings/master/<each-tab>/page.tsx`. Each is a thin wrapper that imports and renders the existing module list component from `modules/settings/<existing-folder>/`.
|
||||
4. **Edit** `config/navGroups.tsx`: add `{ title: "Master", href: "/settings/master", icon: <DatabaseIcon /> }` after Integrations. **Keep** the existing top-level entries (Insurance Types, Departments, Make & Models) in the Settings list — they coexist as aliases for backwards-compat (per Part F decision).
|
||||
|
||||
### Verification
|
||||
1. Sidebar → Settings → Master → tabs render and each tab CRUDs correctly.
|
||||
2. Direct URL `/settings/master/insurance-types` works.
|
||||
3. Removed/aliased entries still resolve to the same screen.
|
||||
|
||||
---
|
||||
|
||||
# Phase 3 — Notification Templates library
|
||||
|
||||
**Goal.** Manage ~35 notification templates (per Garage Box screenshot 16) with per-channel toggles and bodies. Required for Phase 6 (Marketing) and any reminder/automation.
|
||||
|
||||
### Data model
|
||||
| Table | Columns |
|
||||
|---|---|
|
||||
| `notification_templates` | `id`, `key` (unique e.g. `appointment_created`), `title`, `description` (nullable), `created_at`, `updated_at` |
|
||||
| `notification_template_channels` | `id`, `notification_template_id` (FK), `channel` enum(`sms`,`whatsapp`,`email`,`push`), `enabled` bool, `subject` (nullable, for email), `body` text, `created_at`, `updated_at` |
|
||||
|
||||
Seed all template `key`s from this list (extracted from Garage Box image 16):
|
||||
- `appointment_assigned`, `appointment_cancelled`, `appointment_confirmed`, `appointment_create`, `appointment_no_shows`, `appointment_reminder`, `appointment_requested`, `appointment_reschedule`, `appointment_unconfirmed`
|
||||
- `attendance_details`, `attendance_reminder`
|
||||
- `call_assigned`, `call_cancelled`, `call_completed`, `call_rescheduled`, `call_scheduled`
|
||||
- `estimate_approved_by_admin`, `estimate_approved_by_customer`, `estimate_send`
|
||||
- `job_card_customer`, `job_card_technician`
|
||||
- `login_otp`
|
||||
- `new_lead_notification`
|
||||
- `part_requisition_create`
|
||||
- `purchase_order_create`
|
||||
- `ratings_reviews_link`
|
||||
- `salary_change_notification`
|
||||
- `send_customer_statement`, `send_inspection`, `send_invoice`, `send_vendor_statement`
|
||||
- `service_reminder_cancelled`, `service_reminder_reschedule`, `service_reminder_scheduled`, `service_reminder_send`
|
||||
- `work_request_form_send`, `workorder_create`
|
||||
|
||||
### Backend
|
||||
- `NotificationTemplateController` (`index`, `show`, `update` only — templates are seeded, not user-created).
|
||||
- Routes (string-resolution style):
|
||||
```php
|
||||
Route::get('/notification-templates', 'NotificationTemplateController@index');
|
||||
Route::get('/notification-templates/{key}', 'NotificationTemplateController@show');
|
||||
Route::put('/notification-templates/{key}', 'NotificationTemplateController@update');
|
||||
```
|
||||
- Permissions: `can_view_notification_templates`, `can_update_notification_templates` (skip create/delete — seed-managed).
|
||||
- Lang keys in `lang/en/api.php` + `lang/ar/api.php` under `notification_templates`.
|
||||
|
||||
### Frontend
|
||||
1. **Module** `apps/dashboard/modules/notification-templates/` with `notification-template-row.tsx`, `notification-template-edit-dialog.tsx`, `notification-template.schema.ts`.
|
||||
2. **Route** `app/(authenticated)/settings/templates/notifications/page.tsx` — TanStack Table with columns: Title, SMS (✓/—), WhatsApp, Email, Push, Actions.
|
||||
3. **Sidebar entry**: `config/navGroups.tsx` add `{ title: "Templates", href: "/settings/templates/notifications", icon: <FileTextIcon /> }` between Inspection Templates and Integrations. (Or restructure existing `/settings/templates` if free.)
|
||||
4. **Edit dialog**: tabs per channel, body editor with **variable picker** (e.g. `{{customer.name}}`, `{{vehicle.plate}}`, `{{appointment.date}}`). Variables list lives in a `notification-template-variables.ts` constants file co-located with the module.
|
||||
5. **API client**: `packages/api/src/clients/notification-templates.ts` extends `CrudClient`.
|
||||
|
||||
### Verification
|
||||
1. Seeded list shows all 35+ rows.
|
||||
2. Toggle a channel → persists.
|
||||
3. Edit body → re-render shows updated body.
|
||||
4. Backend `__('api.notification_templates.updated')` returns Arabic when locale is `ar`.
|
||||
|
||||
---
|
||||
|
||||
# Phase 4 — Reports
|
||||
|
||||
**Goal.** Top-level Reports module with categorized reports across Sales, Purchases, Inventory, Employees, Accountants.
|
||||
|
||||
### Reports to ship (v1 — locked per Part F)
|
||||
1. **Sales by Customer** — revenue grouped by customer with date range + department filter.
|
||||
2. **Invoices Aging** — outstanding invoices bucketed 0–30 / 31–60 / 61–90 / 90+ days.
|
||||
3. **Technician Productivity** — hours logged vs billable per technician, derived from `TimeSheet` + job-card service rows.
|
||||
4. **Inventory Valuation + Low-Stock** — current stock value by part + list of parts under reorder threshold.
|
||||
|
||||
All other reports candidates (Sales by Service/Vehicle, Payments Summary, Estimates Conversion, Purchases by Vendor, Bills Aging, Stock Movement, Attendance, Payroll, Job Card Turnaround/Status) are deferred to a follow-up phase. Architect the reports module so adding the 5th report is trivial.
|
||||
|
||||
### Charting
|
||||
Use **Recharts** via the already-installed wrapper `garage-erp/apps/dashboard/shared/components/ui/chart.tsx`. No new dependency. Wrapper exports `ChartContainer`, `ChartTooltip`, `ChartTooltipContent`, etc. — mimic shadcn's chart usage docs.
|
||||
|
||||
### Backend
|
||||
- `app/Http/Controllers/Api/Reports/` directory — one controller per report category (`SalesReportController`, `PurchasesReportController`, etc.).
|
||||
- Each report = single GET endpoint accepting `from`, `to`, optional `department_id`, `customer_id`, etc. Returns aggregated rows.
|
||||
- Use Eloquent + `selectRaw` aggregations. Index any frequently-grouped columns via migration.
|
||||
- Routes grouped under `/api/reports/...`. New permission per category: `can_view_reports_sales`, `can_view_reports_purchases`, ...
|
||||
- **No new models or tables** — pure read aggregation over existing data.
|
||||
- Lang keys for report titles in `lang/en/reports.php` + `lang/ar/reports.php`.
|
||||
|
||||
### Frontend
|
||||
1. **Module** `apps/dashboard/modules/reports/` with:
|
||||
- `report-card.tsx` (preview tile in the index).
|
||||
- `report-filters.tsx` (date range, department, customer/vendor).
|
||||
- One subdirectory per category: `sales/`, `purchases/`, `inventory/`, `employees/`, `job-cards/`. Each contains a `<report-name>-report.tsx` data view.
|
||||
2. **Routes**:
|
||||
- `app/(authenticated)/reports/page.tsx` — index grid of report cards grouped by category.
|
||||
- `app/(authenticated)/reports/<category>/<slug>/page.tsx` — individual report view with filters + table + export buttons.
|
||||
3. **Sidebar**: add a new top-level group `{ title: "Reports", href: "/reports", icon: <BarChart3Icon /> }` after Items/Employees in `navGroups.tsx`.
|
||||
4. **Export**: reuse `useDocumentPrint` pattern for PDF; for Excel use existing `maatwebsite/excel` backend integration (add new export classes in `app/Exports/Reports/`).
|
||||
5. **Charts**: prefer `recharts` if already in `packages/ui` dependencies; otherwise propose to user before adding.
|
||||
|
||||
### Verification
|
||||
1. Each report renders with sample data filtered by date range.
|
||||
2. PDF export uses the same layout shell as other prints (`resources/views/pdf/layouts/document.blade.php`).
|
||||
3. Excel export downloads a valid `.xlsx`.
|
||||
4. Permissions block access when role lacks `can_view_reports_<category>`.
|
||||
|
||||
---
|
||||
|
||||
# Phase 5 — CRM (Leads, Calls, Tasks-CRM)
|
||||
|
||||
**Goal.** Add the missing CRM module with three pipelines: Leads, Calls, Tasks (distinct from existing productivity tasks). Mirrors Garage Box screenshots 1–8.
|
||||
|
||||
### Sub-phase 5a — Leads
|
||||
|
||||
#### Data model
|
||||
| Table | Key columns |
|
||||
|---|---|
|
||||
| `lead_sections` | `id`, `title`, `arrangement`, `is_default`, `kind` enum(`open`,`won`,`lost`) (kind drives default behavior). Reuse `TaskSection` pattern. |
|
||||
| `leads` | `id`, `number` (unique, e.g. `LD-000001`), `title`, `date`, `lead_owner_id` (FK users), `referral_source_id` (FK), `lead_status_id` (FK), `department_id`, `description`, `lead_section_id` (FK), `customer_id` (nullable), `vehicle_id` (nullable), salutation, first/last/company name, phone, email, address fields, vehicle fields (make, model, plate, body_type_id). |
|
||||
| `lead_services` | pivot to services |
|
||||
| `lead_parts` | pivot to parts |
|
||||
| `lead_labels` | pivot to `labels` table |
|
||||
|
||||
#### Backend
|
||||
- `LeadController`, `LeadSectionController`, `LeadServiceController`, `LeadPartController` (mirror Estimate's split).
|
||||
- Permissions: `can_view_leads`, `can_create_leads`, `can_update_leads`, `can_delete_leads`, plus `can_manage_lead_sections`.
|
||||
- Number sequence: reuse `InvoiceSequenceController` pattern (add `LeadSequenceController`).
|
||||
- Lang keys under `lang/en/api.php` `leads` section + `lang/ar/api.php`.
|
||||
- OpenAPI annotations on each method.
|
||||
|
||||
#### Frontend
|
||||
- **Module** `apps/dashboard/modules/leads/` with `lead-form.tsx`, `lead.schema.ts`, `lead-pipeline.tsx` (Kanban view), `lead-actions.tsx`, inline sections for services/parts.
|
||||
- **Routes** `app/(authenticated)/crm/leads/page.tsx` (Kanban + table toggle), `[id]/page.tsx` (detail).
|
||||
- **Sidebar** new group `{ title: "CRM", icon: <UsersIcon />, items: [Leads, Calls, Tasks] }` after Purchases in `navGroups.tsx`.
|
||||
- **Pipeline UI**: Kanban with `@dnd-kit` (check if already in deps before adding). Each column = a `LeadSection`. "+ Section" button opens a section dialog (reuse `task-section-form.tsx` pattern).
|
||||
- **API client** `packages/api/src/clients/leads.ts`.
|
||||
|
||||
### Sub-phase 5b — Calls
|
||||
|
||||
#### Data model
|
||||
| Table | Key columns |
|
||||
|---|---|
|
||||
| `calls` | `id`, `number` (`CL-000001`), `call_for` (polymorphic morphs to Customer/Lead), `vehicle_id`, `status` enum(`requested`,`scheduled`,`completed`,`cancelled`), `type` enum(`inbound`,`outbound`), `subject`, `call_owner_id`, `call_date`, `from_time`, `to_time`, `department_id`, `purpose_id` (FK to lookup), `agenda` text, `outcome_id` (nullable FK), `description`, `duration_minutes`, `duration_seconds`, `voice_recording_path`, `send_notification` bool. |
|
||||
| `call_reminders` | `id`, `call_id`, `unit` int, `unit_type` enum(`minute`,`hour`,`day`), `event` enum(`before`,`after`), `channel` enum(`sms`,`email`,`whatsapp`). |
|
||||
| `call_purposes`, `call_outcomes` | lookups |
|
||||
|
||||
#### Backend
|
||||
- `CallController` (CRUD + special endpoints: `complete`, `cancel`, `reschedule`).
|
||||
- `CallReminderController` (nested).
|
||||
- Reminder dispatcher: a Laravel scheduled job in `app/Console/Commands/SendDueCallReminders.php` runs every minute, sends pending reminders via the relevant notification template (Phase 3) through the provider configured in Phase 7. If Phase 7 not yet shipped, log-only.
|
||||
- Permissions: standard four + `can_log_calls`, `can_complete_calls`.
|
||||
|
||||
#### Frontend
|
||||
- **Module** `apps/dashboard/modules/calls/` with `call-form.tsx` (schedule), `call-log-form.tsx` (log), `call.schema.ts`, `call-calendar.tsx`.
|
||||
- **Routes** `app/(authenticated)/crm/calls/page.tsx` (table + tabs Requested/Scheduled/Completed/Cancelled), `crm/calls/calendar/page.tsx` (month view), `[id]/page.tsx`.
|
||||
|
||||
### Sub-phase 5c — Tasks (CRM)
|
||||
|
||||
**Approach locked per Part F: Option A — extend existing `tasks` table.**
|
||||
|
||||
#### Migration
|
||||
Add to the existing `tasks` table:
|
||||
- `context` enum (`productivity`, `crm`), default `productivity`, NOT NULL.
|
||||
- `customer_id` nullable FK to `customers`.
|
||||
- `vehicle_id` nullable FK to `vehicles`.
|
||||
- Index on `(context, status)` for the pipeline filter.
|
||||
|
||||
#### Backend
|
||||
- Backfill existing rows to `context = 'productivity'`.
|
||||
- All existing `TaskController` queries get a `->where('context', 'productivity')` filter so `/productivity/tasks` keeps showing only what it shows today.
|
||||
- Add `CrmTaskController` (thin) that scopes to `context = 'crm'` and exposes the same CRUD + section endpoints. Reuse the `TaskSection` table for sections (add a `context` column there too, same enum).
|
||||
- Permissions: introduce `can_view_crm_tasks`, `can_create_crm_tasks`, `can_update_crm_tasks`, `can_delete_crm_tasks` separate from the existing productivity-task permissions.
|
||||
|
||||
#### Frontend
|
||||
- New module `apps/dashboard/modules/crm-tasks/` mirroring Leads pipeline pattern (Kanban with sections).
|
||||
- Route `app/(authenticated)/crm/tasks/page.tsx` (Kanban + table toggle).
|
||||
- Re-use schema fragments from `modules/tasks/` where possible — extract shared bits to a `modules/tasks/shared/` if duplication grows.
|
||||
|
||||
### Verification (Phase 5 overall)
|
||||
1. Pipeline drag-and-drop persists section + arrangement.
|
||||
2. New lead with vehicle info creates a corresponding draft Customer + Vehicle (or links existing) — confirm desired behavior.
|
||||
3. Call scheduled with a 10-min reminder → cron job fires at expected time.
|
||||
4. Number sequences advance correctly when a record is created.
|
||||
|
||||
---
|
||||
|
||||
# Phase 6 — Marketing (Service Reminders + Reviews)
|
||||
|
||||
**Goal.** Automate service reminders based on mileage / time, plus collect and surface customer reviews.
|
||||
|
||||
### Service Reminders
|
||||
- New table `service_reminders`: `id`, `customer_id`, `vehicle_id`, `reminder_type` (`mileage` / `time`), `interval_value`, `interval_unit`, `last_triggered_at`, `next_due_at`, `status` enum(`scheduled`,`sent`,`cancelled`), `channels` JSON (subset of `['email','sms']`).
|
||||
- Scheduled command `app/Console/Commands/SendDueServiceReminders.php` runs daily; sends via Phase 3 templates (`service_reminder_send`).
|
||||
- **Channels (per Part F)**: **Email** via Laravel `Mail::to(...)->send(...)` using the configured mail sender; **SMS** via Twilio.
|
||||
- Install `twilio/sdk` (Composer) — flag this dependency add for user approval per CLAUDE.md house rules.
|
||||
- Add a `NotificationDispatcher` service in `app/Services/Notifications/` with `sendEmail()` and `sendSms()` methods. Reads Twilio credentials from `config/services.php` (`twilio.sid`, `twilio.token`, `twilio.from`) which read from `.env` (`TWILIO_SID`, `TWILIO_TOKEN`, `TWILIO_FROM`).
|
||||
- WhatsApp/Push channel toggles render but are disabled with a "Requires integration" tooltip — wiring up to providers happens in deferred Phase 7.
|
||||
- Frontend: `app/(authenticated)/marketing/service-reminders/page.tsx` — list with status tabs, "Create reminder" form with Email + SMS channel checkboxes.
|
||||
|
||||
### Rating & Reviews
|
||||
- New table `customer_reviews`: `id`, `customer_id`, `job_card_id`, `rating` 1–5, `comment`, `submitted_at`, `source` enum(`internal`,`google`).
|
||||
- Public-facing review form already partially served by `PublicInspectionController` pattern — extend with `PublicReviewController`.
|
||||
- After job-card completion, fire `ratings_reviews_link` template (Phase 3).
|
||||
- Frontend list at `app/(authenticated)/marketing/reviews/page.tsx`.
|
||||
|
||||
### Google Business Reviews
|
||||
- Read-only sync via Google Business Profile API (requires Phase 7 Google integration).
|
||||
- Background job polls every 6 h.
|
||||
- Render in same Reviews list with `source = google` badge.
|
||||
|
||||
### Sidebar
|
||||
- Add CRM-style group `{ title: "Marketing", icon: <MegaphoneIcon />, items: [Service Reminders, Reviews, Google Reviews] }` after CRM.
|
||||
|
||||
### Verification
|
||||
1. Create a mileage-based reminder → next_due_at calculated.
|
||||
2. Cron tick at due time → template send is recorded (or logged if Phase 7 incomplete).
|
||||
3. Submit a public review → appears in admin list.
|
||||
|
||||
---
|
||||
|
||||
# Phase 7 — Integrations (real connectors) — DEFERRED
|
||||
|
||||
**Status (per Part F decision): NOT IN ROADMAP.** The Phase 1 "Coming soon" placeholder is the long-term state for now. Twilio (SMS) and Laravel mail (email) used by Phase 6 are configured via `.env` only — no user-facing integrations UI.
|
||||
|
||||
Keep this spec as reference for when integrations become a priority later.
|
||||
|
||||
**Goal (when revived).** Replace the Phase 1 placeholder with a real Providers/Integrations page connecting Google, Microsoft, Zoho, Interakt, Respond, Vonage, Geidea, MSG91, Wati, Xero, WhatsApp. Twilio also moves into the UI at that point.
|
||||
|
||||
### Data model
|
||||
| Table | Key columns |
|
||||
|---|---|
|
||||
| `integration_providers` | seeded list: `id`, `key` (slug), `name`, `purpose`, `icon_path`, `auth_type` (`oauth2`/`api_key`/`webhook`), `is_active`. |
|
||||
| `integration_connections` | per-tenant connection: `id`, `provider_id`, `credentials` (encrypted JSON), `status` (`connected`/`disconnected`/`error`), `last_synced_at`. |
|
||||
|
||||
### Backend
|
||||
- `IntegrationProviderController` (list), `IntegrationConnectionController` (CRUD + `connect`, `disconnect`, `test`).
|
||||
- One service class per provider in `app/Services/Integrations/<Provider>/`. Each implements a common contract `IntegrationDriver` with `connect()`, `disconnect()`, `sendMessage()`, `pullData()`.
|
||||
- OAuth callback routes: `/integrations/{provider}/callback`.
|
||||
- Permissions: `can_manage_integrations`.
|
||||
- Lang keys for connection status messages.
|
||||
|
||||
### Frontend
|
||||
- **Replace** the Phase 1 placeholder page with `app/(authenticated)/settings/integrations/page.tsx` showing a `Tabs` of "Providers" (catalog) + "Integrations" (connected list).
|
||||
- **Provider catalog tile** with "Connect" button → opens OAuth popup or credentials dialog.
|
||||
- Update `navGroups.tsx`: `href: "/settings/integrations/providers"` (the original commented-out path).
|
||||
|
||||
### Verification
|
||||
1. Connect Google → OAuth popup → callback persists tokens → "Connected" badge appears.
|
||||
2. Test SMS via Vonage → message delivered (in sandbox).
|
||||
3. Disconnect → credentials zeroed.
|
||||
|
||||
### Out of scope for first cut
|
||||
Real-time webhook handlers for each provider (do them incrementally, one provider per follow-up PR).
|
||||
|
||||
---
|
||||
|
||||
# Phase 8 — Accountants
|
||||
|
||||
**Goal.** Introduce a real general ledger. Split into two sub-phases per Part F: ship the ledger UI first (8A), wire auto-posting into existing modules afterward (8B).
|
||||
|
||||
## Phase 8A — Chart of Accounts + Manual Journals + Default Configuration
|
||||
|
||||
Ship the standalone ledger. No existing controllers are touched. Users can manually post journal entries; nothing auto-posts.
|
||||
|
||||
### Data model
|
||||
| Table | Key columns |
|
||||
|---|---|
|
||||
| `chart_of_accounts` | `id`, `name`, `code` (nullable), `account_type` enum(`asset`,`liability`,`equity`,`income`,`expense`,`cogs`), `parent_id` (nullable, for sub-accounts), `is_system` bool (lock icon in UI), `note`. |
|
||||
| `journals` | `id`, `number` (`JN-000001`), `date`, `reference`, `notes`, `total_amount` (must balance), `posted_by`, `posted_at`. |
|
||||
| `journal_lines` | `id`, `journal_id`, `account_id`, `debit`, `credit`, `description`. Constraint: sum(debit) == sum(credit) per journal. |
|
||||
| `default_account_settings` | single-row config table for: `sales_account_id`, `purchase_account_id`, `inventory_account_id`, `adjustment_account_id`, `customer_advance_account_id`, `deposit_to_account_id`, `vendor_advance_account_id`, `paid_through_account_id`, `purchase_discount_account_id`, `expense_account_id`. |
|
||||
|
||||
### Seed
|
||||
Seed ~80 standard accounts matching Garage Box screenshot 9 (Accounts Payable, Accounts Receivable, Advance Tax, … VAT Payable). Mark system accounts (`is_system = true`).
|
||||
|
||||
### Backend (8A only)
|
||||
- `ChartOfAccountController`, `JournalController`, `DefaultAccountSettingsController`.
|
||||
- Permissions: `can_view_accountants`, `can_manage_chart_of_accounts`, `can_post_journals`.
|
||||
- OpenAPI annotations.
|
||||
- **No changes to existing controllers** in this sub-phase — Invoices/Bills/Payments/Expenses are untouched.
|
||||
|
||||
### Frontend
|
||||
- **Sidebar group** `{ title: "Accountants", icon: <BookOpenIcon />, items: [Manual Journals, Chart Of Accounts] }` after Purchases.
|
||||
- **Module** `apps/dashboard/modules/accountants/` with `chart-of-account-list.tsx`, `chart-of-account-form.tsx`, `journal-form.tsx` (multi-line debit/credit with running balance check), `default-account-settings-form.tsx`.
|
||||
- **Routes**: `app/(authenticated)/accountants/chart-of-accounts/page.tsx`, `accountants/manual-journals/page.tsx`, `[id]/page.tsx`.
|
||||
|
||||
### Verification (8A)
|
||||
1. Seed list matches Garage Box exactly (account names + types).
|
||||
2. Create a manual journal with unbalanced lines → backend rejects.
|
||||
3. Default Configuration dialog persists.
|
||||
4. Invoices/Bills/Payments/Expenses still work unchanged (no regression).
|
||||
|
||||
## Phase 8B — Auto-posting + cross-doc linking
|
||||
|
||||
Wire the ledger into operational modules. **Only start after 8A is stable in production.**
|
||||
|
||||
### Backend
|
||||
- New service `app/Services/Accounting/JournalPoster.php` with methods like `postInvoice(Invoice $i)`, `postBill(Bill $b)`, `postPaymentReceived(...)`, `postPaymentMade(...)`, `postExpense(...)`.
|
||||
- Hook into existing controllers via Eloquent `created` / `updated` model observers (cleaner than editing every controller). Observers live in `app/Observers/`, registered in `EventServiceProvider`.
|
||||
- Each posted journal gets a `source_type` + `source_id` morphable pair so it links back to the originating document.
|
||||
- Reversal logic: when a source doc is deleted or voided, post the reverse journal (don't soft-delete the original).
|
||||
- New permission: `can_post_automatic_journals` (default true for finance roles).
|
||||
|
||||
### Frontend
|
||||
- On Invoice / Bill / Payment / Expense detail pages: add a "Journal Entry" panel showing the posted journal lines (read-only) with a deep link to `/accountants/manual-journals/<id>`.
|
||||
- On Journal detail: show "Source Document" link back to the originating doc.
|
||||
|
||||
### Verification (8B)
|
||||
1. Create an Invoice → Journal auto-posts (debit AR, credit Sales, credit Tax).
|
||||
2. Edit Invoice amount → existing journal reversed + new one posted.
|
||||
3. Delete Invoice → reversal posted; original journal preserved for audit.
|
||||
4. Default Configuration changes are respected on next post.
|
||||
5. Audit trail: every Journal has a non-null `source_type`/`source_id` when auto-posted.
|
||||
|
||||
---
|
||||
|
||||
## Part E — Cross-cutting follow-ups (every phase finishes with)
|
||||
|
||||
1. Run **`pnpm --filter dashboard typecheck && pnpm --filter dashboard lint`** — must pass.
|
||||
2. Run **`php -l`** on every changed PHP file.
|
||||
3. Regenerate API client if backend changed: **`pnpm --filter @garage/api generate`**.
|
||||
4. Update lang pairs (`lang/en/*.php` + `lang/ar/*.php`).
|
||||
5. Update permission migration + seeder for any new permission columns.
|
||||
6. Use the `code-review-graph` MCP `detect_changes_tool` + `get_review_context_tool` before opening the PR to self-review.
|
||||
7. Update `claude-timeline/YYYY-MM-DD.md` with a one-line note about the phase shipped (per global memory rule).
|
||||
8. **Do not commit** — leave the diff for the user to review.
|
||||
|
||||
---
|
||||
|
||||
## Part F — Resolved decisions (2026-05-21)
|
||||
|
||||
All open questions answered by the user. These are now binding for the phases referenced.
|
||||
|
||||
- **Phase 2 (Master)** → **Keep top-level entries as aliases.** Insurance Types, Departments, Make & Models remain in the Settings sidebar AND appear under Master tabs. Backwards-compat for bookmarks. No redirects, no removals.
|
||||
- **Phase 4 (Reports) — charts** → **Use Recharts (already installed)** via the existing wrapper at `garage-erp/apps/dashboard/shared/components/ui/chart.tsx`. No new dependency.
|
||||
- **Phase 4 (Reports) — v1 scope** → ship exactly these four reports:
|
||||
1. Sales by Customer
|
||||
2. Invoices Aging (0–30 / 31–60 / 61–90 / 90+ days)
|
||||
3. Technician Productivity (hours logged vs billable per technician)
|
||||
4. Inventory Valuation + Low-Stock
|
||||
All other reports listed in Phase 4 are deferred.
|
||||
- **Phase 5c (CRM Tasks)** → **Extend the existing `tasks` table** (Option A). Add `context` enum (`productivity` | `crm`), nullable `customer_id`, nullable `vehicle_id`. All existing task queries get a `context = 'productivity'` filter.
|
||||
- **Phase 6 (Marketing reminders) — channels** → **Email + SMS in v1; WhatsApp deferred.**
|
||||
- Email sends via Laravel's configured mail sender (`config/mail.php`) — works out of the box, no Integrations UI required.
|
||||
- SMS sends via **Twilio**. Configured server-side via `.env` (`TWILIO_SID`, `TWILIO_TOKEN`, `TWILIO_FROM`) — not surfaced in the Integrations page yet.
|
||||
- WhatsApp channel toggles are visible but disabled with a "Requires integration" tooltip.
|
||||
- **Phase 7 (Integrations real)** → **Stays "coming soon."** The Phase 1 placeholder is the long-term state for now. Twilio + Laravel mail are configured server-side only; no user-facing connector UI in this roadmap. Phase 7's detailed spec is preserved as a future reference but no work is planned.
|
||||
- **Phase 8 (Accountants)** → **Split into two sub-phases:**
|
||||
- **Phase 8A**: Chart of Accounts + Manual Journals + Default Configuration UI. No automatic posting from other modules.
|
||||
- **Phase 8B**: Auto-post journals on Invoice / Bill / Payment / Expense create + link from each source doc to its posted journal entry. Big blast radius — ship only after 8A is stable.
|
||||
@ -0,0 +1,179 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useParams } from "next/navigation"
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import { type ColumnDef } from "@tanstack/react-table"
|
||||
import { Plus, Trash2, ExternalLinkIcon, AwardIcon } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
|
||||
import { confirm } from "@/shared/components/confirm-dialog"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/components/ui/dialog"
|
||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
||||
import { EmployeeCertificationForm } from "@/modules/employees/employee-certification-form"
|
||||
|
||||
type CertRow = {
|
||||
id: number
|
||||
name: string
|
||||
issuer?: string | null
|
||||
certificate_number?: string | null
|
||||
issued_date?: string | null
|
||||
expiry_date?: string | null
|
||||
file_url?: string | null
|
||||
is_expired?: boolean
|
||||
notes?: string | null
|
||||
}
|
||||
|
||||
function formatDate(value: unknown) {
|
||||
if (!value || typeof value !== "string") return "—"
|
||||
const d = new Date(value)
|
||||
return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
|
||||
}
|
||||
|
||||
export default function EmployeeCertificationsPage() {
|
||||
const { id: employeeId } = useParams<{ id: string }>()
|
||||
const api = useAuthApi()
|
||||
const queryClient = useQueryClient()
|
||||
const [open, setOpen] = useState(false)
|
||||
const queryKey = ["employee-certifications", employeeId]
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey,
|
||||
queryFn: () => api.employees.listCertifications(employeeId) as Promise<{ data: CertRow[] | { data: CertRow[] } }>,
|
||||
})
|
||||
|
||||
const rows: CertRow[] = Array.isArray((data as any)?.data)
|
||||
? (data as any).data
|
||||
: ((data as any)?.data?.data ?? [])
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => api.employees.destroyCertification(employeeId, String(id)),
|
||||
onSuccess: () => {
|
||||
toast.success("Certification deleted")
|
||||
queryClient.invalidateQueries({ queryKey })
|
||||
},
|
||||
onError: () => toast.error("Failed to delete"),
|
||||
})
|
||||
|
||||
async function handleDelete(row: CertRow) {
|
||||
const ok = await confirm({
|
||||
title: "Delete certification?",
|
||||
description: `Permanently delete "${row.name}"?`,
|
||||
confirmLabel: "Delete",
|
||||
variant: "destructive",
|
||||
})
|
||||
if (ok) deleteMutation.mutate(row.id)
|
||||
}
|
||||
|
||||
const columns: ColumnDef<CertRow>[] = [
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<AwardIcon className="size-4 text-muted-foreground" />
|
||||
<span className="font-medium">{row.original.name}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "issuer",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Issuer" />,
|
||||
cell: ({ row }) => row.original.issuer ?? "—",
|
||||
},
|
||||
{
|
||||
accessorKey: "certificate_number",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Cert #" />,
|
||||
cell: ({ row }) => {
|
||||
const v = row.original.certificate_number
|
||||
return v ? <span className="font-mono text-xs">{v}</span> : "—"
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "issued_date",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Issued" />,
|
||||
cell: ({ row }) => formatDate(row.original.issued_date),
|
||||
},
|
||||
{
|
||||
accessorKey: "expiry_date",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Expiry" />,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{formatDate(row.original.expiry_date)}</span>
|
||||
{row.original.is_expired && <Badge variant="destructive">Expired</Badge>}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: () => <span className="sr-only">Actions</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex justify-end gap-1">
|
||||
{row.original.file_url && (
|
||||
<Button variant="ghost" size="icon" asChild>
|
||||
<a href={row.original.file_url} target="_blank" rel="noopener noreferrer">
|
||||
<ExternalLinkIcon className="size-4" />
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
disabled={deleteMutation.isPending}
|
||||
onClick={() => handleDelete(row.original)}
|
||||
>
|
||||
<Trash2 className="size-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<DashboardPage
|
||||
headerProps={{
|
||||
title: "Certifications",
|
||||
actions: (
|
||||
<Button size="sm" onClick={() => setOpen(true)}>
|
||||
<Plus className="size-4" />
|
||||
Add Certification
|
||||
</Button>
|
||||
),
|
||||
}}
|
||||
>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={rows}
|
||||
pagination={{ page: 1, pageSize: rows.length || 10, pageCount: 1, total: rows.length }}
|
||||
sorting={[]}
|
||||
onChange={() => {}}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Certification</DialogTitle>
|
||||
</DialogHeader>
|
||||
<EmployeeCertificationForm
|
||||
employeeId={employeeId}
|
||||
onSuccess={() => {
|
||||
setOpen(false)
|
||||
queryClient.invalidateQueries({ queryKey })
|
||||
}}
|
||||
onCancel={() => setOpen(false)}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</DashboardPage>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,182 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useParams } from "next/navigation"
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import { type ColumnDef } from "@tanstack/react-table"
|
||||
import { Plus, Trash2, ExternalLinkIcon, FileTextIcon } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
|
||||
import { confirm } from "@/shared/components/confirm-dialog"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/components/ui/dialog"
|
||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
||||
import { EmployeeDocumentForm } from "@/modules/employees/employee-document-form"
|
||||
import { formatEnum } from "@/shared/utils/formatters"
|
||||
|
||||
type DocRow = {
|
||||
id: number
|
||||
name: string
|
||||
type: string
|
||||
file_url?: string
|
||||
issued_date?: string | null
|
||||
expiry_date?: string | null
|
||||
notes?: string | null
|
||||
created_at?: string
|
||||
}
|
||||
|
||||
function formatDate(value: unknown) {
|
||||
if (!value || typeof value !== "string") return "—"
|
||||
const d = new Date(value)
|
||||
return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
|
||||
}
|
||||
|
||||
function isExpired(value: unknown) {
|
||||
if (!value || typeof value !== "string") return false
|
||||
const d = new Date(value)
|
||||
return !Number.isNaN(d.getTime()) && d.getTime() < Date.now()
|
||||
}
|
||||
|
||||
export default function EmployeeDocumentsPage() {
|
||||
const { id: employeeId } = useParams<{ id: string }>()
|
||||
const api = useAuthApi()
|
||||
const queryClient = useQueryClient()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const queryKey = ["employee-documents", employeeId]
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey,
|
||||
queryFn: () => api.employees.listDocuments(employeeId) as Promise<{ data: DocRow[] | { data: DocRow[] } }>,
|
||||
})
|
||||
|
||||
const rows: DocRow[] = Array.isArray((data as any)?.data)
|
||||
? (data as any).data
|
||||
: ((data as any)?.data?.data ?? [])
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (id: number) => api.employees.destroyDocument(employeeId, String(id)),
|
||||
onSuccess: () => {
|
||||
toast.success("Document deleted")
|
||||
queryClient.invalidateQueries({ queryKey })
|
||||
},
|
||||
onError: () => toast.error("Failed to delete document"),
|
||||
})
|
||||
|
||||
async function handleDelete(row: DocRow) {
|
||||
const ok = await confirm({
|
||||
title: "Delete document?",
|
||||
description: `Permanently delete "${row.name}"?`,
|
||||
confirmLabel: "Delete",
|
||||
variant: "destructive",
|
||||
})
|
||||
if (ok) deleteMutation.mutate(row.id)
|
||||
}
|
||||
|
||||
const columns: ColumnDef<DocRow>[] = [
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<FileTextIcon className="size-4 text-muted-foreground" />
|
||||
<span className="font-medium">{row.original.name}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "type",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Type" />,
|
||||
cell: ({ row }) => <Badge variant="outline">{formatEnum(row.original.type)}</Badge>,
|
||||
},
|
||||
{
|
||||
accessorKey: "issued_date",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Issued" />,
|
||||
cell: ({ row }) => formatDate(row.original.issued_date),
|
||||
},
|
||||
{
|
||||
accessorKey: "expiry_date",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Expiry" />,
|
||||
cell: ({ row }) => {
|
||||
const v = row.original.expiry_date
|
||||
if (!v) return "—"
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{formatDate(v)}</span>
|
||||
{isExpired(v) && <Badge variant="destructive">Expired</Badge>}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: () => <span className="sr-only">Actions</span>,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex justify-end gap-1">
|
||||
{row.original.file_url && (
|
||||
<Button variant="ghost" size="icon" asChild>
|
||||
<a href={row.original.file_url} target="_blank" rel="noopener noreferrer">
|
||||
<ExternalLinkIcon className="size-4" />
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
disabled={deleteMutation.isPending}
|
||||
onClick={() => handleDelete(row.original)}
|
||||
>
|
||||
<Trash2 className="size-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<DashboardPage
|
||||
headerProps={{
|
||||
title: "Documents",
|
||||
actions: (
|
||||
<Button size="sm" onClick={() => setOpen(true)}>
|
||||
<Plus className="size-4" />
|
||||
Upload Document
|
||||
</Button>
|
||||
),
|
||||
}}
|
||||
>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={rows}
|
||||
pagination={{ page: 1, pageSize: rows.length || 10, pageCount: 1, total: rows.length }}
|
||||
sorting={[]}
|
||||
onChange={() => {}}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Upload Document</DialogTitle>
|
||||
</DialogHeader>
|
||||
<EmployeeDocumentForm
|
||||
employeeId={employeeId}
|
||||
onSuccess={() => {
|
||||
setOpen(false)
|
||||
queryClient.invalidateQueries({ queryKey })
|
||||
}}
|
||||
onCancel={() => setOpen(false)}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</DashboardPage>
|
||||
)
|
||||
}
|
||||
@ -30,6 +30,11 @@ export default async function layout(props: {
|
||||
{ href: `/productivity/employees/${id}`, label: 'Details' },
|
||||
{ href: `/productivity/employees/${id}/attendance`, label: 'Attendance' },
|
||||
{ href: `/productivity/employees/${id}/work-history`, label: 'Work History' },
|
||||
{ href: `/productivity/employees/${id}/documents`, label: 'Documents' },
|
||||
{ href: `/productivity/employees/${id}/certifications`, label: 'Certifications' },
|
||||
{ href: `/productivity/employees/${id}/leave`, label: 'Leave' },
|
||||
{ href: `/productivity/employees/${id}/payroll`, label: 'Payroll' },
|
||||
{ href: `/productivity/employees/${id}/performance`, label: 'Performance' },
|
||||
{ href: `/productivity/employees/${id}/permissions`, label: 'Permissions' },
|
||||
]}
|
||||
>
|
||||
|
||||
@ -0,0 +1,164 @@
|
||||
"use client"
|
||||
|
||||
import { use, useState } from "react"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||
import FormDialog from "@/shared/components/form-dialog"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { useEmployee } from "@/modules/employees/employee-context"
|
||||
import { LeaveRequestForm } from "@/modules/leave-requests/leave-request-form"
|
||||
import { LEAVE_REQUEST_ROUTES } from "@garage/api"
|
||||
import type { LeaveRequestsClient } from "@garage/api"
|
||||
import { CalendarIcon, PlaneIcon, ActivityIcon } from "lucide-react"
|
||||
import { formatEnum } from "@/shared/utils/formatters"
|
||||
|
||||
type Balance = {
|
||||
annual_total: number
|
||||
annual_used: number
|
||||
annual_remaining: number
|
||||
sick_total: number
|
||||
sick_used: number
|
||||
sick_remaining: number
|
||||
}
|
||||
|
||||
function formatDate(value: unknown) {
|
||||
if (!value || typeof value !== "string") return "—"
|
||||
const d = new Date(value)
|
||||
return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
|
||||
}
|
||||
|
||||
function statusVariant(status: string): "default" | "secondary" | "outline" | "destructive" {
|
||||
if (status === "approved") return "default"
|
||||
if (status === "rejected") return "destructive"
|
||||
if (status === "cancelled") return "outline"
|
||||
return "secondary"
|
||||
}
|
||||
|
||||
function BalanceCard({ icon: Icon, label, used, total, remaining }: {
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
label: string
|
||||
used: number
|
||||
total: number
|
||||
remaining: number
|
||||
}) {
|
||||
const pct = total > 0 ? Math.min(100, (used / total) * 100) : 0
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
|
||||
<Icon className="size-4" />
|
||||
{label}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-semibold">{remaining}<span className="ml-1 text-sm font-normal text-muted-foreground">/ {total}</span></div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{used} used</p>
|
||||
<div className="mt-2 h-2 w-full overflow-hidden rounded bg-muted">
|
||||
<div className="h-full bg-primary" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default function EmployeeLeavePage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id: employeeId } = use(params)
|
||||
const api = useAuthApi()
|
||||
const employee = useEmployee()
|
||||
|
||||
const balanceQuery = useQuery({
|
||||
queryKey: ["employee-leave-balance", employeeId],
|
||||
queryFn: () => api.employees.getLeaveBalance(employeeId) as Promise<{ data: Balance }>,
|
||||
})
|
||||
|
||||
const balance = (balanceQuery.data as any)?.data as Balance | undefined
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{balance && (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-2 px-4 pt-4">
|
||||
<BalanceCard
|
||||
icon={PlaneIcon}
|
||||
label="Annual Leave"
|
||||
used={Number(balance.annual_used)}
|
||||
total={Number(balance.annual_total)}
|
||||
remaining={Number(balance.annual_remaining)}
|
||||
/>
|
||||
<BalanceCard
|
||||
icon={ActivityIcon}
|
||||
label="Sick Leave"
|
||||
used={Number(balance.sick_used)}
|
||||
total={Number(balance.sick_total)}
|
||||
remaining={Number(balance.sick_remaining)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ResourcePage<LeaveRequestsClient>
|
||||
pageTitle="Leave History"
|
||||
routeKey={LEAVE_REQUEST_ROUTES.INDEX}
|
||||
getClient={(api) => api.leaveRequests}
|
||||
extraParams={{ employee_id: employeeId }}
|
||||
header={null}
|
||||
headerProps={({ invalidateQuery }) => ({
|
||||
actions: (
|
||||
<FormDialog title="New Leave Request">
|
||||
{() => (
|
||||
<LeaveRequestForm
|
||||
presetEmployee={{ id: employeeId, label: employee?.label ?? "" }}
|
||||
onSuccess={() => {
|
||||
invalidateQuery()
|
||||
balanceQuery.refetch()
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</FormDialog>
|
||||
),
|
||||
})}
|
||||
columns={() => [
|
||||
{
|
||||
accessorKey: "leave_type",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Type" />,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<CalendarIcon className="size-4 text-muted-foreground" />
|
||||
<Badge variant="outline">{formatEnum((row.original as any).leave_type)}</Badge>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "start_date",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Start" />,
|
||||
cell: ({ row }) => formatDate((row.original as any).start_date),
|
||||
},
|
||||
{
|
||||
accessorKey: "end_date",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="End" />,
|
||||
cell: ({ row }) => formatDate((row.original as any).end_date),
|
||||
},
|
||||
{
|
||||
accessorKey: "days",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Days" />,
|
||||
cell: ({ row }) => (row.original as any).days ?? "—",
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
||||
cell: ({ row }) => {
|
||||
const s = (row.original as any).status as string
|
||||
return <Badge variant={statusVariant(s)}>{formatEnum(s)}</Badge>
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "reason",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Reason" />,
|
||||
cell: ({ row }) => (row.original as any).reason ?? "—",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,121 @@
|
||||
"use client"
|
||||
|
||||
import { use } from "react"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { type ColumnDef } from "@tanstack/react-table"
|
||||
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
||||
import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { formatEnum } from "@/shared/utils/formatters"
|
||||
|
||||
type Slip = {
|
||||
id: number
|
||||
payroll_run?: { id?: number; reference?: string; period_start?: string; period_end?: string; status?: string }
|
||||
hours_worked: number
|
||||
base_salary: number
|
||||
commission_amount: number
|
||||
allowances: number
|
||||
deductions: number
|
||||
net_pay: number
|
||||
}
|
||||
|
||||
function formatDate(value: unknown) {
|
||||
if (!value || typeof value !== "string") return "—"
|
||||
const d = new Date(value)
|
||||
return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
|
||||
}
|
||||
|
||||
function fmt(v: unknown) {
|
||||
const n = Number(v)
|
||||
if (!Number.isFinite(n)) return "—"
|
||||
return n.toFixed(2)
|
||||
}
|
||||
|
||||
function statusVariant(status: string | undefined): "default" | "secondary" | "outline" {
|
||||
if (status === "paid") return "default"
|
||||
if (status === "finalized") return "outline"
|
||||
return "secondary"
|
||||
}
|
||||
|
||||
export default function EmployeePayrollPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id: employeeId } = use(params)
|
||||
const api = useAuthApi()
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["employee-payroll-slips", employeeId],
|
||||
queryFn: () => api.employees.listPayrollSlips(employeeId) as Promise<{ data: Slip[] | { data: Slip[] } }>,
|
||||
})
|
||||
|
||||
const rows: Slip[] = Array.isArray((data as any)?.data)
|
||||
? (data as any).data
|
||||
: ((data as any)?.data?.data ?? [])
|
||||
|
||||
const columns: ColumnDef<Slip>[] = [
|
||||
{
|
||||
accessorKey: "payroll_run",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Run" />,
|
||||
cell: ({ row }) => {
|
||||
const r = row.original.payroll_run
|
||||
return r?.reference ?? (r?.id ? `#${r.id}` : "—")
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "period",
|
||||
header: () => <span>Period</span>,
|
||||
cell: ({ row }) => {
|
||||
const r = row.original.payroll_run
|
||||
if (!r) return "—"
|
||||
return `${formatDate(r.period_start)} → ${formatDate(r.period_end)}`
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "hours_worked",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Hours" />,
|
||||
cell: ({ row }) => fmt(row.original.hours_worked),
|
||||
},
|
||||
{
|
||||
accessorKey: "base_salary",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Base" />,
|
||||
cell: ({ row }) => fmt(row.original.base_salary),
|
||||
},
|
||||
{
|
||||
accessorKey: "commission_amount",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Commission" />,
|
||||
cell: ({ row }) => fmt(row.original.commission_amount),
|
||||
},
|
||||
{
|
||||
accessorKey: "deductions",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Deductions" />,
|
||||
cell: ({ row }) => fmt(row.original.deductions),
|
||||
},
|
||||
{
|
||||
accessorKey: "net_pay",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Net Pay" />,
|
||||
cell: ({ row }) => <span className="font-semibold">{fmt(row.original.net_pay)}</span>,
|
||||
},
|
||||
{
|
||||
id: "status",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
||||
cell: ({ row }) => {
|
||||
const s = row.original.payroll_run?.status
|
||||
if (!s) return "—"
|
||||
return <Badge variant={statusVariant(s)}>{formatEnum(s)}</Badge>
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<DashboardPage headerProps={{ title: "Payroll Slips" }}>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={rows}
|
||||
pagination={{ page: 1, pageSize: rows.length || 10, pageCount: 1, total: rows.length }}
|
||||
sorting={[]}
|
||||
onChange={() => {}}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</DashboardPage>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,121 @@
|
||||
"use client"
|
||||
|
||||
import { useMemo, useState } from "react"
|
||||
import { useParams } from "next/navigation"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { ClockIcon, WrenchIcon, CheckCircle2Icon, TimerIcon, PercentIcon } from "lucide-react"
|
||||
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Field, FieldLabel } from "@/shared/components/ui/field"
|
||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
||||
|
||||
type PerfData = {
|
||||
period: { from: string; to: string }
|
||||
hours_worked: number
|
||||
jobs_total: number
|
||||
jobs_completed: number
|
||||
avg_job_duration_hours: number
|
||||
completion_rate: number
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
suffix,
|
||||
}: {
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
label: string
|
||||
value: string | number
|
||||
suffix?: string
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
|
||||
<Icon className="size-4" />
|
||||
{label}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-semibold">
|
||||
{value}
|
||||
{suffix && <span className="ml-1 text-base font-normal text-muted-foreground">{suffix}</span>}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function firstOfMonth() {
|
||||
const d = new Date()
|
||||
return new Date(d.getFullYear(), d.getMonth(), 1).toISOString().slice(0, 10)
|
||||
}
|
||||
|
||||
function lastOfMonth() {
|
||||
const d = new Date()
|
||||
return new Date(d.getFullYear(), d.getMonth() + 1, 0).toISOString().slice(0, 10)
|
||||
}
|
||||
|
||||
export default function EmployeePerformancePage() {
|
||||
const { id: employeeId } = useParams<{ id: string }>()
|
||||
const api = useAuthApi()
|
||||
const [fromInput, setFromInput] = useState(firstOfMonth())
|
||||
const [toInput, setToInput] = useState(lastOfMonth())
|
||||
const [from, setFrom] = useState(fromInput)
|
||||
const [to, setTo] = useState(toInput)
|
||||
|
||||
const { data, isLoading, isFetching } = useQuery({
|
||||
queryKey: ["employee-performance", employeeId, from, to],
|
||||
queryFn: () => api.employees.performance(employeeId, { from, to }) as Promise<{ data: PerfData }>,
|
||||
})
|
||||
|
||||
const perf = useMemo(() => (data as any)?.data as PerfData | undefined, [data])
|
||||
|
||||
return (
|
||||
<DashboardPage
|
||||
headerProps={{
|
||||
title: perf ? `Performance · ${perf.period.from} → ${perf.period.to}` : "Performance",
|
||||
actions: (
|
||||
<div className="flex items-end gap-2">
|
||||
<Field>
|
||||
<FieldLabel>From</FieldLabel>
|
||||
<Input type="date" value={fromInput} onChange={(e) => setFromInput(e.target.value)} />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>To</FieldLabel>
|
||||
<Input type="date" value={toInput} onChange={(e) => setToInput(e.target.value)} />
|
||||
</Field>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={isFetching}
|
||||
onClick={() => {
|
||||
setFrom(fromInput)
|
||||
setTo(toInput)
|
||||
}}
|
||||
>
|
||||
{isFetching ? "Loading..." : "Apply"}
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{isLoading && !perf ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : !perf ? (
|
||||
<p className="text-sm text-muted-foreground">No data.</p>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
|
||||
<StatCard icon={ClockIcon} label="Hours Worked" value={perf.hours_worked.toFixed(2)} suffix="h" />
|
||||
<StatCard icon={WrenchIcon} label="Jobs Assigned" value={perf.jobs_total} />
|
||||
<StatCard icon={CheckCircle2Icon} label="Jobs Completed" value={perf.jobs_completed} />
|
||||
<StatCard icon={TimerIcon} label="Avg Job Duration" value={perf.avg_job_duration_hours.toFixed(2)} suffix="h" />
|
||||
<StatCard icon={PercentIcon} label="Completion Rate" value={perf.completion_rate} suffix="%" />
|
||||
</div>
|
||||
)}
|
||||
</DashboardPage>
|
||||
)
|
||||
}
|
||||
@ -4,7 +4,10 @@ import { useMemo, useState } from "react"
|
||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||
import FormDialog from "@/shared/components/form-dialog"
|
||||
import { ImportDataButton } from "@/shared/components/import-data-button"
|
||||
import { ExportDataButton } from "@/shared/components/export-data-button"
|
||||
import { EmployeeForm } from "@/modules/employees/employee-form"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { EMPLOYEE_ROUTES } from "@garage/api"
|
||||
import type { EmployeesClient } from "@garage/api"
|
||||
import { Avatar, AvatarFallback } from "@/shared/components/ui/avatar"
|
||||
@ -33,6 +36,7 @@ function initialsOf(first?: string | null, last?: string | null) {
|
||||
|
||||
export default function EmployeesPage() {
|
||||
const router = useRouter()
|
||||
const api = useAuthApi()
|
||||
const [typeFilter, setTypeFilter] = useState<string>("all")
|
||||
|
||||
const extraParams = useMemo(() => {
|
||||
@ -68,15 +72,28 @@ export default function EmployeesPage() {
|
||||
)}
|
||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
||||
actions: (
|
||||
<FormDialog title="Employee">
|
||||
{(resourceId) => (
|
||||
<EmployeeForm
|
||||
resourceId={resourceId}
|
||||
initialData={selectedItem}
|
||||
onSuccess={invalidateQuery}
|
||||
/>
|
||||
)}
|
||||
</FormDialog>
|
||||
<div className="flex items-center gap-2">
|
||||
<ImportDataButton
|
||||
onImport={(file) => api.employees.importData(file)}
|
||||
onSuccess={invalidateQuery}
|
||||
entityLabel="Employees"
|
||||
onDownloadSample={() => api.employees.downloadImportSample() as Promise<Blob>}
|
||||
sampleFileName="employees-import-sample"
|
||||
/>
|
||||
<ExportDataButton
|
||||
onExport={(filters) => api.employees.exportData(filters)}
|
||||
fileName="employees"
|
||||
/>
|
||||
<FormDialog title="Employee">
|
||||
{(resourceId) => (
|
||||
<EmployeeForm
|
||||
resourceId={resourceId}
|
||||
initialData={selectedItem}
|
||||
onSuccess={invalidateQuery}
|
||||
/>
|
||||
)}
|
||||
</FormDialog>
|
||||
</div>
|
||||
),
|
||||
})}
|
||||
columns={({ actionsColumn }) => [
|
||||
|
||||
@ -0,0 +1,152 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||
import FormDialog from "@/shared/components/form-dialog"
|
||||
import { LeaveRequestForm } from "@/modules/leave-requests/leave-request-form"
|
||||
import { LEAVE_REQUEST_ROUTES } from "@garage/api"
|
||||
import type { LeaveRequestsClient } from "@garage/api"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { useQueryClient } from "@tanstack/react-query"
|
||||
import { toast } from "sonner"
|
||||
import { CheckIcon, XIcon } from "lucide-react"
|
||||
import { confirm } from "@/shared/components/confirm-dialog"
|
||||
import { formatEnum } from "@/shared/utils/formatters"
|
||||
import { usePermissions } from "@/shared/hooks/use-permissions"
|
||||
|
||||
type LeaveRow = {
|
||||
id: number
|
||||
leave_type: string
|
||||
start_date?: string
|
||||
end_date?: string
|
||||
days?: number
|
||||
status: string
|
||||
reason?: string | null
|
||||
employee?: { id?: number; first_name?: string; last_name?: string; email?: string }
|
||||
}
|
||||
|
||||
function formatDate(value: unknown) {
|
||||
if (!value || typeof value !== "string") return "—"
|
||||
const d = new Date(value)
|
||||
return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
|
||||
}
|
||||
|
||||
function statusVariant(status: string): "default" | "secondary" | "outline" | "destructive" {
|
||||
if (status === "approved") return "default"
|
||||
if (status === "rejected") return "destructive"
|
||||
if (status === "cancelled") return "outline"
|
||||
return "secondary"
|
||||
}
|
||||
|
||||
export default function LeaveRequestsPage() {
|
||||
const api = useAuthApi()
|
||||
const queryClient = useQueryClient()
|
||||
const perms = usePermissions()
|
||||
|
||||
async function handleDecision(id: number, action: "approve" | "reject") {
|
||||
const ok = await confirm({
|
||||
title: action === "approve" ? "Approve request?" : "Reject request?",
|
||||
description: `This will mark the leave request as ${action}d.`,
|
||||
confirmLabel: action === "approve" ? "Approve" : "Reject",
|
||||
variant: action === "approve" ? "default" : "destructive",
|
||||
})
|
||||
if (!ok) return
|
||||
const promise = action === "approve"
|
||||
? api.leaveRequests.approve(String(id))
|
||||
: api.leaveRequests.reject(String(id))
|
||||
toast.promise(promise, {
|
||||
loading: action === "approve" ? "Approving..." : "Rejecting...",
|
||||
success: action === "approve" ? "Approved" : "Rejected",
|
||||
error: "Failed",
|
||||
})
|
||||
await promise
|
||||
queryClient.invalidateQueries({ queryKey: [LEAVE_REQUEST_ROUTES.INDEX] })
|
||||
}
|
||||
|
||||
return (
|
||||
<ResourcePage<LeaveRequestsClient>
|
||||
pageTitle="Leave Requests"
|
||||
routeKey={LEAVE_REQUEST_ROUTES.INDEX}
|
||||
getClient={(api) => api.leaveRequests}
|
||||
statusFilter={{
|
||||
statuses: ["pending", "approved", "rejected", "cancelled"],
|
||||
paramKey: "status",
|
||||
allLabel: "All",
|
||||
}}
|
||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
||||
actions: perms.canCreate("leave_requests") ? (
|
||||
<FormDialog title="Leave Request">
|
||||
{(resourceId) => (
|
||||
<LeaveRequestForm
|
||||
resourceId={resourceId}
|
||||
initialData={selectedItem}
|
||||
onSuccess={invalidateQuery}
|
||||
/>
|
||||
)}
|
||||
</FormDialog>
|
||||
) : null,
|
||||
})}
|
||||
columns={({ actionsColumn }) => [
|
||||
{
|
||||
accessorKey: "employee",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Employee" />,
|
||||
cell: ({ row }) => {
|
||||
const e = (row.original as any).employee
|
||||
if (!e) return "—"
|
||||
return `${e.first_name ?? ""} ${e.last_name ?? ""}`.trim() || e.email || "—"
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "leave_type",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Type" />,
|
||||
cell: ({ row }) => <Badge variant="outline">{formatEnum((row.original as any).leave_type)}</Badge>,
|
||||
},
|
||||
{
|
||||
accessorKey: "start_date",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Start" />,
|
||||
cell: ({ row }) => formatDate((row.original as any).start_date),
|
||||
},
|
||||
{
|
||||
accessorKey: "end_date",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="End" />,
|
||||
cell: ({ row }) => formatDate((row.original as any).end_date),
|
||||
},
|
||||
{
|
||||
accessorKey: "days",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Days" />,
|
||||
cell: ({ row }) => (row.original as any).days ?? "—",
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
||||
cell: ({ row }) => {
|
||||
const s = (row.original as any).status as string
|
||||
return <Badge variant={statusVariant(s)}>{formatEnum(s)}</Badge>
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "decide",
|
||||
header: () => <span className="sr-only">Decide</span>,
|
||||
cell: ({ row }) => {
|
||||
const r = row.original as LeaveRow
|
||||
if (r.status !== "pending" || !perms.canUpdate("leave_requests")) return null
|
||||
return (
|
||||
<div className="flex justify-end gap-1">
|
||||
<Button size="icon" variant="ghost" onClick={() => handleDecision(r.id, "approve")}>
|
||||
<CheckIcon className="size-4 text-green-600" />
|
||||
</Button>
|
||||
<Button size="icon" variant="ghost" onClick={() => handleDecision(r.id, "reject")}>
|
||||
<XIcon className="size-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
actionsColumn(),
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,259 @@
|
||||
"use client"
|
||||
|
||||
import { use } from "react"
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import { type ColumnDef } from "@tanstack/react-table"
|
||||
import { toast } from "sonner"
|
||||
import { CheckCircle2Icon, RefreshCwIcon, BanknoteIcon, Trash2, DownloadIcon } from "lucide-react"
|
||||
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
||||
import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { confirm } from "@/shared/components/confirm-dialog"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { formatEnum } from "@/shared/utils/formatters"
|
||||
|
||||
type Entry = {
|
||||
id: number
|
||||
employee_id: number
|
||||
employee?: { id?: number; first_name?: string; last_name?: string; email?: string }
|
||||
hours_worked: number
|
||||
overtime_hours: number
|
||||
base_salary: number
|
||||
commission_amount: number
|
||||
allowances: number
|
||||
deductions: number
|
||||
net_pay: number
|
||||
note?: string | null
|
||||
}
|
||||
|
||||
type Run = {
|
||||
id: number
|
||||
reference?: string
|
||||
period_start: string
|
||||
period_end: string
|
||||
status: "draft" | "finalized" | "paid"
|
||||
entries: Entry[]
|
||||
note?: string | null
|
||||
finalized_at?: string | null
|
||||
paid_at?: string | null
|
||||
}
|
||||
|
||||
function formatDate(value: unknown) {
|
||||
if (!value || typeof value !== "string") return "—"
|
||||
const d = new Date(value)
|
||||
return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
|
||||
}
|
||||
|
||||
function fmtCurrency(value: unknown) {
|
||||
const n = Number(value)
|
||||
if (!Number.isFinite(n)) return "—"
|
||||
return n.toFixed(2)
|
||||
}
|
||||
|
||||
function statusVariant(status: string): "default" | "secondary" | "outline" {
|
||||
if (status === "paid") return "default"
|
||||
if (status === "finalized") return "outline"
|
||||
return "secondary"
|
||||
}
|
||||
|
||||
export default function PayrollRunPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id: runId } = use(params)
|
||||
const api = useAuthApi()
|
||||
const queryClient = useQueryClient()
|
||||
const router = useRouter()
|
||||
|
||||
const queryKey = ["payroll-run", runId]
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey,
|
||||
queryFn: () => api.payroll.show(runId) as Promise<{ data: Run; totals: Record<string, number> }>,
|
||||
})
|
||||
|
||||
const run = (data as any)?.data as Run | undefined
|
||||
const totals = (data as any)?.totals as Record<string, number> | undefined
|
||||
|
||||
const refetch = () => queryClient.invalidateQueries({ queryKey })
|
||||
|
||||
const finalizeMutation = useMutation({
|
||||
mutationFn: () => api.payroll.finalize(runId),
|
||||
onSuccess: () => {
|
||||
toast.success("Run finalized")
|
||||
refetch()
|
||||
},
|
||||
onError: () => toast.error("Failed to finalize"),
|
||||
})
|
||||
|
||||
const regenerateMutation = useMutation({
|
||||
mutationFn: () => api.payroll.regenerate(runId),
|
||||
onSuccess: () => {
|
||||
toast.success("Entries regenerated")
|
||||
refetch()
|
||||
},
|
||||
onError: () => toast.error("Failed to regenerate"),
|
||||
})
|
||||
|
||||
const markPaidMutation = useMutation({
|
||||
mutationFn: () => api.payroll.markPaid(runId),
|
||||
onSuccess: () => {
|
||||
toast.success("Marked as paid")
|
||||
refetch()
|
||||
},
|
||||
onError: () => toast.error("Failed to mark paid"),
|
||||
})
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: () => api.payroll.destroy(runId),
|
||||
onSuccess: () => {
|
||||
toast.success("Run deleted")
|
||||
router.push("/productivity/payroll")
|
||||
},
|
||||
onError: () => toast.error("Failed to delete"),
|
||||
})
|
||||
|
||||
async function handleDelete() {
|
||||
const ok = await confirm({
|
||||
title: "Delete payroll run?",
|
||||
description: "This permanently removes the run and all its entries.",
|
||||
confirmLabel: "Delete",
|
||||
variant: "destructive",
|
||||
})
|
||||
if (ok) deleteMutation.mutate()
|
||||
}
|
||||
|
||||
const columns: ColumnDef<Entry>[] = [
|
||||
{
|
||||
accessorKey: "employee",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Employee" />,
|
||||
cell: ({ row }) => {
|
||||
const e = row.original.employee
|
||||
if (!e) return `#${row.original.employee_id}`
|
||||
return `${e.first_name ?? ""} ${e.last_name ?? ""}`.trim() || e.email || "—"
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "hours_worked",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Hours" />,
|
||||
cell: ({ row }) => fmtCurrency(row.original.hours_worked),
|
||||
},
|
||||
{
|
||||
accessorKey: "base_salary",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Base" />,
|
||||
cell: ({ row }) => fmtCurrency(row.original.base_salary),
|
||||
},
|
||||
{
|
||||
accessorKey: "commission_amount",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Commission" />,
|
||||
cell: ({ row }) => fmtCurrency(row.original.commission_amount),
|
||||
},
|
||||
{
|
||||
accessorKey: "allowances",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Allowances" />,
|
||||
cell: ({ row }) => fmtCurrency(row.original.allowances),
|
||||
},
|
||||
{
|
||||
accessorKey: "deductions",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Deductions" />,
|
||||
cell: ({ row }) => fmtCurrency(row.original.deductions),
|
||||
},
|
||||
{
|
||||
accessorKey: "net_pay",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Net Pay" />,
|
||||
cell: ({ row }) => <span className="font-semibold">{fmtCurrency(row.original.net_pay)}</span>,
|
||||
},
|
||||
{
|
||||
id: "slip",
|
||||
header: () => <span className="sr-only">Slip</span>,
|
||||
cell: ({ row }) => (
|
||||
<Button variant="ghost" size="icon" asChild>
|
||||
<a
|
||||
href={`/api/payroll/runs/${runId}/entries/${row.original.id}/slip`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title="Download slip PDF"
|
||||
>
|
||||
<DownloadIcon className="size-4" />
|
||||
</a>
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
if (isLoading && !run) {
|
||||
return <DashboardPage>Loading...</DashboardPage>
|
||||
}
|
||||
|
||||
if (!run) {
|
||||
return <DashboardPage>Run not found.</DashboardPage>
|
||||
}
|
||||
|
||||
const entries = run.entries ?? []
|
||||
|
||||
return (
|
||||
<DashboardPage
|
||||
headerProps={{
|
||||
title: `${run.reference ?? `Payroll #${run.id}`} · ${formatDate(run.period_start)} → ${formatDate(run.period_end)}`,
|
||||
actions: (
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={statusVariant(run.status)}>{formatEnum(run.status)}</Badge>
|
||||
{run.status === "draft" && (
|
||||
<>
|
||||
<Button size="sm" variant="outline" disabled={regenerateMutation.isPending} onClick={() => regenerateMutation.mutate()}>
|
||||
<RefreshCwIcon className="size-4" />
|
||||
Regenerate
|
||||
</Button>
|
||||
<Button size="sm" disabled={finalizeMutation.isPending} onClick={() => finalizeMutation.mutate()}>
|
||||
<CheckCircle2Icon className="size-4" />
|
||||
Finalize
|
||||
</Button>
|
||||
<Button size="sm" variant="destructive" disabled={deleteMutation.isPending} onClick={handleDelete}>
|
||||
<Trash2 className="size-4" />
|
||||
Delete
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{run.status === "finalized" && (
|
||||
<Button size="sm" disabled={markPaidMutation.isPending} onClick={() => markPaidMutation.mutate()}>
|
||||
<BanknoteIcon className="size-4" />
|
||||
Mark Paid
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{totals && (
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5 mb-4">
|
||||
{[
|
||||
{ label: "Gross Base", value: totals.gross_base },
|
||||
{ label: "Commission", value: totals.commission },
|
||||
{ label: "Allowances", value: totals.allowances },
|
||||
{ label: "Deductions", value: totals.deductions },
|
||||
{ label: "Net Total", value: totals.net_pay },
|
||||
].map((t) => (
|
||||
<Card key={t.label}>
|
||||
<CardHeader className="pb-1">
|
||||
<CardTitle className="text-xs font-medium text-muted-foreground">{t.label}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-lg font-semibold">{fmtCurrency(t.value)}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={entries}
|
||||
pagination={{ page: 1, pageSize: entries.length || 10, pageCount: 1, total: entries.length }}
|
||||
sorting={[]}
|
||||
onChange={() => {}}
|
||||
isLoading={false}
|
||||
/>
|
||||
</DashboardPage>
|
||||
)
|
||||
}
|
||||
102
apps/dashboard/app/(authenticated)/productivity/payroll/page.tsx
Normal file
102
apps/dashboard/app/(authenticated)/productivity/payroll/page.tsx
Normal file
@ -0,0 +1,102 @@
|
||||
"use client"
|
||||
|
||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||
import FormDialog from "@/shared/components/form-dialog"
|
||||
import { PayrollRunForm } from "@/modules/payroll/payroll-run-form"
|
||||
import { PAYROLL_ROUTES } from "@garage/api"
|
||||
import type { PayrollClient } from "@garage/api"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { formatEnum } from "@/shared/utils/formatters"
|
||||
|
||||
type RunRow = {
|
||||
id: number
|
||||
reference?: string | null
|
||||
period_start?: string
|
||||
period_end?: string
|
||||
status: string
|
||||
entries_count?: number
|
||||
generated_at?: string | null
|
||||
finalized_at?: string | null
|
||||
paid_at?: string | null
|
||||
}
|
||||
|
||||
function formatDate(value: unknown) {
|
||||
if (!value || typeof value !== "string") return "—"
|
||||
const d = new Date(value)
|
||||
return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
|
||||
}
|
||||
|
||||
function statusVariant(status: string): "default" | "secondary" | "outline" {
|
||||
if (status === "paid") return "default"
|
||||
if (status === "finalized") return "outline"
|
||||
return "secondary"
|
||||
}
|
||||
|
||||
export default function PayrollPage() {
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<ResourcePage<PayrollClient>
|
||||
pageTitle="Payroll"
|
||||
routeKey={PAYROLL_ROUTES.RUNS_INDEX}
|
||||
getClient={(api) => api.payroll}
|
||||
statusFilter={{
|
||||
statuses: ["draft", "finalized", "paid"],
|
||||
paramKey: "status",
|
||||
}}
|
||||
onRowClick={(row) => router.push(`/productivity/payroll/${(row as any).id}`)}
|
||||
headerProps={({ invalidateQuery }) => ({
|
||||
actions: (
|
||||
<FormDialog title="Payroll Run">
|
||||
{() => (
|
||||
<PayrollRunForm
|
||||
onSuccess={(runId) => {
|
||||
invalidateQuery()
|
||||
if (runId) router.push(`/productivity/payroll/${runId}`)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</FormDialog>
|
||||
),
|
||||
})}
|
||||
columns={({ actionsColumn }) => [
|
||||
{
|
||||
accessorKey: "reference",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Reference" />,
|
||||
cell: ({ row }) => <span className="font-mono text-xs">{(row.original as any).reference ?? `#${(row.original as any).id}`}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "period_start",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Period Start" />,
|
||||
cell: ({ row }) => formatDate((row.original as any).period_start),
|
||||
},
|
||||
{
|
||||
accessorKey: "period_end",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Period End" />,
|
||||
cell: ({ row }) => formatDate((row.original as any).period_end),
|
||||
},
|
||||
{
|
||||
accessorKey: "entries_count",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Entries" />,
|
||||
cell: ({ row }) => (row.original as any).entries_count ?? "—",
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
||||
cell: ({ row }) => {
|
||||
const s = (row.original as any).status as string
|
||||
return <Badge variant={statusVariant(s)}>{formatEnum(s)}</Badge>
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "finalized_at",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Finalized" />,
|
||||
cell: ({ row }) => formatDate((row.original as any).finalized_at),
|
||||
},
|
||||
actionsColumn({ onEdit: undefined }),
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,163 @@
|
||||
"use client"
|
||||
|
||||
import { useMemo, useState } from "react"
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
|
||||
import { LogInIcon, LogOutIcon, TimerIcon, SearchIcon } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { Card, CardContent } from "@/shared/components/ui/card"
|
||||
import { Avatar, AvatarFallback } from "@/shared/components/ui/avatar"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
||||
import { EMPLOYEE_ROUTES } from "@garage/api"
|
||||
|
||||
type Employee = {
|
||||
id: number
|
||||
first_name?: string
|
||||
last_name?: string
|
||||
email?: string
|
||||
designation?: string
|
||||
department?: { id?: number; name?: string }
|
||||
track_attendance?: boolean
|
||||
has_active_time_sheet?: boolean
|
||||
active_time_sheet?: { id?: number; clock_in?: string; date?: string } | null
|
||||
status?: string
|
||||
}
|
||||
|
||||
function initialsOf(first?: string | null, last?: string | null) {
|
||||
const f = (first ?? "").trim()[0] ?? ""
|
||||
const l = (last ?? "").trim()[0] ?? ""
|
||||
return (f + l).toUpperCase() || "?"
|
||||
}
|
||||
|
||||
function formatTime(value: unknown) {
|
||||
if (!value || typeof value !== "string") return "—"
|
||||
return value.length >= 5 ? value.slice(0, 5) : value
|
||||
}
|
||||
|
||||
export default function TimeClocksPage() {
|
||||
const api = useAuthApi()
|
||||
const queryClient = useQueryClient()
|
||||
const [search, setSearch] = useState("")
|
||||
|
||||
const employeesQuery = useQuery({
|
||||
queryKey: [EMPLOYEE_ROUTES.INDEX, "time-clocks", { per_page: 100, status: "active" }],
|
||||
queryFn: () => api.employees.list({ per_page: 100, status: "active" } as any) as Promise<{ data: Employee[] }>,
|
||||
})
|
||||
|
||||
const employees: Employee[] = useMemo(() => {
|
||||
const rows: Employee[] = (employeesQuery.data as any)?.data ?? []
|
||||
if (!search) return rows
|
||||
const q = search.toLowerCase()
|
||||
return rows.filter((e) => {
|
||||
const name = `${e.first_name ?? ""} ${e.last_name ?? ""}`.toLowerCase()
|
||||
return name.includes(q) || (e.email ?? "").toLowerCase().includes(q)
|
||||
})
|
||||
}, [employeesQuery.data, search])
|
||||
|
||||
const refetch = () => queryClient.invalidateQueries({ queryKey: [EMPLOYEE_ROUTES.INDEX, "time-clocks", { per_page: 100, status: "active" }] })
|
||||
|
||||
const clockInMutation = useMutation({
|
||||
mutationFn: (employeeId: number) => api.timeSheets.clockIn({ employee_id: employeeId } as any),
|
||||
onSuccess: () => {
|
||||
toast.success("Clocked in")
|
||||
refetch()
|
||||
},
|
||||
onError: (err: any) => toast.error(err?.payload?.message ?? err?.message ?? "Failed to clock in"),
|
||||
})
|
||||
|
||||
const clockOutMutation = useMutation({
|
||||
mutationFn: (timeSheetId: number) => api.timeSheets.clockOut({ time_sheet_id: timeSheetId } as any),
|
||||
onSuccess: () => {
|
||||
toast.success("Clocked out")
|
||||
refetch()
|
||||
},
|
||||
onError: (err: any) => toast.error(err?.payload?.message ?? err?.message ?? "Failed to clock out"),
|
||||
})
|
||||
|
||||
return (
|
||||
<DashboardPage
|
||||
headerProps={{
|
||||
title: "Time Clocks",
|
||||
actions: (
|
||||
<div className="relative w-64">
|
||||
<SearchIcon className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Search employees..."
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{employeesQuery.isLoading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : employees.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No employees found.</p>
|
||||
) : (
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{employees.map((emp) => {
|
||||
const fullName = `${emp.first_name ?? ""} ${emp.last_name ?? ""}`.trim() || emp.email
|
||||
const isClockedIn = !!emp.has_active_time_sheet
|
||||
const activeId = emp.active_time_sheet?.id
|
||||
const clockedInAt = emp.active_time_sheet?.clock_in
|
||||
|
||||
return (
|
||||
<Card key={emp.id}>
|
||||
<CardContent className="flex items-center justify-between gap-3 p-4">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<Avatar size="lg">
|
||||
<AvatarFallback>{initialsOf(emp.first_name, emp.last_name)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium truncate">{fullName}</div>
|
||||
<div className="text-xs text-muted-foreground truncate">
|
||||
{emp.designation ?? emp.department?.name ?? emp.email}
|
||||
</div>
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
{isClockedIn ? (
|
||||
<Badge variant="default" className="gap-1">
|
||||
<TimerIcon className="size-3" />
|
||||
Since {formatTime(clockedInAt)}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">Idle</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isClockedIn && activeId ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
disabled={clockOutMutation.isPending}
|
||||
onClick={() => clockOutMutation.mutate(activeId)}
|
||||
>
|
||||
<LogOutIcon className="size-4" />
|
||||
Clock Out
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={clockInMutation.isPending}
|
||||
onClick={() => clockInMutation.mutate(emp.id)}
|
||||
>
|
||||
<LogInIcon className="size-4" />
|
||||
Clock In
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</DashboardPage>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,96 @@
|
||||
"use client"
|
||||
|
||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { TIME_SHEET_ROUTES } from "@garage/api"
|
||||
import type { TimeSheetsClient } from "@garage/api"
|
||||
import { ClockIcon } from "lucide-react"
|
||||
import { formatEnum } from "@/shared/utils/formatters"
|
||||
|
||||
function formatDate(value: unknown) {
|
||||
if (!value || typeof value !== "string") return "—"
|
||||
const d = new Date(value)
|
||||
return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
|
||||
}
|
||||
|
||||
function formatTime(value: unknown) {
|
||||
if (!value || typeof value !== "string") return "—"
|
||||
return value.length >= 5 ? value.slice(0, 5) : value
|
||||
}
|
||||
|
||||
const ACTIVITY_VARIANT: Record<string, "default" | "secondary" | "outline"> = {
|
||||
general: "secondary",
|
||||
order: "default",
|
||||
task: "outline",
|
||||
}
|
||||
|
||||
export default function TimeSheetsPage() {
|
||||
return (
|
||||
<ResourcePage<TimeSheetsClient>
|
||||
pageTitle="Time Sheets"
|
||||
routeKey={TIME_SHEET_ROUTES.INDEX}
|
||||
getClient={(api) => api.timeSheets}
|
||||
statusFilter={{
|
||||
statuses: ["general", "order", "task"],
|
||||
paramKey: "activity_type",
|
||||
allLabel: "All",
|
||||
}}
|
||||
columns={({ actionsColumn }) => [
|
||||
{
|
||||
accessorKey: "date",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<ClockIcon className="size-4 text-muted-foreground" />
|
||||
<span>{formatDate((row.original as any).date)}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "employee",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Employee" />,
|
||||
cell: ({ row }) => {
|
||||
const e = (row.original as any).employee
|
||||
if (!e) return "—"
|
||||
return `${e.first_name ?? ""} ${e.last_name ?? ""}`.trim() || e.email || "—"
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "clock_in",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Clock In" />,
|
||||
cell: ({ row }) => <span className="font-mono text-xs">{formatTime((row.original as any).clock_in)}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "clock_out",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Clock Out" />,
|
||||
cell: ({ row }) => <span className="font-mono text-xs">{formatTime((row.original as any).clock_out)}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "duration",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Duration" />,
|
||||
cell: ({ row }) => <span className="font-mono text-xs">{formatTime((row.original as any).duration)}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "activity_type",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Activity" />,
|
||||
cell: ({ row }) => {
|
||||
const t = (row.original as any).activity_type ?? "general"
|
||||
return <Badge variant={ACTIVITY_VARIANT[t] ?? "secondary"}>{formatEnum(t)}</Badge>
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "calculated_total_cost",
|
||||
header: ({ column }) => <ColumnHeader column={column} title="Cost" />,
|
||||
cell: ({ row }) => {
|
||||
const v = (row.original as any).calculated_total_cost
|
||||
if (v == null) return "—"
|
||||
const n = Number(v)
|
||||
return Number.isFinite(n) ? n.toFixed(2) : "—"
|
||||
},
|
||||
},
|
||||
actionsColumn({ onEdit: undefined }),
|
||||
]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@ -144,7 +144,8 @@ export const navGroups: NavGroup[] = [
|
||||
{ title: "Employees", href: "/productivity/employees", icon: <UsersIcon /> },
|
||||
{ title: "Time Clocks", href: "/productivity/time-clocks", icon: <TimerIcon /> },
|
||||
{ title: "Time Sheets", href: "/productivity/timesheet", icon: <ClockIcon /> },
|
||||
// { title: "Payroll", href: "/productivity/payroll", icon: <WalletIcon /> },
|
||||
{ title: "Leave Requests", href: "/productivity/leave-requests", icon: <CalendarIcon /> },
|
||||
{ title: "Payroll", href: "/productivity/payroll", icon: <WalletIcon /> },
|
||||
// { title: "Payments Made", href: "/productivity/employee-payments-made", icon: <HandCoinsIcon /> },
|
||||
{ title: "Shop Calendars", href: "/productivity/shop-calendars", icon: <CalendarDaysIcon /> },
|
||||
{ title: "Shop Timing", href: "/productivity/shop-timings", icon: <Clock3Icon /> },
|
||||
|
||||
140
apps/dashboard/modules/employees/employee-certification-form.tsx
Normal file
140
apps/dashboard/modules/employees/employee-certification-form.tsx
Normal file
@ -0,0 +1,140 @@
|
||||
"use client"
|
||||
|
||||
import { useRef, useState } from "react"
|
||||
import { useMutation } from "@tanstack/react-query"
|
||||
import { toast } from "sonner"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { z } from "zod"
|
||||
import { UploadIcon } from "lucide-react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Textarea } from "@/shared/components/ui/textarea"
|
||||
import { Field, FieldLabel, FieldError } from "@/shared/components/ui/field"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().trim().min(1, "Name is required").max(150),
|
||||
issuer: z.string().trim().max(150).optional(),
|
||||
certificate_number: z.string().trim().max(100).optional(),
|
||||
issued_date: z.string().optional(),
|
||||
expiry_date: z.string().optional(),
|
||||
notes: z.string().max(2000).optional(),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof schema>
|
||||
|
||||
export type EmployeeCertificationFormProps = {
|
||||
employeeId: string
|
||||
onSuccess?: () => void
|
||||
onCancel?: () => void
|
||||
}
|
||||
|
||||
export function EmployeeCertificationForm({ employeeId, onSuccess, onCancel }: EmployeeCertificationFormProps) {
|
||||
const api = useAuthApi()
|
||||
const fileRef = useRef<HTMLInputElement | null>(null)
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
reset,
|
||||
} = useForm<FormValues>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
name: "", issuer: "", certificate_number: "",
|
||||
issued_date: "", expiry_date: "", notes: "",
|
||||
},
|
||||
})
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (values: FormValues) => {
|
||||
const promise = api.employees.createCertification(employeeId, {
|
||||
name: values.name,
|
||||
issuer: values.issuer || undefined,
|
||||
certificate_number: values.certificate_number || undefined,
|
||||
issued_date: values.issued_date || undefined,
|
||||
expiry_date: values.expiry_date || undefined,
|
||||
notes: values.notes || undefined,
|
||||
file: file ?? undefined,
|
||||
})
|
||||
toast.promise(promise, {
|
||||
loading: "Saving certification...",
|
||||
success: "Certification added",
|
||||
error: (err: any) => err?.message ?? "Failed to save",
|
||||
})
|
||||
return promise
|
||||
},
|
||||
onSuccess: () => {
|
||||
reset()
|
||||
setFile(null)
|
||||
onSuccess?.()
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<form className="grid gap-4" onSubmit={handleSubmit((v) => mutation.mutate(v))}>
|
||||
<Field>
|
||||
<FieldLabel>Name</FieldLabel>
|
||||
<Input {...register("name")} placeholder="e.g. ASE A1 Engine Repair" />
|
||||
{errors.name && <FieldError>{errors.name.message}</FieldError>}
|
||||
</Field>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Field>
|
||||
<FieldLabel>Issuer</FieldLabel>
|
||||
<Input {...register("issuer")} placeholder="ASE / SAE / ..." />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>Certificate Number</FieldLabel>
|
||||
<Input {...register("certificate_number")} placeholder="Optional" />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Field>
|
||||
<FieldLabel>Issued Date</FieldLabel>
|
||||
<Input type="date" {...register("issued_date")} />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>Expiry Date</FieldLabel>
|
||||
<Input type="date" {...register("expiry_date")} />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Attachment (optional)</FieldLabel>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => fileRef.current?.click()}>
|
||||
<UploadIcon className="size-4" />
|
||||
Choose file
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">{file ? file.name : "No file selected"}</span>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
accept=".pdf,.jpg,.jpeg,.png,.webp,.doc,.docx"
|
||||
onChange={(e) => setFile(e.target.files?.[0] ?? null)}
|
||||
/>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Notes</FieldLabel>
|
||||
<Textarea rows={3} {...register("notes")} />
|
||||
</Field>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
{onCancel && (
|
||||
<Button type="button" variant="outline" onClick={onCancel}>Cancel</Button>
|
||||
)}
|
||||
<Button type="submit" disabled={mutation.isPending}>
|
||||
{mutation.isPending ? "Saving..." : "Save Certification"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
165
apps/dashboard/modules/employees/employee-document-form.tsx
Normal file
165
apps/dashboard/modules/employees/employee-document-form.tsx
Normal file
@ -0,0 +1,165 @@
|
||||
"use client"
|
||||
|
||||
import { useRef, useState } from "react"
|
||||
import { useMutation } from "@tanstack/react-query"
|
||||
import { toast } from "sonner"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { z } from "zod"
|
||||
import { UploadIcon } from "lucide-react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Textarea } from "@/shared/components/ui/textarea"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/components/ui/select"
|
||||
import { Field, FieldLabel, FieldError } from "@/shared/components/ui/field"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
|
||||
const DOCUMENT_TYPES = [
|
||||
{ value: "contract", label: "Contract" },
|
||||
{ value: "id", label: "ID / Passport" },
|
||||
{ value: "ase", label: "ASE" },
|
||||
{ value: "certification", label: "Certification" },
|
||||
{ value: "other", label: "Other" },
|
||||
] as const
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string().trim().min(1, "Name is required").max(150),
|
||||
type: z.enum(["contract", "id", "ase", "certification", "other"]),
|
||||
issued_date: z.string().optional(),
|
||||
expiry_date: z.string().optional(),
|
||||
notes: z.string().max(2000).optional(),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof schema>
|
||||
|
||||
export type EmployeeDocumentFormProps = {
|
||||
employeeId: string
|
||||
onSuccess?: () => void
|
||||
onCancel?: () => void
|
||||
}
|
||||
|
||||
export function EmployeeDocumentForm({ employeeId, onSuccess, onCancel }: EmployeeDocumentFormProps) {
|
||||
const api = useAuthApi()
|
||||
const fileRef = useRef<HTMLInputElement | null>(null)
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
} = useForm<FormValues>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: { name: "", type: "other", issued_date: "", expiry_date: "", notes: "" },
|
||||
})
|
||||
|
||||
const type = watch("type")
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (values: FormValues) => {
|
||||
if (!file) throw new Error("Select a file to upload.")
|
||||
const promise = api.employees.uploadDocument(employeeId, {
|
||||
file,
|
||||
name: values.name,
|
||||
type: values.type,
|
||||
issued_date: values.issued_date || undefined,
|
||||
expiry_date: values.expiry_date || undefined,
|
||||
notes: values.notes || undefined,
|
||||
})
|
||||
toast.promise(promise, {
|
||||
loading: "Uploading document...",
|
||||
success: "Document uploaded",
|
||||
error: (err: any) => err?.message ?? "Failed to upload",
|
||||
})
|
||||
return promise
|
||||
},
|
||||
onSuccess: () => {
|
||||
reset()
|
||||
setFile(null)
|
||||
onSuccess?.()
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<form className="grid gap-4" onSubmit={handleSubmit((v) => mutation.mutate(v))}>
|
||||
<Field>
|
||||
<FieldLabel>File</FieldLabel>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => fileRef.current?.click()}>
|
||||
<UploadIcon className="size-4" />
|
||||
Choose file
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">{file ? file.name : "No file selected"}</span>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
className="hidden"
|
||||
accept=".pdf,.jpg,.jpeg,.png,.webp,.doc,.docx,.xls,.xlsx"
|
||||
onChange={(e) => setFile(e.target.files?.[0] ?? null)}
|
||||
/>
|
||||
</div>
|
||||
{!file && mutation.isError && (
|
||||
<FieldError>Select a file before uploading.</FieldError>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Name</FieldLabel>
|
||||
<Input {...register("name")} placeholder="e.g. Employment contract 2026" />
|
||||
{errors.name && <FieldError>{errors.name.message}</FieldError>}
|
||||
</Field>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Type</FieldLabel>
|
||||
<Select value={type} onValueChange={(v) => setValue("type", v as FormValues["type"], { shouldValidate: true })}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{DOCUMENT_TYPES.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<Field>
|
||||
<FieldLabel>Issued Date</FieldLabel>
|
||||
<Input type="date" {...register("issued_date")} />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>Expiry Date</FieldLabel>
|
||||
<Input type="date" {...register("expiry_date")} />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field>
|
||||
<FieldLabel>Notes</FieldLabel>
|
||||
<Textarea rows={3} {...register("notes")} placeholder="Optional" />
|
||||
</Field>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
{onCancel && (
|
||||
<Button type="button" variant="outline" onClick={onCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
<Button type="submit" disabled={mutation.isPending}>
|
||||
{mutation.isPending ? "Uploading..." : "Upload"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@ -1,16 +1,20 @@
|
||||
"use client"
|
||||
|
||||
import { AlertTriangle, Plus, Save } from "lucide-react"
|
||||
import { AlertTriangle, ImageIcon, Plus, Save, UploadIcon } from "lucide-react"
|
||||
import { useRef, useState } from "react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
|
||||
import { FieldGroup } from "@/shared/components/ui/field"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
|
||||
import { Separator } from "@/shared/components/ui/separator"
|
||||
import {
|
||||
Rhform,
|
||||
RhfTextField,
|
||||
RhfSelectField,
|
||||
RhfAsyncSelectField,
|
||||
RhfCheckboxField,
|
||||
RhfTextareaField,
|
||||
} from "@/shared/components/form"
|
||||
import { toast } from "sonner"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
@ -24,27 +28,18 @@ import {
|
||||
STATUS_OPTIONS,
|
||||
TYPE_OPTIONS,
|
||||
WAGE_TYPE_OPTIONS,
|
||||
GENDER_OPTIONS,
|
||||
MARITAL_OPTIONS,
|
||||
} from "./employee.schema"
|
||||
import { EMPLOYEE_ROUTES, DEPARTMENT_ROUTES, SHOP_TIMING_ROUTES, SHOP_CALENDAR_ROUTES, GEO_ROUTES } from "@garage/api"
|
||||
|
||||
// ── Constants ──
|
||||
const titleCase = (v: string) => v.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
|
||||
|
||||
const STATUS_SELECT_OPTIONS = STATUS_OPTIONS.map((v) => ({
|
||||
value: v,
|
||||
label: v.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
|
||||
}))
|
||||
|
||||
const TYPE_SELECT_OPTIONS = TYPE_OPTIONS.map((v) => ({
|
||||
value: v,
|
||||
label: v.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
|
||||
}))
|
||||
|
||||
const WAGE_TYPE_SELECT_OPTIONS = WAGE_TYPE_OPTIONS.map((v) => ({
|
||||
value: v,
|
||||
label: v,
|
||||
}))
|
||||
|
||||
// ── Props ──
|
||||
const STATUS_SELECT_OPTIONS = STATUS_OPTIONS.map((v) => ({ value: v, label: titleCase(v) }))
|
||||
const TYPE_SELECT_OPTIONS = TYPE_OPTIONS.map((v) => ({ value: v, label: titleCase(v) }))
|
||||
const WAGE_TYPE_SELECT_OPTIONS = WAGE_TYPE_OPTIONS.map((v) => ({ value: v, label: v }))
|
||||
const GENDER_SELECT_OPTIONS = GENDER_OPTIONS.map((v) => ({ value: v, label: titleCase(v) }))
|
||||
const MARITAL_SELECT_OPTIONS = MARITAL_OPTIONS.map((v) => ({ value: v, label: titleCase(v) }))
|
||||
|
||||
export type EmployeeFormProps = {
|
||||
resourceId?: string | null
|
||||
@ -52,8 +47,6 @@ export type EmployeeFormProps = {
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
// ── Default values ──
|
||||
|
||||
const DEFAULT_VALUES: EmployeeFormValues = {
|
||||
department: null,
|
||||
country: null,
|
||||
@ -73,12 +66,28 @@ const DEFAULT_VALUES: EmployeeFormValues = {
|
||||
track_attendance: true,
|
||||
notify_owner_when_punch_in_out: false,
|
||||
geo_fence_radius: null,
|
||||
address: "",
|
||||
date_of_birth: "",
|
||||
gender: null,
|
||||
marital_status: null,
|
||||
national_id: "",
|
||||
hire_date: "",
|
||||
emergency_contact_name: "",
|
||||
emergency_contact_phone: "",
|
||||
bank_name: "",
|
||||
bank_account_number: "",
|
||||
bank_iban: "",
|
||||
hourly_rate: null,
|
||||
commission_rate: null,
|
||||
}
|
||||
|
||||
// ── Mapping helpers ──
|
||||
|
||||
function mapToFormValues(data: unknown): EmployeeFormValues {
|
||||
const d = (data as any)?.data ?? data ?? {}
|
||||
const formatDate = (v: unknown): string => {
|
||||
if (!v) return ""
|
||||
const s = String(v)
|
||||
return s.length >= 10 ? s.slice(0, 10) : s
|
||||
}
|
||||
|
||||
return {
|
||||
department: toRelation(d.department_id, d.department?.name),
|
||||
@ -99,6 +108,19 @@ function mapToFormValues(data: unknown): EmployeeFormValues {
|
||||
track_attendance: d.track_attendance ?? true,
|
||||
notify_owner_when_punch_in_out: d.notify_owner_when_punch_in_out ?? false,
|
||||
geo_fence_radius: d.geo_fence_radius ?? null,
|
||||
address: d.address || "",
|
||||
date_of_birth: formatDate(d.date_of_birth),
|
||||
gender: d.gender ?? null,
|
||||
marital_status: d.marital_status ?? null,
|
||||
national_id: d.national_id || "",
|
||||
hire_date: formatDate(d.hire_date),
|
||||
emergency_contact_name: d.emergency_contact_name || "",
|
||||
emergency_contact_phone: d.emergency_contact_phone || "",
|
||||
bank_name: d.bank_name || "",
|
||||
bank_account_number: d.bank_account_number || "",
|
||||
bank_iban: d.bank_iban || "",
|
||||
hourly_rate: d.hourly_rate ?? null,
|
||||
commission_rate: d.commission_rate ?? null,
|
||||
}
|
||||
}
|
||||
|
||||
@ -112,7 +134,7 @@ function mapFormToPayload(values: EmployeeFormValues) {
|
||||
first_name: values.first_name,
|
||||
last_name: values.last_name,
|
||||
email: values.email,
|
||||
password: values.password,
|
||||
password: values.password || undefined,
|
||||
phone: values.phone || undefined,
|
||||
designation: values.designation || undefined,
|
||||
salary: values.salary ?? undefined,
|
||||
@ -122,11 +144,22 @@ function mapFormToPayload(values: EmployeeFormValues) {
|
||||
track_attendance: values.track_attendance,
|
||||
notify_owner_when_punch_in_out: values.notify_owner_when_punch_in_out,
|
||||
geo_fence_radius: values.geo_fence_radius ?? undefined,
|
||||
address: values.address || undefined,
|
||||
date_of_birth: values.date_of_birth || undefined,
|
||||
gender: values.gender ?? undefined,
|
||||
marital_status: values.marital_status ?? undefined,
|
||||
national_id: values.national_id || undefined,
|
||||
hire_date: values.hire_date || undefined,
|
||||
emergency_contact_name: values.emergency_contact_name || undefined,
|
||||
emergency_contact_phone: values.emergency_contact_phone || undefined,
|
||||
bank_name: values.bank_name || undefined,
|
||||
bank_account_number: values.bank_account_number || undefined,
|
||||
bank_iban: values.bank_iban || undefined,
|
||||
hourly_rate: values.hourly_rate ?? undefined,
|
||||
commission_rate: values.commission_rate ?? undefined,
|
||||
}
|
||||
}
|
||||
|
||||
// ── Shared mapOption for async selects ──
|
||||
|
||||
const mapLookupOption = (item: any) => ({
|
||||
value: String(item.id),
|
||||
label: item.name ?? item.title ?? String(item.id),
|
||||
@ -134,7 +167,71 @@ const mapLookupOption = (item: any) => ({
|
||||
|
||||
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
|
||||
|
||||
// ── Component ──
|
||||
function SectionHeading({ title, description }: { title: string; description?: string }) {
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-sm font-semibold">{title}</h3>
|
||||
{description && <p className="text-xs text-muted-foreground">{description}</p>}
|
||||
<Separator className="mt-2" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarUpload({ employeeId, initialUrl }: { employeeId: string; initialUrl?: string | null }) {
|
||||
const api = useAuthApi()
|
||||
const inputRef = useRef<HTMLInputElement | null>(null)
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(initialUrl ?? null)
|
||||
const [uploading, setUploading] = useState(false)
|
||||
|
||||
async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0]
|
||||
if (!file) return
|
||||
|
||||
setUploading(true)
|
||||
try {
|
||||
const res: any = await api.employees.uploadAvatar(employeeId, file)
|
||||
const url = res?.data?.avatar_url ?? URL.createObjectURL(file)
|
||||
setPreviewUrl(url)
|
||||
toast.success("Avatar updated")
|
||||
} catch (err: any) {
|
||||
toast.error(err?.message ?? "Failed to upload avatar")
|
||||
} finally {
|
||||
setUploading(false)
|
||||
e.target.value = ""
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
<Avatar size="lg">
|
||||
{previewUrl ? <AvatarImage src={previewUrl} alt="Avatar" /> : null}
|
||||
<AvatarFallback>
|
||||
<ImageIcon className="size-5 text-muted-foreground" />
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={uploading}
|
||||
onClick={() => inputRef.current?.click()}
|
||||
>
|
||||
<UploadIcon className="size-4" />
|
||||
{uploading ? "Uploading..." : "Upload photo"}
|
||||
</Button>
|
||||
<p className="mt-1 text-xs text-muted-foreground">JPG, PNG, WEBP. Max 5 MB.</p>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function EmployeeForm({ resourceId, initialData, onSuccess }: EmployeeFormProps) {
|
||||
const api = useAuthApi()
|
||||
@ -168,6 +265,9 @@ export function EmployeeForm({ resourceId, initialData, onSuccess }: EmployeeFor
|
||||
},
|
||||
})
|
||||
|
||||
const initialAvatarUrl = (initialData as any)?.avatar_url
|
||||
?? ((initialData as any)?.avatar_path ? `/storage/${(initialData as any).avatar_path}` : null)
|
||||
|
||||
return (
|
||||
<Rhform form={form} onSubmit={(values) => mutate(values)}>
|
||||
{error && (
|
||||
@ -181,19 +281,67 @@ export function EmployeeForm({ resourceId, initialData, onSuccess }: EmployeeFor
|
||||
)}
|
||||
|
||||
<FieldGroup>
|
||||
{/* Personal */}
|
||||
<SectionHeading title="Personal" />
|
||||
|
||||
{isEditing && resourceId ? (
|
||||
<AvatarUpload employeeId={resourceId} initialUrl={initialAvatarUrl} />
|
||||
) : null}
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField name="first_name" label="First Name" placeholder="Jane" required />
|
||||
<RhfTextField name="last_name" label="Last Name" placeholder="Smith" required />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField name="email" label="Email" placeholder="jane@example.com" type="email" />
|
||||
<RhfTextField name="password" label="Password" placeholder="At least 6 characters" type="password" required />
|
||||
<RhfTextField name="date_of_birth" label="Date of Birth" type="date" />
|
||||
<RhfTextField name="national_id" label="National ID" placeholder="A1234567" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField name="phone" label="Phone" placeholder="0501234567" type="tel" />
|
||||
<RhfTextField name="designation" label="Designation" placeholder="Technician" />
|
||||
<RhfSelectField name="gender" label="Gender" placeholder="Select gender" options={GENDER_SELECT_OPTIONS} />
|
||||
<RhfSelectField name="marital_status" label="Marital Status" placeholder="Select status" options={MARITAL_SELECT_OPTIONS} />
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<SectionHeading title="Contact" />
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField name="email" label="Email" placeholder="jane@example.com" type="email" required />
|
||||
<RhfTextField name="password" label="Password" placeholder={isEditing ? "Leave blank to keep" : "At least 6 characters"} type="password" required={!isEditing} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField name="phone" label="Phone" placeholder="+971501234567" type="tel" />
|
||||
<RhfAsyncSelectField
|
||||
name="country"
|
||||
label="Country"
|
||||
placeholder="Select country"
|
||||
queryKey={[GEO_ROUTES.COUNTRIES]}
|
||||
listFn={() => api.geo.countries()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<RhfTextareaField name="address" label="Address" placeholder="Street, city, region..." rows={2} />
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField name="emergency_contact_name" label="Emergency Contact Name" placeholder="Full name" />
|
||||
<RhfTextField name="emergency_contact_phone" label="Emergency Contact Phone" type="tel" />
|
||||
</div>
|
||||
|
||||
{/* Employment */}
|
||||
<SectionHeading title="Employment" />
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField name="hire_date" label="Hire Date" type="date" />
|
||||
<RhfTextField name="designation" label="Designation" placeholder="Senior Technician" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfSelectField name="type" label="Type" placeholder="Select type" options={TYPE_SELECT_OPTIONS} />
|
||||
<RhfSelectField name="status" label="Status" placeholder="Select status" options={STATUS_SELECT_OPTIONS} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
@ -209,41 +357,32 @@ export function EmployeeForm({ resourceId, initialData, onSuccess }: EmployeeFor
|
||||
<RhfTextField name="role_id" label="Role ID" placeholder="1" type="number" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfSelectField
|
||||
name="status"
|
||||
label="Status"
|
||||
placeholder="Select status"
|
||||
options={STATUS_SELECT_OPTIONS}
|
||||
/>
|
||||
<RhfSelectField
|
||||
name="type"
|
||||
label="Type"
|
||||
placeholder="Select type"
|
||||
options={TYPE_SELECT_OPTIONS}
|
||||
/>
|
||||
</div>
|
||||
{/* Compensation */}
|
||||
<SectionHeading title="Compensation" />
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfSelectField name="wage_type" label="Wage Type" placeholder="Select wage type" options={WAGE_TYPE_SELECT_OPTIONS} />
|
||||
<RhfTextField name="salary" label="Salary" placeholder="0" type="number" />
|
||||
<RhfSelectField
|
||||
name="wage_type"
|
||||
label="Wage Type"
|
||||
placeholder="Select wage type"
|
||||
options={WAGE_TYPE_SELECT_OPTIONS}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfAsyncSelectField
|
||||
name="country"
|
||||
label="Country"
|
||||
placeholder="Select country"
|
||||
queryKey={[GEO_ROUTES.COUNTRIES]}
|
||||
listFn={() => api.geo.countries()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
<RhfTextField name="hourly_rate" label="Hourly Rate" placeholder="0.00" type="number" />
|
||||
<RhfTextField name="commission_rate" label="Commission (%)" placeholder="0" type="number" />
|
||||
</div>
|
||||
|
||||
{/* Bank */}
|
||||
<SectionHeading title="Bank" description="Used for payroll payouts." />
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField name="bank_name" label="Bank Name" placeholder="Bank of ..." />
|
||||
<RhfTextField name="bank_account_number" label="Account Number" placeholder="000123456789" />
|
||||
</div>
|
||||
<RhfTextField name="bank_iban" label="IBAN" placeholder="AE00 0000 0000 0000 0000 000" />
|
||||
|
||||
{/* Tracking */}
|
||||
<SectionHeading title="Attendance Tracking" />
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfAsyncSelectField
|
||||
name="shop_calender"
|
||||
label="Shop Calendar"
|
||||
|
||||
@ -9,6 +9,15 @@ import {
|
||||
Calendar,
|
||||
BadgeCheck,
|
||||
CircleDot,
|
||||
Cake,
|
||||
Heart,
|
||||
IdCard,
|
||||
Home,
|
||||
PhoneCall,
|
||||
Landmark,
|
||||
Wallet,
|
||||
PercentIcon,
|
||||
DollarSign,
|
||||
} from "lucide-react"
|
||||
import {
|
||||
Card,
|
||||
@ -16,6 +25,7 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Separator } from "@/shared/components/ui/separator"
|
||||
import { formatEnum } from "@/shared/utils/formatters"
|
||||
@ -38,6 +48,22 @@ type EmployeeData = {
|
||||
department?: { id?: number; name?: string } | null
|
||||
shop_calender?: { id?: number; title?: string } | null
|
||||
shop_timing?: { id?: number; title?: string } | null
|
||||
role?: { id?: number; name?: string } | null
|
||||
avatar_url?: string | null
|
||||
avatar_path?: string | null
|
||||
address?: string | null
|
||||
date_of_birth?: string | null
|
||||
gender?: string | null
|
||||
marital_status?: string | null
|
||||
national_id?: string | null
|
||||
hire_date?: string | null
|
||||
emergency_contact_name?: string | null
|
||||
emergency_contact_phone?: string | null
|
||||
bank_name?: string | null
|
||||
bank_account_number?: string | null
|
||||
bank_iban?: string | null
|
||||
hourly_rate?: string | number | null
|
||||
commission_rate?: string | number | null
|
||||
created_at?: string
|
||||
updated_at?: string
|
||||
}
|
||||
@ -46,6 +72,19 @@ type EmployeeGeneralInfoProps = {
|
||||
employee: EmployeeData
|
||||
}
|
||||
|
||||
function formatDate(value?: string | null): string | null {
|
||||
if (!value) return null
|
||||
const d = new Date(value)
|
||||
if (Number.isNaN(d.getTime())) return value
|
||||
return d.toLocaleDateString()
|
||||
}
|
||||
|
||||
function initialsOf(first?: string | null, last?: string | null) {
|
||||
const f = (first ?? "").trim()[0] ?? ""
|
||||
const l = (last ?? "").trim()[0] ?? ""
|
||||
return (f + l).toUpperCase() || "?"
|
||||
}
|
||||
|
||||
function InfoItem({
|
||||
icon: Icon,
|
||||
label,
|
||||
@ -53,7 +92,7 @@ function InfoItem({
|
||||
}: {
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
label: string
|
||||
value?: string | null
|
||||
value?: string | number | null
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-start gap-3">
|
||||
@ -63,7 +102,7 @@ function InfoItem({
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-xs text-muted-foreground">{label}</span>
|
||||
<span className="text-sm font-medium">
|
||||
{value || <span className="text-muted-foreground">—</span>}
|
||||
{value != null && value !== "" ? value : <span className="text-muted-foreground">—</span>}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -72,6 +111,7 @@ function InfoItem({
|
||||
|
||||
export function EmployeeGeneralInfo({ employee }: EmployeeGeneralInfoProps) {
|
||||
const fullName = [employee.first_name, employee.last_name].filter(Boolean).join(" ")
|
||||
const avatarSrc = employee.avatar_url ?? (employee.avatar_path ? `/storage/${employee.avatar_path}` : null)
|
||||
|
||||
return (
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
@ -84,61 +124,77 @@ export function EmployeeGeneralInfo({ employee }: EmployeeGeneralInfoProps) {
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge variant="secondary">{fullName || "Unknown"}</Badge>
|
||||
{employee.type && (
|
||||
<Badge variant="outline">
|
||||
{formatEnum(employee.type)}
|
||||
</Badge>
|
||||
)}
|
||||
{employee.status && (
|
||||
<Badge
|
||||
variant={employee.status === "active" ? "default" : "secondary"}
|
||||
>
|
||||
{formatEnum(employee.status)}
|
||||
</Badge>
|
||||
)}
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar size="lg">
|
||||
{avatarSrc ? <AvatarImage src={avatarSrc} alt={fullName} /> : null}
|
||||
<AvatarFallback>{initialsOf(employee.first_name, employee.last_name)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge variant="secondary">{fullName || "Unknown"}</Badge>
|
||||
{employee.type && (
|
||||
<Badge variant="outline">
|
||||
{formatEnum(employee.type)}
|
||||
</Badge>
|
||||
)}
|
||||
{employee.status && (
|
||||
<Badge
|
||||
variant={employee.status === "active" ? "default" : "secondary"}
|
||||
>
|
||||
{formatEnum(employee.status)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<InfoItem icon={Mail} label="Email" value={employee.email} />
|
||||
<InfoItem icon={Phone} label="Phone" value={employee.phone} />
|
||||
<InfoItem icon={Briefcase} label="Position" value={employee.position} />
|
||||
<InfoItem icon={BadgeCheck} label="Designation" value={employee.designation} />
|
||||
<InfoItem icon={Cake} label="Date of Birth" value={formatDate(employee.date_of_birth)} />
|
||||
<InfoItem icon={Heart} label="Marital Status" value={employee.marital_status ? formatEnum(employee.marital_status) : null} />
|
||||
<InfoItem icon={User} label="Gender" value={employee.gender ? formatEnum(employee.gender) : null} />
|
||||
<InfoItem icon={IdCard} label="National ID" value={employee.national_id} />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<InfoItem icon={Home} label="Address" value={employee.address} />
|
||||
<InfoItem icon={PhoneCall} label="Emergency Contact" value={[employee.emergency_contact_name, employee.emergency_contact_phone].filter(Boolean).join(" • ")} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Work Details */}
|
||||
{/* Employment + Compensation */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Building2 className="size-4" />
|
||||
Work Details
|
||||
Employment
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<InfoItem
|
||||
icon={Building2}
|
||||
label="Department"
|
||||
value={employee.department?.name}
|
||||
/>
|
||||
<InfoItem
|
||||
icon={Calendar}
|
||||
label="Shop Calendar"
|
||||
value={employee.shop_calender?.title}
|
||||
/>
|
||||
<InfoItem
|
||||
icon={Clock}
|
||||
label="Shop Timing"
|
||||
value={employee.shop_timing?.title}
|
||||
/>
|
||||
<InfoItem
|
||||
icon={MapPin}
|
||||
label="Geo Fence Radius"
|
||||
value={employee.geo_fence_radius != null ? String(employee.geo_fence_radius) : null}
|
||||
/>
|
||||
<InfoItem icon={Briefcase} label="Designation" value={employee.designation} />
|
||||
<InfoItem icon={Calendar} label="Hire Date" value={formatDate(employee.hire_date)} />
|
||||
<InfoItem icon={Building2} label="Department" value={employee.department?.name} />
|
||||
<InfoItem icon={BadgeCheck} label="Role" value={employee.role?.name} />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<InfoItem icon={DollarSign} label="Salary" value={employee.salary ? Number(employee.salary).toFixed(2) : null} />
|
||||
<InfoItem icon={Wallet} label="Wage Type" value={employee.wage_type} />
|
||||
<InfoItem icon={Clock} label="Hourly Rate" value={employee.hourly_rate != null ? Number(employee.hourly_rate).toFixed(2) : null} />
|
||||
<InfoItem icon={PercentIcon} label="Commission %" value={employee.commission_rate != null ? Number(employee.commission_rate).toFixed(2) : null} />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<InfoItem icon={Landmark} label="Bank" value={employee.bank_name} />
|
||||
<InfoItem icon={Wallet} label="Account #" value={employee.bank_account_number} />
|
||||
<InfoItem icon={Landmark} label="IBAN" value={employee.bank_iban} />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<InfoItem icon={Calendar} label="Shop Calendar" value={employee.shop_calender?.title} />
|
||||
<InfoItem icon={Clock} label="Shop Timing" value={employee.shop_timing?.title} />
|
||||
<InfoItem icon={MapPin} label="Geo Fence Radius (m)" value={employee.geo_fence_radius != null ? String(employee.geo_fence_radius) : null} />
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="flex flex-wrap gap-2">
|
||||
|
||||
@ -25,9 +25,22 @@ const optionalIntegerIdField = z.preprocess(
|
||||
z.number().int().positive().nullable(),
|
||||
)
|
||||
|
||||
const optionalTrimmedString = (max: number, msg?: string) =>
|
||||
z.preprocess(
|
||||
(value) => (typeof value !== "string" ? value : value.trim() === "" ? undefined : value.trim()),
|
||||
z.string().max(max, msg ?? `Must be at most ${max} characters`).optional(),
|
||||
)
|
||||
|
||||
const STATUS_OPTIONS = ["active", "inactive"] as const
|
||||
const TYPE_OPTIONS = EmployeeType
|
||||
const WAGE_TYPE_OPTIONS = WageType
|
||||
const GENDER_OPTIONS = ["male", "female"] as const
|
||||
const MARITAL_OPTIONS = ["single", "married"] as const
|
||||
|
||||
const optionalDate = z.preprocess(
|
||||
(value) => (typeof value !== "string" || value.trim() === "" ? undefined : value),
|
||||
z.string().optional(),
|
||||
)
|
||||
|
||||
const employeeFormSchema = z.object({
|
||||
department: relationFieldSchema,
|
||||
@ -39,8 +52,8 @@ const employeeFormSchema = z.object({
|
||||
last_name: z.string().trim().min(1, "Last name is required").max(50, "Last name must be at most 50 characters"),
|
||||
email: z.string().trim().min(1, "Email is required").email("Enter a valid email address").max(100, "Email must be at most 100 characters"),
|
||||
password: z.string().min(6, "Password must be at least 6 characters"),
|
||||
phone: z.string().trim().max(30, "Phone must be at most 30 characters").optional().or(z.literal("")),
|
||||
designation: z.string().trim().max(50, "Designation must be at most 50 characters").optional().or(z.literal("")),
|
||||
phone: optionalTrimmedString(30),
|
||||
designation: optionalTrimmedString(50),
|
||||
salary: optionalNumericField,
|
||||
wage_type: z.enum(WAGE_TYPE_OPTIONS).nullable(),
|
||||
status: z.enum(STATUS_OPTIONS),
|
||||
@ -48,9 +61,32 @@ const employeeFormSchema = z.object({
|
||||
track_attendance: z.boolean(),
|
||||
notify_owner_when_punch_in_out: z.boolean(),
|
||||
geo_fence_radius: optionalNumericField,
|
||||
|
||||
// Extended profile fields
|
||||
address: optionalTrimmedString(500),
|
||||
date_of_birth: optionalDate,
|
||||
gender: z.enum(GENDER_OPTIONS).nullable().optional(),
|
||||
marital_status: z.enum(MARITAL_OPTIONS).nullable().optional(),
|
||||
national_id: optionalTrimmedString(50),
|
||||
hire_date: optionalDate,
|
||||
emergency_contact_name: optionalTrimmedString(100),
|
||||
emergency_contact_phone: optionalTrimmedString(30),
|
||||
bank_name: optionalTrimmedString(100),
|
||||
bank_account_number: optionalTrimmedString(50),
|
||||
bank_iban: optionalTrimmedString(50),
|
||||
hourly_rate: optionalNumericField,
|
||||
commission_rate: optionalNumericField,
|
||||
})
|
||||
|
||||
type EmployeeFormValues = z.infer<typeof employeeFormSchema>
|
||||
|
||||
export { employeeFormSchema, relationFieldSchema, STATUS_OPTIONS, TYPE_OPTIONS, WAGE_TYPE_OPTIONS }
|
||||
export {
|
||||
employeeFormSchema,
|
||||
relationFieldSchema,
|
||||
STATUS_OPTIONS,
|
||||
TYPE_OPTIONS,
|
||||
WAGE_TYPE_OPTIONS,
|
||||
GENDER_OPTIONS,
|
||||
MARITAL_OPTIONS,
|
||||
}
|
||||
export type { EmployeeFormValues }
|
||||
|
||||
158
apps/dashboard/modules/leave-requests/leave-request-form.tsx
Normal file
158
apps/dashboard/modules/leave-requests/leave-request-form.tsx
Normal file
@ -0,0 +1,158 @@
|
||||
"use client"
|
||||
|
||||
import { AlertTriangle, Plus, Save } from "lucide-react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
|
||||
import { FieldGroup } from "@/shared/components/ui/field"
|
||||
import {
|
||||
Rhform,
|
||||
RhfTextField,
|
||||
RhfSelectField,
|
||||
RhfTextareaField,
|
||||
} from "@/shared/components/form"
|
||||
import { RhfEmployeeSelectField } from "@/modules/employees/rhf-employee-select-field"
|
||||
import { toast } from "sonner"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { useResourceForm } from "@/shared/hooks/use-resource-form"
|
||||
import { useFormMutation } from "@/shared/hooks/use-form-mutation"
|
||||
import { toRelation, toId } from "@/shared/lib/utils"
|
||||
import { LEAVE_REQUEST_ROUTES } from "@garage/api"
|
||||
|
||||
import { z } from "zod"
|
||||
|
||||
const LEAVE_TYPES = ["annual", "sick", "unpaid", "maternity", "paternity", "other"] as const
|
||||
|
||||
const relationFieldSchema = z.object({ value: z.string(), label: z.string() }).nullable()
|
||||
|
||||
const schema = z.object({
|
||||
employee: relationFieldSchema.refine((v) => !!v?.value, "Employee is required"),
|
||||
leave_type: z.enum(LEAVE_TYPES),
|
||||
start_date: z.string().min(1, "Start date is required"),
|
||||
end_date: z.string().min(1, "End date is required"),
|
||||
reason: z.string().max(2000).optional(),
|
||||
})
|
||||
|
||||
type LeaveFormValues = z.infer<typeof schema>
|
||||
|
||||
const DEFAULT_VALUES: LeaveFormValues = {
|
||||
employee: null,
|
||||
leave_type: "annual",
|
||||
start_date: "",
|
||||
end_date: "",
|
||||
reason: "",
|
||||
}
|
||||
|
||||
const TYPE_SELECT_OPTIONS = LEAVE_TYPES.map((v) => ({
|
||||
value: v,
|
||||
label: v.replace(/^./, (c) => c.toUpperCase()),
|
||||
}))
|
||||
|
||||
export type LeaveRequestFormProps = {
|
||||
resourceId?: string | null
|
||||
initialData?: unknown
|
||||
onSuccess?: () => void
|
||||
/** Pre-fill the employee select when opened from an employee detail page. */
|
||||
presetEmployee?: { id: number | string; label: string } | null
|
||||
}
|
||||
|
||||
function mapToFormValues(data: unknown, preset?: { id: number | string; label: string } | null): LeaveFormValues {
|
||||
const d = (data as any)?.data ?? data ?? {}
|
||||
const empLabel = d.employee
|
||||
? `${d.employee.first_name ?? ""} ${d.employee.last_name ?? ""}`.trim()
|
||||
: ""
|
||||
|
||||
const formatDate = (v: unknown) => {
|
||||
if (!v || typeof v !== "string") return ""
|
||||
return v.length >= 10 ? v.slice(0, 10) : v
|
||||
}
|
||||
|
||||
return {
|
||||
employee: d.employee_id
|
||||
? toRelation(d.employee_id, empLabel || `Employee #${d.employee_id}`)
|
||||
: (preset ? toRelation(preset.id, preset.label) : null),
|
||||
leave_type: d.leave_type || "annual",
|
||||
start_date: formatDate(d.start_date),
|
||||
end_date: formatDate(d.end_date),
|
||||
reason: d.reason || "",
|
||||
}
|
||||
}
|
||||
|
||||
export function LeaveRequestForm({ resourceId, initialData, onSuccess, presetEmployee }: LeaveRequestFormProps) {
|
||||
const api = useAuthApi()
|
||||
|
||||
const { form, isEditing } = useResourceForm<LeaveFormValues, any>({
|
||||
schema,
|
||||
defaultValues: presetEmployee
|
||||
? { ...DEFAULT_VALUES, employee: toRelation(presetEmployee.id, presetEmployee.label) }
|
||||
: DEFAULT_VALUES,
|
||||
resourceId,
|
||||
initialData,
|
||||
initialize: (id) => api.leaveRequests.show(id),
|
||||
queryKey: [LEAVE_REQUEST_ROUTES.BY_ID, resourceId],
|
||||
mapToFormValues: (data) => mapToFormValues(data, presetEmployee),
|
||||
})
|
||||
|
||||
const { mutate, error, isPending } = useFormMutation(form, {
|
||||
mutationFn: (values: LeaveFormValues) => {
|
||||
const payload = {
|
||||
employee_id: toId(values.employee) ?? 0,
|
||||
leave_type: values.leave_type,
|
||||
start_date: values.start_date,
|
||||
end_date: values.end_date,
|
||||
reason: values.reason || undefined,
|
||||
}
|
||||
const promise = isEditing && resourceId
|
||||
? api.leaveRequests.update(resourceId, payload)
|
||||
: api.leaveRequests.create(payload as any)
|
||||
toast.promise(promise, {
|
||||
loading: isEditing ? "Updating..." : "Submitting...",
|
||||
success: isEditing ? "Leave request updated" : "Leave request submitted",
|
||||
error: isEditing ? "Failed to update" : "Failed to submit",
|
||||
})
|
||||
return promise
|
||||
},
|
||||
onSuccess: () => {
|
||||
form.reset()
|
||||
onSuccess?.()
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Rhform form={form} onSubmit={(values) => mutate(values)}>
|
||||
{error && (
|
||||
<Alert variant="destructive" className="mb-4">
|
||||
<AlertTriangle className="me-2 h-4 w-4" />
|
||||
<AlertTitle>{isEditing ? "Failed to update" : "Failed to submit"}</AlertTitle>
|
||||
{error.message}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<FieldGroup>
|
||||
<RhfEmployeeSelectField name="employee" label="Employee" required />
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfSelectField
|
||||
name="leave_type"
|
||||
label="Leave Type"
|
||||
placeholder="Select type"
|
||||
options={TYPE_SELECT_OPTIONS}
|
||||
/>
|
||||
<div />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField name="start_date" label="Start Date" type="date" required />
|
||||
<RhfTextField name="end_date" label="End Date" type="date" required />
|
||||
</div>
|
||||
|
||||
<RhfTextareaField name="reason" label="Reason" rows={3} />
|
||||
|
||||
<Button type="submit" variant="default" disabled={isPending}>
|
||||
{isEditing ? <Save /> : <Plus />}
|
||||
{isPending ? "Saving..." : (isEditing ? "Update" : "Submit Request")}
|
||||
</Button>
|
||||
</FieldGroup>
|
||||
</Rhform>
|
||||
)
|
||||
}
|
||||
105
apps/dashboard/modules/payroll/payroll-run-form.tsx
Normal file
105
apps/dashboard/modules/payroll/payroll-run-form.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
"use client"
|
||||
|
||||
import { AlertTriangle, Plus } from "lucide-react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
|
||||
import { FieldGroup } from "@/shared/components/ui/field"
|
||||
import {
|
||||
Rhform,
|
||||
RhfTextField,
|
||||
RhfTextareaField,
|
||||
} from "@/shared/components/form"
|
||||
import { toast } from "sonner"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
import { useFormMutation } from "@/shared/hooks/use-form-mutation"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { z } from "zod"
|
||||
|
||||
const schema = z.object({
|
||||
period_start: z.string().min(1, "Required"),
|
||||
period_end: z.string().min(1, "Required"),
|
||||
reference: z.string().max(50).optional(),
|
||||
note: z.string().max(2000).optional(),
|
||||
})
|
||||
|
||||
type PayrollRunFormValues = z.infer<typeof schema>
|
||||
|
||||
function firstOfMonth() {
|
||||
const d = new Date()
|
||||
return new Date(d.getFullYear(), d.getMonth(), 1).toISOString().slice(0, 10)
|
||||
}
|
||||
function lastOfMonth() {
|
||||
const d = new Date()
|
||||
return new Date(d.getFullYear(), d.getMonth() + 1, 0).toISOString().slice(0, 10)
|
||||
}
|
||||
|
||||
export type PayrollRunFormProps = {
|
||||
onSuccess?: (runId?: string) => void
|
||||
}
|
||||
|
||||
export function PayrollRunForm({ onSuccess }: PayrollRunFormProps) {
|
||||
const api = useAuthApi()
|
||||
|
||||
const form = useForm<PayrollRunFormValues>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
period_start: firstOfMonth(),
|
||||
period_end: lastOfMonth(),
|
||||
reference: "",
|
||||
note: "",
|
||||
},
|
||||
})
|
||||
|
||||
const { mutate, error, isPending } = useFormMutation(form, {
|
||||
mutationFn: (values: PayrollRunFormValues) => {
|
||||
const payload = {
|
||||
period_start: values.period_start,
|
||||
period_end: values.period_end,
|
||||
reference: values.reference || undefined,
|
||||
note: values.note || undefined,
|
||||
}
|
||||
const promise = api.payroll.create(payload)
|
||||
toast.promise(promise, {
|
||||
loading: "Creating run + generating entries...",
|
||||
success: "Payroll run created",
|
||||
error: "Failed to create run",
|
||||
})
|
||||
return promise
|
||||
},
|
||||
onSuccess: (res: any) => {
|
||||
const runId = res?.data?.id ?? res?.id
|
||||
form.reset()
|
||||
onSuccess?.(runId ? String(runId) : undefined)
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<Rhform form={form} onSubmit={(values) => mutate(values)}>
|
||||
{error && (
|
||||
<Alert variant="destructive" className="mb-4">
|
||||
<AlertTriangle className="me-2 h-4 w-4" />
|
||||
<AlertTitle>Failed to create payroll run</AlertTitle>
|
||||
{error.message}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<FieldGroup>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField name="period_start" label="Period Start" type="date" required />
|
||||
<RhfTextField name="period_end" label="Period End" type="date" required />
|
||||
</div>
|
||||
|
||||
<RhfTextField name="reference" label="Reference" placeholder="Auto if blank" />
|
||||
|
||||
<RhfTextareaField name="note" label="Note" rows={2} />
|
||||
|
||||
<Button type="submit" variant="default" disabled={isPending}>
|
||||
<Plus />
|
||||
{isPending ? "Creating..." : "Create & Generate"}
|
||||
</Button>
|
||||
</FieldGroup>
|
||||
</Rhform>
|
||||
)
|
||||
}
|
||||
38
apps/dashboard/shared/hooks/use-permissions.ts
Normal file
38
apps/dashboard/shared/hooks/use-permissions.ts
Normal file
@ -0,0 +1,38 @@
|
||||
"use client"
|
||||
|
||||
import { useMemo } from "react"
|
||||
import { useAuthStore } from "@/shared/stores/auth-store"
|
||||
|
||||
/**
|
||||
* UI-side permission checks. The backend `permission.check` middleware is the
|
||||
* authoritative guard (returns 403 on missing permission); this hook only hides
|
||||
* controls so the UI doesn't dead-end users.
|
||||
*
|
||||
* Permission flags arrive on the authenticated user payload as boolean columns
|
||||
* (e.g. `can_view_employees`, `can_create_payroll`). Unknown keys default to
|
||||
* `true` so the UI doesn't accidentally hide everything when the payload shape
|
||||
* changes — backend stays the source of truth.
|
||||
*/
|
||||
export function usePermissions() {
|
||||
const user = useAuthStore((s) => s.user)
|
||||
|
||||
return useMemo(() => {
|
||||
const flags = (user ?? {}) as Record<string, unknown>
|
||||
|
||||
function check(action: "view" | "create" | "update" | "delete", resource: string): boolean {
|
||||
const key = `can_${action}_${resource}`
|
||||
const value = flags[key]
|
||||
// Default to true when the flag is absent — backend is the source of truth.
|
||||
if (value === undefined || value === null) return true
|
||||
return Boolean(value)
|
||||
}
|
||||
|
||||
return {
|
||||
can: check,
|
||||
canView: (resource: string) => check("view", resource),
|
||||
canCreate: (resource: string) => check("create", resource),
|
||||
canUpdate: (resource: string) => check("update", resource),
|
||||
canDelete: (resource: string) => check("delete", resource),
|
||||
}
|
||||
}, [user])
|
||||
}
|
||||
@ -59,6 +59,8 @@ import { ExpenseItemsClient } from "./clients/expense-items"
|
||||
import { InventoryCategoriesClient } from "./clients/inventory-categories"
|
||||
import { DocumentPrintClient } from "./clients/document-print"
|
||||
import { DocumentShareClient } from "./clients/document-share"
|
||||
import { LeaveRequestsClient } from "./clients/leave-requests"
|
||||
import { PayrollClient } from "./clients/payroll"
|
||||
|
||||
export function createApi(options?: ApiClientOptions) {
|
||||
return {
|
||||
@ -122,6 +124,8 @@ export function createApi(options?: ApiClientOptions) {
|
||||
inventoryCategories: new InventoryCategoriesClient(undefined, options),
|
||||
documentPrint: new DocumentPrintClient(undefined, options),
|
||||
documentShare: new DocumentShareClient(undefined, options),
|
||||
leaveRequests: new LeaveRequestsClient(undefined, options),
|
||||
payroll: new PayrollClient(undefined, options),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { CrudClient } from "../infra/crud-client"
|
||||
import type { ApiClientOptions } from "../infra/client"
|
||||
import type { ApiPath, ApiRequestBody } from "../infra/types"
|
||||
import type { ApiListQueryParams } from "../contracts/types"
|
||||
|
||||
export const EMPLOYEE_ROUTES = {
|
||||
INDEX: "/api/employees",
|
||||
@ -8,12 +9,36 @@ export const EMPLOYEE_ROUTES = {
|
||||
UPDATE_PERMISSIONS: "/api/employees/{id}/update-permissions",
|
||||
} as const satisfies Record<string, ApiPath>
|
||||
|
||||
// Routes added after the last OpenAPI regen — not yet in the generated `paths`
|
||||
// type, so callers go through `as never` casts.
|
||||
export const EMPLOYEE_EXTRA_ROUTES = {
|
||||
UPLOAD_AVATAR: "/api/employees/{id}/upload-avatar",
|
||||
PERFORMANCE: "/api/employees/{id}/performance",
|
||||
IMPORT: "/api/employees/import",
|
||||
EXPORT: "/api/employees/export",
|
||||
IMPORT_SAMPLE: "/api/employees/import/sample",
|
||||
DOCUMENTS: "/api/employees/{employee}/documents",
|
||||
DOCUMENT_BY_ID: "/api/employees/{employee}/documents/{id}",
|
||||
CERTIFICATIONS: "/api/employees/{employee}/certifications",
|
||||
CERTIFICATION_BY_ID: "/api/employees/{employee}/certifications/{id}",
|
||||
LEAVE_BALANCE: "/api/employees/{employee}/leave-balance",
|
||||
PAYROLL_SLIPS: "/api/employees/{employee}/payroll-slips",
|
||||
} as const
|
||||
|
||||
export class EmployeesClient extends CrudClient<
|
||||
typeof EMPLOYEE_ROUTES.INDEX,
|
||||
typeof EMPLOYEE_ROUTES.BY_ID
|
||||
> {
|
||||
constructor(baseUrl?: string, defaultOptions?: ApiClientOptions) {
|
||||
super(baseUrl, defaultOptions, EMPLOYEE_ROUTES.INDEX, EMPLOYEE_ROUTES.BY_ID)
|
||||
super(
|
||||
baseUrl,
|
||||
defaultOptions,
|
||||
EMPLOYEE_ROUTES.INDEX,
|
||||
EMPLOYEE_ROUTES.BY_ID,
|
||||
EMPLOYEE_EXTRA_ROUTES.IMPORT as never,
|
||||
EMPLOYEE_EXTRA_ROUTES.EXPORT as never,
|
||||
"GET",
|
||||
)
|
||||
}
|
||||
|
||||
async getById(id: string) {
|
||||
@ -23,4 +48,118 @@ export class EmployeesClient extends CrudClient<
|
||||
async updatePermissions(id: string, payload: ApiRequestBody<typeof EMPLOYEE_ROUTES.UPDATE_PERMISSIONS, "post">) {
|
||||
return this.post(EMPLOYEE_ROUTES.UPDATE_PERMISSIONS, payload as never, { params: { id } } as never)
|
||||
}
|
||||
|
||||
async uploadAvatar(id: string, file: File) {
|
||||
const fd = new FormData()
|
||||
fd.append("avatar", file)
|
||||
return this.postFormData(`/api/employees/${id}/upload-avatar`, fd)
|
||||
}
|
||||
|
||||
async downloadImportSample() {
|
||||
return this.fetchBlob(EMPLOYEE_EXTRA_ROUTES.IMPORT_SAMPLE as never, { method: "GET" })
|
||||
}
|
||||
|
||||
async performance(id: string, query?: { from?: string; to?: string }) {
|
||||
return this.get(EMPLOYEE_EXTRA_ROUTES.PERFORMANCE as never, { params: { id }, query } as never)
|
||||
}
|
||||
|
||||
// ── Documents ────────────────────────────────────────────────────
|
||||
async listDocuments(employeeId: string, query?: ApiListQueryParams) {
|
||||
return this.get(EMPLOYEE_EXTRA_ROUTES.DOCUMENTS as never, { params: { employee: employeeId }, query } as never)
|
||||
}
|
||||
|
||||
async uploadDocument(employeeId: string, payload: {
|
||||
file: File
|
||||
name: string
|
||||
type: string
|
||||
issued_date?: string
|
||||
expiry_date?: string
|
||||
notes?: string
|
||||
}) {
|
||||
const fd = new FormData()
|
||||
fd.append("file", payload.file)
|
||||
fd.append("name", payload.name)
|
||||
fd.append("type", payload.type)
|
||||
if (payload.issued_date) fd.append("issued_date", payload.issued_date)
|
||||
if (payload.expiry_date) fd.append("expiry_date", payload.expiry_date)
|
||||
if (payload.notes) fd.append("notes", payload.notes)
|
||||
return this.postFormData(`/api/employees/${employeeId}/documents`, fd)
|
||||
}
|
||||
|
||||
async updateDocument(employeeId: string, id: string, payload: Record<string, unknown>) {
|
||||
return this.put(EMPLOYEE_EXTRA_ROUTES.DOCUMENT_BY_ID as never, payload as never, { params: { employee: employeeId, id } } as never)
|
||||
}
|
||||
|
||||
async destroyDocument(employeeId: string, id: string) {
|
||||
return this.delete(EMPLOYEE_EXTRA_ROUTES.DOCUMENT_BY_ID as never, { params: { employee: employeeId, id } } as never)
|
||||
}
|
||||
|
||||
// ── Certifications ───────────────────────────────────────────────
|
||||
async listCertifications(employeeId: string, query?: ApiListQueryParams) {
|
||||
return this.get(EMPLOYEE_EXTRA_ROUTES.CERTIFICATIONS as never, { params: { employee: employeeId }, query } as never)
|
||||
}
|
||||
|
||||
async createCertification(employeeId: string, payload: {
|
||||
name: string
|
||||
issuer?: string
|
||||
certificate_number?: string
|
||||
issued_date?: string
|
||||
expiry_date?: string
|
||||
notes?: string
|
||||
file?: File
|
||||
}) {
|
||||
const fd = new FormData()
|
||||
fd.append("name", payload.name)
|
||||
if (payload.issuer) fd.append("issuer", payload.issuer)
|
||||
if (payload.certificate_number) fd.append("certificate_number", payload.certificate_number)
|
||||
if (payload.issued_date) fd.append("issued_date", payload.issued_date)
|
||||
if (payload.expiry_date) fd.append("expiry_date", payload.expiry_date)
|
||||
if (payload.notes) fd.append("notes", payload.notes)
|
||||
if (payload.file) fd.append("file", payload.file)
|
||||
return this.postFormData(`/api/employees/${employeeId}/certifications`, fd)
|
||||
}
|
||||
|
||||
async updateCertification(employeeId: string, id: string, payload: {
|
||||
name?: string
|
||||
issuer?: string
|
||||
certificate_number?: string
|
||||
issued_date?: string
|
||||
expiry_date?: string
|
||||
notes?: string
|
||||
file?: File
|
||||
}) {
|
||||
const fd = new FormData()
|
||||
if (payload.name) fd.append("name", payload.name)
|
||||
if (payload.issuer) fd.append("issuer", payload.issuer)
|
||||
if (payload.certificate_number) fd.append("certificate_number", payload.certificate_number)
|
||||
if (payload.issued_date) fd.append("issued_date", payload.issued_date)
|
||||
if (payload.expiry_date) fd.append("expiry_date", payload.expiry_date)
|
||||
if (payload.notes) fd.append("notes", payload.notes)
|
||||
if (payload.file) fd.append("file", payload.file)
|
||||
return this.postFormData(`/api/employees/${employeeId}/certifications/${id}`, fd)
|
||||
}
|
||||
|
||||
async destroyCertification(employeeId: string, id: string) {
|
||||
return this.delete(EMPLOYEE_EXTRA_ROUTES.CERTIFICATION_BY_ID as never, { params: { employee: employeeId, id } } as never)
|
||||
}
|
||||
|
||||
// ── Leave balance ────────────────────────────────────────────────
|
||||
async getLeaveBalance(employeeId: string, year?: number) {
|
||||
return this.get(EMPLOYEE_EXTRA_ROUTES.LEAVE_BALANCE as never, {
|
||||
params: { employee: employeeId },
|
||||
query: year ? { year } : undefined,
|
||||
} as never)
|
||||
}
|
||||
|
||||
async updateLeaveBalance(employeeId: string, payload: { year: number; annual_total?: number; sick_total?: number }) {
|
||||
return this.put(EMPLOYEE_EXTRA_ROUTES.LEAVE_BALANCE as never, payload as never, { params: { employee: employeeId } } as never)
|
||||
}
|
||||
|
||||
// ── Payroll slips for an employee ────────────────────────────────
|
||||
async listPayrollSlips(employeeId: string, query?: ApiListQueryParams & { year?: number }) {
|
||||
return this.get(EMPLOYEE_EXTRA_ROUTES.PAYROLL_SLIPS as never, {
|
||||
params: { employee: employeeId },
|
||||
query,
|
||||
} as never)
|
||||
}
|
||||
}
|
||||
|
||||
@ -83,3 +83,5 @@ export { ConfigurationsClient, CONFIGURATION_ROUTES } from "./configurations"
|
||||
export { AutoGenerateClient, AUTO_GENERATE_ROUTES } from "./auto-generate"
|
||||
export { ExpenseItemsClient, EXPENSE_ITEM_ROUTES } from "./expense-items"
|
||||
export { InventoryCategoriesClient, INVENTORY_CATEGORY_ROUTES } from "./inventory-categories"
|
||||
export { LeaveRequestsClient, LEAVE_REQUEST_ROUTES } from "./leave-requests"
|
||||
export { PayrollClient, PAYROLL_ROUTES } from "./payroll"
|
||||
|
||||
50
packages/api/src/clients/leave-requests.ts
Normal file
50
packages/api/src/clients/leave-requests.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import { ApiClient, type ApiClientOptions } from "../infra/client"
|
||||
import type { ApiListQueryParams } from "../contracts/types"
|
||||
|
||||
// New endpoints — not yet in the OpenAPI spec; routes are raw strings cast as needed.
|
||||
export const LEAVE_REQUEST_ROUTES = {
|
||||
INDEX: "/api/leave-requests",
|
||||
BY_ID: "/api/leave-requests/{id}",
|
||||
APPROVE: "/api/leave-requests/{id}/approve",
|
||||
REJECT: "/api/leave-requests/{id}/reject",
|
||||
} as const
|
||||
|
||||
export type LeaveStatus = "pending" | "approved" | "rejected" | "cancelled"
|
||||
|
||||
export class LeaveRequestsClient extends ApiClient {
|
||||
constructor(baseUrl?: string, defaultOptions?: ApiClientOptions) {
|
||||
super(baseUrl, defaultOptions)
|
||||
}
|
||||
|
||||
async list(query?: ApiListQueryParams & { employee_id?: string | number; status?: LeaveStatus; leave_type?: string; year?: number }) {
|
||||
return this.get(LEAVE_REQUEST_ROUTES.INDEX as never, { query } as never)
|
||||
}
|
||||
|
||||
async show(id: string) {
|
||||
return this.get(LEAVE_REQUEST_ROUTES.BY_ID as never, { params: { id } } as never)
|
||||
}
|
||||
|
||||
async getById(id: string) {
|
||||
return this.show(id)
|
||||
}
|
||||
|
||||
async create(payload: { employee_id: number | string; leave_type: string; start_date: string; end_date: string; reason?: string }) {
|
||||
return this.post(LEAVE_REQUEST_ROUTES.INDEX as never, payload as never)
|
||||
}
|
||||
|
||||
async update(id: string, payload: { leave_type?: string; start_date?: string; end_date?: string; reason?: string }) {
|
||||
return this.put(LEAVE_REQUEST_ROUTES.BY_ID as never, payload as never, { params: { id } } as never)
|
||||
}
|
||||
|
||||
async destroy(id: string) {
|
||||
return this.delete(LEAVE_REQUEST_ROUTES.BY_ID as never, { params: { id } } as never)
|
||||
}
|
||||
|
||||
async approve(id: string, payload?: { decision_note?: string; approved_by?: number }) {
|
||||
return this.post(LEAVE_REQUEST_ROUTES.APPROVE as never, (payload ?? {}) as never, { params: { id } } as never)
|
||||
}
|
||||
|
||||
async reject(id: string, payload?: { decision_note?: string; approved_by?: number }) {
|
||||
return this.post(LEAVE_REQUEST_ROUTES.REJECT as never, (payload ?? {}) as never, { params: { id } } as never)
|
||||
}
|
||||
}
|
||||
63
packages/api/src/clients/payroll.ts
Normal file
63
packages/api/src/clients/payroll.ts
Normal file
@ -0,0 +1,63 @@
|
||||
import { ApiClient, type ApiClientOptions } from "../infra/client"
|
||||
import type { ApiListQueryParams } from "../contracts/types"
|
||||
|
||||
export const PAYROLL_ROUTES = {
|
||||
RUNS_INDEX: "/api/payroll/runs",
|
||||
RUN_BY_ID: "/api/payroll/runs/{id}",
|
||||
REGENERATE: "/api/payroll/runs/{id}/regenerate",
|
||||
FINALIZE: "/api/payroll/runs/{id}/finalize",
|
||||
MARK_PAID: "/api/payroll/runs/{id}/mark-paid",
|
||||
ENTRY_BY_ID: "/api/payroll/runs/{run}/entries/{entry}",
|
||||
} as const
|
||||
|
||||
export type PayrollStatus = "draft" | "finalized" | "paid"
|
||||
|
||||
export class PayrollClient extends ApiClient {
|
||||
constructor(baseUrl?: string, defaultOptions?: ApiClientOptions) {
|
||||
super(baseUrl, defaultOptions)
|
||||
}
|
||||
|
||||
async list(query?: ApiListQueryParams & { status?: PayrollStatus; year?: number }) {
|
||||
return this.get(PAYROLL_ROUTES.RUNS_INDEX as never, { query } as never)
|
||||
}
|
||||
|
||||
async show(id: string) {
|
||||
return this.get(PAYROLL_ROUTES.RUN_BY_ID as never, { params: { id } } as never)
|
||||
}
|
||||
|
||||
async getById(id: string) {
|
||||
return this.show(id)
|
||||
}
|
||||
|
||||
async create(payload: { period_start: string; period_end: string; reference?: string; note?: string }) {
|
||||
return this.post(PAYROLL_ROUTES.RUNS_INDEX as never, payload as never)
|
||||
}
|
||||
|
||||
async destroy(id: string) {
|
||||
return this.delete(PAYROLL_ROUTES.RUN_BY_ID as never, { params: { id } } as never)
|
||||
}
|
||||
|
||||
async regenerate(id: string) {
|
||||
return this.post(PAYROLL_ROUTES.REGENERATE as never, {} as never, { params: { id } } as never)
|
||||
}
|
||||
|
||||
async finalize(id: string) {
|
||||
return this.post(PAYROLL_ROUTES.FINALIZE as never, {} as never, { params: { id } } as never)
|
||||
}
|
||||
|
||||
async markPaid(id: string) {
|
||||
return this.post(PAYROLL_ROUTES.MARK_PAID as never, {} as never, { params: { id } } as never)
|
||||
}
|
||||
|
||||
async updateEntry(runId: string, entryId: string, payload: {
|
||||
hours_worked?: number
|
||||
overtime_hours?: number
|
||||
base_salary?: number
|
||||
commission_amount?: number
|
||||
allowances?: number
|
||||
deductions?: number
|
||||
note?: string
|
||||
}) {
|
||||
return this.put(PAYROLL_ROUTES.ENTRY_BY_ID as never, payload as never, { params: { run: runId, entry: entryId } } as never)
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user