import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import AppLayout from '@/layouts/app-layout'; import { PageProps } from '@/types'; import { Head, Link } from '@inertiajs/react'; import { useState } from 'react'; interface Service { id: number; name: string; description: string; price: number; } interface ServicesIndexProps extends PageProps { services: Service[]; } export default function ServicesIndex({ auth, services }: ServicesIndexProps) { const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); const [selectedService, setSelectedService] = useState(null); const handleDeleteClick = (service: Service) => { setSelectedService(service); setIsDeleteDialogOpen(true); }; const confirmDelete = () => { if (selectedService) { // Implement actual delete logic here console.log('Deleting service:', selectedService.id); setIsDeleteDialogOpen(false); } }; return (

Services

Name Description Price Actions {services.map((service) => ( {service.name} {service.description} ${service.price.toLocaleString()} ))}

); }