filters , order inspections , inventory items , credit notes
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
"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 CreditNoteActionsProps = {
|
||||
creditNoteId: string
|
||||
}
|
||||
|
||||
export function CreditNoteActions({ creditNoteId }: CreditNoteActionsProps) {
|
||||
const api = useAuthApi()
|
||||
const router = useRouter()
|
||||
|
||||
const handleEdit = () => {
|
||||
router.push(`/sales/credit-notes/${creditNoteId}/edit`)
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
await api.creditNotes.destroy(creditNoteId)
|
||||
router.push("/sales/credit-notes")
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client"
|
||||
|
||||
import { createContext, useContext } from "react"
|
||||
|
||||
type CreditNoteContextValue = {
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
|
||||
const CreditNoteContext = createContext<CreditNoteContextValue | null>(null)
|
||||
|
||||
export function CreditNoteProvider({
|
||||
creditNote,
|
||||
children,
|
||||
}: {
|
||||
creditNote: CreditNoteContextValue
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<CreditNoteContext.Provider value={creditNote}>
|
||||
{children}
|
||||
</CreditNoteContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useCreditNote() {
|
||||
return useContext(CreditNoteContext)
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
"use client"
|
||||
|
||||
import { z } from "zod"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { Plus } from "lucide-react"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { FieldGroup } from "@/shared/components/ui/field"
|
||||
import { Rhform } from "@/shared/components/form"
|
||||
import { toast } from "sonner"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
|
||||
const schema = z.object({
|
||||
attachments: z.instanceof(FileList).refine((files) => files.length > 0, "At least one file is required"),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof schema>
|
||||
|
||||
type CreditNoteDocumentFormProps = {
|
||||
creditNoteId: string
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
export function CreditNoteDocumentForm({ creditNoteId, onSuccess }: CreditNoteDocumentFormProps) {
|
||||
const api = useAuthApi()
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(schema),
|
||||
})
|
||||
|
||||
const handleSubmit = async (values: FormValues) => {
|
||||
try {
|
||||
const formData = new FormData()
|
||||
Array.from(values.attachments).forEach((file) => {
|
||||
formData.append("attachments[]", file)
|
||||
})
|
||||
await api.creditNotes.addAttachment(creditNoteId, formData)
|
||||
toast.success("Attachment uploaded")
|
||||
form.reset()
|
||||
onSuccess?.()
|
||||
} catch {
|
||||
toast.error("Failed to upload attachment")
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Rhform form={form} onSubmit={handleSubmit}>
|
||||
<FieldGroup>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium">Attachments</label>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
className="text-sm"
|
||||
{...form.register("attachments")}
|
||||
/>
|
||||
{form.formState.errors.attachments && (
|
||||
<p className="text-xs text-destructive">
|
||||
{form.formState.errors.attachments.message as string}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Button type="submit" disabled={form.formState.isSubmitting}>
|
||||
<Plus />
|
||||
{form.formState.isSubmitting ? "Uploading..." : "Upload Attachment"}
|
||||
</Button>
|
||||
</FieldGroup>
|
||||
</Rhform>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
"use client"
|
||||
|
||||
import { AlertTriangle, Plus, Save } from "lucide-react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Alert, AlertTitle } from "@/shared/components/ui/alert"
|
||||
import { FieldGroup } from "@/shared/components/ui/field"
|
||||
import {
|
||||
Rhform,
|
||||
RhfTextField,
|
||||
RhfSelectField,
|
||||
RhfTextareaField,
|
||||
RhfAsyncSelectField,
|
||||
} 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 {
|
||||
creditNoteFormSchema,
|
||||
type CreditNoteFormValues,
|
||||
} from "./credit-note.schema"
|
||||
import { CREDIT_NOTE_ROUTES, DEPARTMENT_ROUTES } from "@garage/api"
|
||||
import { RhfCustomerSelectField } from "@/modules/customers/rhf-customer-select-field"
|
||||
|
||||
// ── 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 }
|
||||
|
||||
// ── Constants ──
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ value: "draft", label: "Draft" },
|
||||
{ value: "open", label: "Open" },
|
||||
{ value: "applied", label: "Applied" },
|
||||
{ value: "void", label: "Void" },
|
||||
]
|
||||
|
||||
// ── Props ──
|
||||
|
||||
export type CreditNoteFormProps = {
|
||||
resourceId?: string | null
|
||||
initialData?: unknown
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
// ── Default values ──
|
||||
|
||||
const DEFAULT_VALUES: CreditNoteFormValues = {
|
||||
subject: "",
|
||||
customer: null,
|
||||
department: null,
|
||||
date: "",
|
||||
status: "draft",
|
||||
notes: "",
|
||||
}
|
||||
|
||||
// ── Mapping helpers ──
|
||||
|
||||
function mapToFormValues(data: unknown): CreditNoteFormValues {
|
||||
const d = (data as any)?.data ?? data ?? {}
|
||||
|
||||
return {
|
||||
subject: d.subject || "",
|
||||
customer: toRelation(d.customer_id, d.customer_name),
|
||||
department: toRelation(d.department_id, d.department_name),
|
||||
date: d.date || "",
|
||||
status: d.status || "draft",
|
||||
notes: d.notes || "",
|
||||
}
|
||||
}
|
||||
|
||||
function mapFormToPayload(values: CreditNoteFormValues) {
|
||||
return {
|
||||
subject: values.subject,
|
||||
customer_id: toId(values.customer),
|
||||
department_id: toId(values.department),
|
||||
date: values.date || undefined,
|
||||
status: values.status,
|
||||
notes: values.notes || undefined,
|
||||
}
|
||||
}
|
||||
|
||||
// ── Component ──
|
||||
|
||||
export function CreditNoteForm({ resourceId, initialData, onSuccess }: CreditNoteFormProps) {
|
||||
const api = useAuthApi()
|
||||
|
||||
const { form, isEditing } = useResourceForm<CreditNoteFormValues>({
|
||||
schema: creditNoteFormSchema,
|
||||
defaultValues: DEFAULT_VALUES,
|
||||
resourceId: resourceId ?? null,
|
||||
initialData,
|
||||
queryKey: [CREDIT_NOTE_ROUTES.BY_ID, resourceId],
|
||||
initialize: (id) => api.creditNotes.show(id),
|
||||
mapToFormValues,
|
||||
})
|
||||
|
||||
const { mutate, error, isPending } = useFormMutation(form, {
|
||||
mutationFn: (values: CreditNoteFormValues) => {
|
||||
const payload = mapFormToPayload(values)
|
||||
const promise = (isEditing && resourceId
|
||||
? api.creditNotes.update(resourceId, payload)
|
||||
: api.creditNotes.create(payload)) as Promise<any>
|
||||
toast.promise(promise, {
|
||||
loading: isEditing ? "Updating credit note..." : "Creating credit note...",
|
||||
success: isEditing ? "Credit note updated successfully" : "Credit note created successfully",
|
||||
error: isEditing ? "Failed to update credit note" : "Failed to create credit note",
|
||||
})
|
||||
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 credit note" : "Failed to create credit note"}
|
||||
</AlertTitle>
|
||||
{error.message}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<FieldGroup>
|
||||
<RhfTextField name="subject" label="Subject" placeholder="Credit note subject" required />
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfCustomerSelectField name="customer" label="Customer" />
|
||||
|
||||
<RhfAsyncSelectField
|
||||
name="department"
|
||||
label="Department"
|
||||
placeholder="Select department"
|
||||
queryKey={[DEPARTMENT_ROUTES.INDEX]}
|
||||
listFn={() => api.departments.list()}
|
||||
mapOption={mapLookupOption}
|
||||
{...STORE_OBJECT}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<RhfTextField name="date" label="Date" type="date" />
|
||||
|
||||
<RhfSelectField
|
||||
name="status"
|
||||
label="Status"
|
||||
options={STATUS_OPTIONS}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<RhfTextareaField name="notes" label="Notes" placeholder="Additional notes..." rows={3} />
|
||||
|
||||
<Button type="submit" variant="default" disabled={isPending}>
|
||||
{isEditing ? (
|
||||
<>
|
||||
<Save className="me-2 size-4" />
|
||||
{isPending ? "Saving..." : "Save Changes"}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus className="me-2 size-4" />
|
||||
{isPending ? "Creating..." : "Create Credit Note"}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</FieldGroup>
|
||||
</Rhform>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
import {
|
||||
FileText,
|
||||
Calendar,
|
||||
Hash,
|
||||
Users,
|
||||
Building2,
|
||||
Clock,
|
||||
} from "lucide-react"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card"
|
||||
import { Badge } from "@/shared/components/ui/badge"
|
||||
import { Separator } from "@/shared/components/ui/separator"
|
||||
|
||||
type CreditNoteData = {
|
||||
id?: number
|
||||
subject?: string
|
||||
credit_invoice?: string
|
||||
date?: string
|
||||
status?: string
|
||||
notes?: string
|
||||
customer_id?: number
|
||||
customer_name?: string
|
||||
department_name?: string
|
||||
department_id?: number
|
||||
invoice_id?: number
|
||||
created_at?: string
|
||||
updated_at?: string
|
||||
}
|
||||
|
||||
type CreditNoteGeneralInfoProps = {
|
||||
creditNote: CreditNoteData
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
const statusColorMap: Record<string, string> = {
|
||||
draft: "secondary",
|
||||
open: "default",
|
||||
applied: "default",
|
||||
void: "outline",
|
||||
}
|
||||
|
||||
export function CreditNoteGeneralInfo({ creditNote }: CreditNoteGeneralInfoProps) {
|
||||
return (
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{/* Credit Note Details */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<FileText className="size-4" />
|
||||
Credit Note Details
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{creditNote.subject && (
|
||||
<Badge variant="secondary">{creditNote.subject}</Badge>
|
||||
)}
|
||||
{creditNote.status && (
|
||||
<Badge variant={statusColorMap[creditNote.status] as any ?? "outline"}>
|
||||
{creditNote.status.charAt(0).toUpperCase() + creditNote.status.slice(1)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<InfoItem
|
||||
icon={Hash}
|
||||
label="Credit Note #"
|
||||
value={creditNote.credit_invoice}
|
||||
/>
|
||||
<InfoItem
|
||||
icon={Calendar}
|
||||
label="Date"
|
||||
value={creditNote.date}
|
||||
/>
|
||||
<InfoItem
|
||||
icon={Clock}
|
||||
label="Created"
|
||||
value={creditNote.created_at ? new Date(creditNote.created_at).toLocaleDateString() : null}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Relations */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Users className="size-4" />
|
||||
Related Info
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-4">
|
||||
<div className="grid gap-4">
|
||||
<InfoItem
|
||||
icon={Users}
|
||||
label="Customer"
|
||||
value={creditNote.customer_name}
|
||||
/>
|
||||
<InfoItem
|
||||
icon={Building2}
|
||||
label="Department"
|
||||
value={creditNote.department_name}
|
||||
/>
|
||||
</div>
|
||||
{creditNote.notes && (
|
||||
<>
|
||||
<Separator />
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-xs text-muted-foreground">Notes</span>
|
||||
<p className="text-sm">{creditNote.notes}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client"
|
||||
|
||||
import { z } from "zod"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { Plus } from "lucide-react"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { FieldGroup } from "@/shared/components/ui/field"
|
||||
import { Rhform, RhfTextareaField } from "@/shared/components/form"
|
||||
import { toast } from "sonner"
|
||||
import { useAuthApi } from "@/shared/useApi"
|
||||
|
||||
const schema = z.object({
|
||||
note: z.string().min(1, "Note is required"),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof schema>
|
||||
|
||||
type CreditNoteNoteFormProps = {
|
||||
creditNoteId: string
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
export function CreditNoteNoteForm({ creditNoteId, onSuccess }: CreditNoteNoteFormProps) {
|
||||
const api = useAuthApi()
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: { note: "" },
|
||||
})
|
||||
|
||||
const handleSubmit = async (values: FormValues) => {
|
||||
try {
|
||||
await api.creditNotes.addInternalNote(creditNoteId, { note: values.note })
|
||||
toast.success("Note added")
|
||||
form.reset()
|
||||
onSuccess?.()
|
||||
} catch {
|
||||
toast.error("Failed to add note")
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Rhform form={form} onSubmit={handleSubmit}>
|
||||
<FieldGroup>
|
||||
<RhfTextareaField
|
||||
name="note"
|
||||
label="Note"
|
||||
placeholder="Enter a note..."
|
||||
rows={4}
|
||||
required
|
||||
/>
|
||||
<Button type="submit" disabled={form.formState.isSubmitting}>
|
||||
<Plus />
|
||||
{form.formState.isSubmitting ? "Adding..." : "Add Note"}
|
||||
</Button>
|
||||
</FieldGroup>
|
||||
</Rhform>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { z } from "zod"
|
||||
|
||||
const relationFieldSchema = z
|
||||
.object({ value: z.string(), label: z.string() })
|
||||
.nullable()
|
||||
|
||||
const creditNoteFormSchema = z.object({
|
||||
// ── Required fields ──
|
||||
subject: z.string().min(1, "Subject is required"),
|
||||
|
||||
// ── Relations ──
|
||||
customer: relationFieldSchema,
|
||||
department: relationFieldSchema,
|
||||
|
||||
// ── Optional fields ──
|
||||
date: z.string().optional(),
|
||||
status: z.string().optional(),
|
||||
notes: z.string().optional(),
|
||||
})
|
||||
|
||||
type CreditNoteFormValues = z.infer<typeof creditNoteFormSchema>
|
||||
|
||||
export { creditNoteFormSchema, relationFieldSchema }
|
||||
export type { CreditNoteFormValues }
|
||||
Reference in New Issue
Block a user