Compare commits
No commits in common. "dev" and "master" have entirely different histories.
Binary file not shown.
Binary file not shown.
76
.github/skills/api-enums-reference/SKILL.md
vendored
76
.github/skills/api-enums-reference/SKILL.md
vendored
@ -1,76 +0,0 @@
|
|||||||
---
|
|
||||||
name: api-enums-reference
|
|
||||||
description: "Use the central API enums file as the source of truth for enum values in this project. Use when: adding enum fields, updating enum options, creating form selects, typing status/discount/rate fields, syncing backend enum changes, or avoiding duplicated hardcoded enum literals."
|
|
||||||
---
|
|
||||||
|
|
||||||
# API Enums Reference
|
|
||||||
|
|
||||||
Use this skill whenever work touches enum-like fields in API clients, schemas, forms, table filters, or page logic.
|
|
||||||
|
|
||||||
## Source of Truth
|
|
||||||
|
|
||||||
All shared enum values and enum union types must come from:
|
|
||||||
|
|
||||||
- packages/api/src/contracts/enums.ts
|
|
||||||
|
|
||||||
Do not recreate enum arrays inline when an equivalent enum already exists in this file.
|
|
||||||
|
|
||||||
## Rules
|
|
||||||
|
|
||||||
1. Reuse before creating.
|
|
||||||
Search and import from `@garage/api` exports (or local contracts path inside packages/api) before adding new literals.
|
|
||||||
|
|
||||||
2. Keep runtime and type together.
|
|
||||||
For every enum, keep this pattern in `enums.ts`:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
export const ExampleStatus = ['a', 'b'] as const;
|
|
||||||
export type ExampleStatus = (typeof ExampleStatus)[number];
|
|
||||||
```
|
|
||||||
|
|
||||||
3. Preserve backend values exactly.
|
|
||||||
Enum string values are case- and space-sensitive; keep exact spelling from backend migrations/spec.
|
|
||||||
|
|
||||||
4. Avoid duplicate synonyms.
|
|
||||||
If two domains share the same canonical values, prefer reusing an existing enum unless domain separation is intentional.
|
|
||||||
|
|
||||||
5. Update centrally first.
|
|
||||||
When backend enum options change, update `packages/api/src/contracts/enums.ts` first, then update consuming UI/API code.
|
|
||||||
|
|
||||||
6. Prefer imports in forms and schemas.
|
|
||||||
Use central enums for select options and for typed payload/status fields instead of hardcoded string unions.
|
|
||||||
|
|
||||||
## Workflow
|
|
||||||
|
|
||||||
1. Identify the enum field and backend values.
|
|
||||||
2. Check `packages/api/src/contracts/enums.ts` for an existing enum.
|
|
||||||
3. If found, import and use it.
|
|
||||||
4. If missing, add a new const+type pair in `enums.ts`.
|
|
||||||
5. Update consumers to reference the central enum.
|
|
||||||
6. Verify there are no duplicated literal arrays for the same field.
|
|
||||||
|
|
||||||
## Examples
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { InvoiceStatus, type InvoiceStatus as InvoiceStatusType } from '@garage/api'
|
|
||||||
|
|
||||||
const statusOptions = InvoiceStatus
|
|
||||||
|
|
||||||
type Payload = {
|
|
||||||
status: InvoiceStatusType
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { DiscountType } from '@garage/api'
|
|
||||||
|
|
||||||
const discountOptions = DiscountType.map((value) => ({
|
|
||||||
label: value,
|
|
||||||
value,
|
|
||||||
}))
|
|
||||||
```
|
|
||||||
|
|
||||||
## Notes
|
|
||||||
|
|
||||||
- If a module needs a presentation-specific label, map from the central enum value instead of changing raw enum literals.
|
|
||||||
- If backend adds/removes values, keep API and dashboard aligned in the same change set.
|
|
||||||
304
.github/skills/crud-dialog/SKILL.md
vendored
304
.github/skills/crud-dialog/SKILL.md
vendored
@ -1,304 +0,0 @@
|
|||||||
---
|
|
||||||
name: crud-dialog
|
|
||||||
description: "Create CRUD dialogs for managing lookup/reference resources inline (inside a dialog) rather than a full page. Use when: adding a config/manage button next to a select field, building an inline CRUD for a simple lookup entity (e.g. insurance types, payment terms, categories), embedding list+create+edit+delete inside a modal. Uses the shared CrudDialog component and useCrudDialog hook."
|
|
||||||
---
|
|
||||||
|
|
||||||
# CRUD Dialog Generator
|
|
||||||
|
|
||||||
Create fully functional CRUD dialogs that embed list + create + edit + delete inside a modal dialog. This is the in-dialog counterpart of the page-level `ResourcePage` pattern. Ideal for managing simple lookup/reference entities without navigating away from the current form.
|
|
||||||
|
|
||||||
## When to Use
|
|
||||||
|
|
||||||
- User wants a config/settings button next to a select field to manage its options
|
|
||||||
- User wants to manage a simple lookup entity (e.g. insurance types, categories, tags) inline
|
|
||||||
- The resource is simple enough that a full page is overkill
|
|
||||||
- User says "CRUD in a dialog", "manage inside a modal", "config button", "inline CRUD"
|
|
||||||
|
|
||||||
## When NOT to Use
|
|
||||||
|
|
||||||
- The resource is complex with many fields, relations, or tabs → use **crud-page** skill instead
|
|
||||||
- The resource already has a dedicated page → link to it instead
|
|
||||||
- Only creation is needed (no listing/editing) → use `RhfAsyncSelectField` with `createForm` prop instead
|
|
||||||
|
|
||||||
## Architecture
|
|
||||||
|
|
||||||
The CRUD Dialog system has two layers:
|
|
||||||
|
|
||||||
| Layer | File | Purpose |
|
|
||||||
|-------|------|---------|
|
|
||||||
| **Hook** | `shared/components/crud-dialog/use-crud-dialog.ts` | Local state for pagination, sorting, form open/close, delete confirmation. No URL pollution. |
|
|
||||||
| **Component** | `shared/components/crud-dialog/crud-dialog.tsx` | Renders trigger button → Dialog with DataTable (list view) ↔ Form (create/edit view). Uses `useCrudDialog` internally. |
|
|
||||||
|
|
||||||
### Key Differences from ResourcePage
|
|
||||||
|
|
||||||
| Aspect | ResourcePage | CrudDialog |
|
|
||||||
|--------|-------------|------------|
|
|
||||||
| Renders in | Full page | Dialog modal |
|
|
||||||
| Pagination state | URL query params (`nuqs`) | Local `useState` (no URL pollution) |
|
|
||||||
| Form rendering | `FormDialog` component | Inline view swap (list ↔ form) |
|
|
||||||
| Trigger | Page navigation | Button click (settings icon by default) |
|
|
||||||
| Use case | Primary resource management | Lookup/reference entity management |
|
|
||||||
|
|
||||||
## Procedure
|
|
||||||
|
|
||||||
### Step 1: Ensure API Client Exists
|
|
||||||
|
|
||||||
The resource needs a client with `list`, `create`, `update`, `destroy` methods. Check `packages/api/src/clients/`. If missing, create one following the **crud-page** skill's Step 2.
|
|
||||||
|
|
||||||
### Step 2: Create the Resource Form
|
|
||||||
|
|
||||||
Create a simple form component for the resource. This is a lightweight form (no `useResourceForm` needed for simple entities).
|
|
||||||
|
|
||||||
**File**: `apps/dashboard/modules/<parent-module>/<resource>-form.tsx`
|
|
||||||
|
|
||||||
**Template**:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
"use client"
|
|
||||||
|
|
||||||
import { z } from "zod"
|
|
||||||
import { useForm } from "react-hook-form"
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod"
|
|
||||||
import { Plus, Save } from "lucide-react"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
import { FieldGroup } from "@/shared/components/ui/field"
|
|
||||||
import { Rhform, RhfTextField } from "@/shared/components/form"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { useEffect } from "react"
|
|
||||||
|
|
||||||
const schema = z.object({
|
|
||||||
name: z.string().min(1, "Name is required"),
|
|
||||||
// Add more fields as needed
|
|
||||||
})
|
|
||||||
|
|
||||||
type FormValues = z.infer<typeof schema>
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
resourceId?: string | null
|
|
||||||
initialData?: any
|
|
||||||
onSuccess?: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export function <Resource>Form({ resourceId, initialData, onSuccess }: Props) {
|
|
||||||
const api = useAuthApi()
|
|
||||||
const isEditing = !!resourceId
|
|
||||||
|
|
||||||
const form = useForm<FormValues>({
|
|
||||||
resolver: zodResolver(schema),
|
|
||||||
defaultValues: { name: "" },
|
|
||||||
})
|
|
||||||
|
|
||||||
// Pre-fill when editing
|
|
||||||
useEffect(() => {
|
|
||||||
if (initialData) {
|
|
||||||
const d = initialData?.data ?? initialData
|
|
||||||
form.reset({ name: d.name ?? "" })
|
|
||||||
}
|
|
||||||
}, [initialData, form])
|
|
||||||
|
|
||||||
const handleSubmit = async (values: FormValues) => {
|
|
||||||
try {
|
|
||||||
const promise = isEditing
|
|
||||||
? api.<resource>.update(resourceId!, { title: values.name } as any)
|
|
||||||
: api.<resource>.create({ title: values.name } as any)
|
|
||||||
|
|
||||||
toast.promise(promise, {
|
|
||||||
loading: isEditing ? "Updating..." : "Creating...",
|
|
||||||
success: isEditing ? "Updated successfully" : "Created successfully",
|
|
||||||
error: isEditing ? "Failed to update" : "Failed to create",
|
|
||||||
})
|
|
||||||
|
|
||||||
await promise
|
|
||||||
form.reset()
|
|
||||||
onSuccess?.()
|
|
||||||
} catch {
|
|
||||||
// toast already shown
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Rhform form={form} onSubmit={handleSubmit}>
|
|
||||||
<FieldGroup>
|
|
||||||
<RhfTextField name="name" label="Name" placeholder="e.g. My Item" required />
|
|
||||||
<Button type="submit" disabled={form.formState.isSubmitting}>
|
|
||||||
{isEditing ? <Save className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
|
|
||||||
{form.formState.isSubmitting
|
|
||||||
? (isEditing ? "Updating..." : "Creating...")
|
|
||||||
: (isEditing ? "Update" : "Create")}
|
|
||||||
</Button>
|
|
||||||
</FieldGroup>
|
|
||||||
</Rhform>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 3: Create the CrudDialog Instance
|
|
||||||
|
|
||||||
Wire the form into a `CrudDialog` component.
|
|
||||||
|
|
||||||
**File**: `apps/dashboard/modules/<parent-module>/<resource>-crud-dialog.tsx`
|
|
||||||
|
|
||||||
**Template**:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
"use client"
|
|
||||||
|
|
||||||
import { CrudDialog } from "@/shared/components/crud-dialog"
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { <RESOURCE>_ROUTES } from "@garage/api"
|
|
||||||
import { <Resource>Form } from "./<resource>-form"
|
|
||||||
|
|
||||||
export function <Resource>CrudDialog() {
|
|
||||||
const api = useAuthApi()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CrudDialog
|
|
||||||
title="<Resource Label>"
|
|
||||||
queryKey={[<RESOURCE>_ROUTES.INDEX]}
|
|
||||||
getClient={() => api.<resource>}
|
|
||||||
resourceLabel="<resource label>"
|
|
||||||
columns={() => [
|
|
||||||
{
|
|
||||||
accessorKey: "name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
|
|
||||||
},
|
|
||||||
// Add more columns as needed
|
|
||||||
]}
|
|
||||||
renderForm={({ resourceId, initialData, onSuccess }) => (
|
|
||||||
<<Resource>Form
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={initialData}
|
|
||||||
onSuccess={onSuccess}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 4: Wire into the Parent Form
|
|
||||||
|
|
||||||
Place the CrudDialog trigger next to the corresponding select field. The pattern is to add a custom label row with the config button:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { <Resource>CrudDialog } from "./<resource>-crud-dialog"
|
|
||||||
|
|
||||||
// Inside the form JSX:
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center justify-between mb-1">
|
|
||||||
<span className="text-sm font-medium"><Field Label></span>
|
|
||||||
<<Resource>CrudDialog />
|
|
||||||
</div>
|
|
||||||
<RhfAsyncSelectField
|
|
||||||
name="<field_name>"
|
|
||||||
label=""
|
|
||||||
placeholder="Select..."
|
|
||||||
queryKey={[<RESOURCE>_ROUTES.INDEX]}
|
|
||||||
listFn={() => api.<resource>.list()}
|
|
||||||
mapOption={mapLookupOption}
|
|
||||||
{...STORE_OBJECT}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
**Key**: Set `label=""` on the `RhfAsyncSelectField` since the label is rendered manually above with the config button.
|
|
||||||
|
|
||||||
## CrudDialog Props Reference
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
type CrudDialogProps<TClient> = {
|
|
||||||
/** Dialog title shown in the header */
|
|
||||||
title: string
|
|
||||||
/** React Query cache key */
|
|
||||||
queryKey: string[]
|
|
||||||
/** Function returning the API client instance */
|
|
||||||
getClient: () => TClient
|
|
||||||
/** Human-readable name for toast messages (e.g. "insurance type") */
|
|
||||||
resourceLabel?: string
|
|
||||||
/** Table columns definition */
|
|
||||||
columns: (helpers: {
|
|
||||||
openEdit: (row: any) => void
|
|
||||||
handleDelete: (row: any) => Promise<void>
|
|
||||||
}) => ColumnDef<any>[]
|
|
||||||
/** Render create/edit form */
|
|
||||||
renderForm: (props: {
|
|
||||||
resourceId: string | null
|
|
||||||
initialData: any
|
|
||||||
onSuccess: () => void
|
|
||||||
}) => React.ReactNode
|
|
||||||
/** Optional custom trigger element (defaults to Settings2 icon) */
|
|
||||||
trigger?: React.ReactNode
|
|
||||||
/** CSS class for the default trigger button */
|
|
||||||
triggerClassName?: string
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## useCrudDialog Hook API
|
|
||||||
|
|
||||||
For advanced use cases where you need more control, use the hook directly:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
const crud = useCrudDialog({
|
|
||||||
queryKey: [ROUTES.INDEX],
|
|
||||||
getClient: () => api.resource,
|
|
||||||
resourceLabel: "item",
|
|
||||||
})
|
|
||||||
|
|
||||||
// Returns:
|
|
||||||
crud.items // Current page data
|
|
||||||
crud.isLoading // Query loading state
|
|
||||||
crud.pagination // { page, pageSize, pageCount, total }
|
|
||||||
crud.sorting // SortingState
|
|
||||||
crud.handleChange // DataViewChangeEvent handler
|
|
||||||
crud.isFormOpen // Whether form view is active
|
|
||||||
crud.editingId // ID being edited (null for create)
|
|
||||||
crud.editingItem // Full item data being edited
|
|
||||||
crud.openCreate() // Switch to create form
|
|
||||||
crud.openEdit(row) // Switch to edit form
|
|
||||||
crud.closeForm() // Back to list view
|
|
||||||
crud.handleDelete(row) // Confirm + delete
|
|
||||||
crud.handleFormSuccess() // Invalidate + close form
|
|
||||||
crud.invalidateQuery() // Refresh list data
|
|
||||||
```
|
|
||||||
|
|
||||||
## Real Example: Insurance Type
|
|
||||||
|
|
||||||
See the implementation in `apps/dashboard/modules/job-cards/`:
|
|
||||||
|
|
||||||
- [insurance-type-form.tsx](../../apps/dashboard/modules/job-cards/insurance-type-form.tsx) — Simple form with one "name" field
|
|
||||||
- [insurance-type-crud-dialog.tsx](../../apps/dashboard/modules/job-cards/insurance-type-crud-dialog.tsx) — CrudDialog wiring
|
|
||||||
- [job-card-form.tsx](../../apps/dashboard/modules/job-cards/job-card-form.tsx) — Usage next to the insurance type select field
|
|
||||||
|
|
||||||
## Naming Conventions
|
|
||||||
|
|
||||||
| Item | Pattern | Example |
|
|
||||||
|------|---------|---------|
|
|
||||||
| Form file | `modules/<parent>/<resource>-form.tsx` | `job-cards/insurance-type-form.tsx` |
|
|
||||||
| CrudDialog file | `modules/<parent>/<resource>-crud-dialog.tsx` | `job-cards/insurance-type-crud-dialog.tsx` |
|
|
||||||
| Form component | `<Resource>Form` | `InsuranceTypeForm` |
|
|
||||||
| CrudDialog component | `<Resource>CrudDialog` | `InsuranceTypeCrudDialog` |
|
|
||||||
|
|
||||||
## Imports Cheat Sheet
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// CrudDialog component
|
|
||||||
import { CrudDialog } from "@/shared/components/crud-dialog"
|
|
||||||
|
|
||||||
// Table column header
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
|
|
||||||
// API
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { <RESOURCE>_ROUTES } from "@garage/api"
|
|
||||||
|
|
||||||
// Form components (for the resource form)
|
|
||||||
import { Rhform, RhfTextField } from "@/shared/components/form"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
import { FieldGroup } from "@/shared/components/ui/field"
|
|
||||||
import { z } from "zod"
|
|
||||||
import { useForm } from "react-hook-form"
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
```
|
|
||||||
216
.github/skills/crud-page/SKILL.md
vendored
216
.github/skills/crud-page/SKILL.md
vendored
@ -1,216 +0,0 @@
|
|||||||
---
|
|
||||||
name: crud-page
|
|
||||||
description: "Create CRUD resource pages, forms, schemas, and API clients for the carage-erp dashboard. Use when: adding a new resource page, creating a CRUD feature, building a list/create/edit/delete page, scaffolding a new module, adding a new entity to the dashboard. Covers API client, Zod schema, form component, and page component creation."
|
|
||||||
---
|
|
||||||
|
|
||||||
# CRUD Page Generator
|
|
||||||
|
|
||||||
Create fully functional CRUD resource pages following the established codebase patterns. This skill covers the full stack: API client → Zod schema → form component → page component.
|
|
||||||
|
|
||||||
## When to Use
|
|
||||||
|
|
||||||
- User asks to create a new resource/entity page (e.g. "create a vendors page", "add invoices CRUD")
|
|
||||||
- User asks to add list/create/edit/delete functionality for a domain entity
|
|
||||||
- User asks to scaffold a new module or feature page
|
|
||||||
- User wants to extend the dashboard with a new data management page
|
|
||||||
|
|
||||||
## Decision: ResourcePage vs Manual DataTable
|
|
||||||
|
|
||||||
**Use `ResourcePage` (preferred)** when the resource needs full CRUD (list + create + edit + delete in a dialog). This is the standard pattern.
|
|
||||||
|
|
||||||
**Use manual `DataTable` + `useDataTableQuery`** only when the page is read-only or has highly custom layout needs.
|
|
||||||
|
|
||||||
Always prefer `ResourcePage` unless the user explicitly needs something different.
|
|
||||||
|
|
||||||
## Procedure
|
|
||||||
|
|
||||||
Follow these steps **in order**. Each step produces one file. Check the [reference files](./references/) for complete templates and patterns.
|
|
||||||
|
|
||||||
### Step 1: Check if API Client Exists
|
|
||||||
|
|
||||||
Look in `packages/api/src/clients/` for an existing client. Also check `packages/api/src/clients/index.ts` for all registered clients, and `packages/api/src/api.ts` for the factory.
|
|
||||||
|
|
||||||
- If client exists → skip to Step 3
|
|
||||||
- If client doesn't exist → continue to Step 2
|
|
||||||
|
|
||||||
### Step 2: Create API Client
|
|
||||||
|
|
||||||
Read the [API Client Reference](./references/api-client.md) for patterns and template.
|
|
||||||
|
|
||||||
Create the domain client file at `packages/api/src/clients/<resource>.ts`:
|
|
||||||
|
|
||||||
1. Define `RESOURCE_ROUTES` const with `INDEX` and `BY_ID` routes (and any extras)
|
|
||||||
2. Create a class extending `CrudClient` with the route types
|
|
||||||
3. Add any domain-specific methods beyond standard CRUD
|
|
||||||
4. Register in `packages/api/src/clients/index.ts` (export class + routes)
|
|
||||||
5. Register in `packages/api/src/api.ts` (import + add to `createApi()`)
|
|
||||||
|
|
||||||
**Route pattern**: `"/api/<plural-resource>"` for INDEX, `"/api/<plural-resource>/{id}"` for BY_ID.
|
|
||||||
|
|
||||||
**IMPORTANT**: Routes must exist in the OpenAPI schema (`packages/api/types/index.ts`) for type safety. If the route doesn't exist in the schema yet, inform the user and ask if they want to proceed with `any` types or wait for schema update.
|
|
||||||
|
|
||||||
### Step 3: Create Zod Schema
|
|
||||||
|
|
||||||
Read the [Schema Reference](./references/schema.md) for patterns and template.
|
|
||||||
|
|
||||||
Create `apps/dashboard/modules/<feature>/<feature>.schema.ts`:
|
|
||||||
|
|
||||||
1. Define `relationFieldSchema` (reuse if already exported) for foreign-key fields
|
|
||||||
2. Build the Zod object schema with all form fields
|
|
||||||
3. Use `.optional()` for non-required fields, `.min(1, "...")` for required strings
|
|
||||||
4. Use `z.union([z.string().email(...), z.literal("")]).optional()` for optional emails
|
|
||||||
5. Export the schema, the inferred type, and `relationFieldSchema` if new
|
|
||||||
|
|
||||||
### Step 4: Create Form Component
|
|
||||||
|
|
||||||
Read the [Form Reference](./references/form.md) for the complete template.
|
|
||||||
|
|
||||||
Create `apps/dashboard/modules/<feature>/<feature>-form.tsx`:
|
|
||||||
|
|
||||||
1. Define default values matching the schema
|
|
||||||
2. Create `mapToFormValues(data)` — transforms API shape → form shape using `toRelation()`
|
|
||||||
3. Create `mapFormToPayload(values)` — transforms form shape → API shape using `toId()`
|
|
||||||
4. Use `useResourceForm()` for form initialization + edit pre-filling
|
|
||||||
5. Use `useFormMutation()` for submit with automatic validation error mapping
|
|
||||||
6. Render with `Rhform` + `RhfTextField` / `RhfSelectField` / `RhfAsyncSelectField` etc.
|
|
||||||
7. Include error alert, submit button with loading/edit states
|
|
||||||
|
|
||||||
### Step 5: Create Page Component
|
|
||||||
|
|
||||||
Read the [Page Reference](./references/page.md) for the complete template.
|
|
||||||
|
|
||||||
Create `apps/dashboard/app/(authenticated)/<section>/<feature>/page.tsx`:
|
|
||||||
|
|
||||||
1. Add `"use client"` directive
|
|
||||||
2. Import `ResourcePage`, `ColumnHeader`, the form, client type, and routes
|
|
||||||
3. Configure: `pageTitle`, `title`, `routeKey`, `getClient`, `columns`, `renderForm`
|
|
||||||
4. Use `columns` callback to receive `actionsColumn` helper
|
|
||||||
5. Add sortable column headers with `<ColumnHeader>`
|
|
||||||
6. Include `actionsColumn()` as last column
|
|
||||||
|
|
||||||
### Step 6: Verify
|
|
||||||
|
|
||||||
- Ensure all imports resolve
|
|
||||||
- Check that route constants match OpenAPI paths
|
|
||||||
- Confirm the client is registered in both `clients/index.ts` and `api.ts`
|
|
||||||
|
|
||||||
## Key Conventions
|
|
||||||
|
|
||||||
### Naming
|
|
||||||
|
|
||||||
| Item | Pattern | Example |
|
|
||||||
|---|---|---|
|
|
||||||
| Client file | `packages/api/src/clients/<kebab-resource>.ts` | `job-cards.ts` |
|
|
||||||
| Client class | `<PascalResource>Client` | `JobCardsClient` |
|
|
||||||
| Routes const | `<UPPER_SNAKE>_ROUTES` | `JOB_CARD_ROUTES` |
|
|
||||||
| Schema file | `modules/<feature>/<feature>.schema.ts` | `job-card.schema.ts` |
|
|
||||||
| Form file | `modules/<feature>/<feature>-form.tsx` | `job-card-form.tsx` |
|
|
||||||
| Page file | `app/(authenticated)/<section>/<feature>/page.tsx` | `sales/job-cards/page.tsx` |
|
|
||||||
| Zod schema | `<camelFeature>FormSchema` | `jobCardFormSchema` |
|
|
||||||
| Form values type | `<PascalFeature>FormValues` | `JobCardFormValues` |
|
|
||||||
| Form component | `<PascalFeature>Form` | `JobCardForm` |
|
|
||||||
| Page component | `<PascalFeature>Page` (default export) | `JobCardsPage` |
|
|
||||||
|
|
||||||
### Relation Fields — Choosing the Right Component
|
|
||||||
|
|
||||||
**Two patterns exist. Pick the right one before building any relational field.**
|
|
||||||
|
|
||||||
#### Simple FK → `RhfAsyncSelectField`
|
|
||||||
|
|
||||||
Use for single-record foreign keys within the same domain or to a simple lookup/reference entity.
|
|
||||||
|
|
||||||
Examples: invoice → customer, bill → vendor, part → category, service → unit type, job card → vehicle, PO → department, any `*_type` or `*_terms` relation.
|
|
||||||
|
|
||||||
- Stored in form as `{ value: string, label: string } | null`
|
|
||||||
- Use `toRelation(id, name)` to convert API data → form value
|
|
||||||
- Use `toId(relation)` to convert form value → API payload
|
|
||||||
- Schema uses `relationFieldSchema = z.object({ value: z.string(), label: z.string() }).nullable()`
|
|
||||||
|
|
||||||
#### Cross-Domain Line Items → `RhfResourceField` (resource-selector skill)
|
|
||||||
|
|
||||||
Use when the relationship involves a **join table with extra fields** (quantity, rate, description) or the related items are from a **fully separate domain with its own CRUD page** and multiple records can be linked.
|
|
||||||
|
|
||||||
Examples: adding parts to a bill, linking services to an invoice, attaching expense items to a PO.
|
|
||||||
|
|
||||||
**→ Read the `resource-selector` SKILL before implementing these fields.**
|
|
||||||
|
|
||||||
Ready-to-use selector fields (import directly — do not re-implement):
|
|
||||||
|
|
||||||
| Component | Import path | For |
|
|
||||||
|---|---|---|
|
|
||||||
| `PartsSelectorField` | `@/modules/parts/parts-selector-field` | Parts line items |
|
|
||||||
| `ServicesSelectorField` | `@/modules/services/services-selector-field` | Service line items |
|
|
||||||
| `ExpenseItemsSelectorField` | `@/modules/expense-items/expense-items-selector-field` | Expense line items |
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// Schema: use an array sub-schema with part_id / service_id / expense_id
|
|
||||||
part_items: z.array(z.object({ part_id: z.number(), title: z.string(), quantity: z.number(), rate: z.number(), description: z.string().optional() })).optional()
|
|
||||||
|
|
||||||
// Form: render inside <FieldGroup>
|
|
||||||
<PartsSelectorField<MyFormValues, "part_items"> name="part_items" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Async Select Pattern
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
const mapLookupOption = (item: any) => ({ value: String(item.id), label: item.name })
|
|
||||||
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
|
|
||||||
|
|
||||||
<RhfAsyncSelectField
|
|
||||||
name="field_name"
|
|
||||||
label="Field Label"
|
|
||||||
placeholder="Select..."
|
|
||||||
queryKey={["query-key"]}
|
|
||||||
listFn={() => api.resource.listSomething()}
|
|
||||||
mapOption={mapLookupOption}
|
|
||||||
{...STORE_OBJECT}
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Available Form Field Components
|
|
||||||
|
|
||||||
| Component | Use For |
|
|
||||||
|---|---|
|
|
||||||
| `RhfTextField` | Text, email, phone, URL inputs |
|
|
||||||
| `RhfTextareaField` | Multi-line text |
|
|
||||||
| `RhfCheckboxField` | Boolean toggles |
|
|
||||||
| `RhfSelectField` | Static option dropdowns |
|
|
||||||
| `RhfAsyncSelectField` | Server-fetched single FK combobox (same-domain relation) |
|
|
||||||
| `RhfAsyncMultiSelectField` | Server-fetched multi-select combobox |
|
|
||||||
| `RhfResourceField` | Cross-domain multi-select with join table extra fields (parts, services, expenses) — see resource-selector skill |
|
|
||||||
| `RhfDateField` | Date picker — see date-time-pickers skill |
|
|
||||||
| `RhfTimeField` | Time picker — see date-time-pickers skill |
|
|
||||||
|
|
||||||
### Imports Cheat Sheet
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// Page
|
|
||||||
import { ResourcePage } from '@/shared/data-view/resource-page'
|
|
||||||
import { ColumnHeader } from '@/shared/data-view/table-view'
|
|
||||||
import type { <Resource>Client } from '@garage/api'
|
|
||||||
import { <RESOURCE>_ROUTES } from '@garage/api'
|
|
||||||
|
|
||||||
// Form
|
|
||||||
import { Rhform, RhfTextField, RhfSelectField, RhfAsyncSelectField } from "@/shared/components/form"
|
|
||||||
import { useResourceForm } from "@/shared/hooks/use-resource-form"
|
|
||||||
import { useFormMutation } from "@/shared/hooks/use-form-mutation"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { toRelation, toId } from "@/shared/lib/utils"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
|
|
||||||
import { FieldGroup } from "@/shared/components/ui/field"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
|
|
||||||
// Schema
|
|
||||||
import { z } from "zod"
|
|
||||||
```
|
|
||||||
|
|
||||||
## Extending the CRUD Codebase
|
|
||||||
|
|
||||||
If a feature requires functionality not covered by existing utilities (e.g. inline editing, tab-based forms, file uploads, nested resources), you are encouraged to extend the shared infrastructure:
|
|
||||||
|
|
||||||
- Add new form field components in `shared/components/form/controls/` and `shared/components/form/fields/`
|
|
||||||
- Add new hooks in `shared/hooks/`
|
|
||||||
- Extend `ResourcePage` props if needed
|
|
||||||
- Add new column helper factories in `shared/data-view/table-view/`
|
|
||||||
- Keep extensions generic and reusable — follow the same patterns as existing code
|
|
||||||
140
.github/skills/crud-page/references/api-client.md
vendored
140
.github/skills/crud-page/references/api-client.md
vendored
@ -1,140 +0,0 @@
|
|||||||
# API Client Reference
|
|
||||||
|
|
||||||
## File Location
|
|
||||||
|
|
||||||
`packages/api/src/clients/<kebab-resource>.ts`
|
|
||||||
|
|
||||||
## Standard CrudClient Pattern (Preferred)
|
|
||||||
|
|
||||||
Use this when the resource has standard CRUD endpoints that exist in the OpenAPI schema.
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { CrudClient } from "../infra/crud-client"
|
|
||||||
import type { ApiClientOptions } from "../infra/client"
|
|
||||||
import type { ApiPath, ApiRequestBody } from "../infra/types"
|
|
||||||
|
|
||||||
export const <RESOURCE>_ROUTES = {
|
|
||||||
INDEX: "/api/<plural-resource>",
|
|
||||||
BY_ID: "/api/<plural-resource>/{id}",
|
|
||||||
// Add extra routes as needed:
|
|
||||||
// EXPORT: "/api/<plural-resource>/export",
|
|
||||||
// IMPORT: "/api/<plural-resource>/import",
|
|
||||||
// RELATED: "/api/<related-resource>",
|
|
||||||
} as const satisfies Record<string, ApiPath>
|
|
||||||
|
|
||||||
export class <Resource>Client extends CrudClient<
|
|
||||||
typeof <RESOURCE>_ROUTES.INDEX,
|
|
||||||
typeof <RESOURCE>_ROUTES.BY_ID
|
|
||||||
> {
|
|
||||||
constructor(baseUrl?: string, defaultOptions?: ApiClientOptions) {
|
|
||||||
super(baseUrl, defaultOptions, <RESOURCE>_ROUTES.INDEX, <RESOURCE>_ROUTES.BY_ID)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add domain-specific methods:
|
|
||||||
// async listCategories() {
|
|
||||||
// return this.get(<RESOURCE>_ROUTES.RELATED)
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// async export() {
|
|
||||||
// return this.get(<RESOURCE>_ROUTES.EXPORT)
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### CrudClient Gives You For Free
|
|
||||||
|
|
||||||
| Method | HTTP | Description |
|
|
||||||
|---|---|---|
|
|
||||||
| `list(query?)` | `GET /api/<resource>` | Paginated list with query params |
|
|
||||||
| `show(id)` | `GET /api/<resource>/{id}` | Single item fetch |
|
|
||||||
| `create(payload)` | `POST /api/<resource>` | Create new item |
|
|
||||||
| `update(id, payload)` | `PUT /api/<resource>/{id}` | Update existing item |
|
|
||||||
| `destroy(id)` | `DELETE /api/<resource>/{id}` | Delete item |
|
|
||||||
|
|
||||||
## Minimal CrudClient (No Custom Methods)
|
|
||||||
|
|
||||||
For simple resources with only standard CRUD:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { CrudClient } from "../infra/crud-client"
|
|
||||||
import type { ApiClientOptions } from "../infra/client"
|
|
||||||
import type { ApiPath } from "../infra/types"
|
|
||||||
|
|
||||||
export const <RESOURCE>_ROUTES = {
|
|
||||||
INDEX: "/api/<plural-resource>",
|
|
||||||
BY_ID: "/api/<plural-resource>/{id}",
|
|
||||||
} as const satisfies Record<string, ApiPath>
|
|
||||||
|
|
||||||
export class <Resource>Client extends CrudClient<
|
|
||||||
typeof <RESOURCE>_ROUTES.INDEX,
|
|
||||||
typeof <RESOURCE>_ROUTES.BY_ID
|
|
||||||
> {
|
|
||||||
constructor(baseUrl?: string, defaultOptions?: ApiClientOptions) {
|
|
||||||
super(baseUrl, defaultOptions, <RESOURCE>_ROUTES.INDEX, <RESOURCE>_ROUTES.BY_ID)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Registration
|
|
||||||
|
|
||||||
After creating the client, register it in two files:
|
|
||||||
|
|
||||||
### 1. `packages/api/src/clients/index.ts`
|
|
||||||
|
|
||||||
```ts
|
|
||||||
export { <Resource>Client, <RESOURCE>_ROUTES } from "./<kebab-resource>"
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. `packages/api/src/api.ts`
|
|
||||||
|
|
||||||
Add the import at the top:
|
|
||||||
```ts
|
|
||||||
import { <Resource>Client } from "./clients/<kebab-resource>"
|
|
||||||
```
|
|
||||||
|
|
||||||
Add to the `createApi()` return object:
|
|
||||||
```ts
|
|
||||||
export function createApi(options?: ApiClientOptions) {
|
|
||||||
return {
|
|
||||||
// ...existing clients...
|
|
||||||
<camelResource>: new <Resource>Client(undefined, options),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Real Example: CustomersClient
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { CrudClient } from "../infra/crud-client"
|
|
||||||
import { ApiClient, type ApiClientOptions } from "../infra/client"
|
|
||||||
import type { ApiPath, ApiRequestBody } from "../infra/types"
|
|
||||||
|
|
||||||
export const CUSTOMER_ROUTES = {
|
|
||||||
INDEX: "/api/customers",
|
|
||||||
BY_ID: "/api/customers/{id}",
|
|
||||||
EXPORT: "/api/customers/export",
|
|
||||||
IMPORT: "/api/customers/import",
|
|
||||||
CUSTOMER_TYPES: "/api/customer-types",
|
|
||||||
} as const satisfies Record<string, ApiPath>
|
|
||||||
|
|
||||||
export class CustomersClient extends CrudClient<
|
|
||||||
typeof CUSTOMER_ROUTES.INDEX,
|
|
||||||
typeof CUSTOMER_ROUTES.BY_ID
|
|
||||||
> {
|
|
||||||
constructor(baseUrl?: string, defaultOptions?: ApiClientOptions) {
|
|
||||||
super(baseUrl, defaultOptions, CUSTOMER_ROUTES.INDEX, CUSTOMER_ROUTES.BY_ID)
|
|
||||||
}
|
|
||||||
|
|
||||||
async listCustomerTypes() {
|
|
||||||
return this.get(CUSTOMER_ROUTES.CUSTOMER_TYPES)
|
|
||||||
}
|
|
||||||
|
|
||||||
async export() {
|
|
||||||
return this.get(CUSTOMER_ROUTES.EXPORT)
|
|
||||||
}
|
|
||||||
|
|
||||||
async import(payload: ApiRequestBody<typeof CUSTOMER_ROUTES.IMPORT, "post">) {
|
|
||||||
return this.post(CUSTOMER_ROUTES.IMPORT, payload)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
241
.github/skills/crud-page/references/form.md
vendored
241
.github/skills/crud-page/references/form.md
vendored
@ -1,241 +0,0 @@
|
|||||||
# Form Reference
|
|
||||||
|
|
||||||
## File Location
|
|
||||||
|
|
||||||
`apps/dashboard/modules/<feature>/<feature>-form.tsx`
|
|
||||||
|
|
||||||
## Complete Template
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
"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,
|
|
||||||
RhfAsyncSelectField,
|
|
||||||
// RhfTextareaField,
|
|
||||||
// RhfCheckboxField,
|
|
||||||
// RhfAsyncMultiSelectField,
|
|
||||||
} from "@/shared/components/form"
|
|
||||||
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 {
|
|
||||||
<feature>FormSchema,
|
|
||||||
type <Feature>FormValues,
|
|
||||||
} from "./<feature>.schema"
|
|
||||||
import { <RESOURCE>_ROUTES } from "@garage/api"
|
|
||||||
|
|
||||||
// ── Constants ──
|
|
||||||
|
|
||||||
// ALWAYS derive select options from API enums imported from "@garage/api".
|
|
||||||
// NEVER hardcode enum values inline — they must stay in sync with the backend.
|
|
||||||
//
|
|
||||||
// Pattern: import the enum array, then .map() to produce { value, label } pairs.
|
|
||||||
//
|
|
||||||
// const STATUS_OPTIONS = SomeStatus.map((v) => ({
|
|
||||||
// value: v,
|
|
||||||
// label: v.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
|
|
||||||
// }))
|
|
||||||
//
|
|
||||||
// If no matching enum exists in packages/api/src/contracts/enums.ts, add it there first,
|
|
||||||
// then import and use it here.
|
|
||||||
|
|
||||||
// ── Props ──
|
|
||||||
|
|
||||||
export type <Feature>FormProps = {
|
|
||||||
resourceId?: string | null
|
|
||||||
initialData?: unknown
|
|
||||||
onSuccess?: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Default values ──
|
|
||||||
|
|
||||||
const DEFAULT_VALUES: <Feature>FormValues = {
|
|
||||||
// Match every field in the Zod schema:
|
|
||||||
// name: "",
|
|
||||||
// email: "",
|
|
||||||
// category: null, // relation fields default to null
|
|
||||||
// is_active: true, // booleans
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Mapping helpers ──
|
|
||||||
|
|
||||||
function mapToFormValues(data: unknown): <Feature>FormValues {
|
|
||||||
const d = (data as any)?.data ?? data ?? {}
|
|
||||||
|
|
||||||
return {
|
|
||||||
// String fields:
|
|
||||||
// name: d.name || "",
|
|
||||||
// email: d.email || "",
|
|
||||||
|
|
||||||
// Relation fields (API returns id + name separately):
|
|
||||||
// category: toRelation(d.category_id, d.category_name),
|
|
||||||
|
|
||||||
// Booleans:
|
|
||||||
// is_active: d.is_active ?? true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapFormToPayload(values: <Feature>FormValues) {
|
|
||||||
return {
|
|
||||||
// String fields — use `|| undefined` to send null for empty strings:
|
|
||||||
// name: values.name,
|
|
||||||
// email: values.email || undefined,
|
|
||||||
|
|
||||||
// Relation fields — extract the numeric ID:
|
|
||||||
// category_id: toId(values.category),
|
|
||||||
|
|
||||||
// Booleans:
|
|
||||||
// is_active: values.is_active,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Shared mapOption for async selects ──
|
|
||||||
|
|
||||||
const mapLookupOption = (item: any) => ({
|
|
||||||
value: String(item.id),
|
|
||||||
label: item.name,
|
|
||||||
})
|
|
||||||
|
|
||||||
const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
|
|
||||||
|
|
||||||
// ── Component ──
|
|
||||||
|
|
||||||
export function <Feature>Form({ resourceId, initialData, onSuccess }: <Feature>FormProps) {
|
|
||||||
const api = useAuthApi()
|
|
||||||
|
|
||||||
const { form, isEditing } = useResourceForm<<Feature>FormValues, any>({
|
|
||||||
schema: <feature>FormSchema,
|
|
||||||
defaultValues: DEFAULT_VALUES,
|
|
||||||
resourceId,
|
|
||||||
initialData,
|
|
||||||
initialize: (id) => api.<camelResource>.show(id),
|
|
||||||
queryKey: [<RESOURCE>_ROUTES.BY_ID, resourceId],
|
|
||||||
mapToFormValues: mapToFormValues,
|
|
||||||
})
|
|
||||||
|
|
||||||
const { mutate, error, isPending } = useFormMutation(form, {
|
|
||||||
mutationFn: (values: <Feature>FormValues) => {
|
|
||||||
const payload = mapFormToPayload(values)
|
|
||||||
const promise = isEditing && resourceId
|
|
||||||
? api.<camelResource>.update(resourceId, payload)
|
|
||||||
: api.<camelResource>.create(payload)
|
|
||||||
toast.promise(promise, {
|
|
||||||
loading: isEditing ? "Updating <resource>..." : "Creating <resource>...",
|
|
||||||
success: isEditing ? "<Resource> updated successfully" : "<Resource> created successfully",
|
|
||||||
error: isEditing ? "Failed to update <resource>" : "Failed to create <resource>",
|
|
||||||
})
|
|
||||||
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 <resource>" : "Failed to create <resource>"}
|
|
||||||
</AlertTitle>
|
|
||||||
{error.message}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<FieldGroup>
|
|
||||||
{/* Text fields */}
|
|
||||||
{/* <RhfTextField name="name" label="Name" placeholder="Enter name" required /> */}
|
|
||||||
|
|
||||||
{/* Grid layout for side-by-side fields */}
|
|
||||||
{/* <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
||||||
<RhfTextField name="email" label="Email" type="email" />
|
|
||||||
<RhfTextField name="phone" label="Phone" type="tel" />
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
{/* Static select */}
|
|
||||||
{/* <RhfSelectField
|
|
||||||
name="status"
|
|
||||||
label="Status"
|
|
||||||
placeholder="Select status"
|
|
||||||
options={STATUS_OPTIONS}
|
|
||||||
/> */}
|
|
||||||
|
|
||||||
{/* Async select (fetches options from API) */}
|
|
||||||
{/* <RhfAsyncSelectField
|
|
||||||
name="category"
|
|
||||||
label="Category"
|
|
||||||
placeholder="Select category"
|
|
||||||
queryKey={["categories"]}
|
|
||||||
listFn={() => api.categories.list()}
|
|
||||||
mapOption={mapLookupOption}
|
|
||||||
{...STORE_OBJECT}
|
|
||||||
/> */}
|
|
||||||
|
|
||||||
{/* Textarea */}
|
|
||||||
{/* <RhfTextareaField name="notes" label="Notes" rows={4} /> */}
|
|
||||||
|
|
||||||
{/* Checkbox */}
|
|
||||||
{/* <RhfCheckboxField name="is_active" label="Active" /> */}
|
|
||||||
|
|
||||||
<Button type="submit" variant="default" disabled={isPending}>
|
|
||||||
{isEditing ? <Save /> : <Plus />}
|
|
||||||
{isPending
|
|
||||||
? (isEditing ? "Updating..." : "Creating...")
|
|
||||||
: (isEditing ? "Update <Resource>" : "Create <Resource>")}
|
|
||||||
</Button>
|
|
||||||
</FieldGroup>
|
|
||||||
</Rhform>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Key Patterns
|
|
||||||
|
|
||||||
### mapToFormValues
|
|
||||||
|
|
||||||
Transforms API response → form values. Always handle:
|
|
||||||
- Null safety: `d.field || ""`
|
|
||||||
- Relation fields: `toRelation(d.relation_id, d.relation_name)`
|
|
||||||
- Nested data: `(data as any)?.data ?? data ?? {}`
|
|
||||||
- Booleans: `d.field ?? defaultValue`
|
|
||||||
|
|
||||||
### mapFormToPayload
|
|
||||||
|
|
||||||
Transforms form values → API request body. Always handle:
|
|
||||||
- Empty strings to undefined: `values.field || undefined`
|
|
||||||
- Relation to ID: `toId(values.relation)`
|
|
||||||
- Keep required fields as-is: `values.name`
|
|
||||||
|
|
||||||
### useResourceForm
|
|
||||||
|
|
||||||
Initializes react-hook-form with Zod validation. Handles both create and edit modes:
|
|
||||||
- `resourceId` null → create mode (uses `defaultValues`)
|
|
||||||
- `resourceId` set → edit mode (fetches via `initialize`, maps with `mapToFormValues`)
|
|
||||||
|
|
||||||
### useFormMutation
|
|
||||||
|
|
||||||
Wraps `useMutation` with automatic Laravel validation error mapping to form fields. No need to manually handle `ApiError.validationErrors`.
|
|
||||||
|
|
||||||
### Toast Pattern
|
|
||||||
|
|
||||||
Always use `toast.promise()` wrapping the API call for consistent loading/success/error feedback.
|
|
||||||
|
|
||||||
## Layout Conventions
|
|
||||||
|
|
||||||
- Use `<FieldGroup>` to wrap all fields
|
|
||||||
- Use `<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">` for side-by-side fields
|
|
||||||
- Place the submit button at the bottom inside `<FieldGroup>`
|
|
||||||
- Show error alert above fields when mutation fails
|
|
||||||
225
.github/skills/crud-page/references/page.md
vendored
225
.github/skills/crud-page/references/page.md
vendored
@ -1,225 +0,0 @@
|
|||||||
# Page Reference
|
|
||||||
|
|
||||||
## File Location
|
|
||||||
|
|
||||||
`apps/dashboard/app/(authenticated)/<section>/<feature>/page.tsx`
|
|
||||||
|
|
||||||
Where `<section>` is the navigation section (e.g. `sales`, `inventory`, `hr`) and `<feature>` is the resource in kebab-case plural.
|
|
||||||
|
|
||||||
## Complete Template (ResourcePage Pattern)
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
"use client"
|
|
||||||
|
|
||||||
import { ResourcePage } from '@/shared/data-view/resource-page'
|
|
||||||
import { ColumnHeader } from '@/shared/data-view/table-view'
|
|
||||||
import { <Feature>Form } from '@/modules/<feature>/<feature>-form'
|
|
||||||
import { <RESOURCE>_ROUTES } from '@garage/api'
|
|
||||||
import type { <Resource>Client } from '@garage/api'
|
|
||||||
|
|
||||||
export default function <Features>Page() {
|
|
||||||
return (
|
|
||||||
<ResourcePage<<Resource>Client>
|
|
||||||
pageTitle="<Features>"
|
|
||||||
title="<Feature>"
|
|
||||||
routeKey={<RESOURCE>_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.<camelResource>}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "<primary_field>",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="<Primary Field>" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "<field_2>",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="<Field 2>" />,
|
|
||||||
},
|
|
||||||
// Add more columns as needed...
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
renderForm={({ resourceId, initialData, onSuccess }) => (
|
|
||||||
<<Feature>Form
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={initialData}
|
|
||||||
onSuccess={onSuccess}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## ResourcePage Props
|
|
||||||
|
|
||||||
| Prop | Required | Description |
|
|
||||||
|---|---|---|
|
|
||||||
| `pageTitle` | No | Page heading text (e.g. "Customers") |
|
|
||||||
| `title` | Yes | Singular noun for button/dialog (e.g. "Customer" → "Add Customer") |
|
|
||||||
| `routeKey` | Yes | React Query cache key, use `ROUTES.INDEX` |
|
|
||||||
| `getClient` | Yes | Selects the domain client from the authenticated API |
|
|
||||||
| `columns` | Yes | Column definitions — use callback form to get `actionsColumn` helper |
|
|
||||||
| `renderForm` | Yes | Renders the form component inside the dialog |
|
|
||||||
| `queryOptions` | No | React Query overrides (`staleTime`, etc.) |
|
|
||||||
|
|
||||||
## Column Patterns
|
|
||||||
|
|
||||||
### Simple text column (sortable)
|
|
||||||
```tsx
|
|
||||||
{
|
|
||||||
accessorKey: "name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
|
|
||||||
},
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom cell renderer
|
|
||||||
```tsx
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className={row.original.status === "active" ? "text-green-600" : "text-red-600"}>
|
|
||||||
{row.original.status}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
```
|
|
||||||
|
|
||||||
### Column with icon
|
|
||||||
```tsx
|
|
||||||
{
|
|
||||||
accessorKey: "name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<UserIcon className="text-muted-foreground" />
|
|
||||||
<span>{row.original.name}</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
```
|
|
||||||
|
|
||||||
### Non-sortable column
|
|
||||||
```tsx
|
|
||||||
{
|
|
||||||
accessorKey: "notes",
|
|
||||||
header: () => <span>Notes</span>,
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
```
|
|
||||||
|
|
||||||
### Actions column (always last)
|
|
||||||
```tsx
|
|
||||||
actionsColumn(),
|
|
||||||
```
|
|
||||||
|
|
||||||
## Real Example: Customers Page
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
"use client"
|
|
||||||
|
|
||||||
import { ResourcePage } from '@/shared/data-view/resource-page'
|
|
||||||
import { ColumnHeader } from '@/shared/data-view/table-view'
|
|
||||||
import { CustomerForm } from '@/modules/customers/customer-form'
|
|
||||||
import { CUSTOMER_ROUTES } from '@garage/api'
|
|
||||||
import type { CustomersClient } from '@garage/api'
|
|
||||||
import { Building2Icon, UserIcon } from 'lucide-react'
|
|
||||||
|
|
||||||
export default function CustomersPage() {
|
|
||||||
return (
|
|
||||||
<ResourcePage<CustomersClient>
|
|
||||||
pageTitle='Customers'
|
|
||||||
title="Customer"
|
|
||||||
routeKey={CUSTOMER_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.customers}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "first_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const customerName = row.original.first_name
|
|
||||||
const isCompany = row.original.customer_type?.name?.toLocaleLowerCase() === "company";
|
|
||||||
const companyName = row.original.company_name
|
|
||||||
const name = isCompany && companyName
|
|
||||||
? `${customerName} (${row.original.last_name})`
|
|
||||||
: customerName
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{isCompany
|
|
||||||
? <Building2Icon className="text-muted-foreground" />
|
|
||||||
: <UserIcon className="text-muted-foreground" />}
|
|
||||||
<span>{name}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "email",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Email" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "phone",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Phone" />,
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
renderForm={({ resourceId, initialData, onSuccess }) => (
|
|
||||||
<CustomerForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={initialData}
|
|
||||||
onSuccess={onSuccess}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Alternative: Manual DataTable Pattern (Read-Only or Custom Layout)
|
|
||||||
|
|
||||||
Use only when you don't need create/edit/delete in a dialog:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
"use client"
|
|
||||||
|
|
||||||
import { DashboardHeader } from '@/base/components/layout/dashboard'
|
|
||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
import { ColumnHeader, DataTable, useDataTableQuery } from '@/shared/data-view/table-view'
|
|
||||||
import { useAuthApi } from '@/shared/useApi'
|
|
||||||
import { <RESOURCE>_ROUTES } from '@garage/api'
|
|
||||||
import type { ColumnDef } from '@tanstack/react-table'
|
|
||||||
|
|
||||||
const columns: ColumnDef<any>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: "name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
|
|
||||||
},
|
|
||||||
// ... more columns
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function <Features>Page() {
|
|
||||||
const api = useAuthApi()
|
|
||||||
|
|
||||||
const { data, isLoading, pagination, sorting, handleChange } = useDataTableQuery({
|
|
||||||
queryKey: [<RESOURCE>_ROUTES.INDEX],
|
|
||||||
client: api.<camelResource>,
|
|
||||||
})
|
|
||||||
|
|
||||||
const response = data as any
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={<DashboardHeader />}>
|
|
||||||
<DataTable
|
|
||||||
columns={columns}
|
|
||||||
data={response?.data ?? []}
|
|
||||||
pagination={{
|
|
||||||
...pagination,
|
|
||||||
pageCount: response?.meta?.last_page ?? 1,
|
|
||||||
total: response?.meta?.total ?? 0,
|
|
||||||
}}
|
|
||||||
sorting={sorting}
|
|
||||||
onChange={handleChange}
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
143
.github/skills/crud-page/references/schema.md
vendored
143
.github/skills/crud-page/references/schema.md
vendored
@ -1,143 +0,0 @@
|
|||||||
# Schema Reference
|
|
||||||
|
|
||||||
## File Location
|
|
||||||
|
|
||||||
`apps/dashboard/modules/<feature>/<feature>.schema.ts`
|
|
||||||
|
|
||||||
## Template
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { z } from "zod"
|
|
||||||
|
|
||||||
// Reusable relation field schema — use for all foreign-key / lookup fields
|
|
||||||
const relationFieldSchema = z
|
|
||||||
.object({ value: z.string(), label: z.string() })
|
|
||||||
.nullable()
|
|
||||||
|
|
||||||
const <feature>FormSchema = z.object({
|
|
||||||
// ── Relations (stored as { value, label } objects, mapped to IDs on submit) ──
|
|
||||||
// category: relationFieldSchema,
|
|
||||||
|
|
||||||
// ── Required strings ──
|
|
||||||
// name: z.string().min(1, "Name is required"),
|
|
||||||
|
|
||||||
// ── Optional strings ──
|
|
||||||
// description: z.string().optional(),
|
|
||||||
|
|
||||||
// ── Optional email (allows empty string) ──
|
|
||||||
// email: z.union([
|
|
||||||
// z.string().email("Enter a valid email address"),
|
|
||||||
// z.literal(""),
|
|
||||||
// ]).optional(),
|
|
||||||
|
|
||||||
// ── Optional phone ──
|
|
||||||
// phone: z.string().optional(),
|
|
||||||
|
|
||||||
// ── Boolean ──
|
|
||||||
// is_active: z.boolean().default(true),
|
|
||||||
|
|
||||||
// ── Number ──
|
|
||||||
// quantity: z.coerce.number().min(0),
|
|
||||||
|
|
||||||
// ── Date ──
|
|
||||||
// due_date: z.string().optional(),
|
|
||||||
})
|
|
||||||
|
|
||||||
type <Feature>FormValues = z.infer<typeof <feature>FormSchema>
|
|
||||||
|
|
||||||
export { <feature>FormSchema, relationFieldSchema }
|
|
||||||
export type { <Feature>FormValues }
|
|
||||||
```
|
|
||||||
|
|
||||||
## Field Type Patterns
|
|
||||||
|
|
||||||
### Required string
|
|
||||||
```ts
|
|
||||||
name: z.string().min(1, "Name is required"),
|
|
||||||
```
|
|
||||||
|
|
||||||
### Optional string
|
|
||||||
```ts
|
|
||||||
notes: z.string().optional(),
|
|
||||||
```
|
|
||||||
|
|
||||||
### Optional email (allows empty)
|
|
||||||
```ts
|
|
||||||
email: z.union([
|
|
||||||
z.string().email("Enter a valid email address"),
|
|
||||||
z.literal(""),
|
|
||||||
]).optional(),
|
|
||||||
```
|
|
||||||
|
|
||||||
### Relation / Foreign key
|
|
||||||
```ts
|
|
||||||
const relationFieldSchema = z
|
|
||||||
.object({ value: z.string(), label: z.string() })
|
|
||||||
.nullable()
|
|
||||||
|
|
||||||
// In schema:
|
|
||||||
department: relationFieldSchema,
|
|
||||||
```
|
|
||||||
|
|
||||||
### Required relation
|
|
||||||
```ts
|
|
||||||
department: z
|
|
||||||
.object({ value: z.string(), label: z.string() })
|
|
||||||
.refine((v) => v !== null, { message: "Department is required" }),
|
|
||||||
```
|
|
||||||
|
|
||||||
### Boolean with default
|
|
||||||
```ts
|
|
||||||
is_active: z.boolean().default(true),
|
|
||||||
```
|
|
||||||
|
|
||||||
### Number (from string input)
|
|
||||||
```ts
|
|
||||||
quantity: z.coerce.number().min(0, "Must be non-negative"),
|
|
||||||
price: z.coerce.number().min(0),
|
|
||||||
```
|
|
||||||
|
|
||||||
### Static enum select
|
|
||||||
```ts
|
|
||||||
status: z.enum(["active", "inactive", "pending"]).default("active"),
|
|
||||||
salutation: z.string().optional(),
|
|
||||||
```
|
|
||||||
|
|
||||||
## Real Example: CustomerFormSchema
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { z } from "zod"
|
|
||||||
|
|
||||||
const relationFieldSchema = z
|
|
||||||
.object({ value: z.string(), label: z.string() })
|
|
||||||
.nullable()
|
|
||||||
|
|
||||||
type RelationField = z.infer<typeof relationFieldSchema>
|
|
||||||
|
|
||||||
const customerFormSchema = z.object({
|
|
||||||
customer_type: relationFieldSchema,
|
|
||||||
referral_source: relationFieldSchema,
|
|
||||||
payment_terms: relationFieldSchema,
|
|
||||||
country: relationFieldSchema,
|
|
||||||
state: relationFieldSchema,
|
|
||||||
salutation: z.string().optional(),
|
|
||||||
first_name: z.string().min(1, "First name is required"),
|
|
||||||
last_name: z.string().min(1, "Last name is required"),
|
|
||||||
company_name: z.string().optional(),
|
|
||||||
email: z.union([
|
|
||||||
z.string().email("Enter a valid email address"),
|
|
||||||
z.literal(""),
|
|
||||||
]).optional(),
|
|
||||||
phone: z.string().optional(),
|
|
||||||
alternate_phone: z.string().optional(),
|
|
||||||
address_line_1: z.string().optional(),
|
|
||||||
address_line_2: z.string().optional(),
|
|
||||||
city: z.string().optional(),
|
|
||||||
zip_code: z.string().optional(),
|
|
||||||
})
|
|
||||||
|
|
||||||
type CustomerFormValues = z.infer<typeof customerFormSchema>
|
|
||||||
|
|
||||||
export { customerFormSchema, relationFieldSchema }
|
|
||||||
export type { CustomerFormValues, RelationField }
|
|
||||||
```
|
|
||||||
86
.github/skills/date-time-pickers/SKILL.md
vendored
86
.github/skills/date-time-pickers/SKILL.md
vendored
@ -1,86 +0,0 @@
|
|||||||
---
|
|
||||||
name: date-time-pickers
|
|
||||||
description: "Use RhfDateField and RhfTimeField (shadcn Calendar/Popover-based) for all date and time inputs in forms. Use when: adding date fields, adding time fields, replacing `type=\"date\"` or `type=\"time\"` RhfTextField inputs, building any form that captures a date or time value."
|
|
||||||
---
|
|
||||||
|
|
||||||
# Date & Time Pickers
|
|
||||||
|
|
||||||
Always use the shadcn-based picker components for date and time fields. Never use `<RhfTextField type="date">` or `<RhfTextField type="time">`.
|
|
||||||
|
|
||||||
## Components
|
|
||||||
|
|
||||||
| Use For | Component | Import |
|
|
||||||
|---|---|---|
|
|
||||||
| Date fields (YYYY-MM-DD) | `RhfDateField` | `@/shared/components/form` |
|
|
||||||
| Time fields (HH:MM:SS) | `RhfTimeField` | `@/shared/components/form` |
|
|
||||||
|
|
||||||
## RhfDateField
|
|
||||||
|
|
||||||
Renders a shadcn Calendar inside a Popover. Value is a `string` in `"YYYY-MM-DD"` format.
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { RhfDateField } from "@/shared/components/form"
|
|
||||||
|
|
||||||
<RhfDateField name="check_in_date" label="Check-in Date" />
|
|
||||||
```
|
|
||||||
|
|
||||||
**Schema type**: `z.string().optional()` (stores `"YYYY-MM-DD"`)
|
|
||||||
|
|
||||||
**Default value**: `""` for empty, or `new Date().toISOString().split("T")[0]` for today.
|
|
||||||
|
|
||||||
**`mapToFormValues`**: `d.check_in_date ? d.check_in_date.split("T")[0] : ""`
|
|
||||||
|
|
||||||
**`mapFormToPayload`**: `values.check_in_date || undefined`
|
|
||||||
|
|
||||||
## RhfTimeField
|
|
||||||
|
|
||||||
Renders an HH / MM / SS spinner inside a Popover. Value is a `string` in `"HH:MM:SS"` format.
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { RhfTimeField } from "@/shared/components/form"
|
|
||||||
|
|
||||||
// With seconds (default)
|
|
||||||
<RhfTimeField name="check_in_time" label="Check-in Time" withSeconds />
|
|
||||||
|
|
||||||
// Without seconds
|
|
||||||
<RhfTimeField name="check_in_time" label="Check-in Time" />
|
|
||||||
```
|
|
||||||
|
|
||||||
**Props**:
|
|
||||||
- `withSeconds?: boolean` — show the SS spinner (default `true`)
|
|
||||||
- `placeholder?: string` — trigger button placeholder text
|
|
||||||
|
|
||||||
**Schema type**: `z.string().optional()` (stores `"HH:MM:SS"` or `"HH:MM"`)
|
|
||||||
|
|
||||||
**Default value for current time**:
|
|
||||||
```ts
|
|
||||||
(() => {
|
|
||||||
const n = new Date()
|
|
||||||
return `${String(n.getHours()).padStart(2,"0")}:${String(n.getMinutes()).padStart(2,"0")}:${String(n.getSeconds()).padStart(2,"0")}`
|
|
||||||
})()
|
|
||||||
```
|
|
||||||
|
|
||||||
**`mapToFormValues`** (API returns `"HH:MM"` or ISO datetime):
|
|
||||||
- If ISO: `d.check_in_time ? d.check_in_time.split("T")[1]?.slice(0, 8) ?? "" : ""`
|
|
||||||
- If plain time string: `d.check_in_time ?? ""`
|
|
||||||
|
|
||||||
**`mapFormToPayload`**: `values.check_in_time || undefined`
|
|
||||||
|
|
||||||
## Underlying Controls (non-RHF use)
|
|
||||||
|
|
||||||
If you need to use the pickers outside of RHF:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { DatePickerField, TimePickerField } from "@/shared/components/form"
|
|
||||||
|
|
||||||
<DatePickerField value={date} onChange={setDate} placeholder="Select date" />
|
|
||||||
<TimePickerField value={time} onChange={setTime} withSeconds />
|
|
||||||
```
|
|
||||||
|
|
||||||
## File Locations
|
|
||||||
|
|
||||||
- Control: `apps/dashboard/shared/components/form/controls/date-picker-field.tsx`
|
|
||||||
- Control: `apps/dashboard/shared/components/form/controls/time-picker-field.tsx`
|
|
||||||
- RHF wrapper: `apps/dashboard/shared/components/form/fields/rhf-date-field.tsx`
|
|
||||||
- RHF wrapper: `apps/dashboard/shared/components/form/fields/rhf-time-field.tsx`
|
|
||||||
- Exports: `apps/dashboard/shared/components/form/index.ts`
|
|
||||||
95
.github/skills/invoice-pattern/SKILL.md
vendored
95
.github/skills/invoice-pattern/SKILL.md
vendored
@ -1,95 +0,0 @@
|
|||||||
# Invoice Pattern Skill
|
|
||||||
|
|
||||||
This skill defines the standard for implementing invoice-like forms (Invoice, Estimate, Job Card, Purchase Order, Bill, etc.) in the carage-erp dashboard. All such forms must follow this pattern for layout, discount/tax handling, and summary calculation. The current Invoice form is the canonical reference.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. Layout
|
|
||||||
- **Two-column grid:**
|
|
||||||
- **Main column (9/12):**
|
|
||||||
- Subject, invoice number/title
|
|
||||||
- Status select, Discount Type select
|
|
||||||
- Conditional Transaction Discount field
|
|
||||||
- Line item selectors: Parts, Services, Expense Items (with optional line-level discount)
|
|
||||||
- Notes, Terms & Conditions
|
|
||||||
- Submit button
|
|
||||||
- **Sidebar column (3/12):**
|
|
||||||
- Invoice date, Due date
|
|
||||||
- Customer, Vehicle selectors
|
|
||||||
- Tax select (see below)
|
|
||||||
- Department, Payment Terms, Invoice Sequence, Insurance fields
|
|
||||||
- Summary card (see below)
|
|
||||||
|
|
||||||
## 2. Discount Implementation
|
|
||||||
- **Discount Type:**
|
|
||||||
- Field: `discount` (enum: 'no', 'line_item_level', 'transaction_level')
|
|
||||||
- Select field in main column
|
|
||||||
- **Transaction-level Discount:**
|
|
||||||
- Field: `discount_amount` (number)
|
|
||||||
- Only shown when `discount === "transaction_level"`
|
|
||||||
- **Line-level Discount:**
|
|
||||||
- Each line item (parts, services, expenses) has `discount_amount` field
|
|
||||||
- Only shown when `discount === "line_item_level"`
|
|
||||||
- **Payload Mapping:**
|
|
||||||
- Only include `discount_amount` at transaction level if `discount === "transaction_level"`
|
|
||||||
- Only include per-line `discount_amount` if `discount === "line_item_level"`
|
|
||||||
|
|
||||||
## 3. Tax Type Implementation
|
|
||||||
- **Tax Field:**
|
|
||||||
- Field: `tax` (relationFieldSchema: `{ value: string, label: string } | null`)
|
|
||||||
- Uses `RhfAsyncSelectField` in sidebar
|
|
||||||
- `mapOption`: `{ value: String(item.id), label: `${item.title} (${item.rate}%)` }`
|
|
||||||
- The selected tax's rate is parsed from the label string in the summary (regex: `/\((\d+(?:\.\d+)?)%\)/`)
|
|
||||||
|
|
||||||
## 4. Summary Implementation
|
|
||||||
- **Summary Card:**
|
|
||||||
- Always rendered in the sidebar below the Details card
|
|
||||||
- Uses `InvoiceFormSummary` (form-aware adapter)
|
|
||||||
- `InvoiceFormSummary` flattens all line items, reads discount/tax fields, and passes them to `useDocumentTotals` hook
|
|
||||||
- `useDocumentTotals` (pure hook) computes subtotal, discounts, tax, and total
|
|
||||||
- `DocumentTotalsSummary` (pure display component) renders the summary
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Reference: Invoice Form
|
|
||||||
- See `apps/dashboard/modules/invoices/invoice-form.tsx` for the canonical implementation.
|
|
||||||
- Schema: `apps/dashboard/modules/invoices/invoice.schema.ts`
|
|
||||||
- Summary logic: `apps/dashboard/modules/invoices/invoice-form-summary.tsx`, `shared/hooks/use-document-totals.ts`, `shared/components/document-totals-summary.tsx`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Required for All Invoice-like Forms
|
|
||||||
- Follow the above layout and field conventions
|
|
||||||
- Use the same discount/tax logic and summary calculation
|
|
||||||
- Use the same field and payload mapping patterns
|
|
||||||
- Use the same summary component structure
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Example: Tax Field (in sidebar)
|
|
||||||
```tsx
|
|
||||||
<RhfAsyncSelectField
|
|
||||||
name="tax"
|
|
||||||
label="Tax"
|
|
||||||
placeholder="Select tax rate"
|
|
||||||
queryKey={[TAX_ROUTES.INDEX]}
|
|
||||||
listFn={() => api.taxes.list()}
|
|
||||||
mapOption={(item: any) => ({
|
|
||||||
value: String(item.id),
|
|
||||||
label: item.title ? `${item.title} (${item.rate}%)` : `#${item.id}`,
|
|
||||||
})}
|
|
||||||
{...STORE_OBJECT}
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example: Discount Type Select (in main column)
|
|
||||||
```tsx
|
|
||||||
<RhfSelectField name="discount" label="Discount Type" options={DISCOUNT_OPTIONS} />
|
|
||||||
```
|
|
||||||
|
|
||||||
## Example: Summary Card
|
|
||||||
```tsx
|
|
||||||
<div className="mt-4">
|
|
||||||
<InvoiceFormSummary />
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
583
.github/skills/resource-details-page/SKILL.md
vendored
583
.github/skills/resource-details-page/SKILL.md
vendored
@ -1,583 +0,0 @@
|
|||||||
---
|
|
||||||
name: resource-details-page
|
|
||||||
description: "Create resource details pages with tabbed layouts, context providers, and sub-pages for the carage-erp dashboard. Use when: building a details/show page for a resource, adding tabs to a resource detail view, creating a nested [id] layout, scaffolding sub-pages (owners, documents, estimates), implementing resource context providers, or adding actions menus to detail headers."
|
|
||||||
---
|
|
||||||
|
|
||||||
# Resource Details Page
|
|
||||||
|
|
||||||
Create fully structured resource details pages with tabbed navigation, shared context, and reusable sub-page patterns. This skill covers: layout → context provider → general-info component → actions component → tab sub-pages.
|
|
||||||
|
|
||||||
## When to Use
|
|
||||||
|
|
||||||
- User asks to create a details/show page for a resource (e.g. "create a customer details page")
|
|
||||||
- User asks to add tabs to a resource (e.g. "add an invoices tab to the vehicle page")
|
|
||||||
- User asks to scaffold a `[id]` layout with nested pages
|
|
||||||
- User wants sub-pages that share parent resource data (e.g. vehicle → estimates)
|
|
||||||
- User wants an actions dropdown (edit/delete) on a resource header
|
|
||||||
|
|
||||||
## Reference Implementation
|
|
||||||
|
|
||||||
The canonical implementation is the **vehicle details page** at:
|
|
||||||
```
|
|
||||||
app/(authenticated)/sales/vehicles/[id]/
|
|
||||||
├── layout.tsx ← Server component: fetches resource, renders DashboardDetailsPage
|
|
||||||
├── page.tsx ← Details tab: server component, read-only info display
|
|
||||||
├── owners/page.tsx ← Sub-tab: client component, manual DataTable
|
|
||||||
├── documents/page.tsx ← Sub-tab: client component, manual DataTable + upload
|
|
||||||
├── estimates/page.tsx ← Sub-tab: client component, ResourcePage with extraParams
|
|
||||||
```
|
|
||||||
|
|
||||||
Module files at:
|
|
||||||
```
|
|
||||||
modules/vehicles/
|
|
||||||
├── vehicle.schema.ts
|
|
||||||
├── vehicle-form.tsx
|
|
||||||
├── vehicle-general-info.tsx ← Read-only info cards for Details tab
|
|
||||||
├── vehicle-actions.tsx ← Dropdown menu (Edit/Delete)
|
|
||||||
├── vehicle-context.tsx ← React context for sharing resource data to sub-pages
|
|
||||||
└── vehicle-document-form.tsx ← Document-specific form (optional)
|
|
||||||
```
|
|
||||||
|
|
||||||
## Procedure
|
|
||||||
|
|
||||||
### Step 1: Create the Resource Context
|
|
||||||
|
|
||||||
Create `modules/<resource>/<resource>-context.tsx`:
|
|
||||||
|
|
||||||
This context allows child tab pages to access the parent resource's identity (id + display label) without re-fetching. This is essential for sub-pages that create related records (e.g. creating an estimate pre-populated with the parent vehicle).
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
"use client"
|
|
||||||
|
|
||||||
import { createContext, useContext } from "react"
|
|
||||||
|
|
||||||
type <Resource>ContextValue = {
|
|
||||||
id: string
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const <Resource>Context = createContext<<Resource>ContextValue | null>(null)
|
|
||||||
|
|
||||||
export function <Resource>Provider({
|
|
||||||
<resource>,
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
<resource>: <Resource>ContextValue
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<<Resource>Context.Provider value={<resource>}>
|
|
||||||
{children}
|
|
||||||
</<Resource>Context.Provider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function use<Resource>() {
|
|
||||||
return useContext(<Resource>Context)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Key rules:**
|
|
||||||
- Always a `"use client"` component (context requires client React)
|
|
||||||
- Keep the context value minimal — only `id` and `label`
|
|
||||||
- `label` is a human-readable display string built from the resource's key fields
|
|
||||||
- The hook returns `null` when used outside the provider (no throw — graceful fallback)
|
|
||||||
- Do NOT store the full resource object — only identity data needed by sub-pages
|
|
||||||
|
|
||||||
### Step 2: Create the Actions Component
|
|
||||||
|
|
||||||
Create `modules/<resource>/<resource>-actions.tsx`:
|
|
||||||
|
|
||||||
This is a dropdown menu rendered in the `DashboardDetailsPage` header for resource-level actions.
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
"use client"
|
|
||||||
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/shared/components/ui/dropdown-menu"
|
|
||||||
import { Ellipsis, Pencil, Trash2 } from "lucide-react"
|
|
||||||
|
|
||||||
type <Resource>ActionsProps = {
|
|
||||||
<resource>Id: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export function <Resource>Actions({ <resource>Id }: <Resource>ActionsProps) {
|
|
||||||
const api = useAuthApi()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const handleEdit = () => {
|
|
||||||
router.push(`/<section>/<resources>/${<resource>Id}/edit`)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDelete = async () => {
|
|
||||||
await api.<resources>.destroy(<resource>Id)
|
|
||||||
router.push("/<section>/<resources>")
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button variant="ghost" size="icon">
|
|
||||||
<Ellipsis className="size-4" />
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end">
|
|
||||||
<DropdownMenuItem onClick={handleEdit}>
|
|
||||||
<Pencil className="size-4" />
|
|
||||||
Edit
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem variant="destructive" onClick={handleDelete}>
|
|
||||||
<Trash2 className="size-4" />
|
|
||||||
Delete
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Key rules:**
|
|
||||||
- Always a `"use client"` component
|
|
||||||
- Accepts `<resource>Id: string` as the only required prop
|
|
||||||
- Uses `useAuthApi()` for API calls, `useRouter()` for navigation
|
|
||||||
- `handleDelete` navigates back to the list page after deletion
|
|
||||||
- Add confirmation dialog for destructive actions when appropriate
|
|
||||||
|
|
||||||
### Step 3: Create the General Info Component
|
|
||||||
|
|
||||||
Create `modules/<resource>/<resource>-general-info.tsx`:
|
|
||||||
|
|
||||||
A read-only display component for the **Details tab** (the default `page.tsx`). Uses Card-based layout with icon-labeled fields.
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
|
||||||
import { Separator } from "@/shared/components/ui/separator"
|
|
||||||
// Import relevant icons from lucide-react
|
|
||||||
|
|
||||||
type <Resource>Data = {
|
|
||||||
// Type all fields from the API response
|
|
||||||
id?: number
|
|
||||||
name?: string
|
|
||||||
// ...
|
|
||||||
}
|
|
||||||
|
|
||||||
type <Resource>GeneralInfoProps = {
|
|
||||||
<resource>: <Resource>Data
|
|
||||||
}
|
|
||||||
|
|
||||||
function InfoItem({
|
|
||||||
icon: Icon,
|
|
||||||
label,
|
|
||||||
value,
|
|
||||||
}: {
|
|
||||||
icon: React.ComponentType<{ className?: string }>
|
|
||||||
label: string
|
|
||||||
value?: string | null
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
|
|
||||||
<Icon className="size-4" />
|
|
||||||
</div>
|
|
||||||
<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>}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export function <Resource>GeneralInfo({ <resource> }: <Resource>GeneralInfoProps) {
|
|
||||||
return (
|
|
||||||
<div className="grid gap-6 md:grid-cols-2">
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
{/* Icon */} Section Title
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="grid gap-4">
|
|
||||||
<div className="grid gap-4 sm:grid-cols-2">
|
|
||||||
<InfoItem icon={...} label="Field Name" value={<resource>.field} />
|
|
||||||
{/* More InfoItems */}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
{/* More Cards for other field groups */}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Key rules:**
|
|
||||||
- This is a **server component** (no `"use client"`) — it receives data as props
|
|
||||||
- Group related fields into separate `Card` sections
|
|
||||||
- Use the `InfoItem` helper for consistent icon+label+value layout
|
|
||||||
- Show `"—"` dash for missing/null values
|
|
||||||
- Use `Badge` for status-like fields, `Separator` between groups
|
|
||||||
|
|
||||||
### Step 4: Create the Layout (Server Component)
|
|
||||||
|
|
||||||
Create `app/(authenticated)/<section>/<resources>/[id]/layout.tsx`:
|
|
||||||
|
|
||||||
This is the **central orchestrator** — it fetches the resource, renders the tabbed shell, and wraps children with the context provider.
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { <Resource>Actions } from '@/modules/<resources>/<resource>-actions'
|
|
||||||
import { <Resource>Provider } from '@/modules/<resources>/<resource>-context'
|
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
export default async function layout(props: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const <resource> = await api.<resources>.getById(id)
|
|
||||||
|
|
||||||
const title = /* Build display title from resource fields */ ''
|
|
||||||
const <resource>Label = /* Build label for context, e.g. combining key fields */ ''
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<<Resource>Provider <resource>={{ id, label: <resource>Label || title }}>
|
|
||||||
<DashboardDetailsPage
|
|
||||||
className="p-0 lg:p-0"
|
|
||||||
avatarSrc={<resource>.data?.image_url || ""}
|
|
||||||
title={title}
|
|
||||||
description={/* subtitle text */}
|
|
||||||
backHref="/<section>/<resources>"
|
|
||||||
actions={<<Resource>Actions <resource>Id={id} />}
|
|
||||||
tabs={[
|
|
||||||
{ href: `/<section>/<resources>/${id}`, label: 'Details' },
|
|
||||||
{ href: `/<section>/<resources>/${id}/<sub-tab>`, label: '<Sub Tab>' },
|
|
||||||
// More tabs...
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</DashboardDetailsPage>
|
|
||||||
</<Resource>Provider>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Key rules:**
|
|
||||||
- **Server component** (no `"use client"`) — uses `await` for data fetching
|
|
||||||
- Params are `Promise<{ id: string }>` in Next.js 15+ (use `await props.params`)
|
|
||||||
- Uses `getServerApi()` from `@garage/api/server` for server-side API calls
|
|
||||||
- `<Resource>Provider` wraps the entire `DashboardDetailsPage` so all tab children can access context
|
|
||||||
- `backHref` points to the resource list page
|
|
||||||
- `tabs[0].href` is always the base `/<section>/<resources>/${id}` (Details tab)
|
|
||||||
- `className="p-0 lg:p-0"` removes default padding — sub-pages handle their own spacing
|
|
||||||
|
|
||||||
**`DashboardDetailsPage` props:**
|
|
||||||
|
|
||||||
| Prop | Type | Purpose |
|
|
||||||
|---|---|---|
|
|
||||||
| `title` | `string` | Primary heading in the header |
|
|
||||||
| `description` | `string?` | Subtitle text below the title |
|
|
||||||
| `avatarSrc` | `string?` | Avatar image URL |
|
|
||||||
| `avatarFallback` | `string?` | Fallback text for avatar (e.g. initials) |
|
|
||||||
| `icon` | `ReactNode?` | Icon instead of avatar |
|
|
||||||
| `actions` | `ReactNode?` | Action buttons in header (right side) |
|
|
||||||
| `backHref` | `string?` | Back navigation URL |
|
|
||||||
| `tabs` | `{ href, label }[]?` | Route-based tab navigation |
|
|
||||||
| `className` | `string?` | Additional classes for content area |
|
|
||||||
| `children` | `ReactNode` | Active tab content (Next.js route children) |
|
|
||||||
|
|
||||||
### Step 5: Create the Details Tab (Default Page)
|
|
||||||
|
|
||||||
Create `app/(authenticated)/<section>/<resources>/[id]/page.tsx`:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { <Resource>GeneralInfo } from '@/modules/<resources>/<resource>-general-info'
|
|
||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
|
|
||||||
export default async function page(props: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const <resource> = await api.<resources>.getById(id)
|
|
||||||
|
|
||||||
if (!<resource>.data) {
|
|
||||||
return <div className="text-muted-foreground"><Resource> not found.</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<<Resource>GeneralInfo <resource>={<resource>.data} />
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Key rules:**
|
|
||||||
- **Server component** — fetches resource data on the server
|
|
||||||
- Uses `DashboardPage` wrapper with `header={null}` (the layout already has the header)
|
|
||||||
- Renders the general-info component with the full resource data
|
|
||||||
- Shows a fallback message if the resource is not found
|
|
||||||
|
|
||||||
### Step 6: Create Sub-Tab Pages
|
|
||||||
|
|
||||||
Choose the appropriate pattern based on the sub-tab's requirements:
|
|
||||||
|
|
||||||
#### Pattern A: ResourcePage with `extraParams` (Preferred for CRUD sub-tabs)
|
|
||||||
|
|
||||||
Use when the sub-tab needs full CRUD for a **related** resource filtered by the parent ID.
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
"use client"
|
|
||||||
|
|
||||||
import { use } 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 { <Related>Form } from '@/modules/<related>/<related>-form'
|
|
||||||
import { <RELATED>_ROUTES } from '@garage/api'
|
|
||||||
import type { <Related>Client } from '@garage/api'
|
|
||||||
import { use<Resource> } from '@/modules/<resource>/<resource>-context'
|
|
||||||
|
|
||||||
export default function <Resource><Related>Page({ params }: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id: <resource>Id } = use(params)
|
|
||||||
const <resource> = use<Resource>()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ResourcePage<<Related>Client>
|
|
||||||
toolbar={({ invalidateQuery, selectedItem, closeDialog }) => (
|
|
||||||
<FormDialog title="<Related>">
|
|
||||||
{(resourceId) => (
|
|
||||||
<<Related>Form
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={{
|
|
||||||
<resource>: <resource>
|
|
||||||
? { value: <resource>.id, label: <resource>.label }
|
|
||||||
: null,
|
|
||||||
}}
|
|
||||||
onSuccess={() => {
|
|
||||||
closeDialog();
|
|
||||||
invalidateQuery();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
)}
|
|
||||||
pageTitle="<Resource> <Related>s"
|
|
||||||
routeKey={<RELATED>_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.<related>s}
|
|
||||||
extraParams={{ <resource>_id: <resource>Id }}
|
|
||||||
header={null}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
// Column definitions...
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Key rules:**
|
|
||||||
- `"use client"` — uses hooks (`use()`, `use<Resource>()`)
|
|
||||||
- Uses `use(params)` (React 19) to unwrap the params Promise
|
|
||||||
- Consumes the parent context via `use<Resource>()` to pre-populate the form's relation field
|
|
||||||
- `extraParams={{ <resource>_id: <resource>Id }}` filters the list to only show related records
|
|
||||||
- `header={null}` — the layout already provides the header
|
|
||||||
- Pass `initialData` with the parent resource as a relation field `{ value, label }`
|
|
||||||
|
|
||||||
#### Pattern B: Manual DataTable (For custom interactions)
|
|
||||||
|
|
||||||
Use when the sub-tab needs non-standard behavior (link/unlink, file uploads, custom mutations).
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
"use client"
|
|
||||||
|
|
||||||
import { useParams } from "next/navigation"
|
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
|
||||||
|
|
||||||
export default function <Resource><Tab>Page() {
|
|
||||||
const { id: <resource>Id } = useParams<{ id: string }>()
|
|
||||||
const api = useAuthApi()
|
|
||||||
const queryClient = useQueryClient()
|
|
||||||
|
|
||||||
const queryKey = ["<resource>-<tab>", <resource>Id]
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
|
||||||
queryKey,
|
|
||||||
queryFn: () => api.<resources>.get<Tab>(<resource>Id),
|
|
||||||
})
|
|
||||||
|
|
||||||
// Custom mutations (link, unlink, upload, etc.)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<DataTable
|
|
||||||
columns={columns}
|
|
||||||
data={data?.data ?? []}
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Key rules:**
|
|
||||||
- Use `useParams()` or `use(params)` to get the parent resource ID
|
|
||||||
- Custom query key includes the parent resource ID
|
|
||||||
- Use `DashboardPage header={null}` as wrapper
|
|
||||||
- Implement custom mutations with `useMutation` + `useQueryClient` for cache invalidation
|
|
||||||
|
|
||||||
## API Integration
|
|
||||||
|
|
||||||
### Server-Side (Layout + Details Tab)
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
|
|
||||||
// In an async server component:
|
|
||||||
const api = await getServerApi()
|
|
||||||
const resource = await api.<resources>.getById(id)
|
|
||||||
```
|
|
||||||
|
|
||||||
- `getServerApi()` reads auth cookies server-side — no token passing needed
|
|
||||||
- Returns typed responses based on OpenAPI schema
|
|
||||||
- Used in `layout.tsx` and the default `page.tsx` (Details tab)
|
|
||||||
|
|
||||||
### Client-Side (Sub-Tab Pages)
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
|
|
||||||
// In a client component:
|
|
||||||
const api = useAuthApi()
|
|
||||||
// Then use with React Query:
|
|
||||||
useQuery({ queryFn: () => api.<resources>.list() })
|
|
||||||
```
|
|
||||||
|
|
||||||
- `useAuthApi()` returns the API client with the auth token from the store
|
|
||||||
- Always use with React Query (`useQuery`, `useMutation`) for caching and state management
|
|
||||||
- `ResourcePage` handles this internally — only needed for manual DataTable pages
|
|
||||||
|
|
||||||
### Client Types
|
|
||||||
|
|
||||||
API clients live in `packages/api/src/clients/<resource>.ts`. Each exports:
|
|
||||||
- `<RESOURCE>_ROUTES` — route constants (`INDEX`, `BY_ID`, etc.)
|
|
||||||
- `<Resource>Client` — class with typed methods
|
|
||||||
|
|
||||||
These are re-exported from `@garage/api` for use in the dashboard.
|
|
||||||
|
|
||||||
## Component Reusability
|
|
||||||
|
|
||||||
### Reusable Across Resources
|
|
||||||
|
|
||||||
| Component | Location | Reuse Pattern |
|
|
||||||
|---|---|---|
|
|
||||||
| `DashboardDetailsPage` | `@/base/components/layout/dashboard` | Used by every `[id]/layout.tsx` |
|
|
||||||
| `DashboardPage` | `@/base/components/layout/dashboard` | Used by every tab `page.tsx` with `header={null}` |
|
|
||||||
| `ResourcePage` | `@/shared/data-view/resource-page` | Used by CRUD sub-tabs with `extraParams` |
|
|
||||||
| `FormDialog` | `@/shared/components/form-dialog` | Used for create/edit dialogs in sub-tabs |
|
|
||||||
| `DataTable` | `@/shared/data-view/table-view` | Used for custom sub-tabs (non-CRUD) |
|
|
||||||
| `ColumnHeader` | `@/shared/data-view/table-view` | Used in all column definitions |
|
|
||||||
| `InfoItem` pattern | Copy per resource | Icon+label+value display for general-info |
|
|
||||||
|
|
||||||
### Resource-Specific (Create Per Resource)
|
|
||||||
|
|
||||||
| Component | Location | Purpose |
|
|
||||||
|---|---|---|
|
|
||||||
| `<resource>-context.tsx` | `modules/<resource>/` | Context provider for parent resource identity |
|
|
||||||
| `<resource>-actions.tsx` | `modules/<resource>/` | Header dropdown menu (edit/delete) |
|
|
||||||
| `<resource>-general-info.tsx` | `modules/<resource>/` | Read-only details display for Details tab |
|
|
||||||
| `<resource>-form.tsx` | `modules/<resource>/` | CRUD form (shared with list page creation) |
|
|
||||||
| `<resource>.schema.ts` | `modules/<resource>/` | Zod schema (shared with form) |
|
|
||||||
|
|
||||||
## File Structure Convention
|
|
||||||
|
|
||||||
```
|
|
||||||
app/(authenticated)/<section>/<resources>/[id]/
|
|
||||||
├── layout.tsx ← Server: fetch + DashboardDetailsPage + Provider
|
|
||||||
├── page.tsx ← Server: Details tab (GeneralInfo)
|
|
||||||
├── <sub-tab-1>/page.tsx ← Client: ResourcePage or manual DataTable
|
|
||||||
├── <sub-tab-2>/page.tsx ← Client: ResourcePage or manual DataTable
|
|
||||||
└── ...
|
|
||||||
|
|
||||||
modules/<resources>/
|
|
||||||
├── <resource>.schema.ts ← Zod form schema
|
|
||||||
├── <resource>-form.tsx ← CRUD form component
|
|
||||||
├── <resource>-context.tsx ← Context provider (id + label)
|
|
||||||
├── <resource>-actions.tsx ← Actions dropdown
|
|
||||||
├── <resource>-general-info.tsx ← Read-only info cards
|
|
||||||
└── <optional-sub-forms>/ ← e.g. document upload forms
|
|
||||||
```
|
|
||||||
|
|
||||||
## Naming Conventions
|
|
||||||
|
|
||||||
| Item | Pattern | Example |
|
|
||||||
|---|---|---|
|
|
||||||
| Layout file | `app/.../<resources>/[id]/layout.tsx` | `vehicles/[id]/layout.tsx` |
|
|
||||||
| Details page | `app/.../<resources>/[id]/page.tsx` | `vehicles/[id]/page.tsx` |
|
|
||||||
| Sub-tab page | `app/.../<resources>/[id]/<tab>/page.tsx` | `vehicles/[id]/estimates/page.tsx` |
|
|
||||||
| Context file | `modules/<resources>/<resource>-context.tsx` | `vehicles/vehicle-context.tsx` |
|
|
||||||
| Context type | `<Resource>ContextValue` | `VehicleContextValue` |
|
|
||||||
| Provider | `<Resource>Provider` | `VehicleProvider` |
|
|
||||||
| Hook | `use<Resource>()` | `useVehicle()` |
|
|
||||||
| Actions file | `modules/<resources>/<resource>-actions.tsx` | `vehicles/vehicle-actions.tsx` |
|
|
||||||
| Actions component | `<Resource>Actions` | `VehicleActions` |
|
|
||||||
| General info file | `modules/<resources>/<resource>-general-info.tsx` | `vehicles/vehicle-general-info.tsx` |
|
|
||||||
| General info component | `<Resource>GeneralInfo` | `VehicleGeneralInfo` |
|
|
||||||
|
|
||||||
## Imports Cheat Sheet
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// Layout
|
|
||||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { <Resource>Actions } from '@/modules/<resources>/<resource>-actions'
|
|
||||||
import { <Resource>Provider } from '@/modules/<resources>/<resource>-context'
|
|
||||||
|
|
||||||
// Details tab
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { <Resource>GeneralInfo } from '@/modules/<resources>/<resource>-general-info'
|
|
||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
|
|
||||||
// Sub-tab (ResourcePage pattern)
|
|
||||||
import { ResourcePage } from '@/shared/data-view/resource-page'
|
|
||||||
import { ColumnHeader } from '@/shared/data-view/table-view'
|
|
||||||
import FormDialog from '@/shared/components/form-dialog'
|
|
||||||
import { use<Resource> } from '@/modules/<resources>/<resource>-context'
|
|
||||||
import type { <Related>Client } from '@garage/api'
|
|
||||||
import { <RELATED>_ROUTES } from '@garage/api'
|
|
||||||
|
|
||||||
// Sub-tab (Manual DataTable pattern)
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
|
|
||||||
// Context provider
|
|
||||||
import { createContext, useContext } from "react"
|
|
||||||
|
|
||||||
// Actions
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/shared/components/ui/dropdown-menu"
|
|
||||||
|
|
||||||
// General Info
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
|
||||||
import { Separator } from "@/shared/components/ui/separator"
|
|
||||||
```
|
|
||||||
258
.github/skills/resource-filters/SKILL.md
vendored
258
.github/skills/resource-filters/SKILL.md
vendored
@ -1,258 +0,0 @@
|
|||||||
---
|
|
||||||
name: resource-filters
|
|
||||||
description: "Add advanced filtering to resource list pages using a drawer/sheet with RHF forms and nuqs query params. Use when: adding filters to a ResourcePage, creating a filter drawer for any list page, implementing advanced search with URL-persisted filter state, adding query-param-based filtering to a CRUD page."
|
|
||||||
---
|
|
||||||
|
|
||||||
# Resource Filters
|
|
||||||
|
|
||||||
Add URL-persisted advanced filtering to any ResourcePage or data table list. Filters live in a right-side Sheet drawer, powered by React Hook Form (RHF) and synced to URL query params via nuqs.
|
|
||||||
|
|
||||||
## When to Use
|
|
||||||
|
|
||||||
- User asks to add filters or advanced filters to a list/index page
|
|
||||||
- User wants URL-shareable filter state on a resource page
|
|
||||||
- User asks to filter by relations, dates, or boolean flags on any data table
|
|
||||||
- User wants a filter drawer/dialog for any CRUD listing
|
|
||||||
|
|
||||||
## Architecture
|
|
||||||
|
|
||||||
```
|
|
||||||
┌─────────────────────────────────┐
|
|
||||||
│ useFilterParams (generic hook) │ ← Manages RHF form + nuqs URL sync
|
|
||||||
│ • schema + defaults │
|
|
||||||
│ • paramsParsers (nuqs) │
|
|
||||||
│ • mapParamsToFormValues │
|
|
||||||
│ • mapFormValuesToParams │
|
|
||||||
│ Returns: form, appliedParams, │
|
|
||||||
│ open/close/submit/reset, │
|
|
||||||
│ activeFilterCount │
|
|
||||||
└──────────────┬──────────────────┘
|
|
||||||
│
|
|
||||||
┌──────────┴──────────┐
|
|
||||||
│ │
|
|
||||||
┌───▼───────┐ ┌────────▼──────────┐
|
|
||||||
│FilterDrawer│ │ ResourcePage │
|
|
||||||
│(Sheet UI) │ │ extraParams={ │
|
|
||||||
│ │ │ ...appliedParams│
|
|
||||||
│ <Fields /> │ │ ...quickFilters │
|
|
||||||
│ Apply/Reset│ │ } │
|
|
||||||
└────────────┘ └───────────────────┘
|
|
||||||
```
|
|
||||||
|
|
||||||
## File Locations
|
|
||||||
|
|
||||||
| File | Purpose |
|
|
||||||
|---|---|
|
|
||||||
| `shared/hooks/use-filter-params.ts` | Generic hook — form + nuqs state sync |
|
|
||||||
| `shared/components/filter-drawer.tsx` | `FilterDrawer` sheet + `FilterTrigger` button |
|
|
||||||
| `modules/<feature>/<feature>-filters.tsx` | Feature-specific schema, parsers, mappers, fields |
|
|
||||||
|
|
||||||
## Procedure
|
|
||||||
|
|
||||||
### Step 1: Create the filter config file
|
|
||||||
|
|
||||||
Create `modules/<feature>/<feature>-filters.tsx` with:
|
|
||||||
|
|
||||||
1. **Zod schema** — all filter fields. Use `relationField` for foreign-key selects, `z.string().optional()` for dates, `z.boolean().optional()` for flags.
|
|
||||||
2. **Default values** — matching the schema (null for relations, `""` for strings, `false` for booleans).
|
|
||||||
3. **nuqs parsers** — `parseAsInteger` for relation IDs, `parseAsString` for dates/text, `parseAsBoolean` for flags.
|
|
||||||
4. **`mapParamsToFormValues`** — URL params → form values. Use `toRelation(id)` for relation fields.
|
|
||||||
5. **`mapFormValuesToParams`** — form values → URL params. Use `toId(relation)` for relation fields.
|
|
||||||
6. **Config export** — `UseFilterParamsOptions<T>` object with schema, defaults, parsers, mappers.
|
|
||||||
7. **Fields component** — renders RHF fields inside the drawer.
|
|
||||||
|
|
||||||
#### Template
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
"use client"
|
|
||||||
|
|
||||||
import { z } from "zod"
|
|
||||||
import { parseAsInteger, parseAsString, parseAsBoolean } from "nuqs"
|
|
||||||
import { toRelation, toId, type RelationFieldValue } from "@/shared/lib/utils"
|
|
||||||
import {
|
|
||||||
RhfAsyncSelectField,
|
|
||||||
RhfDateField,
|
|
||||||
RhfCheckboxField,
|
|
||||||
RhfSelectField,
|
|
||||||
} from "@/shared/components/form"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { SOME_ROUTES } from "@garage/api"
|
|
||||||
import { Separator } from "@/shared/components/ui/separator"
|
|
||||||
import type { UseFilterParamsOptions } from "@/shared/hooks/use-filter-params"
|
|
||||||
|
|
||||||
// ── Schema ──
|
|
||||||
|
|
||||||
const relationField = z.object({ value: z.string(), label: z.string() }).nullable().optional()
|
|
||||||
|
|
||||||
const filterSchema = z.object({
|
|
||||||
some_relation_id: relationField,
|
|
||||||
some_date: z.string().optional(),
|
|
||||||
some_flag: z.boolean().optional(),
|
|
||||||
})
|
|
||||||
|
|
||||||
type FilterValues = z.infer<typeof filterSchema>
|
|
||||||
|
|
||||||
// ── Defaults ──
|
|
||||||
|
|
||||||
const defaultValues: FilterValues = {
|
|
||||||
some_relation_id: null,
|
|
||||||
some_date: "",
|
|
||||||
some_flag: false,
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── nuqs Parsers ──
|
|
||||||
|
|
||||||
const paramsParsers = {
|
|
||||||
some_relation_id: parseAsInteger,
|
|
||||||
some_date: parseAsString,
|
|
||||||
some_flag: parseAsBoolean,
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Mappers ──
|
|
||||||
|
|
||||||
function mapParamsToFormValues(params: Record<string, any>): Partial<FilterValues> {
|
|
||||||
return {
|
|
||||||
some_relation_id: params.some_relation_id ? toRelation(params.some_relation_id) : null,
|
|
||||||
some_date: params.some_date ?? "",
|
|
||||||
some_flag: params.some_flag ?? false,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapFormValuesToParams(values: FilterValues): Record<string, any> {
|
|
||||||
return {
|
|
||||||
some_relation_id: toId(values.some_relation_id as RelationFieldValue) ?? null,
|
|
||||||
some_date: values.some_date || null,
|
|
||||||
some_flag: values.some_flag || null,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Filter Config ──
|
|
||||||
|
|
||||||
export const featureFilterConfig: UseFilterParamsOptions<FilterValues> = {
|
|
||||||
schema: filterSchema,
|
|
||||||
defaultValues,
|
|
||||||
paramsParsers,
|
|
||||||
mapParamsToFormValues,
|
|
||||||
mapFormValuesToParams,
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Filter Fields Component ──
|
|
||||||
|
|
||||||
export function FeatureFilterFields() {
|
|
||||||
const api = useAuthApi()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<RhfAsyncSelectField
|
|
||||||
name="some_relation_id"
|
|
||||||
label="Some Relation"
|
|
||||||
queryKey={[SOME_ROUTES.INDEX]}
|
|
||||||
listFn={() => api.someResource.list( )}
|
|
||||||
mapOption={(item: any) => ({ value: String(item.id), label: item.name })}
|
|
||||||
placeholder="All"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<RhfDateField name="some_date" label="Some Date" />
|
|
||||||
|
|
||||||
<RhfCheckboxField name="some_flag" label="Some Flag" />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 2: Integrate into the page
|
|
||||||
|
|
||||||
In the page component:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { useFilterParams } from '@/shared/hooks/use-filter-params'
|
|
||||||
import { FilterDrawer, FilterTrigger } from '@/shared/components/filter-drawer'
|
|
||||||
import { featureFilterConfig, FeatureFilterFields } from '@/modules/<feature>/<feature>-filters'
|
|
||||||
|
|
||||||
export default function FeaturePage() {
|
|
||||||
const filter = useFilterParams(featureFilterConfig)
|
|
||||||
|
|
||||||
// Combine drawer filters with any quick filters (tabs, search, etc.)
|
|
||||||
const extraParams = useMemo(() => {
|
|
||||||
const params: Record<string, unknown> = { ...filter.appliedParams }
|
|
||||||
// Add quick filters if present
|
|
||||||
if (search) params.search = search
|
|
||||||
if (statusFilter !== "all") params.status = statusFilter
|
|
||||||
return params
|
|
||||||
}, [filter.appliedParams, search, statusFilter])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ResourcePage
|
|
||||||
extraParams={extraParams}
|
|
||||||
headerProps={({ ... }) => ({
|
|
||||||
title: "Feature",
|
|
||||||
actions: (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<FilterTrigger
|
|
||||||
onClick={filter.open}
|
|
||||||
activeFilterCount={filter.activeFilterCount}
|
|
||||||
/>
|
|
||||||
{/* other actions like FormDialog */}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
{/* columns, tableHeader, etc. */}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FilterDrawer
|
|
||||||
form={filter.form}
|
|
||||||
isOpen={filter.isOpen}
|
|
||||||
onOpenChange={(open) => { if (!open) filter.close() }}
|
|
||||||
onSubmit={filter.onSubmit}
|
|
||||||
onReset={filter.reset}
|
|
||||||
activeFilterCount={filter.activeFilterCount}
|
|
||||||
title="Filter Features"
|
|
||||||
>
|
|
||||||
<FeatureFilterFields />
|
|
||||||
</FilterDrawer>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Key Conventions
|
|
||||||
|
|
||||||
### Field Types
|
|
||||||
|
|
||||||
| Filter Type | Schema | nuqs Parser | Form Component | Default |
|
|
||||||
|---|---|---|---|---|
|
|
||||||
| Foreign key (select) | `relationField` (nullable object) | `parseAsInteger` | `RhfAsyncSelectField` | `null` |
|
|
||||||
| Date | `z.string().optional()` | `parseAsString` | `RhfDateField` | `""` |
|
|
||||||
| Boolean flag | `z.boolean().optional()` | `parseAsBoolean` | `RhfCheckboxField` | `false` |
|
|
||||||
| Enum select | `z.string().optional()` | `parseAsString` | `RhfSelectField` | `""` |
|
|
||||||
| Text/search | `z.string().optional()` | `parseAsString` | `RhfTextField` | `""` |
|
|
||||||
| Comma-separated IDs | `z.string().optional()` | `parseAsString` | custom / `RhfTextField` | `""` |
|
|
||||||
|
|
||||||
### Relation Field Mapping
|
|
||||||
|
|
||||||
- **URL → Form**: `toRelation(params.field_id)` produces `{ value: "5", label: "5" }`. The async select resolves the display label from loaded options.
|
|
||||||
- **Form → URL**: `toId(values.field_id)` extracts the numeric ID.
|
|
||||||
- Import `toRelation`, `toId`, and `RelationFieldValue` from `@/shared/lib/utils`.
|
|
||||||
|
|
||||||
### Section Grouping
|
|
||||||
|
|
||||||
Group related filters with `<Separator />` and section labels:
|
|
||||||
```tsx
|
|
||||||
<Separator />
|
|
||||||
<p className="text-sm font-medium text-muted-foreground pt-2">Section Name</p>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Pagination Reset
|
|
||||||
|
|
||||||
The `useFilterParams` hook automatically resets the `page` query param to `1` when filters are applied or reset, preventing empty-page issues.
|
|
||||||
|
|
||||||
### Quick Filters vs Drawer Filters
|
|
||||||
|
|
||||||
- **Quick filters** (status tabs, search input) live directly in `tableHeader` and are managed via `useState` or separate nuqs params on the page.
|
|
||||||
- **Drawer filters** (advanced) are managed by `useFilterParams` and rendered inside `FilterDrawer`.
|
|
||||||
- Both are merged into `extraParams` with `useMemo`.
|
|
||||||
|
|
||||||
## Reference Implementation
|
|
||||||
|
|
||||||
See `modules/job-cards/job-card-filters.tsx` and `app/(authenticated)/sales/job-cards/page.tsx` for the complete working example.
|
|
||||||
315
.github/skills/resource-selector/SKILL.md
vendored
315
.github/skills/resource-selector/SKILL.md
vendored
@ -1,315 +0,0 @@
|
|||||||
---
|
|
||||||
name: resource-selector
|
|
||||||
description: "Use RhfResourceField and ResourceSelectorDialog for cross-domain relational line-item fields in forms. Use when: linking parts/services/expense-items to invoices, bills, purchase orders, or estimates; adding line-item tables with qty/rate/description; picking multiple records from a separate domain entity. Do NOT use for simple FK relations like 'customer type' or 'payment terms' — use RhfAsyncSelectField for those."
|
|
||||||
---
|
|
||||||
|
|
||||||
# Resource Selector (Cross-Domain Relations)
|
|
||||||
|
|
||||||
Use `RhfResourceField` + `ResourceSelectorDialog` when a form needs to pick **one or more records from a different domain** and store them as an **editable line-item array with extra data** (quantity, rate, description, etc.).
|
|
||||||
|
|
||||||
## Decision: RhfResourceField vs RhfAsyncSelectField
|
|
||||||
|
|
||||||
| Situation | Use |
|
|
||||||
|---|---|
|
|
||||||
| Linking parts / services / expense items to a bill, invoice, PO, or estimate | **`RhfResourceField`** |
|
|
||||||
| Picking multiple cross-domain items that need per-row extra fields (qty, rate) | **`RhfResourceField`** |
|
|
||||||
| Simple FK: invoice → customer, PO → vendor, job card → vehicle | **`RhfAsyncSelectField`** |
|
|
||||||
| Simple FK: insurance type, payment terms, category, department, unit type | **`RhfAsyncSelectField`** |
|
|
||||||
| Single-record lookup within the same domain | **`RhfAsyncSelectField`** |
|
|
||||||
|
|
||||||
**Rule:** If the relationship involves a **join table with extra fields** (quantity, rate, description, chart_of_account) or the related items are from a **fully separate domain with its own CRUD page**, use `RhfResourceField`. Otherwise use `RhfAsyncSelectField`.
|
|
||||||
|
|
||||||
### Domain Boundary Examples
|
|
||||||
|
|
||||||
```
|
|
||||||
Cross-domain (use RhfResourceField): Simple FK (use RhfAsyncSelectField):
|
|
||||||
Invoice ←→ Parts Invoice → Customer
|
|
||||||
Invoice ←→ Services Invoice → Payment Terms
|
|
||||||
Bill ←→ Parts Bill → Vendor
|
|
||||||
Bill ←→ Services Bill → Department
|
|
||||||
Bill ←→ Expense Items Part → Category
|
|
||||||
PO ←→ Parts Service → Unit Type
|
|
||||||
Estimate ←→ Services Job Card → Vehicle
|
|
||||||
```
|
|
||||||
|
|
||||||
## Architecture
|
|
||||||
|
|
||||||
| File | Purpose |
|
|
||||||
|---|---|
|
|
||||||
| `shared/components/resource-selector/resource-selector-dialog.tsx` | Generic dialog wrapping `CrudResource` with multi-row selection + Confirm/Cancel |
|
|
||||||
| `shared/components/resource-selector/rhf-resource-field.tsx` | RHF field: Card with trigger → opens dialog → renders items via `renderItems` callback |
|
|
||||||
| `modules/<domain>/<domain>-columns.tsx` | Shared column definitions reused by both the domain page and selector dialogs |
|
|
||||||
| `modules/<domain>/<domain>-selector-field.tsx` | Self-contained wrapper for a specific domain (e.g. `PartsSelectorField`) |
|
|
||||||
|
|
||||||
## Procedure
|
|
||||||
|
|
||||||
### Step 1: Create / Reuse Domain Columns File
|
|
||||||
|
|
||||||
If the domain already has a page, extract shared columns to `modules/<domain>/<domain>-columns.tsx`. This avoids duplication between the list page and the selector dialog.
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// modules/parts/parts-columns.tsx
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import type { ColumnDef } from "@tanstack/react-table"
|
|
||||||
|
|
||||||
export const partColumns = {
|
|
||||||
title: {
|
|
||||||
accessorKey: "title",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
|
|
||||||
cell: ({ row }) => <span className="font-medium">{(row.original as any).title || "—"}</span>,
|
|
||||||
},
|
|
||||||
purchasePrice: {
|
|
||||||
accessorKey: "purchase_price",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Purchase Price" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = (row.original as any).purchase_price
|
|
||||||
return val != null ? `$${Number(val).toFixed(2)}` : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// ... more columns
|
|
||||||
} satisfies Record<string, ColumnDef<any, any>>
|
|
||||||
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
|
||||||
// CRITICAL: use `satisfies Record<string, ColumnDef<any, any>>`
|
|
||||||
// NOT `as ColumnDef<unknown>` — the latter causes type errors in ResourceSelectorDialog
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 2: Define the Item Shape in the Schema
|
|
||||||
|
|
||||||
Add a sub-schema for the line items inside the form schema:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// In <resource>.schema.ts
|
|
||||||
const billPartItemSchema = z.object({
|
|
||||||
part_id: z.number(),
|
|
||||||
title: z.string(), // display only, not sent to API
|
|
||||||
quantity: z.number().min(1),
|
|
||||||
rate: z.number().min(0),
|
|
||||||
description: z.string().optional(),
|
|
||||||
})
|
|
||||||
|
|
||||||
const billFormSchema = z.object({
|
|
||||||
// ... other fields
|
|
||||||
part_items: z.array(billPartItemSchema).optional(),
|
|
||||||
service_items: z.array(billServiceItemSchema).optional(),
|
|
||||||
})
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 3: Create the Selector Field Component
|
|
||||||
|
|
||||||
Create `modules/<domain>/<domain>-selector-field.tsx`:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
"use client"
|
|
||||||
|
|
||||||
import type { FieldValues, FieldPath } from "react-hook-form"
|
|
||||||
import { Trash2 } from "lucide-react"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
import { Input } from "@/shared/components/ui/input"
|
|
||||||
import {
|
|
||||||
Table, TableHeader, TableBody,
|
|
||||||
TableHead, TableRow, TableCell,
|
|
||||||
} from "@/shared/components/ui/table"
|
|
||||||
import { RhfResourceField } from "@/shared/components/resource-selector"
|
|
||||||
import { partColumns } from "./parts-columns"
|
|
||||||
import { PARTS_ROUTES } from "@garage/api"
|
|
||||||
import type { PartsClient } from "@garage/api"
|
|
||||||
|
|
||||||
type PartItem = {
|
|
||||||
part_id: number
|
|
||||||
title: string
|
|
||||||
quantity: number
|
|
||||||
rate: number
|
|
||||||
description?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
type Constraint = PartItem[] | undefined
|
|
||||||
|
|
||||||
export type PartsSelectorFieldProps<
|
|
||||||
TValues extends FieldValues,
|
|
||||||
TName extends FieldPath<TValues>,
|
|
||||||
> = {
|
|
||||||
name: TName & (TValues[TName] extends Constraint ? TName : never)
|
|
||||||
label?: string
|
|
||||||
triggerLabel?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export function PartsSelectorField<
|
|
||||||
TValues extends FieldValues,
|
|
||||||
TName extends FieldPath<TValues>,
|
|
||||||
>({ name, label = "Parts", triggerLabel = "Add Parts" }: PartsSelectorFieldProps<TValues, TName>) {
|
|
||||||
return (
|
|
||||||
<RhfResourceField<TValues, TName, PartsClient>
|
|
||||||
name={name}
|
|
||||||
label={label}
|
|
||||||
triggerLabel={triggerLabel}
|
|
||||||
itemKey="part_id" // deduplicate by this key when re-selecting
|
|
||||||
dialogProps={{
|
|
||||||
title: "Select Parts",
|
|
||||||
crudProps: {
|
|
||||||
routeKey: PARTS_ROUTES.INDEX,
|
|
||||||
getClient: (api) => api.parts,
|
|
||||||
columns: [
|
|
||||||
partColumns.title,
|
|
||||||
partColumns.partNumber,
|
|
||||||
partColumns.purchasePrice,
|
|
||||||
partColumns.stock,
|
|
||||||
],
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
mapSelected={(row) => {
|
|
||||||
const r = row as any
|
|
||||||
return {
|
|
||||||
part_id: r.id,
|
|
||||||
title: r.title || "",
|
|
||||||
quantity: 1,
|
|
||||||
rate: Number(r.purchase_price) || 0,
|
|
||||||
description: "",
|
|
||||||
} as any
|
|
||||||
}}
|
|
||||||
renderItems={(items, { remove, update }) => (
|
|
||||||
<Table>
|
|
||||||
<TableHeader>
|
|
||||||
<TableRow>
|
|
||||||
<TableHead>Part</TableHead>
|
|
||||||
<TableHead className="w-24">Qty</TableHead>
|
|
||||||
<TableHead className="w-28">Rate</TableHead>
|
|
||||||
<TableHead>Description</TableHead>
|
|
||||||
<TableHead className="w-12" />
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{((items as PartItem[] | undefined) ?? []).map((item, index) => (
|
|
||||||
<TableRow key={item.part_id}>
|
|
||||||
<TableCell className="font-medium">{item.title}</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Input type="number" min={1} value={item.quantity}
|
|
||||||
onChange={(e) => update(index, { ...item, quantity: Number(e.target.value) || 1 } as any)}
|
|
||||||
className="h-8 w-20" />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Input type="number" min={0} step={0.01} value={item.rate}
|
|
||||||
onChange={(e) => update(index, { ...item, rate: Number(e.target.value) || 0 } as any)}
|
|
||||||
className="h-8 w-24" />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Input value={item.description ?? ""}
|
|
||||||
onChange={(e) => update(index, { ...item, description: e.target.value } as any)}
|
|
||||||
placeholder="Optional description" className="h-8" />
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Button type="button" variant="ghost" size="icon-sm" onClick={() => remove(index)}>
|
|
||||||
<Trash2 className="h-4 w-4 text-destructive" />
|
|
||||||
</Button>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Step 4: Wire into the Form
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
// In <resource>-form.tsx
|
|
||||||
|
|
||||||
// 1. Import
|
|
||||||
import { PartsSelectorField } from "@/modules/parts/parts-selector-field"
|
|
||||||
import { ServicesSelectorField } from "@/modules/services/services-selector-field"
|
|
||||||
|
|
||||||
// 2. Add to DEFAULT_VALUES
|
|
||||||
const DEFAULT_VALUES = {
|
|
||||||
// ...
|
|
||||||
part_items: [],
|
|
||||||
service_items: [],
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Map from API → form (in mapToFormValues)
|
|
||||||
part_items: (d.parts ?? []).map((p: any) => ({
|
|
||||||
part_id: p.part_id ?? p.id,
|
|
||||||
title: p.part?.title ?? p.title ?? "",
|
|
||||||
quantity: Number(p.quantity) || 1,
|
|
||||||
rate: Number(p.rate) || 0,
|
|
||||||
description: p.description ?? "",
|
|
||||||
})),
|
|
||||||
|
|
||||||
// 4. Map from form → API payload (in mapFormToPayload)
|
|
||||||
part_items: (values.part_items ?? []).map((item) => ({
|
|
||||||
part_id: item.part_id,
|
|
||||||
quantity: item.quantity,
|
|
||||||
rate: item.rate,
|
|
||||||
description: item.description || undefined,
|
|
||||||
})),
|
|
||||||
|
|
||||||
// 5. Render inside <FieldGroup>
|
|
||||||
<PartsSelectorField<MyFormValues, "part_items"> name="part_items" />
|
|
||||||
<ServicesSelectorField<MyFormValues, "service_items"> name="service_items" />
|
|
||||||
```
|
|
||||||
|
|
||||||
## Existing Selector Fields (Ready to Use)
|
|
||||||
|
|
||||||
These are already built. Import and use directly — do NOT re-implement from scratch:
|
|
||||||
|
|
||||||
| Component | File | `itemKey` | Notes |
|
|
||||||
|---|---|---|---|
|
|
||||||
| `PartsSelectorField` | `modules/parts/parts-selector-field.tsx` | `part_id` | qty + rate + description editable |
|
|
||||||
| `ServicesSelectorField` | `modules/services/services-selector-field.tsx` | `service_id` | qty + rate + description editable |
|
|
||||||
| `ExpenseItemsSelectorField` | `modules/expense-items/expense-items-selector-field.tsx` | `expense_id` | qty + rate + description editable |
|
|
||||||
|
|
||||||
**Usage:**
|
|
||||||
```tsx
|
|
||||||
import { PartsSelectorField } from "@/modules/parts/parts-selector-field"
|
|
||||||
import { ServicesSelectorField } from "@/modules/services/services-selector-field"
|
|
||||||
import { ExpenseItemsSelectorField } from "@/modules/expense-items/expense-items-selector-field"
|
|
||||||
|
|
||||||
// Inside <FieldGroup>:
|
|
||||||
<PartsSelectorField<MyFormValues, "part_items"> name="part_items" />
|
|
||||||
<ServicesSelectorField<MyFormValues, "service_items"> name="service_items" />
|
|
||||||
<ExpenseItemsSelectorField<MyFormValues, "expense_items"> name="expense_items" />
|
|
||||||
```
|
|
||||||
|
|
||||||
## API Props Reference
|
|
||||||
|
|
||||||
### `RhfResourceField`
|
|
||||||
|
|
||||||
| Prop | Type | Required | Description |
|
|
||||||
|---|---|---|---|
|
|
||||||
| `name` | `FieldPath<TValues>` | ✅ | RHF field name; value is an array |
|
|
||||||
| `label` | `string` | ✅ | Card heading |
|
|
||||||
| `triggerLabel` | `string` | | Button label (defaults to `label`) |
|
|
||||||
| `mapSelected` | `(row) => ItemShape` | ✅ | Maps a selected table row to the form item shape |
|
|
||||||
| `renderItems` | `(items, helpers) => ReactNode` | ✅ | Renders the editable item table |
|
|
||||||
| `dialogProps` | object | ✅ | Config for the selector dialog (see below) |
|
|
||||||
| `itemKey` | `string` | | Field used for deduplication. Defaults to `"id"` |
|
|
||||||
|
|
||||||
### `dialogProps`
|
|
||||||
|
|
||||||
```ts
|
|
||||||
{
|
|
||||||
title: string // Dialog heading
|
|
||||||
crudProps: {
|
|
||||||
routeKey: ApiPath // e.g. PARTS_ROUTES.INDEX
|
|
||||||
getClient: (api) => client // e.g. (api) => api.parts
|
|
||||||
columns: ColumnDef[] // Subset of domain columns to show
|
|
||||||
}
|
|
||||||
rowKey?: keyof Item // Selection identity key (defaults to "id")
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### `renderItems` helpers
|
|
||||||
|
|
||||||
| Helper | Signature | Description |
|
|
||||||
|---|---|---|
|
|
||||||
| `remove` | `(index: number) => void` | Remove item at index |
|
|
||||||
| `update` | `(index: number, item) => void` | Replace item at index |
|
|
||||||
| `replace` | `(items) => void` | Replace entire array |
|
|
||||||
|
|
||||||
## Common Pitfalls
|
|
||||||
|
|
||||||
- **Column type error**: Always use `satisfies Record<string, ColumnDef<any, any>>` on the columns object. Using `as ColumnDef<unknown>` per-entry causes type errors in the selector dialog.
|
|
||||||
- **itemKey mismatch**: The `itemKey` on `RhfResourceField` must match the field name in your item shape (e.g. `"part_id"`, not `"id"`).
|
|
||||||
- **Pre-fill in create mode**: `useResourceForm` uses a shallow spread for initial data. Pre-fill the field with already-shaped items (not raw API shape) to avoid empty arrays. See the `mapToFormValues` pattern above.
|
|
||||||
- **Selector field generic parameters**: Always pass both type params when using a selector field in a form: `<PartsSelectorField<MyFormValues, "part_items"> name="part_items" />`.
|
|
||||||
73
.github/skills/shared-formatters/SKILL.md
vendored
73
.github/skills/shared-formatters/SKILL.md
vendored
@ -1,73 +0,0 @@
|
|||||||
---
|
|
||||||
name: shared-formatters
|
|
||||||
description: "Use the central shared/utils/formatters.ts file for all display formatting in the dashboard. Use when: formatting dates, times, numbers, currencies, or enum strings in table cells, detail pages, or any UI display. Avoid inline formatting logic like `toLocaleDateString()`, `.toLocaleString()`, or manual string splits. Import from @/shared/utils/formatters."
|
|
||||||
---
|
|
||||||
|
|
||||||
# Shared Formatters
|
|
||||||
|
|
||||||
Use this skill whenever work involves displaying dates, times, numbers, currencies, or enum strings in any UI component.
|
|
||||||
|
|
||||||
## Source of Truth
|
|
||||||
|
|
||||||
All shared display formatters live in:
|
|
||||||
|
|
||||||
```
|
|
||||||
apps/dashboard/shared/utils/formatters.ts
|
|
||||||
```
|
|
||||||
|
|
||||||
Import path: `@/shared/utils/formatters`
|
|
||||||
|
|
||||||
## Available Formatters
|
|
||||||
|
|
||||||
| Function | Input | Output example |
|
|
||||||
|---|---|---|
|
|
||||||
| `formatDate(value)` | string \| Date \| null | `"Jan 6, 2026"` |
|
|
||||||
| `formatDateTime(value)` | string \| Date \| null | `"Jan 6, 2026, 2:30 PM"` |
|
|
||||||
| `formatDateShort(value)` | string \| Date \| null | `"04/06/2026"` |
|
|
||||||
| `formatTime(value)` | string \| Date \| null | `"2:30 PM"` |
|
|
||||||
| `formatEnum(value)` | string \| null | `"In Progress"` |
|
|
||||||
| `formatNumber(value)` | number \| string \| null | `"150,000"` |
|
|
||||||
| `formatCurrency(value, currency?, locale?)` | number \| string \| null | `"$1,500.00"` |
|
|
||||||
|
|
||||||
All functions return `"—"` for null/undefined/invalid input — never return an empty string or throw.
|
|
||||||
|
|
||||||
## Rules
|
|
||||||
|
|
||||||
1. **Never inline formatting.** Do not use `new Date(x).toLocaleDateString()`, `Number(x).toLocaleString()`, or manual `split("_")` chains in components or pages. Use the shared formatters instead.
|
|
||||||
|
|
||||||
2. **Add before duplicating.** Check `formatters.ts` for an existing formatter before writing a new one. If a new formatter is needed, add it to `formatters.ts` — not inline.
|
|
||||||
|
|
||||||
3. **Keep all formatters in one file.** Do not create separate formatter files per module. All display formatting stays in `shared/utils/formatters.ts`.
|
|
||||||
|
|
||||||
4. **Consistent null handling.** Every formatter accepts `null | undefined` and returns `"—"`. Never require callers to guard against null before calling.
|
|
||||||
|
|
||||||
5. **Use `formatEnum` for status/type fields.** Any snake_case or underscore-separated enum value displayed as text must go through `formatEnum`.
|
|
||||||
|
|
||||||
## Workflow
|
|
||||||
|
|
||||||
1. Identify a display value needing formatting in a component.
|
|
||||||
2. Check `formatters.ts` for an existing matching formatter.
|
|
||||||
3. If found, import and use it.
|
|
||||||
4. If missing, add to `formatters.ts` following the null-safety pattern, then import.
|
|
||||||
5. Remove any inline formatting that the shared formatter now replaces.
|
|
||||||
|
|
||||||
## Examples
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { formatDate, formatEnum, formatNumber, formatCurrency } from "@/shared/utils/formatters"
|
|
||||||
|
|
||||||
// Table cell — date
|
|
||||||
cell: ({ row }) => formatDate(row.original.created_at)
|
|
||||||
|
|
||||||
// Table cell — enum status
|
|
||||||
cell: ({ row }) => <Badge>{formatEnum(row.original.status)}</Badge>
|
|
||||||
|
|
||||||
// Table cell — number
|
|
||||||
cell: ({ row }) => formatNumber(row.original.km_in)
|
|
||||||
|
|
||||||
// Table cell — currency
|
|
||||||
cell: ({ row }) => formatCurrency(row.original.total_amount)
|
|
||||||
|
|
||||||
// Detail page field
|
|
||||||
<p>{formatDateTime(jobCard.updated_at)}</p>
|
|
||||||
```
|
|
||||||
59
.gitignore
vendored
59
.gitignore
vendored
@ -1,38 +1,39 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
# Dependencies
|
# testing
|
||||||
node_modules
|
/coverage
|
||||||
.pnp
|
/cypress/videos
|
||||||
.pnp.js
|
/cypress/screenshots
|
||||||
|
/cypress/downloads
|
||||||
|
|
||||||
# Local env files
|
# next.js
|
||||||
.env
|
/.next/
|
||||||
.env.local
|
/out/
|
||||||
.env.development.local
|
|
||||||
.env.test.local
|
|
||||||
.env.production.local
|
|
||||||
|
|
||||||
# Testing
|
# production
|
||||||
coverage
|
/build
|
||||||
|
|
||||||
# Turbo
|
# misc
|
||||||
.turbo
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
# Vercel
|
# debug
|
||||||
.vercel
|
|
||||||
|
|
||||||
# Build Outputs
|
|
||||||
.next/
|
|
||||||
out/
|
|
||||||
build
|
|
||||||
dist
|
|
||||||
|
|
||||||
|
|
||||||
# Debug
|
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
# Misc
|
# env files
|
||||||
.DS_Store
|
.env*.local
|
||||||
*.pem
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|||||||
49
.turbo/turbo-build.log
Normal file
49
.turbo/turbo-build.log
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
[6n[?9001h[?1004h[m]0;C:\WINDOWS\system32\cmd.exe[?25h[?25l
|
||||||
|
> dashboard@0.0.1 prebuild C:\Users\LOQ\Desktop\workspace\carage-erp\apps\dashboard
|
||||||
|
> pnpm --filter @repo/api run generate[5;1H[?25h[?25l
|
||||||
|
> @repo/api@0.0.0 generate C:\Users\LOQ\Desktop\workspace\carage-erp\packages\api
|
||||||
|
> pnpm run generate:openapi && pnpm run generate:types[9;1H[?25h[?25l
|
||||||
|
> @repo/api@0.0.0 generate:openapi C:\Users\LOQ\Desktop\workspace\carage-erp\packages\api
|
||||||
|
> pnpm run prepare:dirs && node scripts/generate-openapi.cjs[13;1H[?25h[?25l
|
||||||
|
> @repo/api@0.0.0 prepare:dirs C:\Users\LOQ\Desktop\workspace\carage-erp\packages\api
|
||||||
|
> node -e "const fs=require('fs');fs.mkdirSync('open-api',{recursive:true});fs.mkdirSync('types',{recursive:true});"[17;1H[?25hOpenAPI schema written to open-api/schema.json
|
||||||
|
|
||||||
|
> @repo/api@0.0.0 generate:types C:\Users\LOQ\Desktop\workspace\carage-erp\packages\api
|
||||||
|
> node scripts/generate-types.cjs
|
||||||
|
|
||||||
|
]0;npm[1mnpm[22m [33mwarn [94mUnknown env config "recursive". This will stop working in the next major version of npm.
[m
|
||||||
|
]0;npm exec openapi-typescript open-api/schema.json -o types/index.ts⠙
[K✨ [1mopenapi-typescript 7.13.0
[22m
|
||||||
|
🚀 [32mopen-api/schema.json → [1mtypes/index.ts[m [2m[286.8ms]
[22m
|
||||||
|
⠙
[K
|
||||||
|
> dashboard@0.0.1 build C:\Users\LOQ\Desktop\workspace\carage-erp\apps\dashboard
|
||||||
|
> next build
|
||||||
|
|
||||||
|
[38;2;173;127;168m[1m▲ Next.js 16.1.7[m (Turbopack)
|
||||||
|
- Environments: .env
|
||||||
|
|
||||||
|
[37m[1m [m Creating an optimized production build ...
|
||||||
|
[32m[1m✓[m Compiled successfully in 6.9s
|
||||||
|
[?25l[37m[1m [m Running TypeScript [36m.[m
[K[146C[37m[1m
[m Running TypeScript [36m..[m
[K[146C[37m[1m
[m Running TypeScript [36m...[m
[K[146C[37m[1m
[m Running TypeScript [36m.[m
[K[146C[37m[1m
[m Running TypeScript [36m..[m
[K[146C[37m[1m
[m Running TypeScript [36m...[m
[K[146C[37m[1m
[m Running TypeScript [36m.[m
[K[146C[37m[1m
[m Running TypeScript [36m..[m
[K[146C[37m[1m
[m Running TypeScript [36m...[m
[K[146C[37m[1m
[m Running TypeScript [36m.[m
[K[146C[37m[1m
[m Running TypeScript [36m..[m
[K[146C[37m[1m
[m Running TypeScript [36m...[m
[K[146C[37m[1m
[m Running TypeScript [36m.[m
[K[146C[37m[1m
[m Running TypeScript [36m..[m
[K[146C[37m[1m
[m Running TypeScript [36m...[m
[K[146C[37m[1m
[m Running TypeScript [36m.[m
[K[146C[37m[1m
[m Running TypeScript [36m..[m
[K[146C[37m[1m
[m Running TypeScript [36m...[m
[K[146C[37m[1m
[m Running TypeScript [36m.[m
[K[146C[37m[1m
[m Running TypeScript [36m..[m
[K[146C[37m[1m
[m Running TypeScript [36m...[m
[K[146C[37m[1m
[m Running TypeScript [36m.[m
[K[146C[37m[1m
[m Running TypeScript [36m..[m
[K[146C[37m[1m
[m Running TypeScript [36m...[m
[K[146C[37m[1m
[m Running TypeScript [36m.[m
[K[146C[37m[1m
[m Running TypeScript [36m..[m
[K[146C[37m[1m
[m Running TypeScript [36m...[m
[K[146C[37m[1m
[m Running TypeScript [36m.[m
[K[146C[37m[1m
[m Running TypeScript [36m..[m
[K[146C[37m[1m
[m Running TypeScript [36m...[m
[K[146C[37m[1m
[m Running TypeScript [36m.[m
[K[146C[37m[1m
[m Running TypeScript [36m..[m
[K[146C[37m[1m
[m Running TypeScript [36m...[m
[K[146C[37m[1m
[m Running TypeScript [36m.[m
[K[146C[37m[1m
[m Running TypeScript [36m..[m
[K[146C[32m[1m
✓[m Finished TypeScript in 7.0s[K
[?25h
|
||||||
|
[37m[1m [m Collecting page data using 27 workers [36m.[K[?25l[104C[m
[K[146C[37m[1m
[m Collecting page data using 27 workers [36m..[m
[K[146C[37m[1m
[m Collecting page data using 27 workers [36m...[m
[K[146C[37m[1m
[m Collecting page data using 27 workers [36m.[m
[K[146C[37m[1m
[m Collecting page data using 27 workers [36m..[m[32m[1m
✓[m Collecting page data using 27 workers in 823.0ms[K
[?25h
|
||||||
|
[37m[1m [m Generating static pages using 27 workers (0/15) [36m[ ][?25l[m
[K[146C[37m[1m
[m Generating static pages using 27 workers (0/15) [36m[= ][m
[K[146C[37m[1m
[m Generating static pages using 27 workers (0/15) [36m[== ][m
[K[146C[37m[1m
[m Generating static pages using 27 workers (0/15) [36m[=== ][m
[K[146C[37m[1m
[m Generating static pages using 27 workers (8/15) [36m[ ===][m
[K[146C[32m[1m
✓[m Generating static pages using 27 workers (15/15) in 876.0ms
[?25h
|
||||||
|
[37m[1m [m Finalizing page optimization [36m.[K[?25l[113C[m[32m[1m
✓[m Finalizing page optimization in 10.5ms[K
[?25h
|
||||||
|
|
||||||
|
[4mRoute (app)[24m[K
|
||||||
|
┌ ○ /
|
||||||
|
├ ○ /_not-found
|
||||||
|
├ ○ /items/parts
|
||||||
|
├ ○ /items/service-group
|
||||||
|
├ ○ /items/services
|
||||||
|
├ ○ /login
|
||||||
|
├ ○ /productivity/employees
|
||||||
|
├ ○ /productivity/shop-calendars
|
||||||
|
├ ○ /productivity/shop-timings
|
||||||
|
├ ○ /sales/customers
|
||||||
|
├ ○ /sales/inspections
|
||||||
|
├ ○ /sales/vehicles
|
||||||
|
└ ○ /settings/shop-type
|
||||||
|
|
||||||
|
|
||||||
|
○ (Static) prerendered as static content
|
||||||
|
|
||||||
|
[?9001l[?1004l
|
||||||
Binary file not shown.
160
README.md
160
README.md
@ -1,159 +1,21 @@
|
|||||||
# Turborepo starter
|
# Next.js template
|
||||||
|
|
||||||
This Turborepo starter is maintained by the Turborepo core team.
|
This is a Next.js template with shadcn/ui.
|
||||||
|
|
||||||
## Using this example
|
## Adding components
|
||||||
|
|
||||||
Run the following command:
|
To add components to your app, run the following command:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
npx create-turbo@latest
|
npx shadcn@latest add button
|
||||||
```
|
```
|
||||||
|
|
||||||
## What's inside?
|
This will place the ui components in the `components` directory.
|
||||||
|
|
||||||
This Turborepo includes the following packages/apps:
|
## Using components
|
||||||
|
|
||||||
### Apps and Packages
|
To use the components in your app, import them as follows:
|
||||||
|
|
||||||
- `docs`: a [Next.js](https://nextjs.org/) app
|
```tsx
|
||||||
- `web`: another [Next.js](https://nextjs.org/) app
|
import { Button } from "@/components/ui/button";
|
||||||
- `@repo/ui`: a stub React component library shared by both `web` and `docs` applications
|
|
||||||
- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
|
|
||||||
- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo
|
|
||||||
|
|
||||||
Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
|
|
||||||
|
|
||||||
### Utilities
|
|
||||||
|
|
||||||
This Turborepo has some additional tools already setup for you:
|
|
||||||
|
|
||||||
- [TypeScript](https://www.typescriptlang.org/) for static type checking
|
|
||||||
- [ESLint](https://eslint.org/) for code linting
|
|
||||||
- [Prettier](https://prettier.io) for code formatting
|
|
||||||
|
|
||||||
### Build
|
|
||||||
|
|
||||||
To build all apps and packages, run the following command:
|
|
||||||
|
|
||||||
With [global `turbo`](https://turborepo.dev/docs/getting-started/installation#global-installation) installed (recommended):
|
|
||||||
|
|
||||||
```sh
|
|
||||||
cd my-turborepo
|
|
||||||
turbo build
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Without global `turbo`, use your package manager:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
cd my-turborepo
|
|
||||||
npx turbo build
|
|
||||||
yarn dlx turbo build
|
|
||||||
pnpm exec turbo build
|
|
||||||
```
|
|
||||||
|
|
||||||
You can build a specific package by using a [filter](https://turborepo.dev/docs/crafting-your-repository/running-tasks#using-filters):
|
|
||||||
|
|
||||||
With [global `turbo`](https://turborepo.dev/docs/getting-started/installation#global-installation) installed:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
turbo build --filter=docs
|
|
||||||
```
|
|
||||||
|
|
||||||
Without global `turbo`:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npx turbo build --filter=docs
|
|
||||||
yarn exec turbo build --filter=docs
|
|
||||||
pnpm exec turbo build --filter=docs
|
|
||||||
```
|
|
||||||
|
|
||||||
### Develop
|
|
||||||
|
|
||||||
To develop all apps and packages, run the following command:
|
|
||||||
|
|
||||||
With [global `turbo`](https://turborepo.dev/docs/getting-started/installation#global-installation) installed (recommended):
|
|
||||||
|
|
||||||
```sh
|
|
||||||
cd my-turborepo
|
|
||||||
turbo dev
|
|
||||||
```
|
|
||||||
|
|
||||||
Without global `turbo`, use your package manager:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
cd my-turborepo
|
|
||||||
npx turbo dev
|
|
||||||
yarn exec turbo dev
|
|
||||||
pnpm exec turbo dev
|
|
||||||
```
|
|
||||||
|
|
||||||
You can develop a specific package by using a [filter](https://turborepo.dev/docs/crafting-your-repository/running-tasks#using-filters):
|
|
||||||
|
|
||||||
With [global `turbo`](https://turborepo.dev/docs/getting-started/installation#global-installation) installed:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
turbo dev --filter=web
|
|
||||||
```
|
|
||||||
|
|
||||||
Without global `turbo`:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npx turbo dev --filter=web
|
|
||||||
yarn exec turbo dev --filter=web
|
|
||||||
pnpm exec turbo dev --filter=web
|
|
||||||
```
|
|
||||||
|
|
||||||
### Remote Caching
|
|
||||||
|
|
||||||
> [!TIP]
|
|
||||||
> Vercel Remote Cache is free for all plans. Get started today at [vercel.com](https://vercel.com/signup?utm_source=remote-cache-sdk&utm_campaign=free_remote_cache).
|
|
||||||
|
|
||||||
Turborepo can use a technique known as [Remote Caching](https://turborepo.dev/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
|
|
||||||
|
|
||||||
By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup?utm_source=turborepo-examples), then enter the following commands:
|
|
||||||
|
|
||||||
With [global `turbo`](https://turborepo.dev/docs/getting-started/installation#global-installation) installed (recommended):
|
|
||||||
|
|
||||||
```sh
|
|
||||||
cd my-turborepo
|
|
||||||
turbo login
|
|
||||||
```
|
|
||||||
|
|
||||||
Without global `turbo`, use your package manager:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
cd my-turborepo
|
|
||||||
npx turbo login
|
|
||||||
yarn exec turbo login
|
|
||||||
pnpm exec turbo login
|
|
||||||
```
|
|
||||||
|
|
||||||
This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
|
|
||||||
|
|
||||||
Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
|
|
||||||
|
|
||||||
With [global `turbo`](https://turborepo.dev/docs/getting-started/installation#global-installation) installed:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
turbo link
|
|
||||||
```
|
|
||||||
|
|
||||||
Without global `turbo`:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npx turbo link
|
|
||||||
yarn exec turbo link
|
|
||||||
pnpm exec turbo link
|
|
||||||
```
|
|
||||||
|
|
||||||
## Useful Links
|
|
||||||
|
|
||||||
Learn more about the power of Turborepo:
|
|
||||||
|
|
||||||
- [Tasks](https://turborepo.dev/docs/crafting-your-repository/running-tasks)
|
|
||||||
- [Caching](https://turborepo.dev/docs/crafting-your-repository/caching)
|
|
||||||
- [Remote Caching](https://turborepo.dev/docs/core-concepts/remote-caching)
|
|
||||||
- [Filtering](https://turborepo.dev/docs/crafting-your-repository/running-tasks#using-filters)
|
|
||||||
- [Configuration Options](https://turborepo.dev/docs/reference/configuration)
|
|
||||||
- [CLI Usage](https://turborepo.dev/docs/reference/command-line-reference)
|
|
||||||
|
|||||||
90
app/(authenticated)/items/parts/page.tsx
Normal file
90
app/(authenticated)/items/parts/page.tsx
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||||
|
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||||
|
import { PartForm } from "@/modules/parts/part-form"
|
||||||
|
import { Badge } from "@/shared/components/ui/badge"
|
||||||
|
import { PARTS_ROUTES } from "@repo/api"
|
||||||
|
import type { PartsClient } from "@repo/api"
|
||||||
|
|
||||||
|
export default function PartsPage() {
|
||||||
|
return (
|
||||||
|
<ResourcePage<PartsClient>
|
||||||
|
pageTitle="Parts"
|
||||||
|
title="Part"
|
||||||
|
routeKey={PARTS_ROUTES.INDEX}
|
||||||
|
getClient={(api) => api.parts}
|
||||||
|
columns={({ actionsColumn }) => [
|
||||||
|
{
|
||||||
|
accessorKey: "title",
|
||||||
|
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const r = row.original as any
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<span className="font-medium">{r.title || "—"}</span>
|
||||||
|
{r.sku && (
|
||||||
|
<span className="ml-2 text-xs text-muted-foreground">{r.sku}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "part_number",
|
||||||
|
header: ({ column }) => <ColumnHeader column={column} title="Part #" />,
|
||||||
|
cell: ({ row }) => (row.original as any).part_number || "—",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "manufactured_by",
|
||||||
|
header: ({ column }) => <ColumnHeader column={column} title="Manufacturer" />,
|
||||||
|
cell: ({ row }) => (row.original as any).manufactured_by || "—",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "selling_price",
|
||||||
|
header: ({ column }) => <ColumnHeader column={column} title="Sell Price" />,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const val = (row.original as any).selling_price
|
||||||
|
return val != null ? `$${Number(val).toFixed(2)}` : "—"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "purchase_price",
|
||||||
|
header: ({ column }) => <ColumnHeader column={column} title="Cost" />,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const val = (row.original as any).purchase_price
|
||||||
|
return val != null ? `$${Number(val).toFixed(2)}` : "—"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "is_active",
|
||||||
|
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const active = (row.original as any).is_active
|
||||||
|
return (
|
||||||
|
<Badge variant={active ? "default" : "secondary"}>
|
||||||
|
{active ? "Active" : "Inactive"}
|
||||||
|
</Badge>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "created_at",
|
||||||
|
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const val = (row.original as any).created_at
|
||||||
|
return val ? new Date(val).toLocaleDateString() : "—"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actionsColumn(),
|
||||||
|
]}
|
||||||
|
renderForm={({ resourceId, initialData, onSuccess }) => (
|
||||||
|
<PartForm
|
||||||
|
resourceId={resourceId}
|
||||||
|
initialData={initialData}
|
||||||
|
onSuccess={onSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -2,31 +2,18 @@
|
|||||||
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { ServiceGroupForm } from "@/modules/service-groups/service-group-form"
|
import { ServiceGroupForm } from "@/modules/service-groups/service-group-form"
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
import { Badge } from "@/shared/components/ui/badge"
|
||||||
import { SERVICE_GROUP_ROUTES } from "@garage/api"
|
import { SERVICE_GROUP_ROUTES } from "@repo/api"
|
||||||
import type { ServiceGroupsClient } from "@garage/api"
|
import type { ServiceGroupsClient } from "@repo/api"
|
||||||
|
|
||||||
export default function ServiceGroupPage() {
|
export default function ServiceGroupPage() {
|
||||||
return (
|
return (
|
||||||
<ResourcePage<ServiceGroupsClient>
|
<ResourcePage<ServiceGroupsClient>
|
||||||
pageTitle="Service Groups"
|
pageTitle="Service Groups"
|
||||||
|
title="Service Group"
|
||||||
routeKey={SERVICE_GROUP_ROUTES.INDEX}
|
routeKey={SERVICE_GROUP_ROUTES.INDEX}
|
||||||
getClient={(api) => api.serviceGroups}
|
getClient={(api) => api.serviceGroups}
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Service Group">
|
|
||||||
{(resourceId) => (
|
|
||||||
<ServiceGroupForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
columns={({ actionsColumn }) => [
|
||||||
{
|
{
|
||||||
accessorKey: "name",
|
accessorKey: "name",
|
||||||
@ -73,6 +60,13 @@ export default function ServiceGroupPage() {
|
|||||||
},
|
},
|
||||||
actionsColumn(),
|
actionsColumn(),
|
||||||
]}
|
]}
|
||||||
|
renderForm={({ resourceId, initialData, onSuccess }) => (
|
||||||
|
<ServiceGroupForm
|
||||||
|
resourceId={resourceId}
|
||||||
|
initialData={initialData}
|
||||||
|
onSuccess={onSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -2,45 +2,17 @@
|
|||||||
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
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 { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { ServiceForm } from "@/modules/services/service-form"
|
import { ServiceForm } from "@/modules/services/service-form"
|
||||||
import { SERVICE_ROUTES } from "@garage/api"
|
import { SERVICE_ROUTES } from "@repo/api"
|
||||||
import type { ServicesClient } from "@garage/api"
|
import type { ServicesClient } from "@repo/api"
|
||||||
|
|
||||||
export default function ServicesPage() {
|
export default function ServicesPage() {
|
||||||
const api = useAuthApi()
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ResourcePage<ServicesClient>
|
<ResourcePage<ServicesClient>
|
||||||
pageTitle="Services"
|
pageTitle="Services"
|
||||||
|
title="Service"
|
||||||
routeKey={SERVICE_ROUTES.INDEX}
|
routeKey={SERVICE_ROUTES.INDEX}
|
||||||
getClient={(api) => api.services}
|
getClient={(api) => api.services}
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<ImportDataButton
|
|
||||||
onImport={(file) => api.services.importData(file)}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
<ExportDataButton
|
|
||||||
onExport={(filters) => api.services.exportData(filters)}
|
|
||||||
fileName="services"
|
|
||||||
/>
|
|
||||||
<FormDialog title="Service">
|
|
||||||
{(resourceId) => (
|
|
||||||
<ServiceForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
columns={({ actionsColumn }) => [
|
||||||
{
|
{
|
||||||
accessorKey: "labor_name",
|
accessorKey: "labor_name",
|
||||||
@ -63,7 +35,7 @@ export default function ServicesPage() {
|
|||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const val = (row.original as any).description
|
const val = (row.original as any).description
|
||||||
return val
|
return val
|
||||||
? <span className="max-w-50 truncate block">{val}</span>
|
? <span className="max-w-[200px] truncate block">{val}</span>
|
||||||
: "—"
|
: "—"
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -85,6 +57,13 @@ export default function ServicesPage() {
|
|||||||
},
|
},
|
||||||
actionsColumn(),
|
actionsColumn(),
|
||||||
]}
|
]}
|
||||||
|
renderForm={({ resourceId, initialData, onSuccess }) => (
|
||||||
|
<ServiceForm
|
||||||
|
resourceId={resourceId}
|
||||||
|
initialData={initialData}
|
||||||
|
onSuccess={onSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,5 +1,7 @@
|
|||||||
import type { NavGroup } from "@/base/types/navigation"
|
"use client"
|
||||||
|
|
||||||
|
import { Suspense } from "react"
|
||||||
|
import type { NavGroup } from "@/base/types/navigation"
|
||||||
import {
|
import {
|
||||||
AlarmClockIcon,
|
AlarmClockIcon,
|
||||||
AwardIcon,
|
AwardIcon,
|
||||||
@ -31,7 +33,6 @@ import {
|
|||||||
ReceiptIcon,
|
ReceiptIcon,
|
||||||
ReceiptTextIcon,
|
ReceiptTextIcon,
|
||||||
SettingsIcon,
|
SettingsIcon,
|
||||||
ShieldIcon,
|
|
||||||
ShoppingBasketIcon,
|
ShoppingBasketIcon,
|
||||||
CircleDollarSign,
|
CircleDollarSign,
|
||||||
StarIcon,
|
StarIcon,
|
||||||
@ -42,7 +43,11 @@ import {
|
|||||||
WrenchIcon,
|
WrenchIcon,
|
||||||
ShoppingCartIcon,
|
ShoppingCartIcon,
|
||||||
} from "lucide-react"
|
} from "lucide-react"
|
||||||
export const navGroups: NavGroup[] = [
|
import Image from "next/image"
|
||||||
|
import { DashboardLayout } from "@/base/components/layout/dashboard"
|
||||||
|
import { useAuth } from "@/shared/hooks/use-auth"
|
||||||
|
|
||||||
|
const navGroups: NavGroup[] = [
|
||||||
{
|
{
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
@ -52,19 +57,19 @@ export const navGroups: NavGroup[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Job Cards",
|
title: "Job Cards",
|
||||||
href: "/sales/job-cards",
|
href: "/sales/workorder/list",
|
||||||
icon: <ClipboardListIcon />,
|
icon: <ClipboardListIcon />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Customer & Vehicles",
|
title: "Customer & Vehicles",
|
||||||
href: "/sales/vehicles",
|
href: "/customer-vehicles",
|
||||||
icon: <UsersIcon />,
|
icon: <UsersIcon />,
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// title: "Reports",
|
title: "Reports",
|
||||||
// href: "/reports",
|
href: "/reports",
|
||||||
// icon: <BarChart3Icon />,
|
icon: <BarChart3Icon />,
|
||||||
// },
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -75,7 +80,7 @@ export const navGroups: NavGroup[] = [
|
|||||||
href: "/calendars",
|
href: "/calendars",
|
||||||
icon: <CalendarIcon />,
|
icon: <CalendarIcon />,
|
||||||
items: [
|
items: [
|
||||||
// { title: "Work Schedule", href: "/calendar/work-schedule/list", icon: <Clock3Icon /> },
|
{ title: "Work Schedule", href: "/calendar/work-schedule/list", icon: <Clock3Icon /> },
|
||||||
{ title: "Appointments", href: "/calendar/appointment/list", icon: <CalendarCheck2Icon /> },
|
{ title: "Appointments", href: "/calendar/appointment/list", icon: <CalendarCheck2Icon /> },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@ -87,8 +92,8 @@ export const navGroups: NavGroup[] = [
|
|||||||
{ title: "Customers", href: "/sales/customers", icon: <UsersIcon /> },
|
{ title: "Customers", href: "/sales/customers", icon: <UsersIcon /> },
|
||||||
{ title: "Vehicles", href: "/sales/vehicles", icon: <CarIcon /> },
|
{ title: "Vehicles", href: "/sales/vehicles", icon: <CarIcon /> },
|
||||||
{ title: "Inspections", href: "/sales/inspections", icon: <ClipboardCheckIcon /> },
|
{ title: "Inspections", href: "/sales/inspections", icon: <ClipboardCheckIcon /> },
|
||||||
{ title: "Estimates", href: "/sales/estimates", icon: <ReceiptTextIcon /> },
|
{ title: "Estimates", href: "/sales/estimate", icon: <ReceiptTextIcon /> },
|
||||||
{ title: "Job Cards", href: "/sales/job-cards", icon: <ClipboardListIcon /> },
|
{ title: "Job Cards", href: "/sales/workorder/list", icon: <ClipboardListIcon /> },
|
||||||
{ title: "Invoices", href: "/sales/invoice", icon: <ReceiptIcon /> },
|
{ title: "Invoices", href: "/sales/invoice", icon: <ReceiptIcon /> },
|
||||||
{ title: "Payments Received", href: "/sales/payment-received", icon: <HandCoinsIcon /> },
|
{ title: "Payments Received", href: "/sales/payment-received", icon: <HandCoinsIcon /> },
|
||||||
{ title: "Credit Notes", href: "/sales/credit-notes", icon: <ReceiptTextIcon /> },
|
{ title: "Credit Notes", href: "/sales/credit-notes", icon: <ReceiptTextIcon /> },
|
||||||
@ -107,35 +112,35 @@ export const navGroups: NavGroup[] = [
|
|||||||
{ title: "Vendor Credits", href: "/purchase/vendor-credit", icon: <ReceiptTextIcon /> },
|
{ title: "Vendor Credits", href: "/purchase/vendor-credit", icon: <ReceiptTextIcon /> },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// title: "CRM",
|
title: "CRM",
|
||||||
// href: "/crm",
|
href: "/crm",
|
||||||
// icon: <BriefcaseBusinessIcon />,
|
icon: <BriefcaseBusinessIcon />,
|
||||||
// items: [
|
items: [
|
||||||
// { title: "Leads", href: "/crm/leads/list", icon: <GemIcon /> },
|
{ title: "Leads", href: "/crm/leads/list", icon: <GemIcon /> },
|
||||||
// { title: "Calls", href: "/crm/calls-follow-up/list", icon: <PhoneCallIcon /> },
|
{ title: "Calls", href: "/crm/calls-follow-up/list", icon: <PhoneCallIcon /> },
|
||||||
// { title: "Tasks", href: "/crm/tasks/list", icon: <ListTodoIcon /> },
|
{ title: "Tasks", href: "/crm/tasks/list", icon: <ListTodoIcon /> },
|
||||||
// ],
|
],
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// title: "Marketing",
|
title: "Marketing",
|
||||||
// href: "/marketing",
|
href: "/marketing",
|
||||||
// icon: <MegaphoneIcon />,
|
icon: <MegaphoneIcon />,
|
||||||
// items: [
|
items: [
|
||||||
// { title: "Service Reminders", href: "/marketing/service-reminder/list", icon: <AlarmClockIcon /> },
|
{ title: "Service Reminders", href: "/marketing/service-reminder/list", icon: <AlarmClockIcon /> },
|
||||||
// { title: "Rating & Reviews", href: "/marketing/rating-review", icon: <StarIcon /> },
|
{ title: "Rating & Reviews", href: "/marketing/rating-review", icon: <StarIcon /> },
|
||||||
// { title: "Google Business Reviews", href: "/marketing/google-rating-review", icon: <AwardIcon /> },
|
{ title: "Google Business Reviews", href: "/marketing/google-rating-review", icon: <AwardIcon /> },
|
||||||
// ],
|
],
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// title: "Accountants",
|
title: "Accountants",
|
||||||
// href: "/accountants",
|
href: "/accountants",
|
||||||
// icon: <BookIcon />,
|
icon: <BookIcon />,
|
||||||
// items: [
|
items: [
|
||||||
// { title: "Manual Journals", href: "/accountants/manual-journal", icon: <BookIcon /> },
|
{ title: "Manual Journals", href: "/accountants/manual-journal", icon: <BookIcon /> },
|
||||||
// { title: "Chart of Accounts", href: "/accountants/chart-of-account", icon: <GitBranchIcon /> },
|
{ title: "Chart of Accounts", href: "/accountants/chart-of-account", icon: <GitBranchIcon /> },
|
||||||
// ],
|
],
|
||||||
// },
|
},
|
||||||
{
|
{
|
||||||
title: "Employees",
|
title: "Employees",
|
||||||
href: "/productivity",
|
href: "/productivity",
|
||||||
@ -144,12 +149,11 @@ export const navGroups: NavGroup[] = [
|
|||||||
{ title: "Employees", href: "/productivity/employees", icon: <UsersIcon /> },
|
{ title: "Employees", href: "/productivity/employees", icon: <UsersIcon /> },
|
||||||
{ title: "Time Clocks", href: "/productivity/time-clocks", icon: <TimerIcon /> },
|
{ title: "Time Clocks", href: "/productivity/time-clocks", icon: <TimerIcon /> },
|
||||||
{ title: "Time Sheets", href: "/productivity/timesheet", icon: <ClockIcon /> },
|
{ title: "Time Sheets", href: "/productivity/timesheet", icon: <ClockIcon /> },
|
||||||
// { title: "Payroll", href: "/productivity/payroll", icon: <WalletIcon /> },
|
{ title: "Payroll", href: "/productivity/payroll", icon: <WalletIcon /> },
|
||||||
// { title: "Payments Made", href: "/productivity/employee-payments-made", icon: <HandCoinsIcon /> },
|
{ title: "Payments Made", href: "/productivity/employee-payments-made", icon: <HandCoinsIcon /> },
|
||||||
// { title: "Shop Calendars", href: "/productivity/shop-calendars", icon: <CalendarDaysIcon /> },
|
{ title: "Shop Calendars", href: "/productivity/shop-calendars", icon: <CalendarDaysIcon /> },
|
||||||
// { title: "Shop Timing", href: "/productivity/shop-timings", icon: <Clock3Icon /> },
|
{ title: "Shop Timing", href: "/productivity/shop-timings", icon: <Clock3Icon /> },
|
||||||
{ title: "Holidays", href: "/productivity/holidays", icon: <CalendarIcon /> },
|
{ title: "Holidays", href: "/productivity/holidays", icon: <CalendarIcon /> },
|
||||||
{ title: "Tasks", href: "/productivity/tasks", icon: <ListTodoIcon /> },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -161,7 +165,7 @@ export const navGroups: NavGroup[] = [
|
|||||||
{ title: "Parts", href: "/items/parts", icon: <WrenchIcon /> },
|
{ title: "Parts", href: "/items/parts", icon: <WrenchIcon /> },
|
||||||
{ title: "Expense Item", href: "/items/expense-item", icon: <WalletIcon /> },
|
{ title: "Expense Item", href: "/items/expense-item", icon: <WalletIcon /> },
|
||||||
{ title: "Service Group", href: "/items/service-group", icon: <PackageIcon /> },
|
{ title: "Service Group", href: "/items/service-group", icon: <PackageIcon /> },
|
||||||
// { title: "Inspections", href: "/items/inspection", icon: <ClipboardCheckIcon /> },
|
{ title: "Inspections", href: "/items/inspection", icon: <ClipboardCheckIcon /> },
|
||||||
{ title: "Inventory Adjustments", href: "/items/adjustment", icon: <ListIcon /> },
|
{ title: "Inventory Adjustments", href: "/items/adjustment", icon: <ListIcon /> },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@ -170,18 +174,46 @@ export const navGroups: NavGroup[] = [
|
|||||||
href: "/setting",
|
href: "/setting",
|
||||||
icon: <SettingsIcon />,
|
icon: <SettingsIcon />,
|
||||||
items: [
|
items: [
|
||||||
{ title: "Company", href: "/settings/company", icon: <Building2Icon /> },
|
{ title: "Company", href: "/setting/company", icon: <Building2Icon /> },
|
||||||
{ title: "Shop Types", href: "/settings/shop-type", icon: <CarIcon /> },
|
{ title: "Shop Types", href: "/setting/shop-type", icon: <CarIcon /> },
|
||||||
{ title: "Departments", href: "/settings/departments", icon: <Building2Icon /> },
|
{ title: "Tax & Rates", href: "/setting/tax-rates", icon: <ReceiptTextIcon /> },
|
||||||
{ title: "Insurance Types", href: "/settings/insurance-types", icon: <ShieldIcon /> },
|
{ title: "Configurations", href: "/setting/configurations/preferences/sales", icon: <SettingsIcon /> },
|
||||||
{ title: "Tax & Rates", href: "/settings/tax-rates", icon: <ReceiptTextIcon /> },
|
{ title: "Templates", href: "/setting/templates", icon: <ClipboardListIcon /> },
|
||||||
{ title: "Make & Models", href: "/settings/make-and-models", icon: <CarIcon /> },
|
{ title: "Integrations", href: "/setting/integrations/providers", icon: <PlugZapIcon /> },
|
||||||
{ title: "Configurations", href: "/settings/configurations/preferences/sales", icon: <SettingsIcon /> },
|
{ title: "Master", href: "/setting/master/body-type", icon: <ListIcon /> },
|
||||||
// { title: "Templates", href: "/settings/templates", icon: <ClipboardListIcon /> },
|
|
||||||
// { title: "Integrations", href: "/settings/integrations/providers", icon: <PlugZapIcon /> },
|
|
||||||
// { title: "Master", href: "/settings/master/body-type", icon: <ListIcon /> },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
function Logo() {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Image alt="Logo" src={'/assets/logo.png'} height={200} width={200}/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AuthenticatedLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
const { user } = useAuth()
|
||||||
|
|
||||||
|
const userInfo = user
|
||||||
|
? {
|
||||||
|
name: user.name,
|
||||||
|
email: user.email,
|
||||||
|
initials: user.name.charAt(0).toUpperCase(),
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DashboardLayout navGroups={navGroups} logo={<Logo />} user={userInfo}>
|
||||||
|
<Suspense>{children}</Suspense>
|
||||||
|
</DashboardLayout>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
14
app/(authenticated)/page.tsx
Normal file
14
app/(authenticated)/page.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { DashboardHeader } from "@/base/components/layout/dashboard";
|
||||||
|
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page";
|
||||||
|
export default function page() {
|
||||||
|
return (
|
||||||
|
<DashboardPage header={<DashboardHeader />} >
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Welcome to your dashboard. Select an item from the sidebar to get started.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</DashboardPage>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -2,33 +2,17 @@
|
|||||||
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { EmployeeForm } from "@/modules/employees/employee-form"
|
import { EmployeeForm } from "@/modules/employees/employee-form"
|
||||||
import { EMPLOYEE_ROUTES } from "@garage/api"
|
import { EMPLOYEE_ROUTES } from "@repo/api"
|
||||||
import type { EmployeesClient } from "@garage/api"
|
import type { EmployeesClient } from "@repo/api"
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
|
|
||||||
export default function EmployeesPage() {
|
export default function EmployeesPage() {
|
||||||
const router = useRouter()
|
|
||||||
return (
|
return (
|
||||||
<ResourcePage<EmployeesClient>
|
<ResourcePage<EmployeesClient>
|
||||||
pageTitle="Employees"
|
pageTitle="Employees"
|
||||||
|
title="Employee"
|
||||||
routeKey={EMPLOYEE_ROUTES.INDEX}
|
routeKey={EMPLOYEE_ROUTES.INDEX}
|
||||||
getClient={(api) => api.employees}
|
getClient={(api) => api.employees}
|
||||||
onRowClick={(row) => router.push(`/productivity/employees/${(row as any).id}`)}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Employee">
|
|
||||||
{(resourceId) => (
|
|
||||||
<EmployeeForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
columns={({ actionsColumn }) => [
|
||||||
{
|
{
|
||||||
accessorKey: "first_name",
|
accessorKey: "first_name",
|
||||||
@ -69,6 +53,13 @@ export default function EmployeesPage() {
|
|||||||
},
|
},
|
||||||
actionsColumn(),
|
actionsColumn(),
|
||||||
]}
|
]}
|
||||||
|
renderForm={({ resourceId, initialData, onSuccess }) => (
|
||||||
|
<EmployeeForm
|
||||||
|
resourceId={resourceId}
|
||||||
|
initialData={initialData}
|
||||||
|
onSuccess={onSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -2,31 +2,18 @@
|
|||||||
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { ShopCalendarForm } from "@/modules/shop-calendars/shop-calendar-form"
|
import { ShopCalendarForm } from "@/modules/shop-calendars/shop-calendar-form"
|
||||||
import { SHOP_CALENDAR_ROUTES } from "@garage/api"
|
import { SHOP_CALENDAR_ROUTES } from "@repo/api"
|
||||||
import type { ShopCalendarsClient } from "@garage/api"
|
import type { ShopCalendarsClient } from "@repo/api"
|
||||||
import { CheckCircle2Icon } from "lucide-react"
|
import { CheckCircle2Icon } from "lucide-react"
|
||||||
|
|
||||||
export default function ShopCalendarsPage() {
|
export default function ShopCalendarsPage() {
|
||||||
return (
|
return (
|
||||||
<ResourcePage<ShopCalendarsClient>
|
<ResourcePage<ShopCalendarsClient>
|
||||||
pageTitle="Shop Calendars"
|
pageTitle="Shop Calendars"
|
||||||
|
title="Shop Calendar"
|
||||||
routeKey={SHOP_CALENDAR_ROUTES.INDEX}
|
routeKey={SHOP_CALENDAR_ROUTES.INDEX}
|
||||||
getClient={(api) => api.shopCalendars}
|
getClient={(api) => api.shopCalendars}
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Shop Calendar">
|
|
||||||
{(resourceId) => (
|
|
||||||
<ShopCalendarForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
columns={({ actionsColumn }) => [
|
||||||
{
|
{
|
||||||
accessorKey: "title",
|
accessorKey: "title",
|
||||||
@ -51,6 +38,13 @@ export default function ShopCalendarsPage() {
|
|||||||
},
|
},
|
||||||
actionsColumn({ onEdit: undefined }),
|
actionsColumn({ onEdit: undefined }),
|
||||||
]}
|
]}
|
||||||
|
renderForm={({ resourceId, initialData, onSuccess }) => (
|
||||||
|
<ShopCalendarForm
|
||||||
|
resourceId={resourceId}
|
||||||
|
initialData={initialData}
|
||||||
|
onSuccess={onSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -2,31 +2,18 @@
|
|||||||
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { ShopTimingForm } from "@/modules/shop-timings/shop-timing-form"
|
import { ShopTimingForm } from "@/modules/shop-timings/shop-timing-form"
|
||||||
import { SHOP_TIMING_ROUTES } from "@garage/api"
|
import { SHOP_TIMING_ROUTES } from "@repo/api"
|
||||||
import type { ShopTimingsClient } from "@garage/api"
|
import type { ShopTimingsClient } from "@repo/api"
|
||||||
import { CheckCircle2Icon } from "lucide-react"
|
import { CheckCircle2Icon } from "lucide-react"
|
||||||
|
|
||||||
export default function ShopTimingsPage() {
|
export default function ShopTimingsPage() {
|
||||||
return (
|
return (
|
||||||
<ResourcePage<ShopTimingsClient>
|
<ResourcePage<ShopTimingsClient>
|
||||||
pageTitle="Shop Timings"
|
pageTitle="Shop Timings"
|
||||||
|
title="Shop Timing"
|
||||||
routeKey={SHOP_TIMING_ROUTES.INDEX}
|
routeKey={SHOP_TIMING_ROUTES.INDEX}
|
||||||
getClient={(api) => api.shopTimings}
|
getClient={(api) => api.shopTimings}
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Shop Timing">
|
|
||||||
{(resourceId) => (
|
|
||||||
<ShopTimingForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
columns={({ actionsColumn }) => [
|
||||||
{
|
{
|
||||||
accessorKey: "title",
|
accessorKey: "title",
|
||||||
@ -58,6 +45,13 @@ export default function ShopTimingsPage() {
|
|||||||
},
|
},
|
||||||
actionsColumn(),
|
actionsColumn(),
|
||||||
]}
|
]}
|
||||||
|
renderForm={({ resourceId, initialData, onSuccess }) => (
|
||||||
|
<ShopTimingForm
|
||||||
|
resourceId={resourceId}
|
||||||
|
initialData={initialData}
|
||||||
|
onSuccess={onSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
54
app/(authenticated)/sales/customers/page.tsx
Normal file
54
app/(authenticated)/sales/customers/page.tsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { ResourcePage } from '@/shared/data-view/resource-page'
|
||||||
|
import { ColumnHeader } from '@/shared/data-view/table-view'
|
||||||
|
import { CustomerForm } from '@/modules/customers/customer-form'
|
||||||
|
import { CUSTOMER_ROUTES } from '@repo/api'
|
||||||
|
import type { CustomersClient } from '@repo/api'
|
||||||
|
import { Building2Icon, UserIcon } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function CustomersPage() {
|
||||||
|
return (
|
||||||
|
<ResourcePage<CustomersClient>
|
||||||
|
pageTitle='Customers'
|
||||||
|
title="Customer"
|
||||||
|
routeKey={CUSTOMER_ROUTES.INDEX}
|
||||||
|
getClient={(api) => api.customers}
|
||||||
|
columns={({ actionsColumn }) => [
|
||||||
|
|
||||||
|
{
|
||||||
|
accessorKey: "first_name",
|
||||||
|
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const customerName = row.original.first_name
|
||||||
|
const isCompany = row.original.customer_type?.name?.toLocaleLowerCase() === "company";
|
||||||
|
const companyName = row.original.company_name
|
||||||
|
const name = isCompany && companyName ? `${customerName} (${row.original.last_name})` : customerName
|
||||||
|
|
||||||
|
return (<div className="flex items-center gap-2">
|
||||||
|
{isCompany ? <Building2Icon className="text-muted-foreground" /> : <UserIcon className="text-muted-foreground" />}
|
||||||
|
<span>{name}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "email",
|
||||||
|
header: ({ column }) => <ColumnHeader column={column} title="Email" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "phone",
|
||||||
|
header: ({ column }) => <ColumnHeader column={column} title="Phone" />,
|
||||||
|
},
|
||||||
|
actionsColumn(),
|
||||||
|
]}
|
||||||
|
renderForm={({ resourceId, initialData, onSuccess }) => (
|
||||||
|
<CustomerForm
|
||||||
|
resourceId={resourceId}
|
||||||
|
initialData={initialData}
|
||||||
|
onSuccess={onSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -2,34 +2,17 @@
|
|||||||
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { InspectionForm } from "@/modules/inspections/inspection-form"
|
import { InspectionForm } from "@/modules/inspections/inspection-form"
|
||||||
import { INSPECTION_ROUTES } from "@garage/api"
|
import { INSPECTION_ROUTES } from "@repo/api"
|
||||||
import type { InspectionsClient } from "@garage/api"
|
import type { InspectionsClient } from "@repo/api"
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
|
|
||||||
export default function InspectionsPage() {
|
export default function InspectionsPage() {
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ResourcePage<InspectionsClient>
|
<ResourcePage<InspectionsClient>
|
||||||
pageTitle="Inspections"
|
pageTitle="Inspections"
|
||||||
|
title="Inspection"
|
||||||
routeKey={INSPECTION_ROUTES.INDEX}
|
routeKey={INSPECTION_ROUTES.INDEX}
|
||||||
getClient={(api) => api.inspections}
|
getClient={(api) => api.inspections}
|
||||||
onRowClick={(row) => router.push(`/sales/inspections/${(row as any).id}`)}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Inspection">
|
|
||||||
{(resourceId) => (
|
|
||||||
<InspectionForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
columns={({ actionsColumn }) => [
|
||||||
{
|
{
|
||||||
accessorKey: "title",
|
accessorKey: "title",
|
||||||
@ -70,6 +53,13 @@ export default function InspectionsPage() {
|
|||||||
},
|
},
|
||||||
actionsColumn(),
|
actionsColumn(),
|
||||||
]}
|
]}
|
||||||
|
renderForm={({ resourceId, initialData, onSuccess }) => (
|
||||||
|
<InspectionForm
|
||||||
|
resourceId={resourceId}
|
||||||
|
initialData={initialData}
|
||||||
|
onSuccess={onSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -1,54 +1,21 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { useRouter } from 'next/navigation'
|
|
||||||
import { ResourcePage } from '@/shared/data-view/resource-page'
|
import { ResourcePage } from '@/shared/data-view/resource-page'
|
||||||
import { ColumnHeader } from '@/shared/data-view/table-view'
|
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 { DownloadSampleButton } from '@/shared/components/download-sample-button'
|
|
||||||
import { useAuthApi } from '@/shared/useApi'
|
|
||||||
import { VehicleForm } from '@/modules/vehicles/vehicle-form'
|
import { VehicleForm } from '@/modules/vehicles/vehicle-form'
|
||||||
import { VEHICLE_ROUTES } from '@garage/api'
|
import { VEHICLE_ROUTES } from '@repo/api'
|
||||||
import type { VehiclesClient } from '@garage/api'
|
import type { VehiclesClient } from '@repo/api'
|
||||||
import { CarIcon } from 'lucide-react'
|
import { CarIcon } from 'lucide-react'
|
||||||
|
|
||||||
export default function VehiclesPage() {
|
export default function VehiclesPage() {
|
||||||
const router = useRouter()
|
|
||||||
const api = useAuthApi()
|
|
||||||
return (
|
return (
|
||||||
<ResourcePage<VehiclesClient>
|
<ResourcePage<VehiclesClient>
|
||||||
pageTitle="Vehicles"
|
pageTitle="Vehicles"
|
||||||
|
title="Vehicle"
|
||||||
routeKey={VEHICLE_ROUTES.INDEX}
|
routeKey={VEHICLE_ROUTES.INDEX}
|
||||||
getClient={(api) => api.vehicles}
|
getClient={(api) => api.vehicles}
|
||||||
onRowClick={(row) => router.push(`/sales/vehicles/${(row as any).id}`)}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<div className='flex items-center gap-2'>
|
|
||||||
<DownloadSampleButton
|
|
||||||
onDownload={() => api.vehicles.downloadImportSample()}
|
|
||||||
fileName='vehicles-import-sample'
|
|
||||||
/>
|
|
||||||
<ImportDataButton
|
|
||||||
onImport={(file) => api.vehicles.importData(file)}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
<ExportDataButton
|
|
||||||
onExport={(filters) => api.vehicles.exportData(filters)}
|
|
||||||
fileName='vehicles'
|
|
||||||
/>
|
|
||||||
<FormDialog title="Vehicle">
|
|
||||||
{(resourceId) => (
|
|
||||||
<VehicleForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
columns={({ actionsColumn }) => [
|
||||||
{
|
{
|
||||||
accessorKey: "name",
|
accessorKey: "name",
|
||||||
@ -119,6 +86,13 @@ export default function VehiclesPage() {
|
|||||||
},
|
},
|
||||||
actionsColumn(),
|
actionsColumn(),
|
||||||
]}
|
]}
|
||||||
|
renderForm={({ resourceId, initialData, onSuccess }) => (
|
||||||
|
<VehicleForm
|
||||||
|
resourceId={resourceId}
|
||||||
|
initialData={initialData}
|
||||||
|
onSuccess={onSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -2,31 +2,18 @@
|
|||||||
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
import { ResourcePage } from "@/shared/data-view/resource-page"
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
import { ColumnHeader } from "@/shared/data-view/table-view"
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { ShopTypeForm } from "@/modules/settings/shop-type/shop-type-form"
|
import { ShopTypeForm } from "@/modules/settings/shop-type/shop-type-form"
|
||||||
import { SHOP_TYPE_ROUTES } from "@garage/api"
|
import { SHOP_TYPE_ROUTES } from "@repo/api"
|
||||||
import type { ShopTypesClient } from "@garage/api"
|
import type { ShopTypesClient } from "@repo/api"
|
||||||
import { CheckIcon, XIcon } from "lucide-react"
|
import { CheckIcon, XIcon } from "lucide-react"
|
||||||
|
|
||||||
export default function ShopTypesPage() {
|
export default function ShopTypesPage() {
|
||||||
return (
|
return (
|
||||||
<ResourcePage<ShopTypesClient>
|
<ResourcePage<ShopTypesClient>
|
||||||
pageTitle="Shop Types"
|
pageTitle="Shop Types"
|
||||||
|
title="Shop Type"
|
||||||
routeKey={SHOP_TYPE_ROUTES.INDEX}
|
routeKey={SHOP_TYPE_ROUTES.INDEX}
|
||||||
getClient={(api) => api.shopTypes}
|
getClient={(api) => api.shopTypes}
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Shop Type">
|
|
||||||
{(resourceId) => (
|
|
||||||
<ShopTypeForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
columns={({ actionsColumn }) => [
|
||||||
{
|
{
|
||||||
accessorKey: "title",
|
accessorKey: "title",
|
||||||
@ -55,6 +42,13 @@ export default function ShopTypesPage() {
|
|||||||
},
|
},
|
||||||
actionsColumn(),
|
actionsColumn(),
|
||||||
]}
|
]}
|
||||||
|
renderForm={({ resourceId, initialData, onSuccess }) => (
|
||||||
|
<ShopTypeForm
|
||||||
|
resourceId={resourceId}
|
||||||
|
initialData={initialData}
|
||||||
|
onSuccess={onSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
BIN
app/favicon.ico
Normal file
BIN
app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@ -1,21 +1,15 @@
|
|||||||
import { Geist_Mono, Inter } from "next/font/google"
|
import { Geist_Mono, Inter } from "next/font/google"
|
||||||
|
|
||||||
|
import "./globals.css"
|
||||||
import { QueryProvider } from "@/shared/components/query-provider"
|
import { QueryProvider } from "@/shared/components/query-provider"
|
||||||
import { ThemeProvider } from "@/shared/components/theme-provider"
|
import { ThemeProvider } from "@/shared/components/theme-provider"
|
||||||
import { Toaster } from "@/shared/components/ui/sonner"
|
import { Toaster } from "@/shared/components/ui/sonner"
|
||||||
import { ConfirmDialog } from "@/shared/components/confirm-dialog"
|
import { ConfirmDialog } from "@/shared/components/confirm-dialog"
|
||||||
import { NuqsAdapter } from "nuqs/adapters/next/app"
|
import { NuqsAdapter } from "nuqs/adapters/next/app"
|
||||||
import { cn } from "@/shared/lib/utils"
|
import { cn } from "@/shared/lib/utils"
|
||||||
import './globals.css'
|
|
||||||
|
|
||||||
const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })
|
const inter = Inter({ subsets: ["latin"], variable: "--font-sans" })
|
||||||
|
|
||||||
export const metadata = {
|
|
||||||
title: "Garage ERP Dashboard",
|
|
||||||
description: "Manage your garage with ease using Garage ERP Dashboard.",
|
|
||||||
}
|
|
||||||
|
|
||||||
const fontMono = Geist_Mono({
|
const fontMono = Geist_Mono({
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
variable: "--font-mono",
|
variable: "--font-mono",
|
||||||
39
apps/dashboard/.gitignore
vendored
39
apps/dashboard/.gitignore
vendored
@ -1,39 +0,0 @@
|
|||||||
# dependencies
|
|
||||||
/node_modules
|
|
||||||
/.pnp
|
|
||||||
.pnp.*
|
|
||||||
.yarn/*
|
|
||||||
!.yarn/patches
|
|
||||||
!.yarn/plugins
|
|
||||||
!.yarn/releases
|
|
||||||
!.yarn/versions
|
|
||||||
|
|
||||||
# testing
|
|
||||||
/coverage
|
|
||||||
/cypress/videos
|
|
||||||
/cypress/screenshots
|
|
||||||
/cypress/downloads
|
|
||||||
|
|
||||||
# next.js
|
|
||||||
/.next/
|
|
||||||
/out/
|
|
||||||
|
|
||||||
# production
|
|
||||||
/build
|
|
||||||
|
|
||||||
# misc
|
|
||||||
.DS_Store
|
|
||||||
*.pem
|
|
||||||
|
|
||||||
# debug
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
|
|
||||||
# env files
|
|
||||||
.env*.local
|
|
||||||
|
|
||||||
# typescript
|
|
||||||
*.tsbuildinfo
|
|
||||||
next-env.d.ts
|
|
||||||
11
apps/dashboard/.vscode/mcp.json
vendored
11
apps/dashboard/.vscode/mcp.json
vendored
@ -1,11 +0,0 @@
|
|||||||
{
|
|
||||||
"servers": {
|
|
||||||
"shadcn": {
|
|
||||||
"command": "npx",
|
|
||||||
"args": [
|
|
||||||
"shadcn@latest",
|
|
||||||
"mcp"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
# Next.js template
|
|
||||||
|
|
||||||
This is a Next.js template with shadcn/ui.
|
|
||||||
|
|
||||||
## Adding components
|
|
||||||
|
|
||||||
To add components to your app, run the following command:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx shadcn@latest add button
|
|
||||||
```
|
|
||||||
|
|
||||||
This will place the ui components in the `components` directory.
|
|
||||||
|
|
||||||
## Using components
|
|
||||||
|
|
||||||
To use the components in your app, import them as follows:
|
|
||||||
|
|
||||||
```tsx
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
```
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
import { DashboardDetailsPage } from "@/base/components/layout/dashboard"
|
|
||||||
import { AppointmentActions } from "@/modules/appointments/appointment-actions"
|
|
||||||
import { AppointmentProvider } from "@/modules/appointments/appointment-context"
|
|
||||||
import { CalendarCheck2 } from "lucide-react"
|
|
||||||
import React from "react"
|
|
||||||
|
|
||||||
export default async function layout(props: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
const { id } = await props.params
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AppointmentProvider appointment={{ id, label: `Appointment #${id}` }}>
|
|
||||||
<DashboardDetailsPage
|
|
||||||
className="p-0 lg:p-0"
|
|
||||||
icon={<CalendarCheck2 className="size-5" />}
|
|
||||||
title={`Appointment #${id}`}
|
|
||||||
backHref="/calendar/appointment/list"
|
|
||||||
actions={<AppointmentActions appointmentId={id} />}
|
|
||||||
tabs={[
|
|
||||||
{ href: `/calendar/appointment/${id}`, label: "Details" },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</DashboardDetailsPage>
|
|
||||||
</AppointmentProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { use } from "react"
|
|
||||||
import { useQuery } from "@tanstack/react-query"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { APPOINTMENT_ROUTES } from "@garage/api"
|
|
||||||
import { AppointmentGeneralInfo } from "@/modules/appointments/appointment-general-info"
|
|
||||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
|
||||||
import { Skeleton } from "@/shared/components/ui/skeleton"
|
|
||||||
|
|
||||||
export default function AppointmentDetailsPage({ params }: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = use(params)
|
|
||||||
const api = useAuthApi()
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
|
||||||
queryKey: [APPOINTMENT_ROUTES.INDEX, "detail", id],
|
|
||||||
queryFn: async () => {
|
|
||||||
const response = await api.appointments.list()
|
|
||||||
const items = (response as any)?.data ?? []
|
|
||||||
return items.find((item: any) => String(item.id) === id) ?? null
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<div className="grid gap-6 md:grid-cols-2 p-6">
|
|
||||||
{Array.from({ length: 4 }).map((_, i) => (
|
|
||||||
<Skeleton key={i} className="h-48 rounded-xl" />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!data) {
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<p className="text-muted-foreground p-6">Appointment not found.</p>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<AppointmentGeneralInfo appointment={data} />
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,112 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { AppointmentForm } from "@/modules/appointments/appointment-form"
|
|
||||||
import { APPOINTMENT_ROUTES } from "@garage/api"
|
|
||||||
import type { AppointmentsClient } from "@garage/api"
|
|
||||||
import { CalendarCheck2Icon, ClipboardListIcon, ClockIcon, ExternalLinkIcon } from "lucide-react"
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
|
|
||||||
const STATUS_COLORS: Record<string, string> = {
|
|
||||||
requested: "bg-yellow-100 text-yellow-800",
|
|
||||||
confirmed: "bg-blue-100 text-blue-800",
|
|
||||||
in_progress: "bg-purple-100 text-purple-800",
|
|
||||||
completed: "bg-green-100 text-green-800",
|
|
||||||
cancelled: "bg-red-100 text-red-800",
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function AppointmentsPage() {
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ResourcePage<AppointmentsClient>
|
|
||||||
pageTitle="Appointments"
|
|
||||||
routeKey={APPOINTMENT_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.appointments}
|
|
||||||
onRowClick={(row) => router.push(`/calendar/appointment/${(row as any).id}`)}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Appointment">
|
|
||||||
{(resourceId) => (
|
|
||||||
<AppointmentForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "title",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<CalendarCheck2Icon className="size-4 text-muted-foreground" />
|
|
||||||
<span>{(row.original as any).title}</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "from_time",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Time" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const r = row.original as any
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<ClockIcon className="size-3 text-muted-foreground" />
|
|
||||||
<span>{r.from_time} – {r.to_time}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = (row.original as any).status
|
|
||||||
const colorClass = STATUS_COLORS[status] ?? "bg-gray-100 text-gray-800"
|
|
||||||
return (
|
|
||||||
<Badge className={colorClass}>
|
|
||||||
{status?.replace("_", " ") ?? "—"}
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "job_card",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Job Card" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const jobCardId = (row.original as any).job_card_id
|
|
||||||
if (!jobCardId) return <span className="text-muted-foreground">—</span>
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="h-7 gap-1.5"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
router.push(`/sales/job-cards/${jobCardId}`)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ClipboardListIcon className="size-3" />
|
|
||||||
#{jobCardId}
|
|
||||||
<ExternalLinkIcon className="size-3" />
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { redirect } from "next/navigation"
|
|
||||||
|
|
||||||
export default function CalendarsPage() {
|
|
||||||
return redirect("/calendar/appointment/list")
|
|
||||||
}
|
|
||||||
@ -1,292 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useState, useRef } from "react"
|
|
||||||
import { useMutation, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import { Paperclip, Plus, Trash2, FileIcon, ImageIcon, FileTextIcon } from "lucide-react"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { InventoryAdjustmentForm } from "@/modules/inventory-adjustments/inventory-adjustment-form"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
import { Card, CardContent } from "@/shared/components/ui/card"
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/shared/components/ui/dialog"
|
|
||||||
import { confirm } from "@/shared/components/confirm-dialog"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { INVENTORY_ADJUSTMENT_ROUTES } from "@garage/api"
|
|
||||||
import type { InventoryAdjustmentsClient } from "@garage/api"
|
|
||||||
|
|
||||||
// ── Attachment helpers ──
|
|
||||||
|
|
||||||
type AttachmentFile = {
|
|
||||||
id: number
|
|
||||||
original_name?: string
|
|
||||||
attachment_path?: string
|
|
||||||
created_at?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
function getFileIcon(path?: string) {
|
|
||||||
if (!path) return FileIcon
|
|
||||||
const lower = path.toLowerCase()
|
|
||||||
if (/\.(jpg|jpeg|png|gif|webp|svg)$/.test(lower)) return ImageIcon
|
|
||||||
if (/\.pdf$/.test(lower)) return FileTextIcon
|
|
||||||
return FileIcon
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Attachments Dialog ──
|
|
||||||
|
|
||||||
function AttachmentsDialog({
|
|
||||||
open,
|
|
||||||
adjustmentId,
|
|
||||||
adjustmentRef,
|
|
||||||
onClose,
|
|
||||||
}: {
|
|
||||||
open: boolean
|
|
||||||
adjustmentId: string
|
|
||||||
adjustmentRef: string
|
|
||||||
onClose: () => void
|
|
||||||
}) {
|
|
||||||
const api = useAuthApi()
|
|
||||||
const queryClient = useQueryClient()
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
||||||
const [isUploading, setIsUploading] = useState(false)
|
|
||||||
const [sessionFiles, setSessionFiles] = useState<AttachmentFile[]>([])
|
|
||||||
|
|
||||||
const queryKey = [INVENTORY_ADJUSTMENT_ROUTES.INDEX, adjustmentId, "attachments"]
|
|
||||||
|
|
||||||
const deleteMutation = useMutation({
|
|
||||||
mutationFn: (attachmentId: number) =>
|
|
||||||
api.inventoryAdjustments.deleteAttachment(adjustmentId, attachmentId),
|
|
||||||
onSuccess: (_, attachmentId) => {
|
|
||||||
toast.success("Attachment deleted.")
|
|
||||||
setSessionFiles((prev) => prev.filter((f) => f.id !== attachmentId))
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
},
|
|
||||||
onError: () => toast.error("Failed to delete attachment."),
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleDelete = async (attachment: AttachmentFile) => {
|
|
||||||
const confirmed = await confirm({
|
|
||||||
title: "Delete Attachment",
|
|
||||||
description: `Are you sure you want to delete "${attachment.original_name ?? "this file"}"?`,
|
|
||||||
confirmLabel: "Delete",
|
|
||||||
variant: "destructive",
|
|
||||||
})
|
|
||||||
if (confirmed) deleteMutation.mutate(attachment.id)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const files = e.target.files
|
|
||||||
if (!files || files.length === 0) return
|
|
||||||
|
|
||||||
setIsUploading(true)
|
|
||||||
const fileArray = Array.from(files)
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await toast.promise(
|
|
||||||
api.inventoryAdjustments.addAttachment(adjustmentId, fileArray),
|
|
||||||
{
|
|
||||||
loading: "Uploading attachment(s)...",
|
|
||||||
success: "Attachment(s) uploaded successfully",
|
|
||||||
error: "Failed to upload attachment(s)",
|
|
||||||
},
|
|
||||||
)
|
|
||||||
// Track uploaded files locally for display within this session
|
|
||||||
const now = new Date().toISOString()
|
|
||||||
const uploaded: AttachmentFile[] = fileArray.map((file, i) => ({
|
|
||||||
id: Date.now() + i,
|
|
||||||
original_name: file.name,
|
|
||||||
attachment_path: file.name,
|
|
||||||
created_at: now,
|
|
||||||
}))
|
|
||||||
setSessionFiles((prev) => [...prev, ...uploaded])
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
} finally {
|
|
||||||
setIsUploading(false)
|
|
||||||
if (fileInputRef.current) fileInputRef.current.value = ""
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setSessionFiles([])
|
|
||||||
onClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={(v) => !v && handleClose()}>
|
|
||||||
<DialogContent className="max-w-2xl">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Attachments — {adjustmentRef}</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<input
|
|
||||||
ref={fileInputRef}
|
|
||||||
type="file"
|
|
||||||
multiple
|
|
||||||
className="hidden"
|
|
||||||
onChange={handleUpload}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onClick={() => fileInputRef.current?.click()}
|
|
||||||
disabled={isUploading}
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
<Plus className="size-4" />
|
|
||||||
{isUploading ? "Uploading..." : "Upload Attachment"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{sessionFiles.length === 0 ? (
|
|
||||||
<Card>
|
|
||||||
<CardContent className="py-8 text-center text-sm text-muted-foreground">
|
|
||||||
No attachments uploaded in this session. Click "Upload Attachment" to add files.
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
) : (
|
|
||||||
<div className="grid gap-3 sm:grid-cols-2">
|
|
||||||
{sessionFiles.map((attachment) => {
|
|
||||||
const Icon = getFileIcon(attachment.attachment_path)
|
|
||||||
return (
|
|
||||||
<Card key={attachment.id}>
|
|
||||||
<CardContent className="flex items-center gap-3 p-4">
|
|
||||||
<div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
|
|
||||||
<Icon className="size-5" />
|
|
||||||
</div>
|
|
||||||
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
|
|
||||||
<span className="truncate text-sm font-medium" title={attachment.original_name}>
|
|
||||||
{attachment.original_name}
|
|
||||||
</span>
|
|
||||||
{attachment.created_at && (
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{new Date(attachment.created_at).toLocaleDateString()}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
onClick={() => handleDelete(attachment)}
|
|
||||||
title="Delete attachment"
|
|
||||||
>
|
|
||||||
<Trash2 className="size-4 text-destructive" />
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Page ──
|
|
||||||
|
|
||||||
export default function InventoryAdjustmentsPage() {
|
|
||||||
const [attachmentTarget, setAttachmentTarget] = useState<{
|
|
||||||
id: string
|
|
||||||
ref: string
|
|
||||||
} | null>(null)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ResourcePage<InventoryAdjustmentsClient>
|
|
||||||
pageTitle="Inventory Adjustments"
|
|
||||||
routeKey={INVENTORY_ADJUSTMENT_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.inventoryAdjustments}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Inventory Adjustment">
|
|
||||||
{(resourceId) => (
|
|
||||||
<InventoryAdjustmentForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "reference_number",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Reference #" />,
|
|
||||||
cell: ({ row }) => (row.original as any).reference_number || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = (row.original as any).date
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "chart_of_account",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Chart of Account" />,
|
|
||||||
cell: ({ row }) => (row.original as any).chart_of_account || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "notes",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Notes" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const notes = (row.original as any).notes
|
|
||||||
return notes ? (
|
|
||||||
<span className="max-w-50 truncate block" title={notes}>{notes}</span>
|
|
||||||
) : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = (row.original as any).created_at
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "attachments",
|
|
||||||
header: () => null,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original as any
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
title="Manage Attachments"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
setAttachmentTarget({
|
|
||||||
id: String(item.id),
|
|
||||||
ref: item.reference_number || `ADJ-${item.id}`,
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Paperclip className="size-4" />
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{attachmentTarget && (
|
|
||||||
<AttachmentsDialog
|
|
||||||
open={!!attachmentTarget}
|
|
||||||
adjustmentId={attachmentTarget.id}
|
|
||||||
adjustmentRef={attachmentTarget.ref}
|
|
||||||
onClose={() => setAttachmentTarget(null)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
"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 { ExpenseItemForm } from "@/modules/expense-items/expense-item-form"
|
|
||||||
import { EXPENSE_ITEM_ROUTES } from "@garage/api"
|
|
||||||
import type { ExpenseItemsClient } from "@garage/api"
|
|
||||||
|
|
||||||
export default function ExpenseItemPage() {
|
|
||||||
return (
|
|
||||||
<ResourcePage<ExpenseItemsClient>
|
|
||||||
pageTitle="Expense Items"
|
|
||||||
routeKey={EXPENSE_ITEM_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.expenseItems}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Expense Item">
|
|
||||||
{(resourceId) => (
|
|
||||||
<ExpenseItemForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "item_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Item Name" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "purchase_price",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Purchase Price" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = (row.original as any).purchase_price
|
|
||||||
return val != null ? `$${Number(val).toFixed(2)}` : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "purchase_chart_of_account",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Chart of Account" />,
|
|
||||||
cell: ({ row }) => (row.original as any).purchase_chart_of_account || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "is_active",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const active = (row.original as any).is_active
|
|
||||||
return (
|
|
||||||
<span className={active ? "text-green-600" : "text-muted-foreground"}>
|
|
||||||
{active ? "Active" : "Inactive"}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { ImportDataButton } from "@/shared/components/import-data-button"
|
|
||||||
import { ExportDataButton } from "@/shared/components/export-data-button"
|
|
||||||
import { PartForm } from "@/modules/parts/part-form"
|
|
||||||
import { partColumns } from "@/modules/parts/parts-columns"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { PARTS_ROUTES } from "@garage/api"
|
|
||||||
import type { PartsClient } from "@garage/api"
|
|
||||||
|
|
||||||
export default function PartsPage() {
|
|
||||||
const api = useAuthApi()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ResourcePage<PartsClient>
|
|
||||||
pageTitle="Parts"
|
|
||||||
routeKey={PARTS_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.parts}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<ImportDataButton
|
|
||||||
onImport={(file) => api.parts.importData(file)}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
<ExportDataButton
|
|
||||||
onExport={(filters) => api.parts.exportData(filters)}
|
|
||||||
fileName="parts"
|
|
||||||
/>
|
|
||||||
<FormDialog title="Part">
|
|
||||||
{(resourceId) => (
|
|
||||||
<PartForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
partColumns.title,
|
|
||||||
partColumns.partNumber,
|
|
||||||
partColumns.manufacturer,
|
|
||||||
partColumns.sellingPrice,
|
|
||||||
partColumns.purchasePrice,
|
|
||||||
partColumns.stock,
|
|
||||||
partColumns.status,
|
|
||||||
partColumns.createdAt,
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
|
|
||||||
import { Suspense } from "react"
|
|
||||||
|
|
||||||
import Image from "next/image"
|
|
||||||
import { DashboardLayout } from "@/base/components/layout/dashboard"
|
|
||||||
import { useAuth } from "@/shared/hooks/use-auth"
|
|
||||||
import { navGroups } from "@/config/navGroups"
|
|
||||||
import { getAuthCookies } from "@/modules/auth/auth.actions"
|
|
||||||
import { redirect } from "next/navigation"
|
|
||||||
|
|
||||||
|
|
||||||
function Logo() {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Image alt="Logo" src={'/assets/logo.png'} height={100} width={100} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default async function AuthenticatedLayout({
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
const { token, user } = await getAuthCookies()
|
|
||||||
|
|
||||||
if(!token || !user ) {
|
|
||||||
redirect('/login');
|
|
||||||
}
|
|
||||||
|
|
||||||
const userInfo = user
|
|
||||||
? {
|
|
||||||
name: user.name,
|
|
||||||
email: user.email,
|
|
||||||
initials: user.name.charAt(0).toUpperCase(),
|
|
||||||
}
|
|
||||||
: undefined
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardLayout navGroups={navGroups} logo={<Logo />} user={userInfo}>
|
|
||||||
{children}
|
|
||||||
</DashboardLayout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import { DashboardHeader } from "@/base/components/layout/dashboard";
|
|
||||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page";
|
|
||||||
import { DashboardContent } from "@/modules/home/dashboard-content";
|
|
||||||
|
|
||||||
export default function page() {
|
|
||||||
return (
|
|
||||||
<DashboardPage headerProps={{title: "Dashboard"}} >
|
|
||||||
<DashboardContent />
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { EmployeeActions } from '@/modules/employees/employee-actions'
|
|
||||||
import { EmployeeProvider } from '@/modules/employees/employee-context'
|
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
export default async function layout(props: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const employee = await api.employees.getById(id)
|
|
||||||
|
|
||||||
const firstName = employee.data?.first_name || ''
|
|
||||||
const lastName = employee.data?.last_name || ''
|
|
||||||
const title = [firstName, lastName].filter(Boolean).join(' ') || 'Employee Details'
|
|
||||||
const employeeLabel = title
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<EmployeeProvider employee={{ id, label: employeeLabel }}>
|
|
||||||
<DashboardDetailsPage
|
|
||||||
className="p-0 lg:p-0"
|
|
||||||
title={title}
|
|
||||||
description={(employee.data as any)?.position || employee.data?.designation || undefined}
|
|
||||||
backHref="/productivity/employees"
|
|
||||||
actions={<EmployeeActions employeeId={id} />}
|
|
||||||
tabs={[
|
|
||||||
{ href: `/productivity/employees/${id}`, label: 'Details' },
|
|
||||||
{ href: `/productivity/employees/${id}/permissions`, label: 'Permissions' },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</DashboardDetailsPage>
|
|
||||||
</EmployeeProvider>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { EmployeeGeneralInfo } from '@/modules/employees/employee-general-info'
|
|
||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
|
|
||||||
export default async function page(props: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const employee = await api.employees.getById(id)
|
|
||||||
|
|
||||||
if (!employee.data) {
|
|
||||||
return <div className="text-muted-foreground">Employee not found.</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<EmployeeGeneralInfo employee={employee.data as any} />
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { use } from "react"
|
|
||||||
import { EmployeePermissionsForm } from "@/modules/employees/employee-permissions-form"
|
|
||||||
|
|
||||||
export default function EmployeePermissionsPage({ params }: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = use(params)
|
|
||||||
|
|
||||||
return <EmployeePermissionsForm employeeId={id} />
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
"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 { HolidayYearForm } from "@/modules/settings/holiday-year/holiday-year-form"
|
|
||||||
import { HOLIDAY_YEAR_ROUTES } from "@garage/api"
|
|
||||||
import type { HolidayYearsClient } from "@garage/api"
|
|
||||||
|
|
||||||
export default function HolidayYearsPage() {
|
|
||||||
return (
|
|
||||||
<ResourcePage<HolidayYearsClient>
|
|
||||||
pageTitle="Holiday Years"
|
|
||||||
routeKey={HOLIDAY_YEAR_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.holidayYears}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Holiday Year">
|
|
||||||
{(resourceId) => (
|
|
||||||
<HolidayYearForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "year",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Year" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Created At" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const date = (row.original as any).created_at
|
|
||||||
return date ? new Date(date).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn({ onEdit: undefined }),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
"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 { TaskForm } from "@/modules/tasks/task-form"
|
|
||||||
import { TASK_ROUTES } from "@garage/api"
|
|
||||||
import type { TasksClient } from "@garage/api"
|
|
||||||
|
|
||||||
export default function TasksPage() {
|
|
||||||
return (
|
|
||||||
<ResourcePage<TasksClient>
|
|
||||||
routeKey={TASK_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.tasks}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
title: "Tasks",
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Task">
|
|
||||||
{(resourceId) => (
|
|
||||||
<TaskForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "task_number",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Task #" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "subject",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Subject" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "priority",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Priority" />,
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "due_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Due Date" />,
|
|
||||||
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { use } from "react"
|
|
||||||
import { useQuery } from "@tanstack/react-query"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import { BillForm } from "@/modules/bills/bill-form"
|
|
||||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
|
||||||
import { BILL_ROUTES } from "@garage/api"
|
|
||||||
|
|
||||||
export default function BillEditPage({ params }: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = use(params)
|
|
||||||
const api = useAuthApi()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
|
||||||
queryKey: [BILL_ROUTES.BY_ID, id],
|
|
||||||
queryFn: () => api.bills.show(id),
|
|
||||||
})
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<div className="flex items-center justify-center p-8 text-muted-foreground">
|
|
||||||
Loading...
|
|
||||||
</div>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<div className="p-6">
|
|
||||||
<BillForm
|
|
||||||
resourceId={id}
|
|
||||||
initialData={data}
|
|
||||||
onSuccess={() => router.push(`/purchase/bill/${id}`)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { BillActions } from '@/modules/bills/bill-actions'
|
|
||||||
import { BillProvider, type BillResponse } from '@/modules/bills/bill-context'
|
|
||||||
import BillStatusBadge from '@/modules/bills/bill-status-badge'
|
|
||||||
import { ReceiptIcon } from 'lucide-react'
|
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
export default async function BillDetailLayout(props: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const bill = await api.bills.show(id)
|
|
||||||
const data = bill.data as BillResponse
|
|
||||||
const title = data?.title || data?.bill_number || 'Bill Details'
|
|
||||||
return (
|
|
||||||
<BillProvider bill={data}>
|
|
||||||
<DashboardDetailsPage
|
|
||||||
className="p-0 lg:p-0"
|
|
||||||
title={title}
|
|
||||||
description={data?.bill_number ? `Bill #: ${data.bill_number}` : undefined}
|
|
||||||
icon={<ReceiptIcon className="size-5" />}
|
|
||||||
backHref="/purchase/bill"
|
|
||||||
actions={
|
|
||||||
<div className="flex space-x-2 items-center">
|
|
||||||
<BillStatusBadge bill={{id, status:data?.status}} />
|
|
||||||
<BillActions billId={id} />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
tabs={[
|
|
||||||
{
|
|
||||||
href: `/purchase/bill/${id}`,
|
|
||||||
label: 'Details',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</DashboardDetailsPage>
|
|
||||||
</BillProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { BillGeneralInfo } from '@/modules/bills/bill-general-info'
|
|
||||||
import { BillPartsSection } from '@/modules/bills/bill-parts-section'
|
|
||||||
import { BillServicesSection } from '@/modules/bills/bill-services-section'
|
|
||||||
import { BillExpensesSection } from '@/modules/bills/bill-expenses-section'
|
|
||||||
import { BillTotalsSummary } from '@/modules/bills/bill-totals-summary'
|
|
||||||
import { BillPaymentsSection } from '@/modules/bills/bill-payments-section'
|
|
||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
|
|
||||||
export default async function BillDetailPage(props: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const bill = await api.bills.show(id)
|
|
||||||
const data = (bill as any)?.data ?? bill
|
|
||||||
|
|
||||||
if (!data) {
|
|
||||||
return <div className="text-muted-foreground">Bill not found.</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<div className="grid gap-6">
|
|
||||||
<BillGeneralInfo />
|
|
||||||
<BillPartsSection parts={data.parts} />
|
|
||||||
<BillServicesSection services={data.services} />
|
|
||||||
<BillExpensesSection expenses={data.expenses} />
|
|
||||||
<BillPaymentsSection />
|
|
||||||
<BillTotalsSummary />
|
|
||||||
</div>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import { BillForm } from "@/modules/bills/bill-form"
|
|
||||||
import { BILL_ROUTES } from "@garage/api"
|
|
||||||
import type { BillsClient } from "@garage/api"
|
|
||||||
import { formatDate } from "@/shared/utils/formatters"
|
|
||||||
|
|
||||||
export default function BillsPage() {
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ResourcePage<BillsClient>
|
|
||||||
pageTitle="Bills"
|
|
||||||
routeKey={BILL_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.bills}
|
|
||||||
onRowClick={(row) => router.push(`/purchase/bill/${(row as any).id}`)}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog classNames={{ dialogContent: "lg:min-w-6xl" }} title="Bill">
|
|
||||||
{(resourceId) => (
|
|
||||||
<BillForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "bill_number",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Bill #" />,
|
|
||||||
cell: ({ row }) => (row.original as any).bill_number || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "total",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Total" />,
|
|
||||||
cell: ({ row }) => (row.original as any).total || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "balance_due",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Balance Due" />,
|
|
||||||
cell: ({ row }) => (row.original as any).balance_due || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "title",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "vendor",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
|
|
||||||
cell: ({ row }) => (row.original as any).vendor?.name || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "bill_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Bill Date" />,
|
|
||||||
cell: ({ row }) => formatDate((row.original as any).bill_date) || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "bill_due_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Due Date" />,
|
|
||||||
cell: ({ row }) => formatDate((row.original as any).bill_due_date) || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = (row.original as any).status
|
|
||||||
return (
|
|
||||||
<Badge variant={status === "paid" ? "default" : "secondary"}>
|
|
||||||
{status?.replace(/_/g, " ") || "—"}
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { ExpenseActions } from '@/modules/expenses/expense-actions'
|
|
||||||
import { ExpenseProvider, type ExpenseContextValue } from '@/modules/expenses/expense-context'
|
|
||||||
import { ReceiptIcon } from 'lucide-react'
|
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
export default async function ExpenseDetailLayout(props: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const expense = await api.expenses.getById(id)
|
|
||||||
const data = expense.data as ExpenseContextValue
|
|
||||||
const title = data?.title || data?.invoice_number || 'Expense Details'
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ExpenseProvider expense={data}>
|
|
||||||
<DashboardDetailsPage
|
|
||||||
className="p-0 lg:p-0"
|
|
||||||
title={title}
|
|
||||||
description={data?.invoice_number ? `Invoice #: ${data.invoice_number}` : undefined}
|
|
||||||
icon={<ReceiptIcon className="size-5" />}
|
|
||||||
backHref="/purchase/expense"
|
|
||||||
actions={<ExpenseActions expenseId={id} />}
|
|
||||||
tabs={[
|
|
||||||
{
|
|
||||||
href: `/purchase/expense/${id}`,
|
|
||||||
label: 'Details',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</DashboardDetailsPage>
|
|
||||||
</ExpenseProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
import { ExpenseGeneralInfo } from '@/modules/expenses/expense-general-info'
|
|
||||||
import { ExpenseItemsSection } from '@/modules/expenses/expense-items-section'
|
|
||||||
import { ExpensePaymentsSection } from '@/modules/expenses/expense-payments-section'
|
|
||||||
import { formatTaxLabel } from '@/shared/utils/formatters'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
|
|
||||||
export default async function ExpenseDetailPage(props: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const expense = await api.expenses.show(id)
|
|
||||||
const data = (expense as any)?.data ?? expense
|
|
||||||
|
|
||||||
if (!data) {
|
|
||||||
return <div className="text-muted-foreground">Expense not found.</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
const taxLabel = formatTaxLabel(data.tax, '') || undefined
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<div className="grid gap-6">
|
|
||||||
<ExpenseGeneralInfo />
|
|
||||||
<ExpensePaymentsSection />
|
|
||||||
<ExpenseItemsSection
|
|
||||||
items={data.expense_items}
|
|
||||||
discountType={data.discount}
|
|
||||||
subTotal={data.sub_total}
|
|
||||||
discountAmount={data.discount_amount_major}
|
|
||||||
taxAmount={data.tax_amount}
|
|
||||||
total={data.total}
|
|
||||||
taxLabel={taxLabel}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
"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 { ExpenseForm } from "@/modules/expenses/expense-form"
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
|
||||||
import { EXPENSE_ROUTES } from "@garage/api"
|
|
||||||
import type { ExpensesClient } from "@garage/api"
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import { formatCurrency, formatDate, formatEnum } from "@/shared/utils/formatters"
|
|
||||||
|
|
||||||
export default function ExpensesPage() {
|
|
||||||
const router = useRouter()
|
|
||||||
return (
|
|
||||||
<ResourcePage<ExpensesClient>
|
|
||||||
pageTitle="Expenses"
|
|
||||||
routeKey={EXPENSE_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.expenses}
|
|
||||||
onRowClick={(row)=>router.push(`/purchase/expense/${row.id}`)}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog
|
|
||||||
title="Expense"
|
|
||||||
classNames={{ dialogContent: "lg:min-w-6xl" }}
|
|
||||||
>
|
|
||||||
{(resourceId) => (
|
|
||||||
<ExpenseForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "title",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "invoice_number",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Invoice #" />,
|
|
||||||
cell: ({ row }) => (row.original as any).invoice_number || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "vendor",
|
|
||||||
header: () => "Vendor",
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const vendor = (row.original as any).vendor
|
|
||||||
return vendor?.company_name || vendor?.name || "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "expense_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
|
|
||||||
cell: ({ row }) => formatDate((row.original as any).expense_date),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "total",
|
|
||||||
header: () => "Total",
|
|
||||||
cell: ({ row }) => formatCurrency((row.original as any).total ?? 0),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "balance_due",
|
|
||||||
header: () => "Balance Due",
|
|
||||||
cell: ({ row }) => formatCurrency((row.original as any).balance_due ?? 0),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = (row.original as any).status
|
|
||||||
const variantMap: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
|
|
||||||
draft: "secondary",
|
|
||||||
open: "default",
|
|
||||||
un_paid: "destructive",
|
|
||||||
partially_paid: "secondary",
|
|
||||||
paid: "default",
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Badge variant={variantMap[status] ?? "outline"}>
|
|
||||||
{formatEnum(status) || "—"}
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,377 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useState, useRef } from "react"
|
|
||||||
import { useMutation, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import {
|
|
||||||
Paperclip,
|
|
||||||
Plus,
|
|
||||||
Trash2,
|
|
||||||
FileIcon,
|
|
||||||
ImageIcon,
|
|
||||||
FileTextIcon,
|
|
||||||
BadgeDollarSignIcon,
|
|
||||||
CalendarIcon,
|
|
||||||
CreditCardIcon,
|
|
||||||
HashIcon,
|
|
||||||
UserIcon,
|
|
||||||
BriefcaseIcon,
|
|
||||||
} from "lucide-react"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { PaymentMadeForm } from "@/modules/payment-mades/payment-made-form"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
import { Card, CardContent } from "@/shared/components/ui/card"
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/shared/components/ui/dialog"
|
|
||||||
import { confirm } from "@/shared/components/confirm-dialog"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { PAYMENT_MADE_ROUTES } from "@garage/api"
|
|
||||||
import type { PaymentMadesClient } from "@garage/api"
|
|
||||||
|
|
||||||
// ── Attachment helpers ──
|
|
||||||
|
|
||||||
type AttachmentFile = {
|
|
||||||
id: number
|
|
||||||
original_name?: string
|
|
||||||
attachment_path?: string
|
|
||||||
created_at?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
function getFileIcon(path?: string) {
|
|
||||||
if (!path) return FileIcon
|
|
||||||
const lower = path.toLowerCase()
|
|
||||||
if (/\.(jpg|jpeg|png|gif|webp|svg)$/.test(lower)) return ImageIcon
|
|
||||||
if (/\.pdf$/.test(lower)) return FileTextIcon
|
|
||||||
return FileIcon
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Attachments Dialog ──
|
|
||||||
|
|
||||||
function AttachmentsDialog({
|
|
||||||
open,
|
|
||||||
paymentId,
|
|
||||||
paymentRef,
|
|
||||||
onClose,
|
|
||||||
}: {
|
|
||||||
open: boolean
|
|
||||||
paymentId: string
|
|
||||||
paymentRef: string
|
|
||||||
onClose: () => void
|
|
||||||
}) {
|
|
||||||
const api = useAuthApi()
|
|
||||||
const queryClient = useQueryClient()
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
||||||
const [isUploading, setIsUploading] = useState(false)
|
|
||||||
const [sessionFiles, setSessionFiles] = useState<AttachmentFile[]>([])
|
|
||||||
|
|
||||||
const queryKey = [PAYMENT_MADE_ROUTES.INDEX, paymentId, "attachments"]
|
|
||||||
|
|
||||||
const deleteMutation = useMutation({
|
|
||||||
mutationFn: (attachmentId: number) =>
|
|
||||||
api.paymentMades.deleteAttachment(paymentId, { attachment_id: attachmentId } as any),
|
|
||||||
onSuccess: (_, attachmentId) => {
|
|
||||||
toast.success("Attachment deleted.")
|
|
||||||
setSessionFiles((prev) => prev.filter((f) => f.id !== attachmentId))
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
},
|
|
||||||
onError: () => toast.error("Failed to delete attachment."),
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleDelete = async (attachment: AttachmentFile) => {
|
|
||||||
const confirmed = await confirm({
|
|
||||||
title: "Delete Attachment",
|
|
||||||
description: `Are you sure you want to delete "${attachment.original_name ?? "this file"}"?`,
|
|
||||||
confirmLabel: "Delete",
|
|
||||||
variant: "destructive",
|
|
||||||
})
|
|
||||||
if (confirmed) deleteMutation.mutate(attachment.id)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const files = e.target.files
|
|
||||||
if (!files || files.length === 0) return
|
|
||||||
|
|
||||||
setIsUploading(true)
|
|
||||||
const fileArray = Array.from(files)
|
|
||||||
|
|
||||||
try {
|
|
||||||
const formData = new FormData()
|
|
||||||
fileArray.forEach((file) => formData.append("attachments[]", file))
|
|
||||||
|
|
||||||
await toast.promise(
|
|
||||||
api.paymentMades.addAttachment(paymentId, formData),
|
|
||||||
{
|
|
||||||
loading: "Uploading attachment(s)...",
|
|
||||||
success: "Attachment(s) uploaded successfully",
|
|
||||||
error: "Failed to upload attachment(s)",
|
|
||||||
},
|
|
||||||
)
|
|
||||||
const now = new Date().toISOString()
|
|
||||||
const uploaded: AttachmentFile[] = fileArray.map((file, i) => ({
|
|
||||||
id: Date.now() + i,
|
|
||||||
original_name: file.name,
|
|
||||||
attachment_path: file.name,
|
|
||||||
created_at: now,
|
|
||||||
}))
|
|
||||||
setSessionFiles((prev) => [...prev, ...uploaded])
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
} finally {
|
|
||||||
setIsUploading(false)
|
|
||||||
if (fileInputRef.current) fileInputRef.current.value = ""
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setSessionFiles([])
|
|
||||||
onClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={(v) => !v && handleClose()}>
|
|
||||||
<DialogContent className="max-w-2xl">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Attachments — {paymentRef}</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<input
|
|
||||||
ref={fileInputRef}
|
|
||||||
type="file"
|
|
||||||
multiple
|
|
||||||
className="hidden"
|
|
||||||
onChange={handleUpload}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onClick={() => fileInputRef.current?.click()}
|
|
||||||
disabled={isUploading}
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
<Plus className="size-4" />
|
|
||||||
{isUploading ? "Uploading..." : "Upload Attachment"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{sessionFiles.length === 0 ? (
|
|
||||||
<Card>
|
|
||||||
<CardContent className="py-8 text-center text-sm text-muted-foreground">
|
|
||||||
No attachments uploaded in this session. Click "Upload Attachment" to add files.
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
) : (
|
|
||||||
<div className="grid gap-3 sm:grid-cols-2">
|
|
||||||
{sessionFiles.map((attachment) => {
|
|
||||||
const Icon = getFileIcon(attachment.attachment_path)
|
|
||||||
return (
|
|
||||||
<Card key={attachment.id}>
|
|
||||||
<CardContent className="flex items-center gap-3 p-4">
|
|
||||||
<div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
|
|
||||||
<Icon className="size-5" />
|
|
||||||
</div>
|
|
||||||
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
|
|
||||||
<span className="truncate text-sm font-medium" title={attachment.original_name}>
|
|
||||||
{attachment.original_name}
|
|
||||||
</span>
|
|
||||||
{attachment.created_at && (
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{new Date(attachment.created_at).toLocaleDateString()}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
onClick={() => handleDelete(attachment)}
|
|
||||||
title="Delete attachment"
|
|
||||||
>
|
|
||||||
<Trash2 className="size-4 text-destructive" />
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Page ──
|
|
||||||
|
|
||||||
type PaymentMadeItem = {
|
|
||||||
id: number
|
|
||||||
payment_number?: string
|
|
||||||
vendor_name?: string
|
|
||||||
employee_name?: string
|
|
||||||
payment_for?: string
|
|
||||||
payment_made?: string | number
|
|
||||||
payment_mode_name?: string
|
|
||||||
payment_date?: string
|
|
||||||
paid_through?: string
|
|
||||||
notes?: string
|
|
||||||
created_at?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function PaymentsMadePage() {
|
|
||||||
const [attachmentTarget, setAttachmentTarget] = useState<{
|
|
||||||
id: string
|
|
||||||
ref: string
|
|
||||||
} | null>(null)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ResourcePage<PaymentMadesClient>
|
|
||||||
pageTitle="Payments Made"
|
|
||||||
routeKey={PAYMENT_MADE_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.paymentMades}
|
|
||||||
headerProps={({ invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Record Payment">
|
|
||||||
{(resourceId) => (
|
|
||||||
<PaymentMadeForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "payment_number",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Payment #" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original as unknown as PaymentMadeItem
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<HashIcon className="h-4 w-4 text-muted-foreground" />
|
|
||||||
<span className="font-medium">{item.payment_number || "—"}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "vendor_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original as unknown as PaymentMadeItem
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<UserIcon className="h-4 w-4 text-muted-foreground" />
|
|
||||||
<span>{item.vendor_name || "—"}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "payment_for",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Payment For" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original as unknown as PaymentMadeItem
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<BriefcaseIcon className="h-4 w-4 text-muted-foreground" />
|
|
||||||
<span className="capitalize">{item.payment_for || "—"}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "payment_made",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Amount" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original as unknown as PaymentMadeItem
|
|
||||||
const amount = item.payment_made
|
|
||||||
? Number(item.payment_made).toLocaleString(undefined, {
|
|
||||||
minimumFractionDigits: 2,
|
|
||||||
maximumFractionDigits: 2,
|
|
||||||
})
|
|
||||||
: "—"
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<BadgeDollarSignIcon className="h-4 w-4 text-emerald-600" />
|
|
||||||
<span className="font-semibold text-emerald-700 dark:text-emerald-400">
|
|
||||||
{amount}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "payment_mode_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Payment Mode" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original as unknown as PaymentMadeItem
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<CreditCardIcon className="h-4 w-4 text-muted-foreground" />
|
|
||||||
<span className="capitalize">{item.payment_mode_name || "—"}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "payment_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original as unknown as PaymentMadeItem
|
|
||||||
const formatted = item.payment_date
|
|
||||||
? new Date(item.payment_date).toLocaleDateString(undefined, {
|
|
||||||
year: "numeric",
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
})
|
|
||||||
: "—"
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<CalendarIcon className="h-4 w-4 text-muted-foreground" />
|
|
||||||
<span>{formatted}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "attachments",
|
|
||||||
header: () => null,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original as any
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
title="Manage Attachments"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
setAttachmentTarget({
|
|
||||||
id: String(item.id),
|
|
||||||
ref: item.payment_number || `PAY-${item.id}`,
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Paperclip className="size-4" />
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{attachmentTarget && (
|
|
||||||
<AttachmentsDialog
|
|
||||||
open={!!attachmentTarget}
|
|
||||||
paymentId={attachmentTarget.id}
|
|
||||||
paymentRef={attachmentTarget.ref}
|
|
||||||
onClose={() => setAttachmentTarget(null)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { PurchaseOrderActions } from '@/modules/purchase-orders/purchase-order-actions'
|
|
||||||
import { PurchaseOrderProvider } from '@/modules/purchase-orders/purchase-order-context'
|
|
||||||
import { CreateBillFromPOButton } from '@/modules/purchase-orders/create-bill-from-po-button'
|
|
||||||
import { ClipboardList } from 'lucide-react'
|
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
export default async function layout(props: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const purchaseOrder = (await api.purchaseOrders.getById(id)) as any
|
|
||||||
|
|
||||||
const data = purchaseOrder?.data ?? purchaseOrder
|
|
||||||
const title = data?.title || data?.order_number || 'Purchase Order'
|
|
||||||
const orderNumber = data?.order_number
|
|
||||||
const description = orderNumber ? `Order #: ${orderNumber}` : undefined
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PurchaseOrderProvider purchaseOrder={{ id, label: title, data }}>
|
|
||||||
<DashboardDetailsPage
|
|
||||||
className="p-0 lg:p-0"
|
|
||||||
icon={<ClipboardList className="size-5" />}
|
|
||||||
title={title}
|
|
||||||
description={description}
|
|
||||||
backHref="/purchase/purchase-order"
|
|
||||||
actions={
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<CreateBillFromPOButton />
|
|
||||||
<PurchaseOrderActions purchaseOrderId={id} />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
tabs={[
|
|
||||||
{ href: `/purchase/purchase-order/${id}`, label: 'Details' },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</DashboardDetailsPage>
|
|
||||||
</PurchaseOrderProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { PurchaseOrderGeneralInfo } from '@/modules/purchase-orders/purchase-order-general-info'
|
|
||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
|
|
||||||
export default async function page(props: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const response = await api.purchaseOrders.getById(id)
|
|
||||||
|
|
||||||
const purchaseOrder = (response as any)?.data ?? response
|
|
||||||
|
|
||||||
if (!purchaseOrder) {
|
|
||||||
return <div className="text-muted-foreground">Purchase order not found.</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<PurchaseOrderGeneralInfo purchaseOrder={purchaseOrder} />
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { PurchaseOrderForm } from "@/modules/purchase-orders/purchase-order-form"
|
|
||||||
import { PURCHASE_ORDER_ROUTES } from "@garage/api"
|
|
||||||
import type { PurchaseOrdersClient } from "@garage/api"
|
|
||||||
|
|
||||||
export default function PurchaseOrdersPage() {
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ResourcePage<PurchaseOrdersClient>
|
|
||||||
pageTitle="Purchase Orders"
|
|
||||||
routeKey={PURCHASE_ORDER_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.purchaseOrders}
|
|
||||||
onRowClick={(row) => router.push(`/purchase/purchase-order/${(row as any).id}`)}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog classNames={{ dialogContent: "min-w-6xl" }} title="Purchase Order">
|
|
||||||
{(resourceId, { close }) => (
|
|
||||||
<PurchaseOrderForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={() => { invalidateQuery(); close()}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "order_number",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Order #" />,
|
|
||||||
cell: ({ row }) => (row.original as any).order_number || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "title",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "vendor_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
|
|
||||||
cell: ({ row }) => (row.original as any).vendor_name || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "order_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Order Date" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = (row.original as any).order_date
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "delivery_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Delivery Date" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = (row.original as any).delivery_date
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = (row.original as any).created_at
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import { VendorCreditForm } from "@/modules/vendor-credits/vendor-credit-form"
|
|
||||||
import { VENDOR_CREDIT_ROUTES } from "@garage/api"
|
|
||||||
import type { VendorCreditsClient } from "@garage/api"
|
|
||||||
|
|
||||||
export default function VendorCreditsPage() {
|
|
||||||
return (
|
|
||||||
<ResourcePage<VendorCreditsClient>
|
|
||||||
pageTitle="Vendor Credits"
|
|
||||||
routeKey={VENDOR_CREDIT_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.vendorCredits}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Vendor Credit">
|
|
||||||
{(resourceId) => (
|
|
||||||
<VendorCreditForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "subject",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Subject" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "vendor_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
|
|
||||||
cell: ({ row }) => (row.original as any).vendor_name || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "bill_number",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Bill #" />,
|
|
||||||
cell: ({ row }) => (row.original as any).bill_number || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "vendor_credit_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const value = (row.original as any).vendor_credit_date
|
|
||||||
return value ? new Date(value).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = (row.original as any).status
|
|
||||||
return <Badge variant={status === "closed" ? "secondary" : "default"}>{status || "—"}</Badge>
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
"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 { VendorForm } from "@/modules/vendors/vendor-form"
|
|
||||||
import { VENDOR_ROUTES } from "@garage/api"
|
|
||||||
import type { VendorsClient } from "@garage/api"
|
|
||||||
|
|
||||||
export default function VendorsPage() {
|
|
||||||
return (
|
|
||||||
<ResourcePage<VendorsClient>
|
|
||||||
pageTitle="Vendors"
|
|
||||||
routeKey={VENDOR_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.vendors}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Vendor">
|
|
||||||
{(resourceId) => (
|
|
||||||
<VendorForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "first_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const r = row.original as any
|
|
||||||
const name = [r.first_name, r.last_name].filter(Boolean).join(" ")
|
|
||||||
return name || "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "company_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Company" />,
|
|
||||||
cell: ({ row }) => (row.original as any).company_name || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "email",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Email" />,
|
|
||||||
cell: ({ row }) => (row.original as any).email || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = (row.original as any).created_at
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useParams } from "next/navigation"
|
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import { type ColumnDef } from "@tanstack/react-table"
|
|
||||||
import { useState } from "react"
|
|
||||||
import { Plus, Trash2 } 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 { Card, CardContent } from "@/shared/components/ui/card"
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/shared/components/ui/dialog"
|
|
||||||
import { CreditNoteDocumentForm } from "@/modules/credit-notes/credit-note-document-form"
|
|
||||||
|
|
||||||
type CreditNoteAttachment = {
|
|
||||||
id: number
|
|
||||||
name?: string
|
|
||||||
url?: string
|
|
||||||
created_at: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function CreditNoteDocumentsPage() {
|
|
||||||
const { id: creditNoteId } = useParams<{ id: string }>()
|
|
||||||
const api = useAuthApi()
|
|
||||||
const queryClient = useQueryClient()
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false)
|
|
||||||
|
|
||||||
const queryKey = ["credit-note-attachments", creditNoteId]
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
|
||||||
queryKey,
|
|
||||||
queryFn: async () => {
|
|
||||||
const response = await api.creditNotes.show(creditNoteId)
|
|
||||||
return (response as any)?.data ?? response
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const deleteMutation = useMutation({
|
|
||||||
mutationFn: (attachmentId: number) =>
|
|
||||||
api.creditNotes.deleteAttachment(creditNoteId, { attachment_id: attachmentId }),
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success("Attachment deleted successfully.")
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
},
|
|
||||||
onError: () => {
|
|
||||||
toast.error("Failed to delete attachment.")
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleDelete = async (attachment: CreditNoteAttachment) => {
|
|
||||||
const confirmed = await confirm({
|
|
||||||
title: "Delete Attachment",
|
|
||||||
description: `Are you sure you want to delete "${attachment.name || "this attachment"}"?`,
|
|
||||||
confirmLabel: "Delete",
|
|
||||||
variant: "destructive",
|
|
||||||
})
|
|
||||||
if (confirmed) {
|
|
||||||
deleteMutation.mutate(attachment.id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns: ColumnDef<CreditNoteAttachment>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: "name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Name" />,
|
|
||||||
cell: ({ getValue, row }) => {
|
|
||||||
const name = getValue<string>()
|
|
||||||
const url = row.original.url
|
|
||||||
if (url) {
|
|
||||||
return (
|
|
||||||
<a href={url} target="_blank" rel="noopener noreferrer" className="text-primary underline">
|
|
||||||
{name || "Attachment"}
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return name || "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Uploaded" />,
|
|
||||||
cell: ({ getValue }) => {
|
|
||||||
const val = getValue<string>()
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "actions",
|
|
||||||
header: () => <span className="sr-only">Actions</span>,
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
onClick={() => handleDelete(row.original)}
|
|
||||||
title="Delete attachment"
|
|
||||||
>
|
|
||||||
<Trash2 className="size-4 text-destructive" />
|
|
||||||
</Button>
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const attachments: CreditNoteAttachment[] = (data as any)?.attachments ?? []
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-4 p-4 lg:p-6">
|
|
||||||
<div className="flex items-center justify-end">
|
|
||||||
<Button onClick={() => setDialogOpen(true)}>
|
|
||||||
<Plus className="size-4" />
|
|
||||||
Add Attachment
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardContent>
|
|
||||||
<DataTable
|
|
||||||
columns={columns}
|
|
||||||
data={attachments}
|
|
||||||
pagination={{ page: 1, pageSize: 15, pageCount: 1, total: attachments.length }}
|
|
||||||
sorting={[]}
|
|
||||||
onChange={() => {}}
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Upload Attachment</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<CreditNoteDocumentForm
|
|
||||||
creditNoteId={creditNoteId}
|
|
||||||
onSuccess={() => {
|
|
||||||
setDialogOpen(false)
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { CreditNoteActions } from '@/modules/credit-notes/credit-note-actions'
|
|
||||||
import { CreditNoteProvider } from '@/modules/credit-notes/credit-note-context'
|
|
||||||
import { ReceiptTextIcon } from 'lucide-react'
|
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
export default async function CreditNoteDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const creditNote = await api.creditNotes.show(id)
|
|
||||||
const data = (creditNote as any)?.data ?? creditNote
|
|
||||||
const title = data?.subject || data?.credit_invoice || 'Credit Note Details'
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CreditNoteProvider creditNote={{ id, label: title }}>
|
|
||||||
<DashboardDetailsPage
|
|
||||||
className='p-0 lg:p-0'
|
|
||||||
title={title}
|
|
||||||
description={data?.credit_invoice ? `Credit Note #: ${data.credit_invoice}` : undefined}
|
|
||||||
icon={<ReceiptTextIcon className="size-5" />}
|
|
||||||
backHref="/sales/credit-notes"
|
|
||||||
actions={<CreditNoteActions creditNoteId={id} />}
|
|
||||||
tabs={[
|
|
||||||
{
|
|
||||||
href: `/sales/credit-notes/${id}`,
|
|
||||||
label: 'Details'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: `/sales/credit-notes/${id}/documents`,
|
|
||||||
label: 'Documents'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: `/sales/credit-notes/${id}/notes`,
|
|
||||||
label: 'Notes'
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</DashboardDetailsPage>
|
|
||||||
</CreditNoteProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,144 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useParams } from "next/navigation"
|
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import { type ColumnDef } from "@tanstack/react-table"
|
|
||||||
import { useState } from "react"
|
|
||||||
import { Plus, Trash2 } 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 { Card, CardContent } from "@/shared/components/ui/card"
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/shared/components/ui/dialog"
|
|
||||||
import { CreditNoteNoteForm } from "@/modules/credit-notes/credit-note-note-form"
|
|
||||||
|
|
||||||
type CreditNoteNote = {
|
|
||||||
id: number
|
|
||||||
note?: string
|
|
||||||
created_at: string
|
|
||||||
updated_at: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function CreditNoteNotesPage() {
|
|
||||||
const { id: creditNoteId } = useParams<{ id: string }>()
|
|
||||||
const api = useAuthApi()
|
|
||||||
const queryClient = useQueryClient()
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false)
|
|
||||||
|
|
||||||
const queryKey = ["credit-note-notes", creditNoteId]
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
|
||||||
queryKey,
|
|
||||||
queryFn: async () => {
|
|
||||||
const response = await api.creditNotes.show(creditNoteId)
|
|
||||||
return (response as any)?.data ?? response
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const deleteMutation = useMutation({
|
|
||||||
mutationFn: (noteId: number) =>
|
|
||||||
api.creditNotes.deleteInternalNote(creditNoteId, { note_id: noteId } as never),
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success("Note deleted successfully.")
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
},
|
|
||||||
onError: () => {
|
|
||||||
toast.error("Failed to delete note.")
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleDelete = async (note: CreditNoteNote) => {
|
|
||||||
const confirmed = await confirm({
|
|
||||||
title: "Delete Note",
|
|
||||||
description: "Are you sure you want to delete this note?",
|
|
||||||
confirmLabel: "Delete",
|
|
||||||
variant: "destructive",
|
|
||||||
})
|
|
||||||
if (confirmed) {
|
|
||||||
deleteMutation.mutate(note.id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns: ColumnDef<CreditNoteNote>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: "note",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Note" />,
|
|
||||||
cell: ({ getValue }) => {
|
|
||||||
const val = getValue<string>()
|
|
||||||
return val || "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
|
|
||||||
cell: ({ getValue }) => {
|
|
||||||
const val = getValue<string>()
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "actions",
|
|
||||||
header: () => <span className="sr-only">Actions</span>,
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
onClick={() => handleDelete(row.original)}
|
|
||||||
title="Delete note"
|
|
||||||
>
|
|
||||||
<Trash2 className="size-4 text-destructive" />
|
|
||||||
</Button>
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const notes: CreditNoteNote[] = (data as any)?.internal_notes ?? []
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-4 p-4 lg:p-6">
|
|
||||||
<div className="flex items-center justify-end">
|
|
||||||
<Button onClick={() => setDialogOpen(true)}>
|
|
||||||
<Plus className="size-4" />
|
|
||||||
Add Note
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardContent>
|
|
||||||
<DataTable
|
|
||||||
columns={columns}
|
|
||||||
data={notes}
|
|
||||||
pagination={{ page: 1, pageSize: 15, pageCount: 1, total: notes.length }}
|
|
||||||
sorting={[]}
|
|
||||||
onChange={() => {}}
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Add Note</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<CreditNoteNoteForm
|
|
||||||
creditNoteId={creditNoteId}
|
|
||||||
onSuccess={() => {
|
|
||||||
setDialogOpen(false)
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { CreditNoteGeneralInfo } from '@/modules/credit-notes/credit-note-general-info'
|
|
||||||
|
|
||||||
export default async function CreditNoteDetailPage(props: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const response = await api.creditNotes.show(id)
|
|
||||||
const creditNote = (response as any)?.data ?? response
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="p-4 lg:p-6">
|
|
||||||
<CreditNoteGeneralInfo creditNote={creditNote} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { CreditNoteForm } from "@/modules/credit-notes/credit-note-form"
|
|
||||||
import { CREDIT_NOTE_ROUTES } from "@garage/api"
|
|
||||||
import type { CreditNotesClient } from "@garage/api"
|
|
||||||
|
|
||||||
type CreditNoteItem = {
|
|
||||||
id: number
|
|
||||||
subject?: string
|
|
||||||
credit_invoice?: string
|
|
||||||
customer_id?: number
|
|
||||||
status?: string
|
|
||||||
date?: string
|
|
||||||
created_at?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function CreditNotesPage() {
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ResourcePage<CreditNotesClient>
|
|
||||||
pageTitle="Credit Notes"
|
|
||||||
routeKey={CREDIT_NOTE_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.creditNotes}
|
|
||||||
onRowClick={(row) => router.push(`/sales/credit-notes/${(row as any).id}`)}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Credit Note">
|
|
||||||
{(resourceId) => (
|
|
||||||
<CreditNoteForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "subject",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Subject" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "credit_invoice",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Credit Note #" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original as unknown as CreditNoteItem
|
|
||||||
const status = item.status
|
|
||||||
const colorMap: Record<string, string> = {
|
|
||||||
draft: "text-muted-foreground",
|
|
||||||
open: "text-blue-600",
|
|
||||||
applied: "text-green-600",
|
|
||||||
void: "text-gray-400",
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<span className={colorMap[status ?? ""] ?? ""}>
|
|
||||||
{status ? status.charAt(0).toUpperCase() + status.slice(1) : "—"}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { CustomerActions } from '@/modules/customers/customer-actions'
|
|
||||||
import { CustomerProvider } from '@/modules/customers/customer-context'
|
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
export default async function layout(props: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const customer = await api.customers.getById(id)
|
|
||||||
|
|
||||||
const firstName = customer.data?.first_name ?? ''
|
|
||||||
const lastName = customer.data?.last_name ?? ''
|
|
||||||
const fullName = [firstName, lastName].filter(Boolean).join(' ') || 'Customer Details'
|
|
||||||
const customerLabel = fullName
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CustomerProvider customer={{ id, label: customerLabel }}>
|
|
||||||
<DashboardDetailsPage
|
|
||||||
className="p-0 lg:p-0"
|
|
||||||
title={fullName}
|
|
||||||
description={customer.data?.email ?? customer.data?.phone ?? undefined}
|
|
||||||
backHref="/sales/customers"
|
|
||||||
actions={<CustomerActions customerId={id} />}
|
|
||||||
tabs={[
|
|
||||||
{ href: `/sales/customers/${id}`, label: 'Details' },
|
|
||||||
{ href: `/sales/customers/${id}/notes`, label: 'Notes' },
|
|
||||||
{ href: `/sales/customers/${id}/vehicles`, label: 'Vehicles' },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</DashboardDetailsPage>
|
|
||||||
</CustomerProvider>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,207 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useParams } from "next/navigation"
|
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import { type ColumnDef } from "@tanstack/react-table"
|
|
||||||
import { useState } from "react"
|
|
||||||
import { Plus, Trash2, StickyNote } from "lucide-react"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
import { useForm } from "react-hook-form"
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod"
|
|
||||||
import { z } from "zod"
|
|
||||||
|
|
||||||
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 {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/shared/components/ui/dialog"
|
|
||||||
import {
|
|
||||||
Field,
|
|
||||||
FieldLabel,
|
|
||||||
FieldError,
|
|
||||||
} from "@/shared/components/ui/field"
|
|
||||||
import { Textarea } from "@/shared/components/ui/textarea"
|
|
||||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
|
||||||
|
|
||||||
type CustomerNote = {
|
|
||||||
id: number
|
|
||||||
note: string
|
|
||||||
created_at: string
|
|
||||||
updated_at: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const addNoteSchema = z.object({
|
|
||||||
note: z.string().min(1, "Note content is required"),
|
|
||||||
})
|
|
||||||
type AddNoteValues = z.infer<typeof addNoteSchema>
|
|
||||||
|
|
||||||
export default function CustomerNotesPage() {
|
|
||||||
const { id: customerId } = useParams<{ id: string }>()
|
|
||||||
const api = useAuthApi()
|
|
||||||
const queryClient = useQueryClient()
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false)
|
|
||||||
|
|
||||||
const queryKey = ["customer-notes", customerId]
|
|
||||||
|
|
||||||
const { data: customerData, isLoading } = useQuery({
|
|
||||||
queryKey,
|
|
||||||
queryFn: () => api.customers.getById(customerId),
|
|
||||||
})
|
|
||||||
|
|
||||||
const notes: CustomerNote[] = (customerData?.data as any)?.notes ?? []
|
|
||||||
|
|
||||||
const meta = (customerData as any)?.meta
|
|
||||||
const pagination = {
|
|
||||||
page: meta?.current_page ?? 1,
|
|
||||||
pageSize: meta?.per_page ?? 15,
|
|
||||||
pageCount: meta?.last_page ?? 1,
|
|
||||||
total: meta?.total ?? notes.length,
|
|
||||||
}
|
|
||||||
|
|
||||||
const addNoteMutation = useMutation({
|
|
||||||
mutationFn: (values: AddNoteValues) =>
|
|
||||||
api.customers.addNote(customerId, { note: values.note }),
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success("Note added successfully.")
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
setDialogOpen(false)
|
|
||||||
reset()
|
|
||||||
},
|
|
||||||
onError: () => {
|
|
||||||
toast.error("Failed to add note.")
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const deleteNoteMutation = useMutation({
|
|
||||||
mutationFn: (noteId: number) => api.customers.deleteNote(customerId, noteId),
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success("Note deleted successfully.")
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
},
|
|
||||||
onError: () => {
|
|
||||||
toast.error("Failed to delete note.")
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const {
|
|
||||||
handleSubmit,
|
|
||||||
register,
|
|
||||||
reset,
|
|
||||||
formState: { errors },
|
|
||||||
} = useForm<AddNoteValues>({
|
|
||||||
resolver: zodResolver(addNoteSchema),
|
|
||||||
defaultValues: { note: "" },
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleDelete = async (note: CustomerNote) => {
|
|
||||||
const confirmed = await confirm({
|
|
||||||
title: "Delete Note",
|
|
||||||
description: "Are you sure you want to delete this note?",
|
|
||||||
confirmLabel: "Delete",
|
|
||||||
variant: "destructive",
|
|
||||||
})
|
|
||||||
if (confirmed) {
|
|
||||||
deleteNoteMutation.mutate(note.id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns: ColumnDef<CustomerNote>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: "note",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Note" />,
|
|
||||||
cell: ({ getValue }) => (
|
|
||||||
<span className="whitespace-pre-wrap text-sm">{getValue<string>()}</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Created At" />,
|
|
||||||
cell: ({ getValue }) => {
|
|
||||||
const val = getValue<string>()
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "actions",
|
|
||||||
header: () => <span className="sr-only">Actions</span>,
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => handleDelete(row.original)}
|
|
||||||
disabled={deleteNoteMutation.isPending}
|
|
||||||
>
|
|
||||||
<Trash2 className="size-4 text-destructive" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage
|
|
||||||
headerProps={{
|
|
||||||
title: "Notes",
|
|
||||||
actions: (
|
|
||||||
<Button size="sm" onClick={() => setDialogOpen(true)}>
|
|
||||||
<Plus className="size-4" />
|
|
||||||
Add Note
|
|
||||||
</Button>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DataTable
|
|
||||||
columns={columns}
|
|
||||||
data={notes}
|
|
||||||
pagination={pagination}
|
|
||||||
sorting={[]}
|
|
||||||
onChange={() => {}}
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Add Note</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit((values) => addNoteMutation.mutate(values))}
|
|
||||||
className="grid gap-4"
|
|
||||||
>
|
|
||||||
<Field>
|
|
||||||
<FieldLabel>Note</FieldLabel>
|
|
||||||
<Textarea
|
|
||||||
{...register("note")}
|
|
||||||
placeholder="Enter note..."
|
|
||||||
rows={4}
|
|
||||||
/>
|
|
||||||
{errors.note && <FieldError>{errors.note.message}</FieldError>}
|
|
||||||
</Field>
|
|
||||||
<div className="flex justify-end gap-2">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
setDialogOpen(false)
|
|
||||||
reset()
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button type="submit" disabled={addNoteMutation.isPending}>
|
|
||||||
{addNoteMutation.isPending ? "Saving..." : "Save Note"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { CustomerGeneralInfo } from '@/modules/customers/customer-general-info'
|
|
||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
|
|
||||||
export default async function page(props: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const customer = await api.customers.getById(id)
|
|
||||||
|
|
||||||
if (!customer.data) {
|
|
||||||
return <div className="text-muted-foreground p-6">Customer not found.</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<CustomerGeneralInfo customer={customer.data} />
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { use } 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 { VehicleForm } from "@/modules/vehicles/vehicle-form"
|
|
||||||
import { VEHICLE_ROUTES } from "@garage/api"
|
|
||||||
import type { VehiclesClient } from "@garage/api"
|
|
||||||
import { CarIcon } from "lucide-react"
|
|
||||||
import { useCustomer } from "@/modules/customers/customer-context"
|
|
||||||
|
|
||||||
export default function CustomerVehiclesPage({ params }: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id: customerId } = use(params)
|
|
||||||
const customer = useCustomer()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ResourcePage<VehiclesClient>
|
|
||||||
tableHeader={({ invalidateQuery, selectedItem, closeDialog }) => (
|
|
||||||
<FormDialog title="Vehicle">
|
|
||||||
{(resourceId) => (
|
|
||||||
<VehicleForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={() => {
|
|
||||||
closeDialog()
|
|
||||||
invalidateQuery()
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
)}
|
|
||||||
pageTitle="Customer Vehicles"
|
|
||||||
routeKey={VEHICLE_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.vehicles}
|
|
||||||
extraParams={{ customer_id: customerId }}
|
|
||||||
header={null}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "make",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const r = row.original as any
|
|
||||||
const make = r.make ?? ""
|
|
||||||
const model = r.model ?? ""
|
|
||||||
const display = `${make} ${model}`.trim() || "—"
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<CarIcon className="size-4 text-muted-foreground" />
|
|
||||||
<span className="font-medium">{display}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "year",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Year" />,
|
|
||||||
cell: ({ row }) => (row.original as any).year ?? "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "license_plate",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="License Plate" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = (row.original as any).license_plate
|
|
||||||
return val ? <span className="font-mono text-xs">{val}</span> : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useRouter } from 'next/navigation'
|
|
||||||
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 { DownloadSampleButton } from '@/shared/components/download-sample-button'
|
|
||||||
import { useAuthApi } from '@/shared/useApi'
|
|
||||||
import { CustomerForm } from '@/modules/customers/customer-form'
|
|
||||||
import { CUSTOMER_ROUTES } from '@garage/api'
|
|
||||||
import type { CustomersClient } from '@garage/api'
|
|
||||||
import { Building2Icon, UserIcon } from 'lucide-react'
|
|
||||||
|
|
||||||
export default function CustomersPage() {
|
|
||||||
const router = useRouter()
|
|
||||||
const api = useAuthApi()
|
|
||||||
return (
|
|
||||||
<ResourcePage<CustomersClient>
|
|
||||||
pageTitle='Customers'
|
|
||||||
routeKey={CUSTOMER_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.customers}
|
|
||||||
onRowClick={(row) => router.push(`/sales/customers/${(row as any).id}`)}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<div className='flex items-center gap-2'>
|
|
||||||
<DownloadSampleButton
|
|
||||||
onDownload={() => api.customers.downloadImportSample()}
|
|
||||||
fileName='customers-import-sample'
|
|
||||||
/>
|
|
||||||
<ImportDataButton
|
|
||||||
onImport={(file) => api.customers.importData(file)}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
<ExportDataButton
|
|
||||||
onExport={(filters) => api.customers.exportData(filters)}
|
|
||||||
fileName='customers'
|
|
||||||
/>
|
|
||||||
<FormDialog title="Customer">
|
|
||||||
{(resourceId) => (
|
|
||||||
<CustomerForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
|
|
||||||
{
|
|
||||||
accessorKey: "first_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const customerName = row.original.first_name
|
|
||||||
const isCompany = (row.original as any).customer_type?.name?.toLocaleLowerCase() === "company";
|
|
||||||
const companyName = row.original.company_name
|
|
||||||
const name = isCompany && companyName ? `${customerName} (${row.original.last_name})` : customerName
|
|
||||||
|
|
||||||
return (<div className="flex items-center gap-2">
|
|
||||||
{isCompany ? <Building2Icon className="text-muted-foreground" /> : <UserIcon className="text-muted-foreground" />}
|
|
||||||
<span>{name}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "email",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Email" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "phone",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Phone" />,
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { EstimateActions } from '@/modules/estimates/estimate-actions'
|
|
||||||
import { EstimateProvider } from '@/modules/estimates/estimate-context'
|
|
||||||
import { CreateInvoiceFromEstimateButton } from '@/modules/estimates/create-invoice-from-estimate-button'
|
|
||||||
import { CreateJobCardFromEstimateButton } from '@/modules/estimates/create-job-card-from-estimate-button'
|
|
||||||
import { FileTextIcon } from 'lucide-react'
|
|
||||||
import React from 'react'
|
|
||||||
import { formatDate } from '@/shared/utils/formatters'
|
|
||||||
|
|
||||||
export default async function layout(props: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const estimate = await api.estimates.show(id)
|
|
||||||
|
|
||||||
const estimateData = estimate?.data
|
|
||||||
const title = estimateData?.title || estimateData?.estimate_number || `Estimate #${id}`
|
|
||||||
const estimateLabel = estimateData?.estimate_number
|
|
||||||
? `${estimateData.estimate_number}${estimateData.title ? ` — ${estimateData.title}` : ''}`
|
|
||||||
: title
|
|
||||||
|
|
||||||
if (!estimateData) {
|
|
||||||
return <div className="text-muted-foreground p-4">Estimate not found.</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<EstimateProvider estimate={estimateData}>
|
|
||||||
<DashboardDetailsPage
|
|
||||||
className="p-0 lg:p-0"
|
|
||||||
icon={<FileTextIcon className="size-5" />}
|
|
||||||
title={title}
|
|
||||||
description={
|
|
||||||
estimateData?.date ? `Date: ${formatDate(estimateData.date)}` : undefined
|
|
||||||
}
|
|
||||||
backHref="/sales/estimates"
|
|
||||||
actions={
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<CreateInvoiceFromEstimateButton />
|
|
||||||
<CreateJobCardFromEstimateButton />
|
|
||||||
<EstimateActions estimateId={id} />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
tabs={[
|
|
||||||
{ href: `/sales/estimates/${id}`, label: 'Details' },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</DashboardDetailsPage>
|
|
||||||
</EstimateProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { EstimateGeneralInfo } from '@/modules/estimates/estimate-general-info'
|
|
||||||
import { EstimateServicesSection } from '@/modules/estimates/estimate-services-section'
|
|
||||||
import { EstimatePartsSection } from '@/modules/estimates/estimate-parts-section'
|
|
||||||
import { EstimateExpenseItemsSection } from '@/modules/estimates/estimate-expense-items-section'
|
|
||||||
import { EstimateTotalsSummary } from '@/modules/estimates/estimate-totals-summary'
|
|
||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
|
|
||||||
export default async function page(props: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const estimate = await api.estimates.show(id)
|
|
||||||
|
|
||||||
const estimateData = estimate?.data
|
|
||||||
|
|
||||||
if (!estimateData) {
|
|
||||||
return <div className="text-muted-foreground p-4">Estimate not found.</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<div className="grid gap-6">
|
|
||||||
<EstimateGeneralInfo estimate={estimateData} />
|
|
||||||
<EstimateServicesSection estimateId={id} />
|
|
||||||
<EstimatePartsSection estimateId={id} />
|
|
||||||
<EstimateExpenseItemsSection estimateId={id} />
|
|
||||||
<EstimateTotalsSummary />
|
|
||||||
</div>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
"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 { EstimateForm } from '@/modules/estimates/estimate-form'
|
|
||||||
import { ESTIMATE_ROUTES } from '@garage/api'
|
|
||||||
import type { EstimatesClient } from '@garage/api'
|
|
||||||
import { Car, FileTextIcon, UserIcon } from 'lucide-react'
|
|
||||||
import { Button } from '@/shared/components/ui/button'
|
|
||||||
import Link from 'next/link'
|
|
||||||
import { formatDate } from '@/shared/utils/formatters'
|
|
||||||
import { getVehicleLabel } from '@/modules/vehicles/utils/getVehicleLabel'
|
|
||||||
import { getFullName } from '@/shared/utils/getFullName'
|
|
||||||
|
|
||||||
export default function EstimatesPage() {
|
|
||||||
return (
|
|
||||||
<ResourcePage<EstimatesClient>
|
|
||||||
pageTitle="Estimates"
|
|
||||||
routeKey={ESTIMATE_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.estimates}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Estimate">
|
|
||||||
{(resourceId) => (
|
|
||||||
<EstimateForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "title",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Link href={`/sales/estimates/${item.id}`} className="flex items-center gap-2 hover:underline">
|
|
||||||
<FileTextIcon className="text-muted-foreground h-4 w-4" />
|
|
||||||
<span>{item.title}</span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "estimate_number",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Estimate #" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "customer_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item:any = row.original
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<UserIcon className="h-4 w-4 text-muted-foreground" />
|
|
||||||
<span>{getFullName(item.customer) || "—"}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "vehicle",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item :any= row.original
|
|
||||||
return <Button variant="outline" asChild size="sm">
|
|
||||||
<Link href={`/sales/vehicles/${item.vehicle?.id}`}>
|
|
||||||
<Car/> {getVehicleLabel(item.vehicle as any) || "—"}
|
|
||||||
</Link>
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original
|
|
||||||
return formatDate(item.date)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "has_insurance",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Insurance" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original
|
|
||||||
return item.has_insurance ? "Yes" : "No"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original
|
|
||||||
return item.created_at ? new Date(item.created_at).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,589 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { use, useState, useRef, useCallback } from "react"
|
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/shared/components/ui/dropdown-menu"
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/shared/components/ui/dialog"
|
|
||||||
import { Input } from "@/shared/components/ui/input"
|
|
||||||
import { Label } from "@/shared/components/ui/label"
|
|
||||||
import { Textarea } from "@/shared/components/ui/textarea"
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/shared/components/ui/select"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
import {
|
|
||||||
Plus,
|
|
||||||
Ellipsis,
|
|
||||||
Pencil,
|
|
||||||
Trash2,
|
|
||||||
CheckCircle2,
|
|
||||||
AlertTriangle,
|
|
||||||
XCircle,
|
|
||||||
MinusCircle,
|
|
||||||
CircleDot,
|
|
||||||
Paperclip,
|
|
||||||
FileUp,
|
|
||||||
FileText,
|
|
||||||
FileImage,
|
|
||||||
File,
|
|
||||||
X,
|
|
||||||
} from "lucide-react"
|
|
||||||
import { INSPECTION_ROUTES } from "@garage/api"
|
|
||||||
|
|
||||||
// ── Types ──
|
|
||||||
|
|
||||||
type CheckpointItem = {
|
|
||||||
id: number
|
|
||||||
inspection_id?: number
|
|
||||||
name?: string
|
|
||||||
description?: string
|
|
||||||
record_type?: string
|
|
||||||
condition_rate?: number
|
|
||||||
file?: string
|
|
||||||
status?: string
|
|
||||||
created_at?: string
|
|
||||||
updated_at?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Constants ──
|
|
||||||
|
|
||||||
const CHECKPOINT_STATUSES = [
|
|
||||||
{ value: "passed", label: "Passed", icon: CheckCircle2, color: "bg-green-100 text-green-800" },
|
|
||||||
{ value: "need_attention", label: "Need Attention", icon: AlertTriangle, color: "bg-yellow-100 text-yellow-800" },
|
|
||||||
{ value: "failed", label: "Failed", icon: XCircle, color: "bg-red-100 text-red-800" },
|
|
||||||
{ value: "not_applicable", label: "Not Applicable", icon: MinusCircle, color: "bg-gray-100 text-gray-800" },
|
|
||||||
{ value: "not_inspected", label: "Not Inspected", icon: CircleDot, color: "bg-blue-100 text-blue-800" },
|
|
||||||
] as const
|
|
||||||
|
|
||||||
const RECORD_TYPES = [
|
|
||||||
{ value: "record_conditions", label: "Record Conditions" },
|
|
||||||
{ value: "record_audio", label: "Record Audio" },
|
|
||||||
{ value: "record_video", label: "Record Video" },
|
|
||||||
{ value: "capture_photo", label: "Capture Photo" },
|
|
||||||
] as const
|
|
||||||
|
|
||||||
function formatStatus(status?: string) {
|
|
||||||
if (!status) return "Not Inspected"
|
|
||||||
return status.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStatusConfig(status?: string) {
|
|
||||||
return CHECKPOINT_STATUSES.find((s) => s.value === status) || CHECKPOINT_STATUSES[4]
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Checkpoint Form Dialog ──
|
|
||||||
|
|
||||||
function CheckpointFormDialog({
|
|
||||||
open,
|
|
||||||
onOpenChange,
|
|
||||||
inspectionId,
|
|
||||||
checkpoint,
|
|
||||||
onSuccess,
|
|
||||||
}: {
|
|
||||||
open: boolean
|
|
||||||
onOpenChange: (open: boolean) => void
|
|
||||||
inspectionId: string
|
|
||||||
checkpoint?: CheckpointItem | null
|
|
||||||
onSuccess: () => void
|
|
||||||
}) {
|
|
||||||
const api = useAuthApi()
|
|
||||||
const [name, setName] = useState(checkpoint?.name ?? "")
|
|
||||||
const [description, setDescription] = useState(checkpoint?.description ?? "")
|
|
||||||
const [recordType, setRecordType] = useState(checkpoint?.record_type ?? "record_conditions")
|
|
||||||
const [isPending, setIsPending] = useState(false)
|
|
||||||
|
|
||||||
const isEditing = !!checkpoint
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
|
||||||
e.preventDefault()
|
|
||||||
if (!name.trim()) {
|
|
||||||
toast.error("Name is required")
|
|
||||||
return
|
|
||||||
}
|
|
||||||
setIsPending(true)
|
|
||||||
try {
|
|
||||||
const payload = {
|
|
||||||
inspection_id: Number(inspectionId),
|
|
||||||
name: name.trim(),
|
|
||||||
description: description.trim() || undefined,
|
|
||||||
record_type: recordType,
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isEditing) {
|
|
||||||
const promise = api.inspections.updateCheckpoint(String(checkpoint.id), payload)
|
|
||||||
toast.promise(promise, {
|
|
||||||
loading: "Updating checkpoint...",
|
|
||||||
success: "Checkpoint updated",
|
|
||||||
error: "Failed to update checkpoint",
|
|
||||||
})
|
|
||||||
await promise
|
|
||||||
} else {
|
|
||||||
const promise = api.inspections.createCheckpoint(payload)
|
|
||||||
toast.promise(promise, {
|
|
||||||
loading: "Creating checkpoint...",
|
|
||||||
success: "Checkpoint created",
|
|
||||||
error: "Failed to create checkpoint",
|
|
||||||
})
|
|
||||||
await promise
|
|
||||||
}
|
|
||||||
onSuccess()
|
|
||||||
onOpenChange(false)
|
|
||||||
} finally {
|
|
||||||
setIsPending(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>{isEditing ? "Edit Checkpoint" : "Add Checkpoint"}</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<form onSubmit={handleSubmit} className="grid gap-4">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="cp-name">Name *</Label>
|
|
||||||
<Input
|
|
||||||
id="cp-name"
|
|
||||||
placeholder="e.g. Engine Oil Level"
|
|
||||||
value={name}
|
|
||||||
onChange={(e) => setName(e.target.value)}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="cp-description">Description</Label>
|
|
||||||
<Textarea
|
|
||||||
id="cp-description"
|
|
||||||
placeholder="Check oil level and condition"
|
|
||||||
value={description}
|
|
||||||
onChange={(e) => setDescription(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<Label htmlFor="cp-record-type">Record Type</Label>
|
|
||||||
<Select value={recordType} onValueChange={setRecordType}>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{RECORD_TYPES.map((rt) => (
|
|
||||||
<SelectItem key={rt.value} value={rt.value}>
|
|
||||||
{rt.label}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<Button type="submit" disabled={isPending}>
|
|
||||||
{isEditing ? <Pencil className="size-4" /> : <Plus className="size-4" />}
|
|
||||||
{isPending
|
|
||||||
? (isEditing ? "Updating..." : "Creating...")
|
|
||||||
: (isEditing ? "Update Checkpoint" : "Create Checkpoint")}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Attachments Dialog ──
|
|
||||||
|
|
||||||
function getFileIcon(url: string) {
|
|
||||||
const ext = url.split(".").pop()?.toLowerCase()
|
|
||||||
if (["png", "jpg", "jpeg", "gif", "webp", "svg"].includes(ext ?? "")) return FileImage
|
|
||||||
if (ext === "pdf") return FileText
|
|
||||||
return File
|
|
||||||
}
|
|
||||||
|
|
||||||
function getFileName(url: string) {
|
|
||||||
try {
|
|
||||||
return decodeURIComponent(url.split("/").pop() ?? "Attachment")
|
|
||||||
} catch {
|
|
||||||
return url.split("/").pop() ?? "Attachment"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function isImageUrl(url: string) {
|
|
||||||
const ext = url.split(".").pop()?.toLowerCase()
|
|
||||||
return ["png", "jpg", "jpeg", "gif", "webp", "svg"].includes(ext ?? "")
|
|
||||||
}
|
|
||||||
|
|
||||||
function CheckpointAttachmentsDialog({
|
|
||||||
open,
|
|
||||||
onOpenChange,
|
|
||||||
checkpoint,
|
|
||||||
onSuccess,
|
|
||||||
}: {
|
|
||||||
open: boolean
|
|
||||||
onOpenChange: (open: boolean) => void
|
|
||||||
checkpoint: CheckpointItem | null
|
|
||||||
onSuccess: () => void
|
|
||||||
}) {
|
|
||||||
const api = useAuthApi()
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
||||||
const [isUploading, setIsUploading] = useState(false)
|
|
||||||
|
|
||||||
const handleUpload = useCallback(async (file: globalThis.File) => {
|
|
||||||
if (!checkpoint) return
|
|
||||||
setIsUploading(true)
|
|
||||||
try {
|
|
||||||
const promise = api.inspections.uploadCheckpointMedia(
|
|
||||||
String(checkpoint.id),
|
|
||||||
{ file },
|
|
||||||
)
|
|
||||||
toast.promise(promise, {
|
|
||||||
loading: "Uploading attachment...",
|
|
||||||
success: "Attachment uploaded",
|
|
||||||
error: "Failed to upload attachment",
|
|
||||||
})
|
|
||||||
await promise
|
|
||||||
onSuccess()
|
|
||||||
} finally {
|
|
||||||
setIsUploading(false)
|
|
||||||
if (fileInputRef.current) fileInputRef.current.value = ""
|
|
||||||
}
|
|
||||||
}, [api, checkpoint, onSuccess])
|
|
||||||
|
|
||||||
const handleDelete = useCallback(async () => {
|
|
||||||
if (!checkpoint) return
|
|
||||||
const promise = api.inspections.deleteCheckpointMedia(String(checkpoint.id))
|
|
||||||
toast.promise(promise, {
|
|
||||||
loading: "Removing attachment...",
|
|
||||||
success: "Attachment removed",
|
|
||||||
error: "Failed to remove attachment",
|
|
||||||
})
|
|
||||||
await promise
|
|
||||||
onSuccess()
|
|
||||||
}, [api, checkpoint, onSuccess])
|
|
||||||
|
|
||||||
const hasFile = !!checkpoint?.file
|
|
||||||
const FileIcon = checkpoint?.file ? getFileIcon(checkpoint.file) : File
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="sm:max-w-2xl">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Attachments — {checkpoint?.name}</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
{/* Current attachment */}
|
|
||||||
{hasFile ? (
|
|
||||||
<div className="rounded-lg border p-3">
|
|
||||||
<div className="flex items-center justify-between gap-3">
|
|
||||||
<div className="flex items-center gap-3 min-w-0 ">
|
|
||||||
{isImageUrl(checkpoint.file!) ? (
|
|
||||||
<img
|
|
||||||
src={checkpoint.file!}
|
|
||||||
alt="Checkpoint attachment"
|
|
||||||
className="size-12 rounded-md object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="flex size-12 shrink-0 items-center justify-center rounded-md bg-muted">
|
|
||||||
<FileIcon className="size-5 text-muted-foreground" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="min-w-0 flex flex-col gap-0.5 max-w-48">
|
|
||||||
<a
|
|
||||||
href={checkpoint.file!}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="truncate text-sm font-medium text-primary hover:underline"
|
|
||||||
>
|
|
||||||
{getFileName(checkpoint.file!)}
|
|
||||||
</a>
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
Current attachment
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="shrink-0 text-destructive hover:text-destructive"
|
|
||||||
onClick={handleDelete}
|
|
||||||
title="Remove attachment"
|
|
||||||
>
|
|
||||||
<Trash2 className="size-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex flex-col items-center gap-2 rounded-lg border border-dashed p-6 text-muted-foreground">
|
|
||||||
<Paperclip className="size-8" />
|
|
||||||
<span className="text-sm">No attachments yet</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Upload area */}
|
|
||||||
<input
|
|
||||||
ref={fileInputRef}
|
|
||||||
type="file"
|
|
||||||
className="hidden"
|
|
||||||
accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,audio/*,video/*"
|
|
||||||
onChange={(e) => {
|
|
||||||
const file = e.target.files?.[0]
|
|
||||||
if (file) handleUpload(file)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="w-full"
|
|
||||||
disabled={isUploading}
|
|
||||||
onClick={() => fileInputRef.current?.click()}
|
|
||||||
>
|
|
||||||
<FileUp className="size-4" />
|
|
||||||
{isUploading
|
|
||||||
? "Uploading..."
|
|
||||||
: hasFile
|
|
||||||
? "Replace Attachment"
|
|
||||||
: "Add Attachment"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Main Page ──
|
|
||||||
|
|
||||||
export default function InspectionCheckpointsPage({ params }: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id: inspectionId } = use(params)
|
|
||||||
const api = useAuthApi()
|
|
||||||
const queryClient = useQueryClient()
|
|
||||||
|
|
||||||
const [formOpen, setFormOpen] = useState(false)
|
|
||||||
const [editingCheckpoint, setEditingCheckpoint] = useState<CheckpointItem | null>(null)
|
|
||||||
const [attachmentsCheckpoint, setAttachmentsCheckpoint] = useState<CheckpointItem | null>(null)
|
|
||||||
|
|
||||||
const queryKey = [INSPECTION_ROUTES.CHECKPOINTS, inspectionId]
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
|
||||||
queryKey,
|
|
||||||
queryFn: () => api.inspections.listCheckpoints({ inspection_id: inspectionId } as never),
|
|
||||||
})
|
|
||||||
|
|
||||||
const invalidate = () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Status change mutation ──
|
|
||||||
const changeStatusMutation = useMutation({
|
|
||||||
mutationFn: ({ checkpointId, status }: { checkpointId: number; status: string }) =>
|
|
||||||
api.inspections.changeCheckpointStatus({
|
|
||||||
inspection_id: Number(inspectionId),
|
|
||||||
inspection_check_point_id: String(checkpointId),
|
|
||||||
name: "", // required by API type but server uses checkpoint id from context
|
|
||||||
record_type: "record_conditions",
|
|
||||||
status,
|
|
||||||
} as never),
|
|
||||||
onSuccess: () => invalidate(),
|
|
||||||
})
|
|
||||||
|
|
||||||
// ── Delete checkpoint mutation ──
|
|
||||||
const deleteMutation = useMutation({
|
|
||||||
mutationFn: (checkpointId: string) => api.inspections.destroyCheckpoint(checkpointId),
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success("Checkpoint deleted")
|
|
||||||
invalidate()
|
|
||||||
},
|
|
||||||
onError: () => toast.error("Failed to delete checkpoint"),
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleEdit = (checkpoint: CheckpointItem) => {
|
|
||||||
setEditingCheckpoint(checkpoint)
|
|
||||||
setFormOpen(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleAdd = () => {
|
|
||||||
setEditingCheckpoint(null)
|
|
||||||
setFormOpen(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleStatusChange = (checkpointId: number, status: string) => {
|
|
||||||
const promise = changeStatusMutation.mutateAsync({ checkpointId, status, })
|
|
||||||
toast.promise(promise, {
|
|
||||||
loading: "Updating status...",
|
|
||||||
success: `Status changed to ${formatStatus(status)}`,
|
|
||||||
error: "Failed to update status",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const checkpoints = (data as any)?.data ?? []
|
|
||||||
const meta = (data as any)?.meta
|
|
||||||
|
|
||||||
const pagination = {
|
|
||||||
page: meta?.current_page ?? 1,
|
|
||||||
pageSize: meta?.per_page ?? 15,
|
|
||||||
pageCount: meta?.last_page ?? 1,
|
|
||||||
total: meta?.total ?? 0,
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
accessorKey: "name",
|
|
||||||
header: ({ column }: any) => <ColumnHeader column={column} title="Name" />,
|
|
||||||
cell: ({ row }: any) => {
|
|
||||||
const item = row.original as CheckpointItem
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-0.5">
|
|
||||||
<span className="font-medium">{item.name}</span>
|
|
||||||
{item.description && (
|
|
||||||
<span className="text-xs text-muted-foreground">{item.description}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "record_type",
|
|
||||||
header: ({ column }: any) => <ColumnHeader column={column} title="Record Type" />,
|
|
||||||
cell: ({ row }: any) => {
|
|
||||||
const item = row.original as CheckpointItem
|
|
||||||
const rt = RECORD_TYPES.find((r) => r.value === item.record_type)
|
|
||||||
return rt?.label ?? item.record_type ?? "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: ({ column }: any) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
cell: ({ row }: any) => {
|
|
||||||
const item = row.original as CheckpointItem
|
|
||||||
const config = getStatusConfig(item.status)
|
|
||||||
return (
|
|
||||||
<Badge className={config.color}>
|
|
||||||
<config.icon className="mr-1 size-3" />
|
|
||||||
{formatStatus(item.status)}
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "condition_rate",
|
|
||||||
header: ({ column }: any) => <ColumnHeader column={column} title="Condition" />,
|
|
||||||
cell: ({ row }: any) => {
|
|
||||||
const item = row.original as CheckpointItem
|
|
||||||
return item.condition_rate != null ? `${item.condition_rate}/10` : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "attachments",
|
|
||||||
header: () => <span className="text-xs">Attachments</span>,
|
|
||||||
cell: ({ row }: any) => {
|
|
||||||
const item = row.original as CheckpointItem
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="gap-1.5"
|
|
||||||
onClick={() => setAttachmentsCheckpoint(item)}
|
|
||||||
>
|
|
||||||
<Paperclip className="size-3.5" />
|
|
||||||
{item.file ? (
|
|
||||||
<Badge variant="secondary" className="px-1.5 py-0 text-xs">1</Badge>
|
|
||||||
) : (
|
|
||||||
<span className="text-xs text-muted-foreground">0</span>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "actions",
|
|
||||||
cell: ({ row }: any) => {
|
|
||||||
const item = row.original as CheckpointItem
|
|
||||||
return (
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button variant="ghost" size="icon" className="size-8">
|
|
||||||
<Ellipsis className="size-4" />
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end">
|
|
||||||
{CHECKPOINT_STATUSES.map((s) => (
|
|
||||||
<DropdownMenuItem
|
|
||||||
key={s.value}
|
|
||||||
onClick={() => handleStatusChange(item.id, s.value)}
|
|
||||||
disabled={item.status === s.value}
|
|
||||||
>
|
|
||||||
<s.icon className="size-4" />
|
|
||||||
{s.label}
|
|
||||||
</DropdownMenuItem>
|
|
||||||
))}
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<DropdownMenuItem onClick={() => handleEdit(item)}>
|
|
||||||
<Pencil className="size-4" />
|
|
||||||
Edit
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
variant="destructive"
|
|
||||||
onClick={() => deleteMutation.mutate(String(item.id))}
|
|
||||||
>
|
|
||||||
<Trash2 className="size-4" />
|
|
||||||
Delete
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<div className="flex items-center justify-between p-4">
|
|
||||||
<h3 className="text-lg font-semibold">Checkpoints</h3>
|
|
||||||
<Button onClick={handleAdd} size="sm">
|
|
||||||
<Plus className="size-4" />
|
|
||||||
Add Checkpoint
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<DataTable
|
|
||||||
columns={columns}
|
|
||||||
data={checkpoints}
|
|
||||||
pagination={pagination}
|
|
||||||
sorting={[]}
|
|
||||||
onChange={() => {}}
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
<CheckpointFormDialog
|
|
||||||
open={formOpen}
|
|
||||||
onOpenChange={(open) => {
|
|
||||||
setFormOpen(open)
|
|
||||||
if (!open) setEditingCheckpoint(null)
|
|
||||||
}}
|
|
||||||
inspectionId={inspectionId}
|
|
||||||
checkpoint={editingCheckpoint}
|
|
||||||
onSuccess={invalidate}
|
|
||||||
/>
|
|
||||||
<CheckpointAttachmentsDialog
|
|
||||||
open={!!attachmentsCheckpoint}
|
|
||||||
onOpenChange={(open) => {
|
|
||||||
if (!open) setAttachmentsCheckpoint(null)
|
|
||||||
}}
|
|
||||||
checkpoint={attachmentsCheckpoint}
|
|
||||||
onSuccess={invalidate}
|
|
||||||
/>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { use } from "react"
|
|
||||||
import { useQuery } from "@tanstack/react-query"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import { InspectionForm } from "@/modules/inspections/inspection-form"
|
|
||||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
|
||||||
import { INSPECTION_ROUTES } from "@garage/api"
|
|
||||||
|
|
||||||
export default function InspectionEditPage({ params }: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = use(params)
|
|
||||||
const api = useAuthApi()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
|
||||||
queryKey: [INSPECTION_ROUTES.BY_ID, id],
|
|
||||||
queryFn: () => api.inspections.getById(id),
|
|
||||||
})
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<div className="flex items-center justify-center p-8 text-muted-foreground">
|
|
||||||
Loading...
|
|
||||||
</div>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<div className="mx-auto max-w-2xl p-6">
|
|
||||||
<InspectionForm
|
|
||||||
resourceId={id}
|
|
||||||
initialData={data}
|
|
||||||
onSuccess={() => router.push(`/sales/inspections/${id}`)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { InspectionActions } from '@/modules/inspections/inspection-actions'
|
|
||||||
import { InspectionProvider } from '@/modules/inspections/inspection-context'
|
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
export default async function layout(props: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
children: React.ReactNode
|
|
||||||
}) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const inspection = await api.inspections.getById(id)
|
|
||||||
|
|
||||||
const title = inspection.data?.title || 'Inspection Details'
|
|
||||||
const orderNumber = inspection.data?.order_number
|
|
||||||
const status = inspection.data?.status
|
|
||||||
|
|
||||||
return (
|
|
||||||
<InspectionProvider inspection={{ id, label: title }}>
|
|
||||||
<DashboardDetailsPage
|
|
||||||
className="p-0 lg:p-0"
|
|
||||||
title={title}
|
|
||||||
description={orderNumber ? `Order: ${orderNumber}` : undefined}
|
|
||||||
backHref="/sales/inspections"
|
|
||||||
actions={<InspectionActions inspectionId={id} status={status} />}
|
|
||||||
tabs={[
|
|
||||||
{
|
|
||||||
href: `/sales/inspections/${id}`,
|
|
||||||
label: 'Details',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: `/sales/inspections/${id}/checkpoints`,
|
|
||||||
label: 'Checkpoints',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</DashboardDetailsPage>
|
|
||||||
</InspectionProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { InspectionGeneralInfo } from '@/modules/inspections/inspection-general-info'
|
|
||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
|
|
||||||
export default async function page(props: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const inspection = await api.inspections.getById(id)
|
|
||||||
|
|
||||||
if (!inspection.data) {
|
|
||||||
return <div className="text-muted-foreground">Inspection not found.</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<InspectionGeneralInfo inspection={inspection.data} />
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,162 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useParams } from "next/navigation"
|
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import { type ColumnDef } from "@tanstack/react-table"
|
|
||||||
import { useState } from "react"
|
|
||||||
import { Plus, Trash2 } 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 { Card, CardContent } from "@/shared/components/ui/card"
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/shared/components/ui/dialog"
|
|
||||||
import { InvoiceDocumentForm } from "@/modules/invoices/invoice-document-form"
|
|
||||||
|
|
||||||
type InvoiceDocument = {
|
|
||||||
id: number
|
|
||||||
document_number?: string
|
|
||||||
show_in_invoice?: boolean
|
|
||||||
show_in_estimate?: boolean
|
|
||||||
show_in_statement?: boolean
|
|
||||||
created_at: string
|
|
||||||
updated_at: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function InvoiceDocumentsPage() {
|
|
||||||
const { id: invoiceId } = useParams<{ id: string }>()
|
|
||||||
const api = useAuthApi()
|
|
||||||
const queryClient = useQueryClient()
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false)
|
|
||||||
|
|
||||||
const queryKey = ["invoice-documents", invoiceId]
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
|
||||||
queryKey,
|
|
||||||
queryFn: () => api.invoices.listDocuments({ invoice_id: invoiceId }),
|
|
||||||
})
|
|
||||||
|
|
||||||
const deleteMutation = useMutation({
|
|
||||||
mutationFn: (id: number) => api.invoices.destroyDocument(String(id)),
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success("Document deleted successfully.")
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
},
|
|
||||||
onError: () => {
|
|
||||||
toast.error("Failed to delete document.")
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleDelete = async (doc: InvoiceDocument) => {
|
|
||||||
const confirmed = await confirm({
|
|
||||||
title: "Delete Document",
|
|
||||||
description: `Are you sure you want to delete "${doc.document_number || "this document"}"?`,
|
|
||||||
confirmLabel: "Delete",
|
|
||||||
variant: "destructive",
|
|
||||||
})
|
|
||||||
if (confirmed) {
|
|
||||||
deleteMutation.mutate(doc.id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns: ColumnDef<InvoiceDocument>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: "document_number",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Document Number" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "show_in_invoice",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Show in Invoice" />,
|
|
||||||
cell: ({ getValue }) => (getValue<boolean>() ? "Yes" : "No"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "show_in_estimate",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Show in Estimate" />,
|
|
||||||
cell: ({ getValue }) => (getValue<boolean>() ? "Yes" : "No"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "show_in_statement",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Show in Statement" />,
|
|
||||||
cell: ({ getValue }) => (getValue<boolean>() ? "Yes" : "No"),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
|
|
||||||
cell: ({ getValue }) => {
|
|
||||||
const val = getValue<string>()
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "actions",
|
|
||||||
header: () => <span className="sr-only">Actions</span>,
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
onClick={() => handleDelete(row.original)}
|
|
||||||
title="Delete document"
|
|
||||||
>
|
|
||||||
<Trash2 className="size-4 text-destructive" />
|
|
||||||
</Button>
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const documents = (data as any)?.data ?? []
|
|
||||||
const meta = (data as any)?.meta
|
|
||||||
|
|
||||||
const pagination = {
|
|
||||||
page: meta?.current_page ?? 1,
|
|
||||||
pageSize: meta?.per_page ?? 15,
|
|
||||||
pageCount: meta?.last_page ?? 1,
|
|
||||||
total: meta?.total ?? 0,
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<div className="flex items-center justify-end">
|
|
||||||
<Button onClick={() => setDialogOpen(true)}>
|
|
||||||
<Plus className="size-4" />
|
|
||||||
Add Document
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardContent>
|
|
||||||
<DataTable
|
|
||||||
columns={columns}
|
|
||||||
data={documents}
|
|
||||||
pagination={pagination}
|
|
||||||
sorting={[]}
|
|
||||||
onChange={() => {}}
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Add Document</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<InvoiceDocumentForm
|
|
||||||
invoiceId={invoiceId}
|
|
||||||
onSuccess={() => {
|
|
||||||
setDialogOpen(false)
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { InvoiceActions } from '@/modules/invoices/invoice-actions'
|
|
||||||
import { InvoiceProvider } from '@/modules/invoices/invoice-context'
|
|
||||||
import { ReceiptIcon } from 'lucide-react'
|
|
||||||
import React from 'react'
|
|
||||||
import InvoiceStatusBadge from '@/modules/invoices/invoice-status-badge'
|
|
||||||
|
|
||||||
export default async function InvoiceDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const invoice = await api.invoices.show(id)
|
|
||||||
const data = (invoice as any)?.data ?? invoice
|
|
||||||
const title = data?.subject || data?.invoice_number || 'Invoice Details'
|
|
||||||
|
|
||||||
return (
|
|
||||||
<InvoiceProvider invoice={data}>
|
|
||||||
<DashboardDetailsPage
|
|
||||||
className='p-0 lg:p-0'
|
|
||||||
title={title}
|
|
||||||
description={data?.invoice_number ? `Invoice #: ${data.invoice_number}` : undefined}
|
|
||||||
icon={<ReceiptIcon className="size-5" />}
|
|
||||||
backHref="/sales/invoice"
|
|
||||||
actions={
|
|
||||||
<div className="flex space-x-2 items-center">
|
|
||||||
|
|
||||||
<InvoiceStatusBadge invoice={{id, status:data?.status}} />
|
|
||||||
<InvoiceActions invoiceId={id} />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
tabs={[
|
|
||||||
{
|
|
||||||
href: `/sales/invoice/${id}`,
|
|
||||||
label: 'Details'
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
href: `/sales/invoice/${id}/documents`,
|
|
||||||
label: 'Documents'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: `/sales/invoice/${id}/notes`,
|
|
||||||
label: 'Notes'
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</DashboardDetailsPage>
|
|
||||||
</InvoiceProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,148 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useParams } from "next/navigation"
|
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import { type ColumnDef } from "@tanstack/react-table"
|
|
||||||
import { useState } from "react"
|
|
||||||
import { Plus, Trash2 } 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 { Card, CardContent } from "@/shared/components/ui/card"
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
} from "@/shared/components/ui/dialog"
|
|
||||||
import { InvoiceNoteForm } from "@/modules/invoices/invoice-note-form"
|
|
||||||
|
|
||||||
type InvoiceNote = {
|
|
||||||
id: number
|
|
||||||
note?: string
|
|
||||||
created_at: string
|
|
||||||
updated_at: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function InvoiceNotesPage() {
|
|
||||||
const { id: invoiceId } = useParams<{ id: string }>()
|
|
||||||
const api = useAuthApi()
|
|
||||||
const queryClient = useQueryClient()
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false)
|
|
||||||
|
|
||||||
const queryKey = ["invoice-notes", invoiceId]
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
|
||||||
queryKey,
|
|
||||||
queryFn: () => api.invoices.listNotes({ invoice_id: invoiceId }),
|
|
||||||
})
|
|
||||||
|
|
||||||
const deleteMutation = useMutation({
|
|
||||||
mutationFn: (id: number) => api.invoices.destroyNote(String(id)),
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success("Note deleted successfully.")
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
},
|
|
||||||
onError: () => {
|
|
||||||
toast.error("Failed to delete note.")
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleDelete = async (note: InvoiceNote) => {
|
|
||||||
const confirmed = await confirm({
|
|
||||||
title: "Delete Note",
|
|
||||||
description: "Are you sure you want to delete this note?",
|
|
||||||
confirmLabel: "Delete",
|
|
||||||
variant: "destructive",
|
|
||||||
})
|
|
||||||
if (confirmed) {
|
|
||||||
deleteMutation.mutate(note.id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns: ColumnDef<InvoiceNote>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: "note",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Note" />,
|
|
||||||
cell: ({ getValue }) => {
|
|
||||||
const val = getValue<string>()
|
|
||||||
return val || "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
|
|
||||||
cell: ({ getValue }) => {
|
|
||||||
const val = getValue<string>()
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "actions",
|
|
||||||
header: () => <span className="sr-only">Actions</span>,
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
onClick={() => handleDelete(row.original)}
|
|
||||||
title="Delete note"
|
|
||||||
>
|
|
||||||
<Trash2 className="size-4 text-destructive" />
|
|
||||||
</Button>
|
|
||||||
),
|
|
||||||
enableSorting: false,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const notes = (data as any)?.data ?? []
|
|
||||||
const meta = (data as any)?.meta
|
|
||||||
|
|
||||||
const pagination = {
|
|
||||||
page: meta?.current_page ?? 1,
|
|
||||||
pageSize: meta?.per_page ?? 15,
|
|
||||||
pageCount: meta?.last_page ?? 1,
|
|
||||||
total: meta?.total ?? 0,
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<div className="flex items-center justify-end">
|
|
||||||
<Button onClick={() => setDialogOpen(true)}>
|
|
||||||
<Plus className="size-4" />
|
|
||||||
Add Note
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardContent>
|
|
||||||
<DataTable
|
|
||||||
columns={columns}
|
|
||||||
data={notes}
|
|
||||||
pagination={pagination}
|
|
||||||
sorting={[]}
|
|
||||||
onChange={() => {}}
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Add Note</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<InvoiceNoteForm
|
|
||||||
invoiceId={invoiceId}
|
|
||||||
onSuccess={() => {
|
|
||||||
setDialogOpen(false)
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { InvoiceGeneralInfo } from '@/modules/invoices/invoice-general-info'
|
|
||||||
import { InvoicePartsSection } from '@/modules/invoices/invoice-parts-section'
|
|
||||||
import { InvoiceServicesSection } from '@/modules/invoices/invoice-services-section'
|
|
||||||
import { InvoiceExpensesSection } from '@/modules/invoices/invoice-expenses-section'
|
|
||||||
import { InvoiceTotalsSummary } from '@/modules/invoices/invoice-totals-summary'
|
|
||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
import InvoicePaymentsSection from '@/modules/invoices/invoice-payments-section'
|
|
||||||
|
|
||||||
|
|
||||||
export default async function InvoiceDetailPage(props: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const invoice = await api.invoices.show(id)
|
|
||||||
const data = (invoice as any)?.data ?? invoice
|
|
||||||
|
|
||||||
if (!data) {
|
|
||||||
return <div className="text-muted-foreground">Invoice not found.</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<div className="grid gap-6">
|
|
||||||
<InvoiceGeneralInfo />
|
|
||||||
<InvoicePartsSection parts={data.invoice_parts} />
|
|
||||||
<InvoiceServicesSection services={data.invoice_services} />
|
|
||||||
<InvoiceExpensesSection expenses={data.invoice_expenses} />
|
|
||||||
<InvoicePaymentsSection></InvoicePaymentsSection>
|
|
||||||
<InvoiceTotalsSummary />
|
|
||||||
</div>
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { InvoiceForm } from "@/modules/invoices/invoice-form"
|
|
||||||
import { INVOICE_ROUTES } from "@garage/api"
|
|
||||||
import type { InvoicesClient } from "@garage/api"
|
|
||||||
|
|
||||||
type InvoiceItem = {
|
|
||||||
id: number
|
|
||||||
subject?: string
|
|
||||||
invoice_number?: string
|
|
||||||
customer_name?: string
|
|
||||||
status?: string
|
|
||||||
invoice_date?: string
|
|
||||||
due_date?: string
|
|
||||||
created_at?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function InvoicesPage() {
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ResourcePage<InvoicesClient>
|
|
||||||
pageTitle="Invoices"
|
|
||||||
routeKey={INVOICE_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.invoices}
|
|
||||||
onRowClick={(row) => router.push(`/sales/invoice/${(row as any).id}`)}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog classNames={{dialogContent:'lg:min-w-6xl'}} title="Invoice">
|
|
||||||
{(resourceId) => (
|
|
||||||
<InvoiceForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "subject",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Subject" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "invoice_number",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Invoice #" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "customer_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original as unknown as InvoiceItem
|
|
||||||
const status = item.status
|
|
||||||
const colorMap: Record<string, string> = {
|
|
||||||
draft: "text-muted-foreground",
|
|
||||||
open: "text-blue-600",
|
|
||||||
paid: "text-green-600",
|
|
||||||
overdue: "text-red-600",
|
|
||||||
void: "text-gray-400",
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<span className={colorMap[status ?? ""] ?? ""}>
|
|
||||||
{status ? status.charAt(0).toUpperCase() + status.slice(1) : "—"}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "invoice_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Invoice Date" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "due_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Due Date" />,
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,114 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useEffect } from "react"
|
|
||||||
import { use } from "react"
|
|
||||||
import { usePathname, useRouter, useSearchParams } from "next/navigation"
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { AppointmentForm } from "@/modules/appointments/appointment-form"
|
|
||||||
import { APPOINTMENT_ROUTES } from "@garage/api"
|
|
||||||
import type { AppointmentsClient } from "@garage/api"
|
|
||||||
import { CalendarCheck2Icon, ClockIcon } from "lucide-react"
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
|
||||||
import { useJobCard } from "@/modules/job-cards/job-card-context"
|
|
||||||
|
|
||||||
const STATUS_COLORS: Record<string, string> = {
|
|
||||||
requested: "bg-yellow-100 text-yellow-800",
|
|
||||||
confirmed: "bg-blue-100 text-blue-800",
|
|
||||||
in_progress: "bg-purple-100 text-purple-800",
|
|
||||||
completed: "bg-green-100 text-green-800",
|
|
||||||
cancelled: "bg-red-100 text-red-800",
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function JobCardAppointmentsPage({
|
|
||||||
params,
|
|
||||||
}: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
}) {
|
|
||||||
const { id: jobCardId } = use(params)
|
|
||||||
const router = useRouter()
|
|
||||||
const pathname = usePathname()
|
|
||||||
const searchParams = useSearchParams()
|
|
||||||
const jobCard = useJobCard()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (searchParams.get("create") !== "1") return
|
|
||||||
|
|
||||||
const params = new URLSearchParams(searchParams.toString())
|
|
||||||
params.delete("create")
|
|
||||||
params.set("dialog", "true")
|
|
||||||
|
|
||||||
router.replace(`${pathname}?${params.toString()}`)
|
|
||||||
}, [pathname, router, searchParams])
|
|
||||||
|
|
||||||
const defaultJobCard = jobCard
|
|
||||||
? { value: String((jobCard as any).id), label: (jobCard as any).label || (jobCard as any).title || `Job Card` }
|
|
||||||
: null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ResourcePage<AppointmentsClient>
|
|
||||||
routeKey={APPOINTMENT_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.appointments}
|
|
||||||
extraParams={{ job_card_id: jobCardId }}
|
|
||||||
header={null}
|
|
||||||
onRowClick={(row) => router.push(`/calendar/appointment/${(row as any).id}`)}
|
|
||||||
tableHeader={({ invalidateQuery, selectedItem, closeDialog }) => (
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<FormDialog title="Appointment">
|
|
||||||
{(resourceId) => (
|
|
||||||
<AppointmentForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem ?? { job_card: defaultJobCard }}
|
|
||||||
onSuccess={() => { closeDialog(); invalidateQuery() }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "title",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<CalendarCheck2Icon className="size-4 text-muted-foreground" />
|
|
||||||
<span>{(row.original as any).title}</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "from_time",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Time" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const r = row.original as any
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<ClockIcon className="size-3 text-muted-foreground" />
|
|
||||||
<span>{r.from_time} - {r.to_time}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = (row.original as any).status
|
|
||||||
const colorClass = STATUS_COLORS[status] ?? "bg-gray-100 text-gray-800"
|
|
||||||
return (
|
|
||||||
<Badge className={colorClass}>
|
|
||||||
{status?.replace("_", " ") ?? "—"}
|
|
||||||
</Badge>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,159 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { useParams, useRouter } from "next/navigation"
|
|
||||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import { useState, useRef, useTransition } from "react"
|
|
||||||
import { Plus, Trash2, FileIcon, ImageIcon, FileTextIcon } from "lucide-react"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { confirm } from "@/shared/components/confirm-dialog"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
import { Card, CardContent } from "@/shared/components/ui/card"
|
|
||||||
import { JOB_CARD_ROUTES } from "@garage/api"
|
|
||||||
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
|
||||||
import { useJobCard } from "@/modules/job-cards/job-card-context"
|
|
||||||
import { CONSTANTS } from "@/config/constants"
|
|
||||||
|
|
||||||
|
|
||||||
function getFileIcon(mimeType?: string) {
|
|
||||||
if (mimeType?.startsWith("image/")) return ImageIcon
|
|
||||||
if (mimeType?.includes("pdf")) return FileTextIcon
|
|
||||||
return FileIcon
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function JobCardAttachmentsPage() {
|
|
||||||
const { id: jobCardId } = useParams<{ id: string }>()
|
|
||||||
const api = useAuthApi()
|
|
||||||
const queryClient = useQueryClient()
|
|
||||||
const router = useRouter()
|
|
||||||
const [isRefreshing, startRefreshTransition] = useTransition()
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
||||||
const [isUploading, setIsUploading] = useState(false)
|
|
||||||
|
|
||||||
const queryKey = [JOB_CARD_ROUTES.INDEX, jobCardId, "attachments"]
|
|
||||||
|
|
||||||
const jobcard = useJobCard()
|
|
||||||
|
|
||||||
const attachments = jobcard?.attachment_files
|
|
||||||
|
|
||||||
const deleteMutation = useMutation({
|
|
||||||
mutationFn: (attachmentId: number) =>
|
|
||||||
api.jobCards.deleteAttachment(jobCardId, attachmentId),
|
|
||||||
onSuccess: () => {
|
|
||||||
toast.success("Attachment deleted successfully.")
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
startRefreshTransition(() => router.refresh())
|
|
||||||
},
|
|
||||||
onError: () => {
|
|
||||||
toast.error("Failed to delete attachment.")
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleDelete = async (attachment: any) => {
|
|
||||||
const confirmed = await confirm({
|
|
||||||
title: "Delete Attachment",
|
|
||||||
description: `Are you sure you want to delete "${attachment.original_name}"?`,
|
|
||||||
confirmLabel: "Delete",
|
|
||||||
variant: "destructive",
|
|
||||||
})
|
|
||||||
if (confirmed) {
|
|
||||||
deleteMutation.mutate(attachment.id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const files = e.target.files
|
|
||||||
if (!files || files.length === 0) return
|
|
||||||
|
|
||||||
setIsUploading(true)
|
|
||||||
const promise = api.jobCards.addAttachment(jobCardId, Array.from(files))
|
|
||||||
toast.promise(promise, {
|
|
||||||
loading: "Uploading attachment(s)...",
|
|
||||||
success: "Attachment(s) uploaded successfully",
|
|
||||||
error: "Failed to upload attachment(s)",
|
|
||||||
})
|
|
||||||
|
|
||||||
try {
|
|
||||||
await promise
|
|
||||||
queryClient.invalidateQueries({ queryKey })
|
|
||||||
startRefreshTransition(() => router.refresh())
|
|
||||||
} finally {
|
|
||||||
setIsUploading(false)
|
|
||||||
if (fileInputRef.current) {
|
|
||||||
fileInputRef.current.value = ""
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage
|
|
||||||
header={null}
|
|
||||||
>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-end mb-4">
|
|
||||||
<input
|
|
||||||
ref={fileInputRef}
|
|
||||||
type="file"
|
|
||||||
multiple
|
|
||||||
className="hidden"
|
|
||||||
onChange={handleUpload}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onClick={() => fileInputRef.current?.click()}
|
|
||||||
disabled={isUploading}
|
|
||||||
>
|
|
||||||
<Plus className="size-4" />
|
|
||||||
{isUploading ? "Uploading..." : "Upload Attachment"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{attachments?.length === 0 ? (
|
|
||||||
<Card>
|
|
||||||
<CardContent className="py-8 text-center text-muted-foreground">
|
|
||||||
No attachments yet. Click "Upload Attachment" to add files.
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
) : (
|
|
||||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
||||||
|
|
||||||
{(attachments as any[])?.map((attachment) => {
|
|
||||||
const Icon = getFileIcon(attachment.attachment_path)
|
|
||||||
return (
|
|
||||||
<Card key={attachment.id}>
|
|
||||||
<CardContent className="flex items-center gap-3 p-4">
|
|
||||||
<div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
|
|
||||||
<Icon className="size-5" />
|
|
||||||
</div>
|
|
||||||
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
|
|
||||||
<a
|
|
||||||
href={CONSTANTS.getAssetUrl(attachment.attachment_path)}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="truncate text-sm font-medium hover:underline"
|
|
||||||
title={attachment.original_name}
|
|
||||||
>
|
|
||||||
{attachment.original_name}
|
|
||||||
</a>
|
|
||||||
{attachment.created_at && (
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{new Date(attachment.created_at).toLocaleDateString()}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
onClick={() => handleDelete(attachment)}
|
|
||||||
title="Delete attachment"
|
|
||||||
>
|
|
||||||
<Trash2 className="size-4 text-destructive" />
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,88 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { use } from "react"
|
|
||||||
import FormDialog from "@/shared/components/form-dialog"
|
|
||||||
import { Badge } from "@/shared/components/ui/badge"
|
|
||||||
import { ResourcePage } from "@/shared/data-view/resource-page"
|
|
||||||
import { ColumnHeader } from "@/shared/data-view/table-view"
|
|
||||||
import { BillForm } from "@/modules/bills/bill-form"
|
|
||||||
import { BILL_ROUTES } from "@garage/api"
|
|
||||||
import type { BillsClient } from "@garage/api"
|
|
||||||
import { useJobCard } from "@/modules/job-cards/job-card-context"
|
|
||||||
|
|
||||||
export default function JobCardBillsPage({
|
|
||||||
params,
|
|
||||||
}: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
}) {
|
|
||||||
const { id: jobCardId } = use(params)
|
|
||||||
const jobCard = useJobCard()
|
|
||||||
|
|
||||||
const defaultJobCard = jobCard
|
|
||||||
? { value: String((jobCard as any).id), label: (jobCard as any).label || (jobCard as any).title || `Job Card` }
|
|
||||||
: null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ResourcePage<BillsClient>
|
|
||||||
routeKey={BILL_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.bills}
|
|
||||||
extraParams={{ job_card_id: jobCardId }}
|
|
||||||
header={null}
|
|
||||||
tableHeader={({ invalidateQuery, selectedItem, closeDialog }) => (
|
|
||||||
<div className="flex justify-end">
|
|
||||||
|
|
||||||
<FormDialog title="Bill">
|
|
||||||
{(resourceId) => (
|
|
||||||
<BillForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem ?? { job_card: defaultJobCard }}
|
|
||||||
onSuccess={() => { closeDialog(); invalidateQuery() }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "bill_number",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Bill #" />,
|
|
||||||
cell: ({ row }) => (row.original as any).bill_number || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "title",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "vendor_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
|
|
||||||
cell: ({ row }) => (row.original as any).vendor_name || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "bill_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Bill Date" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const value = (row.original as any).bill_date
|
|
||||||
return value ? new Date(value).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "bill_due_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Due Date" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const value = (row.original as any).bill_due_date
|
|
||||||
return value ? new Date(value).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = (row.original as any).status
|
|
||||||
return <Badge variant={status === "paid" ? "default" : "secondary"}>{status || "—"}</Badge>
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,207 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { use, useState } from "react"
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import { useQuery, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { ColumnHeader, DataTable } from "@/shared/data-view/table-view"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
DialogTrigger,
|
|
||||||
} from "@/shared/components/ui/dialog"
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/shared/components/ui/dropdown-menu"
|
|
||||||
import { confirm } from "@/shared/components/confirm-dialog"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
import { Ellipsis, Plus } from "lucide-react"
|
|
||||||
import type { ColumnDef } from "@tanstack/react-table"
|
|
||||||
import { JobCardExpenseItemForm } from "@/modules/job-cards/job-card-expense-item-form"
|
|
||||||
import { formatDate } from "@/shared/utils/formatters"
|
|
||||||
// TODO: expense items invalidation is not working properly when create new expense item line. Need to investigate why and fix it.
|
|
||||||
|
|
||||||
export default function JobCardExpenseItemsPage({
|
|
||||||
params,
|
|
||||||
}: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
}) {
|
|
||||||
const { id: jobCardId } = use(params)
|
|
||||||
const api = useAuthApi()
|
|
||||||
const queryClient = useQueryClient()
|
|
||||||
const router = useRouter()
|
|
||||||
const queryKey = ["job-card-expense-items", jobCardId]
|
|
||||||
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false)
|
|
||||||
const [editItem, setEditItem] = useState<any | null>(null)
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
|
||||||
queryKey,
|
|
||||||
queryFn: () => api.jobCards.getExpenseItems(jobCardId),
|
|
||||||
})
|
|
||||||
|
|
||||||
const rows = (data as any)?.data ?? []
|
|
||||||
|
|
||||||
const invalidate = () => queryClient.invalidateQueries({ queryKey , refetchType:'all'}).then(() => router.refresh())
|
|
||||||
|
|
||||||
async function handleDelete(row: any) {
|
|
||||||
const confirmed = await confirm({
|
|
||||||
title: "Delete this expense item?",
|
|
||||||
description: `Remove "${row.expense_item?.item_name ?? "this expense item"}" from the job card?`,
|
|
||||||
})
|
|
||||||
if (!confirmed) return
|
|
||||||
const promise = api.jobCards.deleteExpenseItem(jobCardId, row.id)
|
|
||||||
toast.promise(promise, {
|
|
||||||
loading: "Deleting...",
|
|
||||||
success: "Expense item deleted",
|
|
||||||
error: "Failed to delete expense item",
|
|
||||||
})
|
|
||||||
await promise
|
|
||||||
invalidate()
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns: ColumnDef<any>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: "expense_item.item_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Expense Item" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const item = row.original.expense_item
|
|
||||||
return item ? (
|
|
||||||
<div>
|
|
||||||
<span className="font-medium">{item.item_name}</span>
|
|
||||||
{item.sku && (
|
|
||||||
<span className="ml-2 text-xs text-muted-foreground">{item.sku}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "quantity",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Qty" />,
|
|
||||||
cell: ({ row }) => row.original.quantity ?? "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "rate",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Rate" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = row.original.rate
|
|
||||||
return val != null ? `$${Number(val).toFixed(2)}` : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "discount_amount",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Discount" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = row.original.discount_amount
|
|
||||||
return val != null && val > 0 ? `$${Number(val).toFixed(2)}` : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "tax_id",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Tax" />,
|
|
||||||
cell: ({ row }) => row.original.tax_id ?? "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "department.name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Department" />,
|
|
||||||
cell: ({ row }) => row.original.department?.name || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "description",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Description" />,
|
|
||||||
cell: ({ row }) => row.original.description || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Added" />,
|
|
||||||
cell: ({ row }) => formatDate(row.original.created_at),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "actions",
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button variant="ghost" size="icon">
|
|
||||||
<Ellipsis className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end">
|
|
||||||
<DropdownMenuItem
|
|
||||||
onClick={() => {
|
|
||||||
setEditItem(row.original)
|
|
||||||
setDialogOpen(true)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
className="text-destructive"
|
|
||||||
onClick={() => handleDelete(row.original)}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-4 p-4">
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Dialog
|
|
||||||
open={dialogOpen}
|
|
||||||
onOpenChange={(open) => {
|
|
||||||
setDialogOpen(open)
|
|
||||||
if (!open) setEditItem(null)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DialogTrigger asChild>
|
|
||||||
<Button onClick={() => setEditItem(null)}>
|
|
||||||
<Plus className="me-2 h-4 w-4" />
|
|
||||||
Add Expense Item
|
|
||||||
</Button>
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>{editItem ? "Edit Expense Item" : "Add Expense Item"}</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<JobCardExpenseItemForm
|
|
||||||
jobCardId={jobCardId}
|
|
||||||
jobCardExpenseItemId={editItem?.id ?? null}
|
|
||||||
initialData={editItem}
|
|
||||||
onSuccess={() => {
|
|
||||||
setDialogOpen(false)
|
|
||||||
setEditItem(null)
|
|
||||||
invalidate()
|
|
||||||
}}
|
|
||||||
onCancel={() => {
|
|
||||||
setDialogOpen(false)
|
|
||||||
setEditItem(null)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DataTable
|
|
||||||
columns={columns}
|
|
||||||
data={rows}
|
|
||||||
pagination={{
|
|
||||||
page: 1,
|
|
||||||
pageSize: rows.length || 15,
|
|
||||||
pageCount: 1,
|
|
||||||
total: rows.length,
|
|
||||||
}}
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
"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 { InspectionForm } from "@/modules/inspections/inspection-form"
|
|
||||||
import { INSPECTION_ROUTES } from "@garage/api"
|
|
||||||
import type { InspectionsClient } from "@garage/api"
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import { useJobCard } from "@/modules/job-cards/job-card-context"
|
|
||||||
|
|
||||||
export default function InspectionsPage() {
|
|
||||||
const router = useRouter()
|
|
||||||
const jobCard = useJobCard()
|
|
||||||
return (
|
|
||||||
<ResourcePage<InspectionsClient>
|
|
||||||
pageTitle="Inspections"
|
|
||||||
extraParams={{job_card_id: jobCard?.id}}
|
|
||||||
routeKey={INSPECTION_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.inspections}
|
|
||||||
onRowClick={(row) => router.push(`/sales/inspections/${(row as any).id}`)}
|
|
||||||
headerProps={({ selectedItem, invalidateQuery }) => ({
|
|
||||||
actions: (
|
|
||||||
<FormDialog title="Inspection">
|
|
||||||
{(resourceId) => (
|
|
||||||
<InspectionForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem ?? {job_card: {value: jobCard?.id, label: jobCard?.title || `Job Card #${jobCard?.id}`}}}
|
|
||||||
onSuccess={invalidateQuery}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "title",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "customer",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const c = (row.original as any).customer
|
|
||||||
return c ? `${c.first_name ?? ""} ${c.last_name ?? ""}`.trim() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "vehicle",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const v = (row.original as any).vehicle
|
|
||||||
return v ? `${v.make ?? ""} ${v.model ?? ""}`.trim() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "inspection_category",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Category" />,
|
|
||||||
cell: ({ row }) => (row.original as any).inspection_category?.name ?? "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "status",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const status = (row.original as any).status
|
|
||||||
return (
|
|
||||||
<span className={status === "completed" ? "text-green-600" : "text-yellow-600"}>
|
|
||||||
{status ?? "—"}
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,91 +0,0 @@
|
|||||||
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
|
|
||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { JobCardActions } from '@/modules/job-cards/job-card-actions'
|
|
||||||
import { JobCardProvider } from '@/modules/job-cards/job-card-context'
|
|
||||||
import { JobCardStatusStepper } from '@/modules/job-cards/job-card-status-stepper'
|
|
||||||
import { ClipboardListIcon, Ellipsis, Pencil, Trash2 } from 'lucide-react'
|
|
||||||
import React from 'react'
|
|
||||||
import JobCardDropdown from '@/modules/job-cards/job-card-dropdown'
|
|
||||||
|
|
||||||
|
|
||||||
export default async function JobCardDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
|
|
||||||
const jobCard:any = await api.jobCards.show(id).then(res => res.data)
|
|
||||||
|
|
||||||
const title = jobCard?.title || 'Job Card Details'
|
|
||||||
const status = jobCard?.status || 'draft'
|
|
||||||
const docs = jobCard?.documents
|
|
||||||
|
|
||||||
return (
|
|
||||||
<JobCardProvider jobCard={{ ...jobCard }}>
|
|
||||||
<DashboardDetailsPage
|
|
||||||
className='p-0 lg:p-0'
|
|
||||||
title={title}
|
|
||||||
description={status ? `Status: ${status.split("_").map((w: string) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}` : undefined}
|
|
||||||
icon={<ClipboardListIcon className="size-5" />}
|
|
||||||
backHref="/sales/job-cards"
|
|
||||||
actions={
|
|
||||||
<JobCardDropdown id={id} />
|
|
||||||
}
|
|
||||||
subHeader={<JobCardStatusStepper jobCardId={id} />}
|
|
||||||
tabs={[
|
|
||||||
{
|
|
||||||
href: `/sales/job-cards/${id}`,
|
|
||||||
label: 'Details'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: `/sales/job-cards/${id}/parts`,
|
|
||||||
label: `Parts (${jobCard?.parts_count || 0})`
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: `/sales/job-cards/${id}/services`,
|
|
||||||
label: `Services (${jobCard?.services_count })`
|
|
||||||
},
|
|
||||||
{
|
|
||||||
href: `/sales/job-cards/${id}/expense-items`,
|
|
||||||
label: `Expense Items (${jobCard?.expense_items_count || 0})`
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// TODO: Needs refactor from API side then refactor in frontend
|
|
||||||
{
|
|
||||||
href: `/sales/job-cards/${id}/attachments`,
|
|
||||||
label: `Attachments (${docs?.length || 0})`
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
href: `/sales/job-cards/${id}/appointments`,
|
|
||||||
label: `Appointments (${jobCard?.appointments_count || 0})`
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// href: `/sales/job-cards/${id}/inspections`,
|
|
||||||
// label: `Inspections (${(jobCard as any)?.inspections_count || 0})`
|
|
||||||
// },
|
|
||||||
|
|
||||||
|
|
||||||
// {
|
|
||||||
// href: `/sales/job-cards/${id}/tasks`,
|
|
||||||
// label: `Tasks (${jobCard?.tasks_count || 0})`
|
|
||||||
// },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// href: `/sales/job-cards/${id}/purchase-orders`,
|
|
||||||
// label: `Purchase Orders (${jobCard?.purchase_orders_count || 0})`
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// href: `/sales/job-cards/${id}/bills`,
|
|
||||||
// label: `Bills (${jobCard?.bills_count || 0})`
|
|
||||||
// },
|
|
||||||
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</DashboardDetailsPage>
|
|
||||||
</JobCardProvider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import { getServerApi } from '@garage/api/server'
|
|
||||||
import { JobCardGeneralInfo } from '@/modules/job-cards/job-card-general-info'
|
|
||||||
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
|
|
||||||
import type { JobCardShowData } from '@garage/api'
|
|
||||||
|
|
||||||
export default async function JobCardDetailPage(props: { params: Promise<{ id: string }> }) {
|
|
||||||
const { id } = await props.params
|
|
||||||
const api = await getServerApi()
|
|
||||||
const response = await api.jobCards.show(id)
|
|
||||||
const data = response.data
|
|
||||||
|
|
||||||
if (!data) {
|
|
||||||
return <div className="text-muted-foreground">Job card not found.</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DashboardPage header={null}>
|
|
||||||
<JobCardGeneralInfo jobCard={data} />
|
|
||||||
</DashboardPage>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,207 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { use, useState } from "react"
|
|
||||||
import { useRouter } from "next/navigation"
|
|
||||||
import { useQuery, useQueryClient } from "@tanstack/react-query"
|
|
||||||
import { useAuthApi } from "@/shared/useApi"
|
|
||||||
import { ColumnHeader, DataTable } from "@/shared/data-view/table-view"
|
|
||||||
import { Button } from "@/shared/components/ui/button"
|
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogHeader,
|
|
||||||
DialogTitle,
|
|
||||||
DialogTrigger,
|
|
||||||
} from "@/shared/components/ui/dialog"
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/shared/components/ui/dropdown-menu"
|
|
||||||
import { confirm } from "@/shared/components/confirm-dialog"
|
|
||||||
import { toast } from "sonner"
|
|
||||||
import { Ellipsis, Plus } from "lucide-react"
|
|
||||||
import type { ColumnDef } from "@tanstack/react-table"
|
|
||||||
import { JobCardPartForm } from "@/modules/job-cards/job-card-part-form"
|
|
||||||
import { formatDate } from "@/shared/utils/formatters"
|
|
||||||
import { JOB_CARD_ROUTES } from "@garage/api"
|
|
||||||
|
|
||||||
export default function JobCardPartsPage({
|
|
||||||
params,
|
|
||||||
}: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
}) {
|
|
||||||
const { id: jobCardId } = use(params)
|
|
||||||
const api = useAuthApi()
|
|
||||||
const queryClient = useQueryClient()
|
|
||||||
const router = useRouter()
|
|
||||||
const queryKey = [JOB_CARD_ROUTES.GET_PARTS, jobCardId]
|
|
||||||
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false)
|
|
||||||
const [editItem, setEditItem] = useState<any | null>(null)
|
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
|
||||||
queryKey,
|
|
||||||
queryFn: () => api.jobCards.getParts(jobCardId),
|
|
||||||
})
|
|
||||||
|
|
||||||
const rows = (data as any)?.data ?? []
|
|
||||||
|
|
||||||
const invalidate = () => queryClient.invalidateQueries({ queryKey, type: 'all', refetchType: 'all' },).then(() => router.refresh())
|
|
||||||
|
|
||||||
async function handleDelete(row: any) {
|
|
||||||
const confirmed = await confirm({
|
|
||||||
title: "Delete this part?",
|
|
||||||
description: `Remove part "${row.part?.title ?? "this part"}" from the job card?`,
|
|
||||||
})
|
|
||||||
if (!confirmed) return
|
|
||||||
const promise = api.jobCards.deletePart(jobCardId, row.id)
|
|
||||||
toast.promise(promise, {
|
|
||||||
loading: "Deleting...",
|
|
||||||
success: "Part deleted",
|
|
||||||
error: "Failed to delete part",
|
|
||||||
})
|
|
||||||
await promise
|
|
||||||
invalidate()
|
|
||||||
}
|
|
||||||
|
|
||||||
const columns: ColumnDef<any>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: "part.title",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Part" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const part = row.original.part
|
|
||||||
return part ? (
|
|
||||||
<div>
|
|
||||||
<span className="font-medium">{part.title}</span>
|
|
||||||
{part.sku && (
|
|
||||||
<span className="ml-2 text-xs text-muted-foreground">{part.sku}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "quantity",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Qty" />,
|
|
||||||
cell: ({ row }) => row.original.quantity ?? "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "rate",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Rate" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = row.original.rate
|
|
||||||
return val != null ? `$${Number(val).toFixed(2)}` : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "discount_amount",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Discount" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = row.original.discount_amount
|
|
||||||
return val != null && val > 0 ? `$${Number(val).toFixed(2)}` : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "tax_id",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Tax" />,
|
|
||||||
cell: ({ row }) => row.original.tax_id ?? "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "department.name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Department" />,
|
|
||||||
cell: ({ row }) => row.original.department?.name || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "description",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Description" />,
|
|
||||||
cell: ({ row }) => row.original.description || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Added" />,
|
|
||||||
cell: ({ row }) => formatDate(row.original.created_at),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "actions",
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button variant="ghost" size="icon">
|
|
||||||
<Ellipsis className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end">
|
|
||||||
<DropdownMenuItem
|
|
||||||
onClick={() => {
|
|
||||||
setEditItem(row.original)
|
|
||||||
setDialogOpen(true)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem
|
|
||||||
className="text-destructive"
|
|
||||||
onClick={() => handleDelete(row.original)}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-4 p-4">
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Dialog
|
|
||||||
open={dialogOpen}
|
|
||||||
onOpenChange={(open) => {
|
|
||||||
setDialogOpen(open)
|
|
||||||
if (!open) setEditItem(null)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DialogTrigger asChild>
|
|
||||||
<Button onClick={() => setEditItem(null)}>
|
|
||||||
<Plus className="me-2 h-4 w-4" />
|
|
||||||
Add Part
|
|
||||||
</Button>
|
|
||||||
</DialogTrigger>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>{editItem ? "Edit Part" : "Add Part"}</DialogTitle>
|
|
||||||
</DialogHeader>
|
|
||||||
<JobCardPartForm
|
|
||||||
jobCardId={jobCardId}
|
|
||||||
jobCardPartId={editItem?.id ?? null}
|
|
||||||
initialData={editItem}
|
|
||||||
onSuccess={() => {
|
|
||||||
setDialogOpen(false)
|
|
||||||
setEditItem(null)
|
|
||||||
invalidate()
|
|
||||||
}}
|
|
||||||
onCancel={() => {
|
|
||||||
setDialogOpen(false)
|
|
||||||
setEditItem(null)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DataTable
|
|
||||||
columns={columns}
|
|
||||||
data={rows}
|
|
||||||
pagination={{
|
|
||||||
page: 1,
|
|
||||||
pageSize: rows.length || 15,
|
|
||||||
pageCount: 1,
|
|
||||||
total: rows.length,
|
|
||||||
}}
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,88 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { use } 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 { PurchaseOrderForm } from "@/modules/purchase-orders/purchase-order-form"
|
|
||||||
import { PURCHASE_ORDER_ROUTES } from "@garage/api"
|
|
||||||
import type { PurchaseOrdersClient } from "@garage/api"
|
|
||||||
import { useJobCard } from "@/modules/job-cards/job-card-context"
|
|
||||||
|
|
||||||
export default function JobCardPurchaseOrdersPage({
|
|
||||||
params,
|
|
||||||
}: {
|
|
||||||
params: Promise<{ id: string }>
|
|
||||||
}) {
|
|
||||||
const { id: jobCardId } = use(params)
|
|
||||||
const jobCard = useJobCard()
|
|
||||||
|
|
||||||
const defaultJobCard = jobCard
|
|
||||||
? { value: String((jobCard as any).id), label: (jobCard as any).label || (jobCard as any).title || `Job Card` }
|
|
||||||
: null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ResourcePage<PurchaseOrdersClient>
|
|
||||||
routeKey={PURCHASE_ORDER_ROUTES.INDEX}
|
|
||||||
getClient={(api) => api.purchaseOrders}
|
|
||||||
extraParams={{ job_card_id: jobCardId }}
|
|
||||||
header={null}
|
|
||||||
tableHeader={({ invalidateQuery, selectedItem, closeDialog }) => (
|
|
||||||
<div className="flex justify-end">
|
|
||||||
|
|
||||||
<FormDialog title="Purchase Order">
|
|
||||||
{(resourceId) => (
|
|
||||||
<PurchaseOrderForm
|
|
||||||
resourceId={resourceId}
|
|
||||||
initialData={selectedItem ?? { job_card: defaultJobCard }}
|
|
||||||
onSuccess={() => { closeDialog(); invalidateQuery() }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormDialog>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
)}
|
|
||||||
columns={({ actionsColumn }) => [
|
|
||||||
{
|
|
||||||
accessorKey: "order_number",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Order #" />,
|
|
||||||
cell: ({ row }) => (row.original as any).order_number || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "title",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Title" />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "vendor_name",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
|
|
||||||
cell: ({ row }) => (row.original as any).vendor_name || "—",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "order_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Order Date" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = (row.original as any).order_date
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "delivery_date",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Delivery Date" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = (row.original as any).delivery_date
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "created_at",
|
|
||||||
header: ({ column }) => <ColumnHeader column={column} title="Created" />,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const val = (row.original as any).created_at
|
|
||||||
return val ? new Date(val).toLocaleDateString() : "—"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actionsColumn(),
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user