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

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

@@ -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}

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

@@ -1,18 +1,31 @@
 'use client'
 
-import React from 'react'
+import { TextField, Typography, useTheme } from '@mui/material'
-import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
+import { useState } from 'react'
 import Loading from '../../../../../../components/layout/shared/Loading'
-import { formatCurrency, formatDate, formatShortCurrency } from '../../../../../../utils/transform'
+import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
-import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
+import { formatDateDDMMYYYY, formatForInputDate, formatShortCurrency } from '../../../../../../utils/transform'
-import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
 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 theme = useTheme()
-  const { data: salesData, isLoading } = useDashboardAnalytics()
 
-  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">
+        <div className='mb-8 flex gap-4 items-center justify-between'>
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">Sales Dashboard</h1>
+          <Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
-          <p className="text-gray-600">
+            Analysis Dashboard
-            {formatDate(salesData.date_from)} - {formatDate(salesData.date_to)}
+          </Typography>
-          </p>
+          <div className='flex items-center gap-4'>
-        </div> */}
+            <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>
     </>
   )
 }

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

@@ -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}

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

@@ -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 = {
+  const today = new Date()
-    totalProducts: data?.data.length,
+  const monthAgo = new Date()
-    totalQuantitySold: data?.data.reduce((sum, item) => sum + item.quantity_sold, 0),
+  monthAgo.setDate(today.getDate() - 30)
-    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 formatDate = (dateString: any) => {
+  const [filter, setFilter] = useState({
-    return new Date(dateString).toLocaleDateString('id-ID', {
+    date_from: formatDateDDMMYYYY(monthAgo),
-      month: 'short',
+    date_to: formatDateDDMMYYYY(today)
-      day: 'numeric'
   })
-  }
 
-  const transformSalesData = (data: any) => {
+  const { data, isLoading } = useProductSalesAnalytics({
-    return [
+    date_from: filter.date_from,
-      {
+    date_to: filter.date_to
-        type: 'products',
+  })
-        avatarIcon: 'tabler-package',
-        date: data.map((d: any) => d.product_name),
-        series: [{ data: data.map((d: any) => d.revenue) }]
-      }
-    ]
-  }
 
   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>
   )
 }

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

@@ -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_from: formatDateDDMMYYYY(monthAgo),
-    date_to: new Date().toString()
+    date_to: formatDateDDMMYYYY(today)
   })
 
   // Sample data - replace with your actual data
   const { data: profitData, isLoading } = useProfitLossAnalytics({
-    date_from: formatDateDDMMYYYY(filter.date_from),
+    date_from: filter.date_from,
-    date_to: formatDateDDMMYYYY(filter.date_to)
+    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]}
+              value={formatForInputDate(profitData?.date_from || new Date())}
-                onChange={e => {}}
+              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>
     </>
   )
 }

src/components/layout/shared/Loading.tsx

@@ -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>
   )

src/services/api.ts

@@ -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)

src/services/mutations/inventories.ts

@@ -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 }
 }

src/types/services/inventory.ts

@@ -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
+}

src/utils/transform.ts

@@ -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)
 

src/views/apps/ecommerce/products/list/ProductListTable.tsx

@@ -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>

src/views/apps/ecommerce/stock/adjustment/AdjustmentStockDrawer.tsx

@@ -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>({
+  const [formData, setFormData] = useState<InventoryRestockRequest>({
-    product_id: '',
     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(
+    restockInventory.mutate(formData, {
-      { ...formData, delta: Number(formData.delta) },
-      {
       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'
+            label='Quantity'
-            name='delta'
+            name='quantity'
-            value={formData.delta}
+            value={formData.items[0].quantity}
-            onChange={handleInputChange}
+            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}>
+            <Button variant='contained' type='submit' disabled={restockInventory.isPending}>
-              {isCreating ? 'Adjusting...' : 'Adjust'}
+              {restockInventory.isPending ? 'Saving...' : 'Save'}
             </Button>
             <Button variant='tonal' color='error' type='reset' onClick={handleReset}>
               Discard