diff --git a/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/[id]/detail/page.tsx b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/[id]/detail/page.tsx new file mode 100644 index 0000000..b96007f --- /dev/null +++ b/src/app/[lang]/(dashboard)/(private)/apps/purchase/purchase-orders/[id]/detail/page.tsx @@ -0,0 +1,18 @@ +import PurchaseDetailContent from '@/views/apps/purchase/purchase-detail/PurchaseDetailContent' +import PurchaseDetailHeader from '@/views/apps/purchase/purchase-detail/PurchaseDetailHeader' +import Grid from '@mui/material/Grid2' + +const PurchaseOrderDetailPage = () => { + return ( + + + + + + + + + ) +} + +export default PurchaseOrderDetailPage diff --git a/src/services/queries/purchaseOrder.ts b/src/services/queries/purchaseOrder.ts index 916f8b5..b20262e 100644 --- a/src/services/queries/purchaseOrder.ts +++ b/src/services/queries/purchaseOrder.ts @@ -1,4 +1,4 @@ -import { PurchaseOrders } from '@/types/services/purchaseOrder' +import { PurchaseOrder, PurchaseOrders } from '@/types/services/purchaseOrder' import { useQuery } from '@tanstack/react-query' import { api } from '../api' @@ -39,3 +39,13 @@ export function usePurchaseOrders(params: PurchaseOrderQueryParams = {}) { } }) } + +export function usePurchaseOrderById(id: string) { + return useQuery({ + queryKey: ['purchase-orders', id], + queryFn: async () => { + const res = await api.get(`/purchase-orders/${id}`) + return res.data.data + } + }) +} diff --git a/src/views/apps/purchase/purchase-detail/PurchaseDetailContent.tsx b/src/views/apps/purchase/purchase-detail/PurchaseDetailContent.tsx index 391a0b3..7d41779 100644 --- a/src/views/apps/purchase/purchase-detail/PurchaseDetailContent.tsx +++ b/src/views/apps/purchase/purchase-detail/PurchaseDetailContent.tsx @@ -1,25 +1,40 @@ +'use client' + import Grid from '@mui/material/Grid2' import PurchaseDetailInformation from './PurchaseDetailInformation' import PurchaseDetailSendPayment from './PurchaseDetailSendPayment' import PurchaseDetailLog from './PurchaseDetailLog' import PurchaseDetailTransaction from './PurchaseDetailTransaction' +import { useParams } from 'next/navigation' +import { usePurchaseOrderById } from '@/services/queries/purchaseOrder' +import Loading from '@/components/layout/shared/Loading' const PurchaseDetailContent = () => { + const params = useParams() + const { data, isLoading, error, isFetching } = usePurchaseOrderById(params.id as string) return ( - - - - - - - - - - - - - - + <> + {isLoading ? ( + + ) : ( + + + + + {data?.status == 'sent' && ( + + + + )} + {/* + + + + + */} + + )} + ) } diff --git a/src/views/apps/purchase/purchase-detail/PurchaseDetailInformation.tsx b/src/views/apps/purchase/purchase-detail/PurchaseDetailInformation.tsx index 232b5c6..dfdae30 100644 --- a/src/views/apps/purchase/purchase-detail/PurchaseDetailInformation.tsx +++ b/src/views/apps/purchase/purchase-detail/PurchaseDetailInformation.tsx @@ -1,3 +1,5 @@ +'use client' + import React from 'react' import { Card, @@ -15,87 +17,62 @@ import { IconButton } from '@mui/material' import Grid from '@mui/material/Grid2' +import { PurchaseOrder } from '@/types/services/purchaseOrder' -interface Product { - produk: string - deskripsi: string - kuantitas: number - satuan: string - discount: string - harga: number - pajak: string - jumlah: number +interface Props { + data?: PurchaseOrder } -interface PurchaseData { - vendor: string - nomor: string - tglTransaksi: string - tglJatuhTempo: string - gudang: string - status: string -} +const PurchaseDetailInformation = ({ data }: Props) => { + const purchaseOrder = data -const PurchaseDetailInformation: React.FC = () => { - const purchaseData: PurchaseData = { - vendor: 'Bagas Rizki Sihotang S.Farm Widodo', - nomor: 'PI/00053', - tglTransaksi: '08/09/2025', - tglJatuhTempo: '06/10/2025', - gudang: 'Unassigned', - status: 'Belum Dibayar' + // Helper functions + const formatDate = (dateString: string): string => { + const date = new Date(dateString) + return date.toLocaleDateString('id-ID', { + day: '2-digit', + month: '2-digit', + year: 'numeric' + }) } - const products: Product[] = [ - { - produk: 'CB1 - Chelsea Boots', - deskripsi: 'Ukuran XS', - kuantitas: 3, - satuan: 'Pcs', - discount: '0%', - harga: 299000, - pajak: 'PPN', - jumlah: 897000 - }, - { - produk: 'CB1 - Chelsea Boots', - deskripsi: 'Ukuran M', - kuantitas: 1, - satuan: 'Pcs', - discount: '0%', - harga: 299000, - pajak: 'PPN', - jumlah: 299000 - }, - { - produk: 'KH1 - Kneel High Boots', - deskripsi: 'Ukuran XL', - kuantitas: 1, - satuan: 'Pcs', - discount: '0%', - harga: 299000, - pajak: 'PPN', - jumlah: 299000 - } - ] - - const totalKuantitas: number = products.reduce((sum, product) => sum + product.kuantitas, 0) - const subTotal: number = 1495000 - const ppn: number = 98670 - const total: number = 1593670 - const sisaTagihan: number = 1593670 - const formatCurrency = (amount: number): string => { return new Intl.NumberFormat('id-ID').format(amount) } + const getStatusLabel = (status: string): string => { + const statusMap: Record = { + draft: 'Draft', + sent: 'Dikirim', + approved: 'Disetujui', + received: 'Diterima', + cancelled: 'Dibatalkan' + } + return statusMap[status] || status + } + + const getStatusColor = (status: string): 'error' | 'success' | 'warning' | 'info' | 'default' => { + const colorMap: Record = { + draft: 'default', + sent: 'warning', + approved: 'success', + received: 'info', + cancelled: 'error' + } + return colorMap[status] || 'info' + } + + // Calculations + const totalQuantity = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.quantity ?? 0), 0) + const total = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.amount ?? 0) * item?.quantity, 0) + return ( - - Belum Dibayar + + {getStatusLabel(purchaseOrder?.status ?? '')}