[FEAT] 實作公共事業費附件上傳管理與更新 UI 協作規範防呆機制

resources/js/Pages/UtilityFee/Index.tsx

@@ -30,6 +30,7 @@ import {
 import { Badge } from "@/Components/ui/badge";
 import { toast } from "sonner";
 import UtilityFeeDialog, { UtilityFee } from "@/Components/UtilityFee/UtilityFeeDialog";
+import AttachmentDialog from "@/Components/UtilityFee/AttachmentDialog";
 import {
     AlertDialog,
     AlertDialogAction,
@@ -77,8 +78,19 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
 
     const [isDialogOpen, setIsDialogOpen] = useState(false);
     const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+    const [isAttachmentDialogOpen, setIsAttachmentDialogOpen] = useState(false);
     const [editingFee, setEditingFee] = useState<UtilityFee | null>(null);
     const [deletingFeeId, setDeletingFeeId] = useState<number | null>(null);
+    const [attachmentFee, setAttachmentFee] = useState<UtilityFee | null>(null);
+
+    const openAttachmentDialog = (fee: UtilityFee) => {
+        setAttachmentFee(fee);
+        setIsAttachmentDialogOpen(true);
+    };
+
+    const handleAttachmentsChange = () => {
+        router.reload({ only: ['fees'] });
+    };
 
 
 
@@ -447,6 +459,22 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
                                         </TableCell>
                                         <TableCell>
                                             <div className="flex items-center justify-center gap-2">
+                                                <Can permission="utility_fees.edit">
+                                                    <Button
+                                                        variant="outline"
+                                                        size="sm"
+                                                        className="button-outlined-primary relative"
+                                                        onClick={() => openAttachmentDialog(fee)}
+                                                        title="附件管理"
+                                                    >
+                                                        <FileText className="h-4 w-4" />
+                                                        {(fee.attachments_count || 0) > 0 && (
+                                                            <span className="absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full bg-blue-500 text-[10px] text-white font-bold ring-2 ring-white animate-in zoom-in">
+                                                                {fee.attachments_count}
+                                                            </span>
+                                                        )}
+                                                    </Button>
+                                                </Can>
                                                 <Can permission="utility_fees.edit">
                                                     <Button
                                                         variant="outline"
@@ -510,6 +538,13 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
                 availableCategories={availableCategories}
             />
 
+            <AttachmentDialog
+                open={isAttachmentDialogOpen}
+                onOpenChange={setIsAttachmentDialogOpen}
+                fee={attachmentFee}
+                onAttachmentsChange={handleAttachmentsChange}
+            />
+
             <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
                 <AlertDialogContent>
                     <AlertDialogHeader>