src/services/mutations/unitConventor.ts

@@ -1,52 +0,0 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-toastify'
-import { api } from '../api'
-import { IngredientUnitConverterRequest } from '@/types/services/productRecipe'
-
-export const useUnitConventorMutation = () => {
-  const queryClient = useQueryClient()
-
-  const createUnitConventer = useMutation({
-    mutationFn: async (newUnitConventer: IngredientUnitConverterRequest) => {
-      const response = await api.post('/unit-converters', newUnitConventer)
-      return response.data
-    },
-    onSuccess: () => {
-      toast.success('UnitConventer created successfully!')
-      queryClient.invalidateQueries({ queryKey: ['unitConventers'] })
-    },
-    onError: (error: any) => {
-      toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
-    }
-  })
-
-  const updateUnitConventer = useMutation({
-    mutationFn: async ({ id, payload }: { id: string; payload: IngredientUnitConverterRequest }) => {
-      const response = await api.put(`/unit-converters/${id}`, payload)
-      return response.data
-    },
-    onSuccess: () => {
-      toast.success('UnitConventer updated successfully!')
-      queryClient.invalidateQueries({ queryKey: ['unit-converters'] })
-    },
-    onError: (error: any) => {
-      toast.error(error.response?.data?.errors?.[0]?.cause || 'Update failed')
-    }
-  })
-
-  const deleteUnitConventer = useMutation({
-    mutationFn: async (id: string) => {
-      const response = await api.delete(`/unit-converters/${id}`)
-      return response.data
-    },
-    onSuccess: () => {
-      toast.success('UnitConventer deleted successfully!')
-      queryClient.invalidateQueries({ queryKey: ['unitConventers'] })
-    },
-    onError: (error: any) => {
-      toast.error(error.response?.data?.errors?.[0]?.cause || 'Delete failed')
-    }
-  })
-
-  return { createUnitConventer, updateUnitConventer, deleteUnitConventer }
-}

src/services/queries/ingredients.ts

@@ -1,7 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { Ingredients } from '../../types/services/ingredient'
 import { api } from '../api'
-import { Ingredient } from '@/types/services/productRecipe'
 
 interface IngredientsQueryParams {
   page?: number
@@ -35,13 +34,3 @@ export function useIngredients(params: IngredientsQueryParams = {}) {
     }
   })
 }
-
-export function useIngredientById(id: string) {
-  return useQuery<Ingredient>({
-    queryKey: ['ingredients', id],
-    queryFn: async () => {
-      const res = await api.get(`/ingredients/${id}`)
-      return res.data.data
-    }
-  })
-}

src/services/queries/vendor.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { api } from '../api'
-import { Vendor, Vendors } from '@/types/services/vendor'
+import { Vendors } from '@/types/services/vendor'
 
 interface VendorQueryParams {
   page?: number
@@ -34,13 +34,3 @@ export function useVendors(params: VendorQueryParams = {}) {
     }
   })
 }
-
-export function useVendorById(id: string) {
-  return useQuery<Vendor>({
-    queryKey: ['vendors', id],
-    queryFn: async () => {
-      const res = await api.get(`/vendors/${id}`)
-      return res.data.data
-    }
-  })
-}

src/types/services/productRecipe.ts

@@ -1,75 +1,56 @@
 export interface Product {
-  ID: string
+  ID: string;
-  OrganizationID: string
+  OrganizationID: string;
-  CategoryID: string
+  CategoryID: string;
-  SKU: string
+  SKU: string;
-  Name: string
+  Name: string;
-  Description: string | null
+  Description: string | null;
-  Price: number
+  Price: number;
-  Cost: number
+  Cost: number;
-  BusinessType: string
+  BusinessType: string;
-  ImageURL: string
+  ImageURL: string;
-  PrinterType: string
+  PrinterType: string;
-  UnitID: string | null
+  UnitID: string | null;
-  HasIngredients: boolean
+  HasIngredients: boolean;
-  Metadata: Record<string, any>
+  Metadata: Record<string, any>;
-  IsActive: boolean
+  IsActive: boolean;
-  CreatedAt: string // ISO date string
+  CreatedAt: string; // ISO date string
-  UpdatedAt: string // ISO date string
+  UpdatedAt: string; // ISO date string
 }
 
 export interface Ingredient {
-  id: string
+  id: string;
-  organization_id: string
+  organization_id: string;
-  outlet_id: string | null
+  outlet_id: string | null;
-  name: string
+  name: string;
-  unit_id: string
+  unit_id: string;
-  cost: number
+  cost: number;
-  stock: number
+  stock: number;
-  is_semi_finished: boolean
+  is_semi_finished: boolean;
-  is_active: boolean
+  is_active: boolean;
-  metadata: Record<string, any>
+  metadata: Record<string, any>;
-  created_at: string
+  created_at: string;
-  updated_at: string
+  updated_at: string;
-  unit: IngredientUnit
 }
 
 export interface ProductRecipe {
-  id: string
+  id: string;
-  organization_id: string
+  organization_id: string;
-  outlet_id: string | null
+  outlet_id: string | null;
-  product_id: string
+  product_id: string;
-  variant_id: string | null
+  variant_id: string | null;
-  ingredient_id: string
+  ingredient_id: string;
-  quantity: number
+  quantity: number;
-  created_at: string
+  created_at: string;
-  updated_at: string
+  updated_at: string;
-  product: Product
+  product: Product;
-  ingredient: Ingredient
+  ingredient: Ingredient;
 }
 
 export interface ProductRecipeRequest {
-  product_id: string
+  product_id: string;
-  variant_id: string | null
+  variant_id: string | null;
-  ingredient_id: string
+  ingredient_id: string;
-  quantity: number
+  quantity: number;
-  outlet_id: string | null
+  outlet_id: string | null;
-}
-
-export interface IngredientUnit {
-  id: string
-  organization_id: string
-  outlet_id: string
-  name: string
-  abbreviation: string
-  is_active: boolean
-  created_at: string
-  updated_at: string
-}
-
-export interface IngredientUnitConverterRequest {
-  ingredient_id: string
-  from_unit_id: string
-  to_unit_id: string
-  conversion_factor: number
 }

src/views/apps/ecommerce/products/ingredient/detail/IngedientUnitConversionDrawer.tsx

@@ -1,6 +1,6 @@
 'use client'
 // React Imports
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 
 // MUI Imports
 import Button from '@mui/material/Button'
@@ -17,121 +17,101 @@ import { useForm, Controller } from 'react-hook-form'
 
 // Component Imports
 import CustomTextField from '@core/components/mui/TextField'
-import { Ingredient } from '@/types/services/productRecipe'
-import { useUnits } from '@/services/queries/units'
-import { useUnitConventorMutation } from '@/services/mutations/unitConventor'
-
-// Interface Integration
-export interface IngredientUnitConverterRequest {
-  ingredient_id: string
-  from_unit_id: string
-  to_unit_id: string
-  conversion_factor: number
-}
 
 type Props = {
   open: boolean
   handleClose: () => void
-  setData?: (data: IngredientUnitConverterRequest) => void
+  setData?: (data: any) => void
-  data?: Ingredient // Contains ingredientId, unit info, and cost
 }
 
 type UnitConversionType = {
-  satuan: string // This will be from_unit_id
+  satuan: string
   quantity: number
-  unit: string // This will be to_unit_id (from data)
+  unit: string
-  hargaBeli: number // Calculated as factor * ingredientCost
+  hargaBeli: number
   hargaJual: number
   isDefault: boolean
 }
 
+type FormValidateType = {
+  conversions: UnitConversionType[]
+}
+
+// Vars
+const initialConversion: UnitConversionType = {
+  satuan: 'Box',
+  quantity: 12,
+  unit: 'Pcs',
+  hargaBeli: 3588000,
+  hargaJual: 5988000,
+  isDefault: false
+}
+
 const IngedientUnitConversionDrawer = (props: Props) => {
   // Props
-  const { open, handleClose, setData, data } = props
+  const { open, handleClose, setData } = props
-
-  // Extract values from data prop with safe defaults
-  const ingredientId = data?.id || ''
-  const toUnitId = data?.unit_id || data?.unit?.id || ''
-  const ingredientCost = data?.cost || 0
-
-  const {
-    data: units,
-    isLoading,
-    error,
-    isFetching
-  } = useUnits({
-    page: 1,
-    limit: 20
-  })
-
-  // Vars - initial state with values from data
-  const getInitialConversion = () => ({
-    satuan: '',
-    quantity: 1,
-    unit: toUnitId, // Set from data
-    hargaBeli: ingredientCost, // Will be calculated as factor * ingredientCost
-    hargaJual: 0,
-    isDefault: true
-  })
 
   // States
-  const [conversion, setConversion] = useState<UnitConversionType>(getInitialConversion())
+  const [conversions, setConversions] = useState<UnitConversionType[]>([initialConversion])
-  const { createUnitConventer } = useUnitConventorMutation()
 
   // Hooks
   const {
     control,
     reset: resetForm,
     handleSubmit,
-    setValue,
     formState: { errors }
-  } = useForm<UnitConversionType>({
+  } = useForm<FormValidateType>({
-    defaultValues: getInitialConversion()
+    defaultValues: {
-  })
+      conversions: [initialConversion]
-
-  // Update form when data changes
-  useEffect(() => {
-    if (toUnitId || ingredientCost) {
-      const updatedConversion = getInitialConversion()
-      setConversion(updatedConversion)
-      resetForm(updatedConversion)
     }
-  }, [toUnitId, ingredientCost, resetForm])
+  })
 
   // Functions untuk konversi unit
-  const handleChangeConversion = (field: keyof UnitConversionType, value: any) => {
+  const handleTambahBaris = () => {
-    const newConversion = { ...conversion, [field]: value }
+    const newConversion: UnitConversionType = {
-    setConversion(newConversion)
+      satuan: '',
-    setValue(field, value)
+      quantity: 0,
+      unit: '',
+      hargaBeli: 0,
+      hargaJual: 0,
+      isDefault: false
+    }
+    setConversions([...conversions, newConversion])
   }
 
-  const onSubmit = (data: UnitConversionType) => {
+  const handleHapusBaris = (index: number) => {
-    // Transform form data to IngredientUnitConverterRequest
+    if (conversions.length > 1) {
-    const converterRequest: IngredientUnitConverterRequest = {
+      const newConversions = conversions.filter((_, i) => i !== index)
-      ingredient_id: ingredientId,
+      setConversions(newConversions)
-      from_unit_id: conversion.satuan,
+    }
-      to_unit_id: toUnitId, // Use toUnitId from data prop
-      conversion_factor: conversion.quantity
   }
 
-    console.log('Unit conversion request:', converterRequest)
+  const handleChangeConversion = (index: number, field: keyof UnitConversionType, value: any) => {
+    const newConversions = [...conversions]
+    newConversions[index] = { ...newConversions[index], [field]: value }
+    setConversions(newConversions)
+  }
 
-    // if (setData) {
+  const handleToggleDefault = (index: number) => {
-    //   setData(converterRequest)
+    const newConversions = conversions.map((conversion, i) => ({
-    // }
+      ...conversion,
-    createUnitConventer.mutate(converterRequest, {
+      isDefault: i === index
-      onSuccess: () => {
+    }))
+    setConversions(newConversions)
+  }
+
+  const onSubmit = (data: FormValidateType) => {
+    console.log('Unit conversions:', conversions)
+    if (setData) {
+      setData(conversions)
+    }
     handleClose()
-        resetForm(getInitialConversion())
-      }
-    })
   }
 
   const handleReset = () => {
     handleClose()
-    const resetData = getInitialConversion()
+    setConversions([initialConversion])
-    setConversion(resetData)
+    resetForm({ conversions: [initialConversion] })
-    resetForm(resetData)
   }
 
   const formatNumber = (value: number) => {
@@ -142,12 +122,6 @@ const IngedientUnitConversionDrawer = (props: Props) => {
     return parseInt(value.replace(/\./g, '')) || 0
   }
 
-  // Calculate total purchase price: factor * ingredientCost
-  const totalPurchasePrice = conversion.quantity * ingredientCost
-
-  // Validation to ensure all required fields are provided
-  const isValidForSubmit = ingredientId && conversion.satuan && toUnitId && conversion.quantity > 0
-
   return (
     <Drawer
       open={open}
@@ -181,37 +155,17 @@ const IngedientUnitConversionDrawer = (props: Props) => {
             <i className='tabler-x text-2xl text-textPrimary' />
           </IconButton>
         </div>
-        {!ingredientId && (
-          <Box sx={{ px: 3, pb: 2 }}>
-            <Typography variant='body2' color='error'>
-              Warning: Ingredient data is required for conversion
-            </Typography>
-          </Box>
-        )}
-        {ingredientId && (
-          <Box sx={{ px: 3, pb: 2 }}>
-            <Typography variant='body2' color='text.secondary'>
-              Converting for: {data?.name || `Ingredient ${ingredientId}`}
-            </Typography>
-            {ingredientCost > 0 && (
-              <Typography variant='body2' color='text.secondary'>
-                Base cost per {units?.data.find(u => u.id === toUnitId)?.name || 'unit'}: Rp{' '}
-                {formatNumber(ingredientCost)}
-              </Typography>
-            )}
-          </Box>
-        )}
       </Box>
 
       {/* Scrollable Content */}
       <Box sx={{ flex: 1, overflowY: 'auto' }}>
-        <form id='unit-conversion-form' onSubmit={handleSubmit(onSubmit)}>
+        <form id='unit-conversion-form' onSubmit={handleSubmit(data => onSubmit(data))}>
           <div className='flex flex-col gap-6 p-6'>
             {/* Header Kolom */}
             <Grid container spacing={2} alignItems='center' className='bg-gray-50 p-3 rounded-lg'>
               <Grid size={2}>
                 <Typography variant='body2' fontWeight='medium'>
-                  From Unit
+                  Satuan
                 </Typography>
               </Grid>
               <Grid size={1} className='text-center'>
@@ -221,20 +175,20 @@ const IngedientUnitConversionDrawer = (props: Props) => {
               </Grid>
               <Grid size={1.5}>
                 <Typography variant='body2' fontWeight='medium'>
-                  Factor
+                  Jumlah
                 </Typography>
               </Grid>
               <Grid size={1.5}>
                 <Typography variant='body2' fontWeight='medium'>
-                  To Unit
+                  Unit
                 </Typography>
               </Grid>
-              <Grid size={2.5}>
+              <Grid size={2}>
                 <Typography variant='body2' fontWeight='medium'>
                   Harga Beli
                 </Typography>
               </Grid>
-              <Grid size={2.5}>
+              <Grid size={2}>
                 <Typography variant='body2' fontWeight='medium'>
                   Harga Jual
                 </Typography>
@@ -244,48 +198,37 @@ const IngedientUnitConversionDrawer = (props: Props) => {
                   Default
                 </Typography>
               </Grid>
+              <Grid size={1}>
+                <Typography variant='body2' fontWeight='medium'>
+                  Action
+                </Typography>
+              </Grid>
             </Grid>
 
-            {/* Form Input Row */}
+            {/* Baris Konversi */}
-            <Grid container spacing={2} alignItems='center' className='py-2'>
+            {conversions.map((conversion, index) => (
-              {/* From Unit (Satuan) */}
+              <Grid container spacing={2} alignItems='center' key={index} className='py-2'>
-              <Grid size={2}>
+                <Grid size={0.5}>
-                <div className='flex items-center gap-2'>
+                  <Typography variant='body2' color='text.secondary'>
-                  <Typography variant='body2' fontWeight='medium'>
+                    {index + 1}
-                    1
                   </Typography>
-                  <Controller
+                </Grid>
-                    name='satuan'
+
-                    control={control}
+                {/* Satuan */}
-                    rules={{ required: 'From unit wajib dipilih' }}
+                <Grid size={1.5}>
-                    render={({ field }) => (
                   <CustomTextField
-                        {...field}
                     select
                     fullWidth
                     size='small'
-                        error={!!errors.satuan}
+                    value={conversion.satuan}
-                        onChange={e => {
+                    onChange={e => handleChangeConversion(index, 'satuan', e.target.value)}
-                          field.onChange(e.target.value)
-                          handleChangeConversion('satuan', e.target.value)
-                        }}
                   >
-                        {units?.data
+                    <MenuItem value='Box'>Box</MenuItem>
-                          .filter(unit => unit.id !== toUnitId) // Prevent selecting same unit as target
+                    <MenuItem value='Kg'>Kg</MenuItem>
-                          .map(unit => (
+                    <MenuItem value='Liter'>Liter</MenuItem>
-                            <MenuItem key={unit.id} value={unit.id}>
+                    <MenuItem value='Pack'>Pack</MenuItem>
-                              {unit.name}
+                    <MenuItem value='Pcs'>Pcs</MenuItem>
-                            </MenuItem>
-                          )) ?? []}
                   </CustomTextField>
-                    )}
-                  />
-                </div>
-                {errors.satuan && (
-                  <Typography variant='caption' color='error' className='mt-1'>
-                    {errors.satuan.message}
-                  </Typography>
-                )}
                 </Grid>
 
                 {/* Tanda sama dengan */}
@@ -293,106 +236,59 @@ const IngedientUnitConversionDrawer = (props: Props) => {
                   <Typography variant='h6'>=</Typography>
                 </Grid>
 
-              {/* Conversion Factor (Quantity) */}
+                {/* Quantity */}
                 <Grid size={1.5}>
-                <Controller
-                  name='quantity'
-                  control={control}
-                  rules={{
-                    required: 'Conversion factor wajib diisi',
-                    min: { value: 0.01, message: 'Minimal 0.01' }
-                  }}
-                  render={({ field }) => (
                   <CustomTextField
-                      {...field}
                     fullWidth
                     size='small'
                     type='number'
-                      error={!!errors.quantity}
+                    value={conversion.quantity}
-                      onChange={e => {
+                    onChange={e => handleChangeConversion(index, 'quantity', parseInt(e.target.value) || 0)}
-                        const value = parseFloat(e.target.value) || 0
-                        field.onChange(value)
-                        handleChangeConversion('quantity', value)
-                      }}
                   />
-                  )}
-                />
-                {errors.quantity && (
-                  <Typography variant='caption' color='error' className='mt-1'>
-                    {errors.quantity.message}
-                  </Typography>
-                )}
                 </Grid>
 
-              {/* To Unit - Disabled because it comes from data */}
+                {/* Unit */}
                 <Grid size={1.5}>
                   <CustomTextField
                     select
                     fullWidth
                     size='small'
-                  value={toUnitId}
+                    value={conversion.unit}
-                  disabled
+                    onChange={e => handleChangeConversion(index, 'unit', e.target.value)}
-                  InputProps={{
-                    sx: { backgroundColor: 'grey.100' }
-                  }}
                   >
-                  {units?.data.map(unit => (
+                    <MenuItem value='Pcs'>Pcs</MenuItem>
-                    <MenuItem key={unit.id} value={unit.id}>
+                    <MenuItem value='Kg'>Kg</MenuItem>
-                      {unit.name}
+                    <MenuItem value='Gram'>Gram</MenuItem>
-                    </MenuItem>
+                    <MenuItem value='Liter'>Liter</MenuItem>
-                  )) ?? []}
+                    <MenuItem value='ML'>ML</MenuItem>
                   </CustomTextField>
                 </Grid>
 
-              {/* Harga Beli - Calculated as factor * ingredientCost */}
+                {/* Harga Beli */}
-              <Grid size={2.5}>
+                <Grid size={2}>
                   <CustomTextField
                     fullWidth
                     size='small'
-                  value={formatNumber(totalPurchasePrice)}
+                    value={formatNumber(conversion.hargaBeli)}
-                  disabled
+                    onChange={e => handleChangeConversion(index, 'hargaBeli', parseNumber(e.target.value))}
-                  InputProps={{
-                    sx: { backgroundColor: 'grey.100' }
-                  }}
-                  placeholder='Calculated purchase price'
                   />
                 </Grid>
 
                 {/* Harga Jual */}
-              <Grid size={2.5}>
+                <Grid size={2}>
-                <Controller
-                  name='hargaJual'
-                  control={control}
-                  rules={{
-                    min: { value: 0, message: 'Tidak boleh negatif' }
-                  }}
-                  render={({ field }) => (
                   <CustomTextField
                     fullWidth
                     size='small'
-                      error={!!errors.hargaJual}
                     value={formatNumber(conversion.hargaJual)}
-                      onChange={e => {
+                    onChange={e => handleChangeConversion(index, 'hargaJual', parseNumber(e.target.value))}
-                        const value = parseNumber(e.target.value)
-                        field.onChange(value)
-                        handleChangeConversion('hargaJual', value)
-                      }}
-                      placeholder='Optional'
                   />
-                  )}
-                />
-                {errors.hargaJual && (
-                  <Typography variant='caption' color='error' className='mt-1'>
-                    {errors.hargaJual.message}
-                  </Typography>
-                )}
                 </Grid>
 
                 {/* Default Star */}
                 <Grid size={1} className='text-center'>
                   <IconButton
                     size='small'
-                  onClick={() => handleChangeConversion('isDefault', !conversion.isDefault)}
+                    onClick={() => handleToggleDefault(index)}
                     sx={{
                       color: conversion.isDefault ? 'warning.main' : 'grey.400'
                     }}
@@ -400,67 +296,48 @@ const IngedientUnitConversionDrawer = (props: Props) => {
                     <i className={conversion.isDefault ? 'tabler-star-filled' : 'tabler-star'} />
                   </IconButton>
                 </Grid>
+
+                {/* Delete Button */}
+                <Grid size={1} className='text-center'>
+                  {conversions.length > 1 && (
+                    <IconButton
+                      size='small'
+                      onClick={() => handleHapusBaris(index)}
+                      sx={{
+                        color: 'error.main',
+                        border: 1,
+                        borderColor: 'error.main',
+                        '&:hover': {
+                          backgroundColor: 'error.light',
+                          borderColor: 'error.main'
+                        }
+                      }}
+                    >
+                      <i className='tabler-trash' />
+                    </IconButton>
+                  )}
                 </Grid>
+              </Grid>
+            ))}
 
-            {/* Conversion Preview */}
+            {/* Tambah Baris Button */}
-            {conversion.quantity > 0 && conversion.satuan && toUnitId && (
+            <div className='flex items-center justify-start'>
-              <Box className='bg-green-50 p-4 rounded-lg border-l-4 border-green-500'>
+              <Button
-                <Typography variant='body2' fontWeight='medium' className='mb-2'>
+                variant='outlined'
-                  Conversion Preview:
+                startIcon={<i className='tabler-plus' />}
-                </Typography>
+                onClick={handleTambahBaris}
-                <Typography variant='body2' className='mb-1'>
+                sx={{
-                  <strong>1 {units?.data.find(u => u.id === conversion.satuan)?.name || 'Unit'}</strong> ={' '}
+                  color: 'primary.main',
-                  <strong>
+                  borderColor: 'primary.main',
-                    {conversion.quantity} {units?.data.find(u => u.id === toUnitId)?.name || 'Unit'}
+                  '&:hover': {
-                  </strong>
+                    backgroundColor: 'primary.light',
-                </Typography>
+                    borderColor: 'primary.main'
-                <Typography variant='caption' color='text.secondary'>
+                  }
-                  Conversion Factor: {conversion.quantity}
+                }}
-                </Typography>
+              >
-              </Box>
+                Tambah baris
-            )}
+              </Button>
-
+            </div>
-            {/* Price Summary */}
-            {conversion.quantity > 0 && (ingredientCost > 0 || conversion.hargaJual > 0) && (
-              <Box className='bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500'>
-                <Typography variant='body2' fontWeight='medium' className='mb-2'>
-                  Price Summary:
-                </Typography>
-                {ingredientCost > 0 && (
-                  <>
-                    <Typography variant='body2'>
-                      Total Purchase Price (1 {units?.data.find(u => u.id === conversion.satuan)?.name || 'From Unit'}):
-                      Rp {formatNumber(totalPurchasePrice)}
-                    </Typography>
-                    <Typography variant='body2'>
-                      Unit Cost per {units?.data.find(u => u.id === toUnitId)?.name || 'To Unit'}: Rp{' '}
-                      {formatNumber(ingredientCost)}
-                    </Typography>
-                  </>
-                )}
-                {conversion.hargaJual > 0 && (
-                  <>
-                    <Typography variant='body2'>
-                      Total Selling Price (1 {units?.data.find(u => u.id === conversion.satuan)?.name || 'From Unit'}):
-                      Rp {formatNumber(conversion.hargaJual)}
-                    </Typography>
-                    <Typography variant='body2'>
-                      Unit Selling Price per {units?.data.find(u => u.id === toUnitId)?.name || 'To Unit'}: Rp{' '}
-                      {formatNumber(Math.round(conversion.hargaJual / conversion.quantity))}
-                    </Typography>
-                  </>
-                )}
-                {ingredientCost > 0 && conversion.hargaJual > 0 && (
-                  <Typography variant='body2' className='mt-2 text-blue-700'>
-                    Total Margin: Rp {formatNumber(conversion.hargaJual - totalPurchasePrice)} (
-                    {totalPurchasePrice > 0
-                      ? (((conversion.hargaJual - totalPurchasePrice) / totalPurchasePrice) * 100).toFixed(1)
-                      : 0}
-                    %)
-                  </Typography>
-                )}
-              </Box>
-            )}
           </div>
         </form>
       </Box>
@@ -478,21 +355,13 @@ const IngedientUnitConversionDrawer = (props: Props) => {
         }}
       >
         <div className='flex items-center gap-4'>
-          <Button variant='contained' type='submit' form='unit-conversion-form' disabled={!isValidForSubmit}>
+          <Button variant='contained' type='submit' form='unit-conversion-form'>
-            Simpan Konversi
+            Simpan
           </Button>
-          <Button variant='tonal' color='error' onClick={handleReset}>
+          <Button variant='tonal' color='error' onClick={() => handleReset()}>
             Batal
           </Button>
         </div>
-        {!isValidForSubmit && (
-          <Typography variant='caption' color='error' className='mt-2'>
-            Please fill in all required fields: {!ingredientId && 'Ingredient Data, '}
-            {!conversion.satuan && 'From Unit, '}
-            {!toUnitId && 'To Unit (from ingredient data), '}
-            {conversion.quantity <= 0 && 'Conversion Factor'}
-          </Typography>
-        )}
       </Box>
     </Drawer>
   )

src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailInfo.tsx

@@ -1,19 +1,14 @@
-import { Ingredient } from '@/types/services/productRecipe'
 import { formatCurrency } from '@/utils/transform'
 import { Card, CardHeader, Chip, Typography } from '@mui/material'
 
-interface Props {
+const IngredientDetailInfo = () => {
-  data: Ingredient | undefined
-}
-
-const IngredientDetailInfo = ({ data }: Props) => {
   return (
     <Card>
       <CardHeader
         title={
           <div className='flex items-center gap-3'>
             <Typography variant='h4' component='h1' className='font-bold'>
-              {data?.name ?? '-'}
+              Tepung Terigu
             </Typography>
             <Chip label={'Active'} color={'success'} size='small' />
           </div>
@@ -22,7 +17,7 @@ const IngredientDetailInfo = ({ data }: Props) => {
           <div className='flex flex-col gap-1 mt-2'>
             <div className='flex gap-4'>
               <Typography variant='body2'>
-                <span className='font-semibold'>Cost:</span> {formatCurrency(data?.cost ?? 0)}
+                <span className='font-semibold'>Cost:</span> {formatCurrency(5000)}
               </Typography>
             </div>
           </div>

src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx

@@ -2,13 +2,8 @@
 import React, { useState } from 'react'
 import { Card, CardContent, CardHeader, Typography, Button, Box, Stack } from '@mui/material'
 import IngedientUnitConversionDrawer from './IngedientUnitConversionDrawer' // Sesuaikan dengan path file Anda
-import { Ingredient } from '@/types/services/productRecipe'
 
-interface Props {
+const IngredientDetailUnit = () => {
-  data: Ingredient | undefined
-}
-
-const IngredientDetailUnit = ({ data }: Props) => {
   // State untuk mengontrol drawer
   const [openConversionDrawer, setOpenConversionDrawer] = useState(false)
 
@@ -39,7 +34,7 @@ const IngredientDetailUnit = ({ data }: Props) => {
                 Satuan Dasar
               </Typography>
               <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
-                : {data?.unit.name ?? '-'}
+                : Pcs
               </Typography>
             </Box>
           </Stack>
@@ -66,7 +61,6 @@ const IngredientDetailUnit = ({ data }: Props) => {
         open={openConversionDrawer}
         handleClose={handleCloseConversionDrawer}
         setData={handleSetConversionData}
-        data={data}
       />
     </>
   )

src/views/apps/ecommerce/products/ingredient/detail/index.tsx

@@ -6,18 +6,11 @@ import IngredientDetailInfo from './IngredientDetailInfo'
 import IngredientDetailUnit from './IngredientDetailUnit'
 import IngredientDetailStockAdjustmentDrawer from './IngredientDetailStockAdjustmentDrawer' // Sesuaikan dengan path file Anda
 import { Button } from '@mui/material'
-import { useParams } from 'next/navigation'
-import { useIngredientById } from '@/services/queries/ingredients'
 
 const IngredientDetail = () => {
   // State untuk mengontrol stock adjustment drawer
   const [openStockAdjustmentDrawer, setOpenStockAdjustmentDrawer] = useState(false)
 
-  const params = useParams()
-  const id = params?.id
-
-  const { data, isLoading } = useIngredientById(id as string)
-
   // Function untuk membuka stock adjustment drawer
   const handleOpenStockAdjustmentDrawer = () => {
     setOpenStockAdjustmentDrawer(true)
@@ -39,7 +32,7 @@ const IngredientDetail = () => {
     <>
       <Grid container spacing={6}>
         <Grid size={{ xs: 12, lg: 8, md: 7 }}>
-          <IngredientDetailInfo data={data} />
+          <IngredientDetailInfo />
         </Grid>
         <Grid size={{ xs: 12, lg: 4, md: 5 }}>
           <Button
@@ -58,7 +51,7 @@ const IngredientDetail = () => {
           >
             Penyesuaian Stok
           </Button>
-          <IngredientDetailUnit data={data} />
+          <IngredientDetailUnit />
         </Grid>
       </Grid>
 

src/views/apps/vendor/detail/vendor-overview/VendorDetails.tsx

@@ -1,28 +1,20 @@
-'use client'
-
 // MUI Imports
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
 import Chip from '@mui/material/Chip'
 import Divider from '@mui/material/Divider'
+import Button from '@mui/material/Button'
+import type { ButtonProps } from '@mui/material/Button'
+
+// Type Imports
+import type { ThemeColor } from '@core/types'
 
 // Component Imports
+import EditUserInfo from '@components/dialogs/edit-user-info'
+import ConfirmationDialog from '@components/dialogs/confirmation-dialog'
+import OpenDialogOnElementClick from '@components/dialogs/OpenDialogOnElementClick'
 import CustomAvatar from '@core/components/mui/Avatar'
-import { useParams } from 'next/navigation'
-import { useVendorById } from '@/services/queries/vendor'
-import Loading from '@/components/layout/shared/Loading'
-import { getInitials } from '@/utils/getInitials'
-import OpenDialogOnElementClick from '@/components/dialogs/OpenDialogOnElementClick'
-import { Box, Button, ButtonProps, CircularProgress } from '@mui/material'
-import ConfirmationDialog from '@/components/dialogs/confirmation-dialog'
-import EditUserInfo from '@/components/dialogs/edit-user-info'
-import { ThemeColor } from '@/@core/types'
-import { useState } from 'react'
-import AddVendorDrawer from '../../list/AddVendorDrawer'
-import ConfirmDeleteDialog from '@/components/dialogs/confirm-delete'
-import { useRouter } from 'next/router'
-import { useVendorsMutation } from '@/services/mutations/vendor'
 
 // Vars
 const userData = {
@@ -41,25 +33,7 @@ const userData = {
 }
 
 const VendorDetails = () => {
-  const [editVendorOpen, setEditVendorOpen] = useState(false)
+  // Vars
-  const [openConfirm, setOpenConfirm] = useState(false)
-
-  const params = useParams()
-  const id = params?.id ?? ''
-
-  const { data: vendor, isLoading, error } = useVendorById(id as string)
-
-  const { deleteVendor } = useVendorsMutation()
-
-  const handleDelete = () => {
-    deleteVendor.mutate(id as string, {
-      onSuccess: () => {
-        setOpenConfirm(false)
-        window.history.back()
-      }
-    })
-  }
-
   const buttonProps = (children: string, color: ThemeColor, variant: ButtonProps['variant']): ButtonProps => ({
     children,
     color,
@@ -68,31 +42,13 @@ const VendorDetails = () => {
 
   return (
     <>
-      {isLoading ? (
-        <Box
-          position='absolute'
-          top={0}
-          left={0}
-          right={0}
-          bottom={0}
-          display='flex'
-          alignItems='center'
-          justifyContent='center'
-          bgcolor='rgba(255,255,255,0.7)'
-          zIndex={1}
-        >
-          <CircularProgress size={24} />
-        </Box>
-      ) : (
       <Card>
         <CardContent className='flex flex-col pbs-12 gap-6'>
           <div className='flex flex-col gap-6'>
             <div className='flex items-center justify-center flex-col gap-4'>
               <div className='flex flex-col items-center gap-4'>
-                  {/* <CustomAvatar alt='vendor-profile' variant='rounded' size={120}>
+                <CustomAvatar alt='user-profile' src='/images/avatars/1.png' variant='rounded' size={120} />
-                    {getInitials(vendor?.name as string)}
+                <Typography variant='h5'>{`${userData.firstName} ${userData.lastName}`}</Typography>
-                  </CustomAvatar> */}
-                  <Typography variant='h5'>{vendor?.name}</Typography>
               </div>
               <Chip label='Vendor' color='primary' size='small' variant='tonal' />
             </div>
@@ -105,22 +61,22 @@ const VendorDetails = () => {
             <div className='flex flex-col gap-2'>
               <div className='flex items-center flex-wrap gap-x-1.5'>
                 <Typography className='font-medium' color='text.primary'>
-                    Contact Person:
+                  Nama:
                 </Typography>
-                  <Typography>{vendor?.contact_person}</Typography>
+                <Typography>{`${userData.firstName} ${userData.lastName}`}</Typography>
               </div>
               <div className='flex items-center flex-wrap gap-x-1.5'>
                 <Typography className='font-medium' color='text.primary'>
                   Perusahaan:
                 </Typography>
-                  <Typography>{vendor?.name}</Typography>
+                <Typography>{userData.perusahaan}</Typography>
               </div>
               <div className='flex items-center flex-wrap gap-x-1.5'>
                 <Typography className='font-medium' color='text.primary'>
                   Email:
                 </Typography>
                 <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
-                    {vendor?.email}
+                  {userData.email}
                 </Typography>
               </div>
               <div className='flex items-center flex-wrap gap-x-1.5'>
@@ -128,7 +84,7 @@ const VendorDetails = () => {
                   Telepon:
                 </Typography>
                 <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
-                    {vendor?.phone_number}
+                  {userData.telepon}
                 </Typography>
               </div>
               <div className='flex items-center flex-wrap gap-x-1.5'>
@@ -136,7 +92,7 @@ const VendorDetails = () => {
                   Alamat Penagihan:
                 </Typography>
                 <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
-                    {vendor?.address ?? '-'}
+                  {userData.alamatPenagihan}
                 </Typography>
               </div>
             </div>
@@ -169,31 +125,8 @@ const VendorDetails = () => {
               </div>
             </div>
           </div>
-            <div className='flex gap-4 justify-center'>
-              <Button variant='contained' onClick={() => setEditVendorOpen(!editVendorOpen)} className='max-sm:is-full'>
-                Edit
-              </Button>
-              <Button
-                variant='contained'
-                color='error'
-                onClick={() => setOpenConfirm(!openConfirm)}
-                className='max-sm:is-full'
-              >
-                Hapus
-              </Button>
-            </div>
         </CardContent>
       </Card>
-      )}
-      <AddVendorDrawer open={editVendorOpen} handleClose={() => setEditVendorOpen(!editVendorOpen)} data={vendor} />
-      <ConfirmDeleteDialog
-        open={openConfirm}
-        onClose={() => setOpenConfirm(false)}
-        onConfirm={handleDelete}
-        isLoading={deleteVendor.isPending}
-        title='Delete Vendor'
-        message='Are you sure you want to delete this Vendor? This action cannot be undone.'
-      />
     </>
   )
 }

src/views/apps/vendor/list/AddVendorDrawer.tsx

@@ -1,5 +1,5 @@
 // React Imports
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 
 // MUI Imports
 import Button from '@mui/material/Button'
@@ -18,13 +18,12 @@ import { useForm, Controller } from 'react-hook-form'
 
 // Component Imports
 import CustomTextField from '@core/components/mui/TextField'
-import { Vendor, VendorRequest } from '@/types/services/vendor'
+import { VendorRequest } from '@/types/services/vendor'
 import { useVendorsMutation } from '@/services/mutations/vendor'
 
 type Props = {
   open: boolean
   handleClose: () => void
-  data?: Vendor // Data vendor untuk edit (jika ada)
 }
 
 type FormValidateType = {
@@ -52,9 +51,9 @@ const initialData: FormValidateType = {
   is_active: true
 }
 
-const AddEditVendorDrawer = (props: Props) => {
+const AddVendorDrawer = (props: Props) => {
   // Props
-  const { open, handleClose, data } = props
+  const { open, handleClose } = props
 
   // States
   const [showMore, setShowMore] = useState(false)
@@ -62,9 +61,6 @@ const AddEditVendorDrawer = (props: Props) => {
 
   const { createVendor, updateVendor } = useVendorsMutation()
 
-  // Determine if this is edit mode
-  const isEditMode = Boolean(data?.id)
-
   // Hooks
   const {
     control,
@@ -75,73 +71,29 @@ const AddEditVendorDrawer = (props: Props) => {
     defaultValues: initialData
   })
 
-  // Effect to populate form when editing
+  const handleFormSubmit = async (data: FormValidateType) => {
-  useEffect(() => {
-    if (isEditMode && data) {
-      // Populate form with existing data
-      const formData: FormValidateType = {
-        name: data.name || '',
-        email: data.email || '',
-        phone_number: data.phone_number || '',
-        address: data.address || '',
-        contact_person: data.contact_person || '',
-        tax_number: data.tax_number || '',
-        payment_terms: data.payment_terms || '',
-        notes: data.notes || '',
-        is_active: data.is_active ?? true
-      }
-
-      resetForm(formData)
-
-      // Show more fields if any optional field has data
-      const hasOptionalData = data.address || data.tax_number || data.payment_terms || data.notes
-      if (hasOptionalData) {
-        setShowMore(true)
-      }
-    } else {
-      // Reset to initial data for add mode
-      resetForm(initialData)
-      setShowMore(false)
-    }
-  }, [data, isEditMode, resetForm])
-
-  const handleFormSubmit = async (formData: FormValidateType) => {
     try {
       setIsSubmitting(true)
 
       // Create VendorRequest object
       const vendorRequest: VendorRequest = {
-        name: formData.name,
+        name: data.name,
-        email: formData.email || undefined,
+        email: data.email || undefined,
-        phone_number: formData.phone_number || undefined,
+        phone_number: data.phone_number || undefined,
-        address: formData.address || undefined,
+        address: data.address || undefined,
-        contact_person: formData.contact_person || undefined,
+        contact_person: data.contact_person || undefined,
-        tax_number: formData.tax_number || undefined,
+        tax_number: data.tax_number || undefined,
-        payment_terms: formData.payment_terms || undefined,
+        payment_terms: data.payment_terms || undefined,
-        notes: formData.notes || undefined,
+        notes: data.notes || undefined,
-        is_active: formData.is_active
+        is_active: data.is_active
       }
 
-      if (isEditMode && data?.id) {
-        // Update existing vendor
-        updateVendor.mutate(
-          { id: data.id, payload: vendorRequest },
-          {
-            onSuccess: () => {
-              handleReset()
-              handleClose()
-            }
-          }
-        )
-      } else {
-        // Create new vendor
       createVendor.mutate(vendorRequest, {
         onSuccess: () => {
           handleReset()
           handleClose()
         }
       })
-      }
     } catch (error) {
       console.error('Error submitting vendor:', error)
       // Handle error (show toast, etc.)
@@ -184,7 +136,7 @@ const AddEditVendorDrawer = (props: Props) => {
         }}
       >
         <div className='flex items-center justify-between plb-5 pli-6'>
-          <Typography variant='h5'>{isEditMode ? 'Edit Vendor' : 'Tambah Vendor Baru'}</Typography>
+          <Typography variant='h5'>Tambah Vendor Baru</Typography>
           <IconButton size='small' onClick={handleReset}>
             <i className='tabler-x text-2xl text-textPrimary' />
           </IconButton>
@@ -407,7 +359,7 @@ const AddEditVendorDrawer = (props: Props) => {
       >
         <div className='flex items-center gap-4'>
           <Button variant='contained' type='submit' form='vendor-form' disabled={isSubmitting}>
-            {isSubmitting ? (isEditMode ? 'Mengupdate...' : 'Menyimpan...') : isEditMode ? 'Update' : 'Simpan'}
+            {isSubmitting ? 'Menyimpan...' : 'Simpan'}
           </Button>
           <Button variant='outlined' color='error' onClick={handleReset} disabled={isSubmitting}>
             Batal
@@ -418,4 +370,4 @@ const AddEditVendorDrawer = (props: Props) => {
   )
 }
 
-export default AddEditVendorDrawer
+export default AddVendorDrawer

src/views/apps/vendor/list/VendorListTable.tsx

@@ -183,12 +183,12 @@ const VendorListTable = () => {
         cell: ({ row }) => (
           <div className='flex items-center gap-4'>
             <div className='flex flex-col'>
-              <Link href={getLocalizedUrl(`/apps/vendor/${row.original.id}/detail`, locale as Locale)}>
+              <Link href={getLocalizedUrl(`/apps/vendor/detail`, locale as Locale)}>
                 <Typography className='font-medium cursor-pointer hover:underline text-primary'>
                   {row.original.contact_person}
                 </Typography>
-                <Typography variant='body2'>{row.original.email}</Typography>
               </Link>
+              <Typography variant='body2'>{row.original.email}</Typography>
             </div>
           </div>
         )