import React, { useState } from "react"; import { Head, useForm, router as Inertia } from "@inertiajs/react"; import { PlusIcon, Pencil, Trash2 } from "lucide-react"; import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { Button } from "@/Components/ui/button"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/Components/ui/table"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/Components/ui/dialog"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/Components/ui/alert-dialog"; import { Input } from "@/Components/ui/input"; import { Label } from "@/Components/ui/label"; import { Textarea } from "@/Components/ui/textarea"; export default function Index({ clients, flash }) { const [open, setOpen] = useState(false); const [editMode, setEditMode] = useState(false); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [alertOpen, setAlertOpen] = useState(!!flash?.success); // Ensure clientsData is always an array const clientsData = Array.isArray(clients) ? clients : []; const { data, setData, post, processing, errors, reset, clearErrors } = useForm({ id: "", name: "", email: "", phone: "", address: "", company: "", }); const openAddDialog = () => { reset(); setEditMode(false); setOpen(true); }; const openEditDialog = (client) => { setData({ id: client.id, name: client.name, email: client.email || "", phone: client.phone || "", address: client.address || "", company: client.company || "", }); setEditMode(true); setOpen(true); }; const openDeleteDialog = (client) => { setData({ id: client.id, name: client.name }); setDeleteDialogOpen(true); }; const handleClose = () => { setOpen(false); clearErrors(); }; const handleDeleteClose = () => { setDeleteDialogOpen(false); }; const handleSubmit = (e) => { e.preventDefault(); if (editMode) { post(route("client.update", data.id), { onSuccess: () => { setOpen(false); setAlertOpen(true); }, }); } else { post(route("client.store"), { onSuccess: () => { setOpen(false); setAlertOpen(true); }, }); } }; const handleDelete = () => { Inertia.delete(route("client.delete", data.id), { onSuccess: () => { setDeleteDialogOpen(false); setAlertOpen(true); }, }); }; return ( Client Management } >

Clients

No. Name Email Phone Company Created By Actions {clientsData.length > 0 ? ( clientsData.map((client, index) => ( {index + 1} {client.name} {client.email} {client.phone} {client.company} {client.created_by?.name || "Unknown"}
)) ) : ( No clients found )}
{/* Add/Edit Dialog */}
{editMode ? "Edit Client" : "Add New Client"} Fill in the details for the client below.
setData("name", e.target.value)} className={errors.name ? "border-red-500" : ""} /> {errors.name && (

{errors.name}

)}
setData("email", e.target.value)} className={errors.email ? "border-red-500" : ""} /> {errors.email && (

{errors.email}

)}
setData("phone", e.target.value)} className={errors.phone ? "border-red-500" : ""} /> {errors.phone && (

{errors.phone}

)}
setData("company", e.target.value)} className={errors.company ? "border-red-500" : ""} /> {errors.company && (

{errors.company}

)}