src/services/mutations/purchaseOrder.ts

@@ -3,20 +3,22 @@ import { toast } from 'react-toastify'
 import { api } from '../api'
 import { PurchaseOrderRequest } from '@/types/services/purchaseOrder'
 
-export const useVendorsMutation = () => {
+export const usePurchaseOrdersMutation = () => {
   const queryClient = useQueryClient()
 
-  const createVendor = useMutation({
-    mutationFn: async (newVendor: PurchaseOrderRequest) => {
-      const response = await api.post('/vendors', newVendor)
+  const createPurchaseOrder = useMutation({
+    mutationFn: async (newPurchaseOrder: PurchaseOrderRequest) => {
+      const response = await api.post('/purchase-orders', newPurchaseOrder)
       return response.data
     },
     onSuccess: () => {
-      toast.success('Vendor created successfully!')
-      queryClient.invalidateQueries({ queryKey: ['vendors'] })
+      toast.success('Purchase Order created successfully!')
+      queryClient.invalidateQueries({ queryKey: ['purchase-orders'] })
     },
     onError: (error: any) => {
       toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
     }
   })
+
+  return { createPurchaseOrder }
 }

src/types/apps/purchaseOrderTypes.ts

@@ -16,10 +16,7 @@ export interface IngredientItem {
   deskripsi: string
   kuantitas: number
   satuan: { label: string; value: string } | null
-  discount: string
   harga: number
-  pajak: { label: string; value: string } | null
-  waste: { label: string; value: string } | null
   total: number
 }
 

src/views/apps/purchase/purchase-form/PurchaseAddForm.tsx

@@ -1,52 +1,178 @@
 'use client'
 
-import React, { useState } from 'react'
-import { Card, CardContent } from '@mui/material'
+import React, { useState, useMemo } from 'react'
+import {
+  Card,
+  CardContent,
+  Button,
+  Box,
+  Typography,
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  CircularProgress
+} from '@mui/material'
 import Grid from '@mui/material/Grid2'
-import { IngredientItem, PurchaseOrderFormData } from '@/types/apps/purchaseOrderTypes'
-import PurchaseBasicInfo from './PurchaseBasicInfo'
-import PurchaseIngredientsTable from './PurchaseIngredientsTable'
-import PurchaseSummary from './PurchaseSummary'
+import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+import CustomTextField from '@/@core/components/mui/TextField'
+import ImageUpload from '@/components/ImageUpload'
+import { DropdownOption } from '@/types/apps/purchaseOrderTypes'
+import { useVendorActive } from '@/services/queries/vendor'
+import { useIngredients } from '@/services/queries/ingredients'
+import { useUnits } from '@/services/queries/units'
+import { useFilesMutation } from '@/services/mutations/files'
+import { usePurchaseOrdersMutation } from '@/services/mutations/purchaseOrder'
+
+export interface PurchaseOrderRequest {
+  vendor_id: string // uuid.UUID
+  po_number: string
+  transaction_date: string // ISO date string
+  due_date: string // ISO date string
+  reference?: string
+  status?: 'draft' | 'sent' | 'approved' | 'received' | 'cancelled'
+  message?: string
+  items: PurchaseOrderItemRequest[]
+  attachment_file_ids?: string[] // uuid.UUID[]
+}
+
+export interface PurchaseOrderItemRequest {
+  ingredient_id: string // uuid.UUID
+  description?: string
+  quantity: number
+  unit_id: string // uuid.UUID
+  amount: number
+}
+
+export type IngredientItem = {
+  id: string
+  organization_id: string
+  outlet_id: string
+  name: string
+  unit_id: string
+  cost: number
+  stock: number
+  is_semi_finished: boolean
+  is_active: boolean
+  metadata: Record<string, unknown>
+  created_at: string
+  updated_at: string
+  unit: Unit
+}
+
+export type Unit = {
+  id: string
+  name: string
+  // Add other unit properties as needed
+}
+
+// Internal form state interface for UI management
+interface PurchaseOrderFormData {
+  vendor: { label: string; value: string } | null
+  po_number: string
+  transaction_date: string
+  due_date: string
+  reference: string
+  status: 'draft' | 'sent' | 'approved' | 'received' | 'cancelled'
+  showPesan: boolean
+  showAttachment: boolean
+  message: string
+  items: PurchaseOrderFormItem[]
+  attachment_file_ids: string[]
+}
+
+interface PurchaseOrderFormItem {
+  id: number // for UI tracking
+  ingredient: { label: string; value: string; originalData?: IngredientItem } | null
+  description: string
+  quantity: number
+  unit: { label: string; value: string } | null
+  amount: number
+  total: number // calculated field for UI
+}
 
 const PurchaseAddForm: React.FC = () => {
+  const [imageUrl, setImageUrl] = useState<string>('')
   const [formData, setFormData] = useState<PurchaseOrderFormData>({
     vendor: null,
-    nomor: 'PO/00043',
-    tglTransaksi: '2025-09-09',
-    tglJatuhTempo: '2025-09-10',
-    referensi: '',
-    termin: null,
-    hargaTermasukPajak: true,
-    // Shipping info
-    showShippingInfo: false,
-    tanggalPengiriman: '',
-    ekspedisi: null,
-    noResi: '',
+    po_number: '',
+    transaction_date: '',
+    due_date: '',
+    reference: '',
+    status: 'draft',
     // Bottom section toggles
     showPesan: false,
     showAttachment: false,
-    showTambahDiskon: false,
-    showBiayaPengiriman: false,
-    showBiayaTransaksi: false,
-    showUangMuka: false,
-    pesan: '',
-    // Ingredient items (updated from productItems)
-    ingredientItems: [
+    message: '',
+    // Items
+    items: [
       {
         id: 1,
         ingredient: null,
-        deskripsi: '',
-        kuantitas: 1,
-        satuan: null,
-        discount: '0',
-        harga: 0,
-        pajak: null,
-        waste: null,
+        description: '',
+        quantity: 1,
+        unit: null,
+        amount: 0,
         total: 0
       }
-    ]
+    ],
+    attachment_file_ids: []
   })
 
+  // API Hooks
+  const { data: vendors, isLoading: isLoadingVendors } = useVendorActive()
+  const { data: ingredients, isLoading: isLoadingIngredients } = useIngredients()
+  const { data: units, isLoading: isLoadingUnits } = useUnits({
+    page: 1,
+    limit: 50
+  })
+
+  const { mutate, isPending } = useFilesMutation().uploadFile
+  const { createPurchaseOrder } = usePurchaseOrdersMutation()
+
+  // Transform vendors data to dropdown options
+  const vendorOptions: DropdownOption[] = useMemo(() => {
+    return (
+      vendors?.map(vendor => ({
+        label: vendor.name,
+        value: vendor.id
+      })) || []
+    )
+  }, [vendors])
+
+  // Transform ingredients data to autocomplete options format
+  const ingredientOptions = useMemo(() => {
+    if (!ingredients || isLoadingIngredients) {
+      return []
+    }
+
+    return ingredients?.data.map((ingredient: IngredientItem) => ({
+      label: ingredient.name,
+      value: ingredient.id,
+      id: ingredient.id,
+      originalData: ingredient // This includes the full IngredientItem with unit, cost, etc.
+    }))
+  }, [ingredients, isLoadingIngredients])
+
+  // Transform units data to dropdown options
+  const unitOptions = useMemo(() => {
+    if (!units || isLoadingUnits) {
+      return []
+    }
+
+    return (
+      units?.data?.map((unit: any) => ({
+        label: unit.name || unit.nama || unit.unit_name,
+        value: unit.id || unit.code || unit.value
+      })) || []
+    )
+  }, [units, isLoadingUnits])
+
+  // Handler Functions
   const handleInputChange = (field: keyof PurchaseOrderFormData, value: any): void => {
     setFormData(prev => ({
       ...prev,
@@ -54,64 +180,602 @@ const PurchaseAddForm: React.FC = () => {
     }))
   }
 
-  const handleIngredientChange = (index: number, field: keyof IngredientItem, value: any): void => {
+  const handleItemChange = (index: number, field: keyof PurchaseOrderFormItem, value: any): void => {
     setFormData(prev => {
-      const newItems = [...prev.ingredientItems]
+      const newItems = [...prev.items]
       newItems[index] = { ...newItems[index], [field]: value }
 
-      // Auto-calculate total if price or quantity changes
-      if (field === 'harga' || field === 'kuantitas') {
+      // Auto-calculate total if amount or quantity changes
+      if (field === 'amount' || field === 'quantity') {
         const item = newItems[index]
-        item.total = item.harga * item.kuantitas
+        item.total = item.amount * item.quantity
       }
 
-      return { ...prev, ingredientItems: newItems }
+      return { ...prev, items: newItems }
     })
   }
 
-  const addIngredientItem = (): void => {
-    const newItem: IngredientItem = {
+  const handleIngredientSelection = (index: number, selectedIngredient: any) => {
+    handleItemChange(index, 'ingredient', selectedIngredient)
+
+    // Auto-populate related fields if available in the ingredient data
+    if (selectedIngredient) {
+      const ingredientData: IngredientItem = selectedIngredient.originalData || selectedIngredient
+
+      // Auto-fill unit based on IngredientItem structure
+      if (ingredientData.unit_id || ingredientData.unit) {
+        let unitToFind = null
+
+        // If ingredient has unit object (populated relation)
+        if (ingredientData.unit && typeof ingredientData.unit === 'object') {
+          unitToFind = ingredientData.unit
+        }
+        // If ingredient has unit_id, find the unit from unitOptions
+        else if (ingredientData.unit_id) {
+          unitToFind = unitOptions.find(option => option.value === ingredientData.unit_id)
+        }
+
+        if (unitToFind) {
+          // Create unit option object
+          const unitOption = {
+            label: (unitToFind as any).label || (unitToFind as any).name || (unitToFind as any).unit_name,
+            value: (unitToFind as any).value || ingredientData.unit_id
+          }
+
+          handleItemChange(index, 'unit', unitOption)
+        }
+      }
+
+      // Auto-fill amount with cost from IngredientItem
+      if (ingredientData.cost !== undefined && ingredientData.cost !== null) {
+        handleItemChange(index, 'amount', ingredientData.cost)
+      }
+
+      // Auto-fill description with ingredient name
+      if (ingredientData.name) {
+        handleItemChange(index, 'description', ingredientData.name)
+      }
+    }
+  }
+
+  const addItem = (): void => {
+    const newItem: PurchaseOrderFormItem = {
       id: Date.now(),
       ingredient: null,
-      deskripsi: '',
-      kuantitas: 1,
-      satuan: null,
-      discount: '0%',
-      harga: 0,
-      pajak: null,
-      waste: null,
+      description: '',
+      quantity: 1,
+      unit: null,
+      amount: 0,
       total: 0
     }
     setFormData(prev => ({
       ...prev,
-      ingredientItems: [...prev.ingredientItems, newItem]
+      items: [...prev.items, newItem]
     }))
   }
 
-  const removeIngredientItem = (index: number): void => {
+  const removeItem = (index: number): void => {
     setFormData(prev => ({
       ...prev,
-      ingredientItems: prev.ingredientItems.filter((_, i) => i !== index)
+      items: prev.items.filter((_, i) => i !== index)
     }))
   }
 
+  // Function to get selected vendor data
+  const getSelectedVendorData = () => {
+    if (!formData.vendor?.value || !vendors) return null
+    const selectedVendor = vendors.find(vendor => vendor.id === (formData?.vendor?.value ?? ''))
+    return selectedVendor
+  }
+
+  const upsertAttachment = (attachments: string[], newId: string, index = 0) => {
+    if (attachments.length === 0) {
+      return [newId]
+    }
+    return attachments.map((id, i) => (i === index ? newId : id))
+  }
+
+  const handleUpload = async (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const formData = new FormData()
+      formData.append('file', file)
+      formData.append('file_type', 'image')
+      formData.append('description', 'Purchase image')
+
+      mutate(formData, {
+        onSuccess: data => {
+          // pemakaian:
+          setFormData(prev => ({
+            ...prev,
+            attachment_file_ids: upsertAttachment(prev.attachment_file_ids, data.id)
+          }))
+          setImageUrl(data.file_url)
+          resolve(data.id) // <-- balikin id file yang berhasil diupload
+        },
+        onError: error => {
+          reject(error) // biar async/await bisa tangkep error
+        }
+      })
+    })
+  }
+
+  // Calculate subtotal from items
+  const subtotal = formData.items.reduce((sum, item) => sum + (item.total || 0), 0)
+
+  // Convert form data to API request format
+  const convertToApiRequest = (): PurchaseOrderRequest => {
+    return {
+      vendor_id: formData.vendor?.value || '',
+      po_number: formData.po_number,
+      transaction_date: formData.transaction_date,
+      due_date: formData.due_date,
+      reference: formData.reference || undefined,
+      status: formData.status,
+      message: formData.message || undefined,
+      items: formData.items
+        .filter(item => item.ingredient && item.unit) // Only include valid items
+        .map(item => ({
+          ingredient_id: item.ingredient!.value,
+          description: item.description || undefined,
+          quantity: item.quantity,
+          unit_id: item.unit!.value,
+          amount: item.amount
+        })),
+      attachment_file_ids: formData.attachment_file_ids.length > 0 ? formData.attachment_file_ids : undefined
+    }
+  }
+
+  const handleSave = () => {
+    createPurchaseOrder.mutate(convertToApiRequest(), {
+      onSuccess: () => {
+        window.history.back()
+      }
+    })
+  }
+
   return (
     <Card>
       <CardContent>
         <Grid container spacing={3}>
-          {/* Basic Info Section */}
-          <PurchaseBasicInfo formData={formData} handleInputChange={handleInputChange} />
+          {/* BASIC INFO SECTION */}
+          {/* Row 1 - Vendor and PO Number */}
+          <Grid size={{ xs: 12, sm: 6, md: 6 }}>
+            <CustomAutocomplete
+              fullWidth
+              options={vendorOptions}
+              value={formData.vendor}
+              onChange={(event, newValue) => {
+                handleInputChange('vendor', newValue)
+                if (newValue?.value) {
+                  const selectedVendorData = vendors?.find(vendor => vendor.id === newValue.value)
+                  console.log('Vendor selected:', selectedVendorData)
+                }
+              }}
+              loading={isLoadingVendors}
+              renderInput={params => (
+                <CustomTextField
+                  {...params}
+                  label='Vendor'
+                  placeholder={isLoadingVendors ? 'Memuat vendor...' : 'Pilih kontak'}
+                  fullWidth
+                />
+              )}
+            />
+            {getSelectedVendorData() && (
+              <Box className='space-y-1 mt-3'>
+                <Box className='flex items-center space-x-2'>
+                  <i className='tabler-user text-gray-500 w-3 h-3' />
+                  <Typography className='text-gray-700 font-medium text-xs'>
+                    {getSelectedVendorData()?.contact_person ?? ''}
+                  </Typography>
+                </Box>
+                <Box className='flex items-start space-x-2'>
+                  <i className='tabler-map text-gray-500 w-3 h-3' />
+                  <Typography className='text-gray-700 font-medium text-xs'>
+                    {getSelectedVendorData()?.address ?? '-'}
+                  </Typography>
+                </Box>
+                <Box className='flex items-center space-x-2'>
+                  <i className='tabler-phone text-gray-500 w-3 h-3' />
+                  <Typography className='text-gray-700 font-medium text-xs'>
+                    {getSelectedVendorData()?.phone_number ?? '-'}
+                  </Typography>
+                </Box>
+              </Box>
+            )}
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6, md: 6 }}>
+            <CustomTextField
+              fullWidth
+              label='PO Number'
+              value={formData.po_number}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('po_number', e.target.value)}
+            />
+          </Grid>
 
-          {/* Ingredients Table Section */}
-          <PurchaseIngredientsTable
-            formData={formData}
-            handleIngredientChange={handleIngredientChange}
-            addIngredientItem={addIngredientItem}
-            removeIngredientItem={removeIngredientItem}
-          />
+          {/* Row 2 - Transaction Date, Due Date, Status */}
+          <Grid size={{ xs: 12, sm: 4, md: 4 }}>
+            <CustomTextField
+              fullWidth
+              label='Transaction Date'
+              type='date'
+              value={formData.transaction_date}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                handleInputChange('transaction_date', e.target.value)
+              }
+              InputLabelProps={{
+                shrink: true
+              }}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 4, md: 4 }}>
+            <CustomTextField
+              fullWidth
+              label='Due Date'
+              type='date'
+              value={formData.due_date}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('due_date', e.target.value)}
+              InputLabelProps={{
+                shrink: true
+              }}
+            />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 4, md: 4 }}>
+            <CustomTextField
+              fullWidth
+              label='Reference'
+              placeholder='Reference'
+              value={formData.reference}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange('reference', e.target.value)}
+            />
+          </Grid>
 
-          {/* Summary Section */}
-          <PurchaseSummary formData={formData} handleInputChange={handleInputChange} />
+          {/* ITEMS TABLE SECTION */}
+          <Grid size={{ xs: 12 }} sx={{ mt: 4 }}>
+            <Typography variant='h6' sx={{ mb: 2, fontWeight: 600 }}>
+              Purchase Order Items
+            </Typography>
+
+            <TableContainer component={Paper} variant='outlined'>
+              <Table>
+                <TableHead>
+                  <TableRow sx={{ backgroundColor: 'grey.50' }}>
+                    <TableCell sx={{ fontWeight: 'bold', minWidth: 180 }}>Ingredient</TableCell>
+                    <TableCell sx={{ fontWeight: 'bold', minWidth: 150 }}>Description</TableCell>
+                    <TableCell sx={{ fontWeight: 'bold', width: 100 }}>Quantity</TableCell>
+                    <TableCell sx={{ fontWeight: 'bold', width: 120 }}>Unit</TableCell>
+                    <TableCell sx={{ fontWeight: 'bold', width: 120 }}>Amount</TableCell>
+                    <TableCell sx={{ fontWeight: 'bold', width: 100, textAlign: 'right' }}>Total</TableCell>
+                    <TableCell sx={{ width: 50 }}></TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {formData.items.map((item: PurchaseOrderFormItem, index: number) => (
+                    <TableRow key={item.id}>
+                      <TableCell>
+                        <CustomAutocomplete
+                          size='small'
+                          options={ingredientOptions}
+                          value={item.ingredient || null}
+                          onChange={(event, newValue) => handleIngredientSelection(index, newValue)}
+                          loading={isLoadingIngredients}
+                          getOptionLabel={(option: any) => {
+                            if (!option) return ''
+                            return option.label || option.name || option.nama || ''
+                          }}
+                          isOptionEqualToValue={(option: any, value: any) => {
+                            if (!option || !value) return false
+                            const optionId = option.value || option.id
+                            const valueId = value.value || value.id
+                            return optionId === valueId
+                          }}
+                          renderInput={params => (
+                            <CustomTextField
+                              {...params}
+                              placeholder={isLoadingIngredients ? 'Loading ingredients...' : 'Select Ingredient'}
+                              InputProps={{
+                                ...params.InputProps,
+                                endAdornment: (
+                                  <>
+                                    {isLoadingIngredients ? <CircularProgress color='inherit' size={20} /> : null}
+                                    {params.InputProps.endAdornment}
+                                  </>
+                                )
+                              }}
+                            />
+                          )}
+                          disabled={isLoadingIngredients}
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <CustomTextField
+                          fullWidth
+                          size='small'
+                          value={item.description}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                            handleItemChange(index, 'description', e.target.value)
+                          }
+                          placeholder='Description'
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <CustomTextField
+                          fullWidth
+                          size='small'
+                          type='number'
+                          value={item.quantity}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                            handleItemChange(index, 'quantity', parseInt(e.target.value) || 1)
+                          }
+                          inputProps={{ min: 1 }}
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <CustomAutocomplete
+                          size='small'
+                          options={unitOptions}
+                          value={item.unit}
+                          onChange={(event, newValue) => handleItemChange(index, 'unit', newValue)}
+                          loading={isLoadingUnits}
+                          getOptionLabel={(option: any) => {
+                            if (!option) return ''
+                            return option.label || option.name || option.nama || ''
+                          }}
+                          renderInput={params => (
+                            <CustomTextField
+                              {...params}
+                              placeholder={isLoadingUnits ? 'Loading units...' : 'Select...'}
+                              InputProps={{
+                                ...params.InputProps,
+                                endAdornment: (
+                                  <>
+                                    {isLoadingUnits ? <CircularProgress color='inherit' size={20} /> : null}
+                                    {params.InputProps.endAdornment}
+                                  </>
+                                )
+                              }}
+                            />
+                          )}
+                          disabled={isLoadingUnits}
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <CustomTextField
+                          fullWidth
+                          size='small'
+                          type='number'
+                          value={item.amount === 0 ? '' : item.amount?.toString() || ''}
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                            const value = e.target.value
+                            if (value === '') {
+                              handleItemChange(index, 'amount', 0)
+                              return
+                            }
+                            const numericValue = parseFloat(value)
+                            handleItemChange(index, 'amount', isNaN(numericValue) ? 0 : numericValue)
+                          }}
+                          inputProps={{ min: 0, step: 'any' }}
+                          placeholder='0'
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <CustomTextField
+                          fullWidth
+                          size='small'
+                          value={item.total}
+                          InputProps={{ readOnly: true }}
+                          sx={{
+                            '& .MuiInputBase-input': {
+                              textAlign: 'right'
+                            }
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell>
+                        <IconButton
+                          size='small'
+                          color='error'
+                          onClick={() => removeItem(index)}
+                          disabled={formData.items.length === 1}
+                        >
+                          <i className='tabler-trash' />
+                        </IconButton>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+
+            {/* Add New Item Button */}
+            <Button
+              startIcon={<i className='tabler-plus' />}
+              onClick={addItem}
+              variant='outlined'
+              size='small'
+              sx={{ mt: 1 }}
+              disabled={isLoadingIngredients || isLoadingUnits}
+            >
+              Add Item
+            </Button>
+          </Grid>
+
+          {/* SUMMARY SECTION */}
+          <Grid size={12} sx={{ mt: 4 }}>
+            <Grid container spacing={3}>
+              {/* Left Side - Message and Attachment */}
+              <Grid size={{ xs: 12, md: 7 }}>
+                {/* Message Section */}
+                <Box sx={{ mb: 3 }}>
+                  <Button
+                    variant='text'
+                    color='inherit'
+                    onClick={() => handleInputChange('showPesan', !formData.showPesan)}
+                    sx={{
+                      textTransform: 'none',
+                      fontSize: '14px',
+                      fontWeight: 500,
+                      padding: '12px 16px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'flex-start',
+                      width: '100%',
+                      backgroundColor: '#f5f5f5',
+                      border: '1px solid #e0e0e0',
+                      borderRadius: '4px',
+                      color: 'text.primary',
+                      '&:hover': {
+                        backgroundColor: '#eeeeee'
+                      }
+                    }}
+                  >
+                    <Box component='span' sx={{ mr: 1 }}>
+                      {formData.showPesan ? (
+                        <i className='tabler-chevron-down w-4 h-4' />
+                      ) : (
+                        <i className='tabler-chevron-right w-4 h-4' />
+                      )}
+                    </Box>
+                    Message
+                  </Button>
+                  {formData.showPesan && (
+                    <Box sx={{ mt: 2 }}>
+                      <CustomTextField
+                        fullWidth
+                        multiline
+                        rows={3}
+                        placeholder='Add message...'
+                        value={formData.message || ''}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                          handleInputChange('message', e.target.value)
+                        }
+                      />
+                    </Box>
+                  )}
+                </Box>
+
+                {/* Attachment Section */}
+                <Box>
+                  <Button
+                    variant='text'
+                    color='inherit'
+                    onClick={() => handleInputChange('showAttachment', !formData.showAttachment)}
+                    sx={{
+                      textTransform: 'none',
+                      fontSize: '14px',
+                      fontWeight: 500,
+                      padding: '12px 16px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'flex-start',
+                      width: '100%',
+                      backgroundColor: '#f5f5f5',
+                      border: '1px solid #e0e0e0',
+                      borderRadius: '4px',
+                      color: 'text.primary',
+                      '&:hover': {
+                        backgroundColor: '#eeeeee'
+                      }
+                    }}
+                  >
+                    <Box component='span' sx={{ mr: 1 }}>
+                      {formData.showAttachment ? (
+                        <i className='tabler-chevron-down w-4 h-4' />
+                      ) : (
+                        <i className='tabler-chevron-right w-4 h-4' />
+                      )}
+                    </Box>
+                    Attachment
+                  </Button>
+                  {formData.showAttachment && (
+                    <ImageUpload
+                      onUpload={handleUpload}
+                      maxFileSize={1 * 1024 * 1024}
+                      showUrlOption={false}
+                      currentImageUrl={imageUrl}
+                      dragDropText='Drop your image here'
+                      browseButtonText='Choose Image'
+                    />
+                  )}
+                </Box>
+              </Grid>
+
+              {/* Right Side - Totals */}
+              <Grid size={{ xs: 12, md: 5 }}>
+                <Box sx={{ backgroundColor: '#ffffff', p: 3, borderRadius: '8px' }}>
+                  {/* Sub Total */}
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      py: 2,
+                      borderBottom: '1px solid #e0e0e0',
+                      '&:hover': {
+                        backgroundColor: '#f8f8f8'
+                      }
+                    }}
+                  >
+                    <Typography variant='body1' color='text.secondary' sx={{ fontSize: '16px' }}>
+                      Sub Total
+                    </Typography>
+                    <Typography variant='body1' fontWeight={600} sx={{ fontSize: '16px', textAlign: 'right' }}>
+                      {new Intl.NumberFormat('id-ID', {
+                        style: 'currency',
+                        currency: 'IDR',
+                        minimumFractionDigits: 0
+                      }).format(subtotal)}
+                    </Typography>
+                  </Box>
+
+                  {/* Total */}
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      py: 2,
+                      borderBottom: '1px solid #e0e0e0',
+                      '&:hover': {
+                        backgroundColor: '#f8f8f8'
+                      }
+                    }}
+                  >
+                    <Typography variant='h6' fontWeight={600} sx={{ fontSize: '18px' }}>
+                      Total
+                    </Typography>
+                    <Typography variant='h6' fontWeight={600} sx={{ fontSize: '18px', textAlign: 'right' }}>
+                      {new Intl.NumberFormat('id-ID', {
+                        style: 'currency',
+                        currency: 'IDR',
+                        minimumFractionDigits: 0
+                      }).format(subtotal)}
+                    </Typography>
+                  </Box>
+
+                  {/* Save Button */}
+                  <Button
+                    variant='contained'
+                    color='primary'
+                    fullWidth
+                    onClick={handleSave}
+                    sx={{
+                      textTransform: 'none',
+                      fontWeight: 600,
+                      py: 1.5,
+                      mt: 3,
+                      boxShadow: 'none',
+                      '&:hover': {
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
+                      }
+                    }}
+                  >
+                    Save
+                  </Button>
+                </Box>
+              </Grid>
+            </Grid>
+          </Grid>
         </Grid>
       </CardContent>
     </Card>