Create Purchase
This commit is contained in:
efrilm
parent
140822763e
commit
d54d623d4c
@ -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 }
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
|
||||
@ -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} />
|
||||
|
||||
{/* Ingredients Table Section */}
|
||||
<PurchaseIngredientsTable
|
||||
formData={formData}
|
||||
handleIngredientChange={handleIngredientChange}
|
||||
addIngredientItem={addIngredientItem}
|
||||
removeIngredientItem={removeIngredientItem}
|
||||
{/* 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>
|
||||
|
||||
{/* Summary Section */}
|
||||
<PurchaseSummary formData={formData} handleInputChange={handleInputChange} />
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user