feat: add upload file functionality to letter requests; integrate AttachmentPreviewDialog and update column actions

resources/js/pages/admin/services/letter-requests/columns.tsx

@@ -1,6 +1,7 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { format } from 'date-fns';
-import { Paperclip, Pencil, Trash2 } from 'lucide-react';
+import { Pencil, Trash2, Upload } from 'lucide-react';
+import { AttachmentPreviewDialog } from '@/components/attachment-preview-dialog';
 import { RowActions } from '@/components/row-actions';
 import { StatusBadge } from '@/components/status-badge';
 import type { LetterRequest } from '@/types/letter-request';
@@ -27,6 +28,7 @@ type CreateColumnsParams = {
     handleEdit: (letterRequest: LetterRequest) => void;
     handleDeleteClick: (letterRequest: LetterRequest) => void;
     handleStatusChange: (letterRequest: LetterRequest, status: string) => void;
+    handleUploadClick: (letterRequest: LetterRequest) => void;
     canUpdate: boolean;
     canDelete: boolean;
     canProcess: boolean;
@@ -39,6 +41,7 @@ export function createLetterRequestColumns(
         handleEdit,
         handleDeleteClick,
         handleStatusChange,
+        handleUploadClick,
         canUpdate,
         canDelete,
         canProcess,
@@ -128,26 +131,21 @@ export function createLetterRequestColumns(
             cell: ({ row }) => {
                 const letterRequest = row.original;
 
-                if (!letterRequest.result_url) {
+                if (!letterRequest.result_url || !letterRequest.result_name) {
                     return <span className="text-muted-foreground">-</span>;
                 }
 
                 return (
-                    <a
-                        href={letterRequest.result_url}
-                        target="_blank"
-                        rel="noreferrer"
-                        className="inline-flex items-center gap-1 text-primary underline underline-offset-4 hover:text-primary/80"
-                    >
-                        <Paperclip className="h-3.5 w-3.5" />
-                        {letterRequest.result_name}
-                    </a>
+                    <AttachmentPreviewDialog
+                        fileUrl={letterRequest.result_url}
+                        fileName={letterRequest.result_name}
+                    />
                 );
             },
         },
     ];
 
-    if (canUpdate || canDelete) {
+    if (canUpdate || canDelete || canProcess) {
         columns.push({
             id: 'actions',
             header: () => <span className="block text-center">Aksi</span>,
@@ -161,6 +159,14 @@ export function createLetterRequestColumns(
                 return (
                     <RowActions
                         actions={[
+                            {
+                                label: 'Upload File',
+                                icon: <Upload className="h-4 w-4" />,
+                                show:
+                                    canProcess &&
+                                    row.original.status === 'in_process',
+                                onClick: () => handleUploadClick(row.original),
+                            },
                             {
                                 label: 'Edit',
                                 icon: <Pencil className="h-4 w-4" />,

resources/js/pages/admin/services/letter-requests/index.tsx

@@ -115,6 +115,7 @@ export default function LetterRequestIndex({
         handleEdit: (letterRequest) => setEditing(letterRequest),
         handleDeleteClick: (letterRequest) => setDeleting(letterRequest),
         handleStatusChange,
+        handleUploadClick: (letterRequest) => setProcessing(letterRequest),
         canUpdate,
         canDelete,
         canProcess,