ferdiansyah/pos-dashboard-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into efril

Browse Source
This commit is contained in:
efrilm 2025-08-14 03:19:02 +07:00
commit 2c370b4c15
12 changed files with 718 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/app/[lang]/(dashboard)/(private)/dashboards/orders/page.tsx
View File

@ -7,18 +7,87 @@ import Grid from '@mui/material/Grid2'
import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
// Server Action Imports
import { TextField, Typography, useTheme } from '@mui/material'
import { useState } from 'react'
import Loading from '../../../../../../components/layout/shared/Loading'
import { useSalesAnalytics } from '../../../../../../services/queries/analytics'
import { RecentSale } from '../../../../../../types/services/analytic'
import { formatDateDDMMYYYY, formatForInputDate } from '../../../../../../utils/transform'
import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
const DashboardOrder = () => {
const { data, isLoading } = useSalesAnalytics()
const theme = useTheme()
const today = new Date()
const monthAgo = new Date()
monthAgo.setDate(today.getDate() - 30)
const [filter, setFilter] = useState({
date_from: formatDateDDMMYYYY(monthAgo),
date_to: formatDateDDMMYYYY(today)
})
const { data, isLoading } = useSalesAnalytics({
date_from: filter.date_from,
date_to: filter.date_to
})
if (isLoading) return <Loading />
return (
<Grid container spacing={6}>
<Grid size={{ xs: 12 }}>
<div className='flex gap-4 items-center justify-between'>
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
Orders Analysis Dashboard
</Typography>
<div className='flex items-center gap-4'>
<TextField
type='date'
value={formatForInputDate(data?.date_from || new Date())}
onChange={e => {
setFilter({
...filter,
date_from: formatDateDDMMYYYY(new Date(e.target.value))
})
}}
size='small'
sx={{
'& .MuiOutlinedInput-root': {
'&.Mui-focused fieldset': {
borderColor: 'primary.main'
},
'& fieldset': {
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
}
}
}}
/>
<Typography>-</Typography>
<TextField
type='date'
value={
data?.date_to
? new Date(data?.date_to).toISOString().split('T')[0]
: new Date().toISOString().split('T')[0]
}
onChange={e => {}}
size='small'
sx={{
'& .MuiOutlinedInput-root': {
'&.Mui-focused fieldset': {
borderColor: 'primary.main'
},
'& fieldset': {
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
}
}
}}
/>
</div>
</div>
</Grid>
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
<DistributedBarChartOrder
isLoading={isLoading}

101
src/app/[lang]/(dashboard)/(private)/dashboards/overview/page.tsx
View File

@ -1,18 +1,31 @@
'use client'
import React from 'react'
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
import { TextField, Typography, useTheme } from '@mui/material'
import { useState } from 'react'
import Loading from '../../../../../../components/layout/shared/Loading'
import { formatCurrency, formatDate, formatShortCurrency } from '../../../../../../utils/transform'
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
import { formatDateDDMMYYYY, formatForInputDate, formatShortCurrency } from '../../../../../../utils/transform'
import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
const DashboardOverview = () => {
// Sample data - replace with your actual data
const { data: salesData, isLoading } = useDashboardAnalytics()
const theme = useTheme()
if (isLoading) return <Loading />
const today = new Date()
const monthAgo = new Date()
monthAgo.setDate(today.getDate() - 30)
const [filter, setFilter] = useState({
date_from: formatDateDDMMYYYY(monthAgo),
date_to: formatDateDDMMYYYY(today)
})
// Sample data - replace with your actual data
const { data: salesData, isLoading } = useDashboardAnalytics({
date_from: filter.date_from,
date_to: filter.date_to
})
const MetricCard = ({ iconClass, title, value, subtitle, bgColor = 'bg-blue-500', isCurrency = false }: any) => (
<div className='bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6'>
@ -29,27 +42,62 @@ const DashboardOverview = () => {
</div>
)
const ProgressBar = ({ percentage, color = 'bg-blue-500' }: any) => (
<div className='w-full bg-gray-200 rounded-full h-2'>
<div
className={`${color} h-2 rounded-full transition-all duration-300`}
style={{ width: `${percentage}%` }}
></div>
</div>
)
return (
<>
{salesData && (
<div>
{/* Header */}
{/* <div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900 mb-2">Sales Dashboard</h1>
<p className="text-gray-600">
{formatDate(salesData.date_from)} - {formatDate(salesData.date_to)}
</p>
</div> */}
<div className='mb-8 flex gap-4 items-center justify-between'>
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
Analysis Dashboard
</Typography>
<div className='flex items-center gap-4'>
<TextField
type='date'
value={formatForInputDate(salesData?.date_from || new Date())}
onChange={e => {
setFilter({
...filter,
date_from: formatDateDDMMYYYY(new Date(e.target.value))
})
}}
size='small'
sx={{
'& .MuiOutlinedInput-root': {
'&.Mui-focused fieldset': {
borderColor: 'primary.main'
},
'& fieldset': {
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
}
}
}}
/>
<Typography>-</Typography>
<TextField
type='date'
value={
salesData?.date_to
? new Date(salesData?.date_to).toISOString().split('T')[0]
: new Date().toISOString().split('T')[0]
}
onChange={e => {}}
size='small'
sx={{
'& .MuiOutlinedInput-root': {
'&.Mui-focused fieldset': {
borderColor: 'primary.main'
},
'& fieldset': {
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
}
}
}}
/>
</div>
</div>
{salesData ? (
<>
{/* Overview Metrics */}
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
<MetricCard
@ -91,8 +139,11 @@ const DashboardOverview = () => {
{/* Recent Sales */}
<OrdersReport title='Recent Sales' orderData={salesData.recent_sales} />
</div>
</>
) : (
<Loading />
)}
</div>
</>
)
}

70
src/app/[lang]/(dashboard)/(private)/dashboards/payment-methods/page.tsx
View File

@ -11,14 +11,82 @@ import Loading from '../../../../../../components/layout/shared/Loading'
import { usePaymentAnalytics } from '../../../../../../services/queries/analytics'
import { PaymentDataItem } from '../../../../../../types/services/analytic'
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
import { Typography, TextField, useTheme } from '@mui/material'
import { useState } from 'react'
import { formatDateDDMMYYYY, formatForInputDate } from '../../../../../../utils/transform'
const DashboardPayment = () => {
const { data, isLoading } = usePaymentAnalytics()
const theme = useTheme()
const today = new Date()
const monthAgo = new Date()
monthAgo.setDate(today.getDate() - 30)
const [filter, setFilter] = useState({
date_from: formatDateDDMMYYYY(monthAgo),
date_to: formatDateDDMMYYYY(today)
})
const { data, isLoading } = usePaymentAnalytics({
date_from: filter.date_from,
date_to: filter.date_to
})
if (isLoading) return <Loading />
return (
<Grid container spacing={6}>
<Grid size={{ xs: 12 }}>
<div className='flex gap-4 items-center justify-between'>
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
Payments Analysis Dashboard
</Typography>
<div className='flex items-center gap-4'>
<TextField
type='date'
value={formatForInputDate(data?.date_from || new Date())}
onChange={e => {
setFilter({
...filter,
date_from: formatDateDDMMYYYY(new Date(e.target.value))
})
}}
size='small'
sx={{
'& .MuiOutlinedInput-root': {
'&.Mui-focused fieldset': {
borderColor: 'primary.main'
},
'& fieldset': {
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
}
}
}}
/>
<Typography>-</Typography>
<TextField
type='date'
value={
data?.date_to
? new Date(data?.date_to).toISOString().split('T')[0]
: new Date().toISOString().split('T')[0]
}
onChange={e => {}}
size='small'
sx={{
'& .MuiOutlinedInput-root': {
'&.Mui-focused fieldset': {
borderColor: 'primary.main'
},
'& fieldset': {
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
}
}
}}
/>
</div>
</div>
</Grid>
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
<DistributedBarChartOrder
isLoading={isLoading}

95
src/app/[lang]/(dashboard)/(private)/dashboards/products/page.tsx
View File

@ -6,47 +6,88 @@ import Grid from '@mui/material/Grid2'
// Component Imports
// Server Action Imports
import { TextField, Typography, useTheme } from '@mui/material'
import { useState } from 'react'
import Loading from '../../../../../../components/layout/shared/Loading'
import { useProductSalesAnalytics } from '../../../../../../services/queries/analytics'
import { formatDateDDMMYYYY, formatForInputDate } from '../../../../../../utils/transform'
import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
const DashboardProduct = () => {
const { data, isLoading } = useProductSalesAnalytics()
const theme = useTheme()
const summary = {
totalProducts: data?.data.length,
totalQuantitySold: data?.data.reduce((sum, item) => sum + item.quantity_sold, 0),
totalRevenue: data?.data.reduce((sum, item) => sum + item.revenue, 0),
totalOrders: data?.data.reduce((sum, item) => sum + item.order_count, 0),
averageOrderValue: data?.data
? data!.data.reduce((sum, item) => sum + item.revenue, 0) /
data!.data.reduce((sum, item) => sum + item.order_count, 0)
: 0
}
const today = new Date()
const monthAgo = new Date()
monthAgo.setDate(today.getDate() - 30)
const formatDate = (dateString: any) => {
return new Date(dateString).toLocaleDateString('id-ID', {
month: 'short',
day: 'numeric'
const [filter, setFilter] = useState({
date_from: formatDateDDMMYYYY(monthAgo),
date_to: formatDateDDMMYYYY(today)
})
}
const transformSalesData = (data: any) => {
return [
{
type: 'products',
avatarIcon: 'tabler-package',
date: data.map((d: any) => d.product_name),
series: [{ data: data.map((d: any) => d.revenue) }]
}
]
}
const { data, isLoading } = useProductSalesAnalytics({
date_from: filter.date_from,
date_to: filter.date_to
})
if (isLoading) return <Loading />
return (
<Grid container spacing={6}>
<Grid size={{ xs: 12, lg: 12 }}>{data?.data && <ProductSales title='Product Sales' productData={data.data} />}</Grid>
<Grid size={{ xs: 12, lg: 12 }}>
<div className='flex gap-4 items-center justify-between'>
<Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
Products Analysis Dashboard
</Typography>
<div className='flex items-center gap-4'>
<TextField
type='date'
value={formatForInputDate(data?.date_from || new Date())}
onChange={e => {
setFilter({
...filter,
date_from: formatDateDDMMYYYY(new Date(e.target.value))
})
}}
size='small'
sx={{
'& .MuiOutlinedInput-root': {
'&.Mui-focused fieldset': {
borderColor: 'primary.main'
},
'& fieldset': {
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
}
}
}}
/>
<Typography>-</Typography>
<TextField
type='date'
value={
data?.date_to
? new Date(data?.date_to).toISOString().split('T')[0]
: new Date().toISOString().split('T')[0]
}
onChange={e => {}}
size='small'
sx={{
'& .MuiOutlinedInput-root': {
'&.Mui-focused fieldset': {
borderColor: 'primary.main'
},
'& fieldset': {
borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
}
}
}}
/>
</div>
</div>
</Grid>
<Grid size={{ xs: 12, lg: 12 }}>
{data?.data ? <ProductSales title='Product Sales' productData={data.data} /> : <Loading />}
</Grid>
</Grid>
)
}

47
src/app/[lang]/(dashboard)/(private)/dashboards/profit-loss/page.tsx
View File

@ -2,23 +2,28 @@
import React, { useState } from 'react'
import { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
import { formatDateDDMMYYYY, formatShortCurrency } from '../../../../../../utils/transform'
import { formatDateDDMMYYYY, formatForInputDate, formatShortCurrency } from '../../../../../../utils/transform'
import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
import { DailyData, ProfitLossReport } from '../../../../../../types/services/analytic'
import { TextField, Typography, useTheme } from '@mui/material'
import Loading from '../../../../../../components/layout/shared/Loading'
const DashboardProfitloss = () => {
const theme = useTheme()
const today = new Date()
const monthAgo = new Date()
monthAgo.setDate(today.getDate() - 30)
const [filter, setFilter] = useState({
date_from: new Date().setDate(new Date().getDate() - 30).toString(),
date_to: new Date().toString()
date_from: formatDateDDMMYYYY(monthAgo),
date_to: formatDateDDMMYYYY(today)
})
// Sample data - replace with your actual data
const { data: profitData, isLoading } = useProfitLossAnalytics({
date_from: formatDateDDMMYYYY(filter.date_from),
date_to: formatDateDDMMYYYY(filter.date_to)
date_from: filter.date_from,
date_to: filter.date_to
})
const formatCurrency = (amount: any) => {
@ -99,7 +104,6 @@ const DashboardProfitloss = () => {
return (
<>
{profitData && (
<div>
{/* Header */}
<div className='mb-8 flex gap-4 items-center justify-between'>
@ -109,8 +113,13 @@ const DashboardProfitloss = () => {
<div className='flex items-center gap-4'>
<TextField
type='date'
value={new Date(profitData.date_from).toISOString().split('T')[0]}
onChange={e => {}}
value={formatForInputDate(profitData?.date_from || new Date())}
onChange={e => {
setFilter({
...filter,
date_from: formatDateDDMMYYYY(new Date(e.target.value))
})
}}
size='small'
sx={{
'& .MuiOutlinedInput-root': {
@ -126,7 +135,11 @@ const DashboardProfitloss = () => {
<Typography>-</Typography>
<TextField
type='date'
value={new Date(profitData.date_to).toISOString().split('T')[0]}
value={
profitData?.date_to
? new Date(profitData?.date_to).toISOString().split('T')[0]
: new Date().toISOString().split('T')[0]
}
onChange={e => {}}
size='small'
sx={{
@ -143,7 +156,8 @@ const DashboardProfitloss = () => {
</div>
</div>
{/* Summary Metrics */}
{profitData ? (
<>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
<MetricCard
iconClass='tabler-currency-dollar'
@ -187,7 +201,9 @@ const DashboardProfitloss = () => {
<p className='text-3xl font-bold text-green-600 mb-2'>
Rp {formatShortCurrency(profitData.summary.net_profit)}
</p>
<p className='text-sm text-gray-600'>Margin: {formatPercentage(profitData.summary.net_profit_margin)}</p>
<p className='text-sm text-gray-600'>
Margin: {formatPercentage(profitData.summary.net_profit_margin)}
</p>
</div>
<div className='bg-white rounded-lg shadow-md p-6'>
<div className='flex items-center mb-4'>
@ -264,7 +280,9 @@ const DashboardProfitloss = () => {
{formatPercentage(day.gross_profit_margin)}
</span>
</td>
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>{day.orders}</td>
<td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
{day.orders}
</td>
</tr>
))}
</tbody>
@ -394,8 +412,11 @@ const DashboardProfitloss = () => {
</div>
</div>
</div>
</div>
</>
) : (
<Loading />
)}
</div>
</>
)
}

2
src/components/layout/shared/Loading.tsx
View File

@ -2,7 +2,7 @@ import { CircularProgress } from '@mui/material'
export default function Loading({ size = 60 }: { size?: number }) {
return (
<div className='fixed inset-0 z-50 flex items-center justify-center bg-white/70'>
<div className='absolute inset-0 z-50 flex items-center justify-center bg-white/70'>
<CircularProgress size={size} />
</div>
)

3
src/services/api.ts
View File

@ -1,4 +1,5 @@
import axios from 'axios'
import { toast } from 'react-toastify'
const getToken = () => {
return localStorage.getItem('authToken')
@ -40,7 +41,7 @@ api.interceptors.response.use(
}
if (status >= 500) {
console.error('Server error:', error.response?.data?.message || 'Terjadi kesalahan server.')
toast.error(error.response?.data?.errors[0].cause || 'Terjadi kesalahan server.')
}
return Promise.reject(error)

22
src/services/mutations/inventories.ts
View File

@ -1,7 +1,7 @@
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { api } from '../api'
import { toast } from 'react-toastify'
import { InventoryAdjustRequest, InventoryRequest } from '../../types/services/inventory'
import { InventoryAdjustRequest, InventoryRequest, InventoryRestockRequest } from '../../types/services/inventory'
export const useInventoriesMutation = () => {
const queryClient = useQueryClient()
@ -34,6 +34,24 @@ export const useInventoriesMutation = () => {
}
})
const restockInventory = useMutation({
mutationFn: async (newInventory: InventoryRestockRequest) => {
newInventory.items.map(item => {
item.quantity = Number(item.quantity)
})
const response = await api.post('/inventory/restock', newInventory)
return response.data
},
onSuccess: () => {
toast.success('Inventory restock successfully!')
queryClient.invalidateQueries({ queryKey: ['inventories'] })
},
onError: (error: any) => {
toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
}
})
const deleteInventory = useMutation({
mutationFn: async (id: string) => {
const response = await api.delete(`/inventory/${id}`)
@ -48,5 +66,5 @@ export const useInventoriesMutation = () => {
}
})
return { createInventory, adjustInventory, deleteInventory }
return { createInventory, adjustInventory, deleteInventory, restockInventory }
}

12
src/types/services/inventory.ts
View File

@ -29,3 +29,15 @@ export interface InventoryAdjustRequest {
delta: number
reason: string
}
export interface Item {
item_id: string
item_type: string
quantity: number | string
}
export interface InventoryRestockRequest {
outlet_id: string
items: Item[]
reason: string
}

10
src/utils/transform.ts
View File

@ -36,12 +36,22 @@ export const formatDate = (dateString: any) => {
export const formatDateDDMMYYYY = (dateString: Date | string) => {
const date = new Date(dateString)
date.setHours(0, 0, 0, 0)
const day = String(date.getDate()).padStart(2, '0')
const month = String(date.getMonth() + 1).padStart(2, '0')
const year = date.getFullYear()
return `${day}-${month}-${year}`
}
export const formatForInputDate = (dateString: Date | string) => {
const date = new Date(dateString)
const day = String(date.getDate()).padStart(2, '0')
const month = String(date.getMonth() + 1).padStart(2, '0')
const year = date.getFullYear()
return `${year}-${month}-${day}`
}
export const formatDatetime = (dateString: string | number | Date) => {
const date = new Date(dateString)

4
src/views/apps/ecommerce/products/list/ProductListTable.tsx
View File

@ -220,13 +220,13 @@ const ProductListTable = () => {
<div className='flex items-center'>
<IconButton
LinkComponent={Link}
href={getLocalizedUrl(`/apps/ecommerce/products/${row.original.id}/detail`, locale as Locale)}
href={getLocalizedUrl(`/apps/inventory/products/${row.original.id}/detail`, locale as Locale)}
>
<i className='tabler-eye text-textSecondary' />
</IconButton>
<IconButton
LinkComponent={Link}
href={getLocalizedUrl(`/apps/ecommerce/products/${row.original.id}/edit`, locale as Locale)}
href={getLocalizedUrl(`/apps/inventory/products/${row.original.id}/edit`, locale as Locale)}
>
<i className='tabler-edit text-textSecondary' />
</IconButton>

74
src/views/apps/ecommerce/stock/adjustment/AdjustmentStockDrawer.tsx
View File

@ -14,12 +14,12 @@ import Typography from '@mui/material/Typography'
// Components Imports
import CustomTextField from '@core/components/mui/TextField'
import { Autocomplete, CircularProgress } from '@mui/material'
import { Autocomplete, CircularProgress, MenuItem } from '@mui/material'
import { useDebounce } from 'use-debounce'
import { useInventoriesMutation } from '../../../../../services/mutations/inventories'
import { useOutlets } from '../../../../../services/queries/outlets'
import { useProducts } from '../../../../../services/queries/products'
import { InventoryAdjustRequest } from '../../../../../types/services/inventory'
import { InventoryRestockRequest, Item } from '../../../../../types/services/inventory'
type Props = {
open: boolean
@ -30,17 +30,22 @@ const AdjustmentStockDrawer = (props: Props) => {
// Props
const { open, handleClose } = props
const { mutate: adjustInventory, isPending: isCreating } = useInventoriesMutation().adjustInventory
const { restockInventory } = useInventoriesMutation()
// States
const [productInput, setProductInput] = useState('')
const [productDebouncedInput] = useDebounce(productInput, 500) // debounce for better UX
const [outletInput, setOutletInput] = useState('')
const [outletDebouncedInput] = useDebounce(outletInput, 500) // debounce for better UX
const [formData, setFormData] = useState<InventoryAdjustRequest>({
product_id: '',
const [formData, setFormData] = useState<InventoryRestockRequest>({
outlet_id: '',
delta: 0,
items: [
{
item_id: '',
item_type: '',
quantity: 0
}
],
reason: ''
})
@ -58,14 +63,11 @@ const AdjustmentStockDrawer = (props: Props) => {
const handleFormSubmit = (e: any) => {
e.preventDefault()
adjustInventory(
{ ...formData, delta: Number(formData.delta) },
{
restockInventory.mutate(formData, {
onSuccess: () => {
handleReset()
}
}
)
})
}
const handleInputChange = (e: any) => {
@ -79,9 +81,14 @@ const AdjustmentStockDrawer = (props: Props) => {
const handleReset = () => {
handleClose()
setFormData({
product_id: '',
outlet_id: '',
delta: 0,
items: [
{
item_id: '',
item_type: '',
quantity: 0
}
],
reason: ''
})
}
@ -136,18 +143,33 @@ const AdjustmentStockDrawer = (props: Props) => {
/>
)}
/>
<CustomTextField
select
fullWidth
label='Item Type'
value={formData.items[0]?.item_type || ''}
onChange={e => setFormData({ ...formData, items: [{ ...formData.items[0], item_type: e.target.value }] })}
>
<MenuItem value='PRODUCT'>Product</MenuItem>
<MenuItem value='IGREDIENT'>Ingredient</MenuItem>
</CustomTextField>
<Autocomplete
options={options}
loading={isLoading}
getOptionLabel={option => option.name}
value={options.find(p => p.id === formData.product_id) || null}
value={options.find(p => p.id === formData.items[0].item_id) || null}
onInputChange={(event, newProductInput) => {
setProductInput(newProductInput)
}}
onChange={(event, newValue) => {
setFormData({
...formData,
product_id: newValue?.id || ''
items: [
{
...formData.items[0],
item_id: newValue?.id || ''
}
]
})
}}
renderInput={params => (
@ -170,10 +192,20 @@ const AdjustmentStockDrawer = (props: Props) => {
/>
<CustomTextField
fullWidth
label='Delta'
name='delta'
value={formData.delta}
onChange={handleInputChange}
label='Quantity'
name='quantity'
value={formData.items[0].quantity}
onChange={e =>
setFormData({
...formData,
items: [
{
...formData.items[0],
quantity: e.target.value
}
]
})
}
placeholder='0'
/>
<CustomTextField
@ -187,8 +219,8 @@ const AdjustmentStockDrawer = (props: Props) => {
placeholder='Write a Comment...'
/>
<div className='flex items-center gap-4'>
<Button variant='contained' type='submit' disabled={isCreating}>
{isCreating ? 'Adjusting...' : 'Adjust'}
<Button variant='contained' type='submit' disabled={restockInventory.isPending}>
{restockInventory.isPending ? 'Saving...' : 'Save'}
</Button>
<Button variant='tonal' color='error' type='reset' onClick={handleReset}>
Discard