145 lines
4.7 KiB
TypeScript
145 lines
4.7 KiB
TypeScript
"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>
|
|
)
|
|
}
|