import Heading from '@/components/heading'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Table, TableBody, TableCard, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import AppLayout from '@/layouts/app-layout'; import { BreadcrumbItem } from '@/types'; import { Customer } from '@/types/customer'; import { CustomerPoint } from '@/types/customer-point'; import { Head, useForm, usePage } from '@inertiajs/react'; import React, { useMemo, useState } from 'react'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Pelanggan', href: route('apps.customers.index'), }, { title: 'Detail Pelanggan', href: '#', }, ]; function statusVariant(status: string) { switch (status) { case 'active': return 'default'; case 'redeemed': return 'outline'; case 'expired': return 'destructive'; default: return 'secondary'; } } interface ShowProps { customer: Customer; [key: string]: unknown; } export default function Show() { const { customer } = usePage().props; const [open, setOpen] = useState(false); const [selectedPoint, setSelectedPoint] = useState(null); const { data, setData, processing, reset, patch } = useForm({ status: '', }); const openDialog = (customerPoint: CustomerPoint) => { setSelectedPoint(customerPoint); setData('status', customerPoint?.status === 'active' ? 'redeemed' : (customerPoint?.status ?? 'active')); setOpen(true); }; const onClose = () => { setOpen(false); setSelectedPoint(null); reset(); }; const onSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!selectedPoint) return; patch(route('apps.customers.update', selectedPoint.id), { preserveScroll: true, onSuccess: onClose, }); }; const totalRows = useMemo(() => customer?.customer_points?.length ?? 0, [customer]); return ( <>
Nama
{customer?.name ?? '-'}
Email
{customer?.email ?? '-'}
Telepon
{customer?.phone ?? '-'}
# Invoice Tanggal Transaksi Jenis Transaksi Total Transaksi Poin Didapat Status Aksi {customer?.customer_points?.map((cp, i) => ( {i + 1} {cp?.transaction?.invoice ?? '-'} {cp?.transaction?.transaction_date} {cp?.transaction?.transaction_type ?? '-'} Rp {cp?.transaction?.grand_total ?? '-'} {cp.point} {cp.status} ))} {totalRows === 0 && ( Belum ada data poin. )}
{/* Dialog Update Status Poin */} !v && onClose()}> Update Status Poin
{selectedPoint?.transaction?.invoice ?? '-'}
); } Show.layout = (page: React.ReactNode) => ;