src/views/apps/expense/detail/ExpenseDetailSendPayment.tsx

@@ -17,6 +17,7 @@ import {
 import Grid from '@mui/material/Grid2'
 import CustomTextField from '@/@core/components/mui/TextField'
 import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+import ImageUpload from '@/components/ImageUpload'
 
 interface PaymentFormData {
   totalDibayar: string
@@ -114,6 +115,15 @@ const ExpenseDetailSendPayment: React.FC = () => {
     return new Intl.NumberFormat('id-ID').format(numAmount)
   }
 
+  const handleUpload = async (file: File): Promise<string> => {
+    // Simulate upload
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(URL.createObjectURL(file))
+      }, 1000)
+    })
+  }
+
   return (
     <Card>
       <CardHeader
@@ -223,9 +233,13 @@ const ExpenseDetailSendPayment: React.FC = () => {
                 </Typography>
               </AccordionSummary>
               <AccordionDetails sx={{ p: 2 }}>
-                <Typography variant='body2' color='text.secondary'>
-                  Drag and drop files here or click to upload
-                </Typography>
+                <ImageUpload
+                  onUpload={handleUpload}
+                  maxFileSize={1 * 1024 * 1024} // 1MB
+                  showUrlOption={false}
+                  dragDropText='Drop your image here'
+                  browseButtonText='Choose Image'
+                />
               </AccordionDetails>
             </Accordion>
           </Grid>