import { Head, router, useForm, usePage } from '@inertiajs/react'; import { Pencil, Plus, Trash2 } from 'lucide-react'; import { FormEvent, useState } from 'react'; import { PaginationControls, type PaginatedData, SortableHeader, type TableFilters, } from '@/components/data-table-controls'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import type { Auth } from '@/types'; type Store = { id: number; name: string; code: string | null; phone: string | null; email: string | null; address: string | null; is_active: boolean; created_at: string; }; type PageProps = { auth: Auth; stores: PaginatedData; filters: TableFilters; }; type StoreForm = { name: string; code: string; phone: string; email: string; address: string; is_active: boolean; }; const emptyForm: StoreForm = { name: '', code: '', phone: '', email: '', address: '', is_active: true, }; export default function StoresIndex({ stores, filters }: PageProps) { const { auth } = usePage().props; const [open, setOpen] = useState(false); const [editing, setEditing] = useState(null); const form = useForm(emptyForm); const can = (permission: string) => auth.permissions.includes(permission); const openCreate = () => { setEditing(null); form.setData(emptyForm); form.clearErrors(); setOpen(true); }; const openEdit = (store: Store) => { setEditing(store); form.setData({ name: store.name, code: store.code ?? '', phone: store.phone ?? '', email: store.email ?? '', address: store.address ?? '', is_active: store.is_active, }); form.clearErrors(); setOpen(true); }; const submit = (event: FormEvent) => { event.preventDefault(); if (editing) { form.put(`/stores/${editing.id}`, { preserveScroll: true, onSuccess: () => setOpen(false), }); return; } form.post('/stores', { preserveScroll: true, onSuccess: () => setOpen(false), }); }; const destroy = (store: Store) => { if (!window.confirm(`Delete ${store.name}?`)) { return; } router.delete(`/stores/${store.id}`, { preserveScroll: true }); }; return ( <>

{can('stores.create') && ( )}

Store Status Created {stores.data.map((store) => ( ))}

Contact	Address	Actions
{store.name} {store.code ?? 'No code'}	{store.phone ?? 'No phone'} {store.email ?? 'No email'}	{store.address ?? 'No address'}	{store.is_active ? 'Active' : 'Inactive'}	{new Date( store.created_at, ).toLocaleDateString()}	{can('stores.update') && ( )} {can('stores.delete') && ( )}

); } StoresIndex.layout = { breadcrumbs: [ { title: 'Stores', href: '/stores', }, ], };