Create Unit Conventer

src/services/mutations/unitConventor.ts

@@ -0,0 +1,52 @@
+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,6 +1,7 @@
 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
@@ -34,3 +35,13 @@ 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 { Vendors } from '@/types/services/vendor'
+import { Vendor, Vendors } from '@/types/services/vendor'
 
 interface VendorQueryParams {
   page?: number
@@ -34,3 +34,13 @@ 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,56 +1,75 @@
 export interface Product {
-  ID: string;
-  OrganizationID: string;
-  CategoryID: string;
-  SKU: string;
-  Name: string;
-  Description: string | null;
-  Price: number;
-  Cost: number;
-  BusinessType: string;
-  ImageURL: string;
-  PrinterType: string;
-  UnitID: string | null;
-  HasIngredients: boolean;
-  Metadata: Record<string, any>;
-  IsActive: boolean;
-  CreatedAt: string; // ISO date string
-  UpdatedAt: string; // ISO date string
+  ID: string
+  OrganizationID: string
+  CategoryID: string
+  SKU: string
+  Name: string
+  Description: string | null
+  Price: number
+  Cost: number
+  BusinessType: string
+  ImageURL: string
+  PrinterType: string
+  UnitID: string | null
+  HasIngredients: boolean
+  Metadata: Record<string, any>
+  IsActive: boolean
+  CreatedAt: string // ISO date string
+  UpdatedAt: string // ISO date string
 }
 
 export interface Ingredient {
-  id: string;
-  organization_id: string;
-  outlet_id: string | null;
-  name: string;
-  unit_id: string;
-  cost: number;
-  stock: number;
-  is_semi_finished: boolean;
-  is_active: boolean;
-  metadata: Record<string, any>;
-  created_at: string;
-  updated_at: string;
+  id: string
+  organization_id: string
+  outlet_id: string | null
+  name: string
+  unit_id: string
+  cost: number
+  stock: number
+  is_semi_finished: boolean
+  is_active: boolean
+  metadata: Record<string, any>
+  created_at: string
+  updated_at: string
+  unit: IngredientUnit
 }
 
 export interface ProductRecipe {
-  id: string;
-  organization_id: string;
-  outlet_id: string | null;
-  product_id: string;
-  variant_id: string | null;
-  ingredient_id: string;
-  quantity: number;
-  created_at: string;
-  updated_at: string;
-  product: Product;
-  ingredient: Ingredient;
+  id: string
+  organization_id: string
+  outlet_id: string | null
+  product_id: string
+  variant_id: string | null
+  ingredient_id: string
+  quantity: number
+  created_at: string
+  updated_at: string
+  product: Product
+  ingredient: Ingredient
 }
 
 export interface ProductRecipeRequest {
-  product_id: string;
-  variant_id: string | null;
-  ingredient_id: string;
-  quantity: number;
-  outlet_id: string | null;
+  product_id: string
+  variant_id: string | null
+  ingredient_id: string
+  quantity: number
+  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 } from 'react'
+import { useState, useEffect } from 'react'
 
 // MUI Imports
 import Button from '@mui/material/Button'
@@ -17,101 +17,121 @@ 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: any) => void
+  setData?: (data: IngredientUnitConverterRequest) => void
+  data?: Ingredient // Contains ingredientId, unit info, and cost
 }
 
 type UnitConversionType = {
-  satuan: string
+  satuan: string // This will be from_unit_id
   quantity: number
-  unit: string
-  hargaBeli: number
+  unit: string // This will be to_unit_id (from data)
+  hargaBeli: number // Calculated as factor * ingredientCost
   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 } = props
+  const { open, handleClose, setData, data } = 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 [conversions, setConversions] = useState<UnitConversionType[]>([initialConversion])
+  const [conversion, setConversion] = useState<UnitConversionType>(getInitialConversion())
+  const { createUnitConventer } = useUnitConventorMutation()
 
   // Hooks
   const {
     control,
     reset: resetForm,
     handleSubmit,
+    setValue,
     formState: { errors }
-  } = useForm<FormValidateType>({
-    defaultValues: {
-      conversions: [initialConversion]
-    }
+  } = useForm<UnitConversionType>({
+    defaultValues: getInitialConversion()
   })
 
+  // Update form when data changes
+  useEffect(() => {
+    if (toUnitId || ingredientCost) {
+      const updatedConversion = getInitialConversion()
+      setConversion(updatedConversion)
+      resetForm(updatedConversion)
+    }
+  }, [toUnitId, ingredientCost, resetForm])
+
   // Functions untuk konversi unit
-  const handleTambahBaris = () => {
-    const newConversion: UnitConversionType = {
-      satuan: '',
-      quantity: 0,
-      unit: '',
-      hargaBeli: 0,
-      hargaJual: 0,
-      isDefault: false
-    }
-    setConversions([...conversions, newConversion])
+  const handleChangeConversion = (field: keyof UnitConversionType, value: any) => {
+    const newConversion = { ...conversion, [field]: value }
+    setConversion(newConversion)
+    setValue(field, value)
   }
 
-  const handleHapusBaris = (index: number) => {
-    if (conversions.length > 1) {
-      const newConversions = conversions.filter((_, i) => i !== index)
-      setConversions(newConversions)
-    }
+  const onSubmit = (data: UnitConversionType) => {
+    // Transform form data to IngredientUnitConverterRequest
+    const converterRequest: IngredientUnitConverterRequest = {
+      ingredient_id: ingredientId,
+      from_unit_id: conversion.satuan,
+      to_unit_id: toUnitId, // Use toUnitId from data prop
+      conversion_factor: conversion.quantity
     }
 
-  const handleChangeConversion = (index: number, field: keyof UnitConversionType, value: any) => {
-    const newConversions = [...conversions]
-    newConversions[index] = { ...newConversions[index], [field]: value }
-    setConversions(newConversions)
-  }
+    console.log('Unit conversion request:', converterRequest)
 
-  const handleToggleDefault = (index: number) => {
-    const newConversions = conversions.map((conversion, i) => ({
-      ...conversion,
-      isDefault: i === index
-    }))
-    setConversions(newConversions)
-  }
-
-  const onSubmit = (data: FormValidateType) => {
-    console.log('Unit conversions:', conversions)
-    if (setData) {
-      setData(conversions)
-    }
+    // if (setData) {
+    //   setData(converterRequest)
+    // }
+    createUnitConventer.mutate(converterRequest, {
+      onSuccess: () => {
         handleClose()
+        resetForm(getInitialConversion())
+      }
+    })
   }
 
   const handleReset = () => {
     handleClose()
-    setConversions([initialConversion])
-    resetForm({ conversions: [initialConversion] })
+    const resetData = getInitialConversion()
+    setConversion(resetData)
+    resetForm(resetData)
   }
 
   const formatNumber = (value: number) => {
@@ -122,6 +142,12 @@ 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}
@@ -155,17 +181,37 @@ 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(data => onSubmit(data))}>
+        <form id='unit-conversion-form' onSubmit={handleSubmit(onSubmit)}>
           <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'>
-                  Satuan
+                  From Unit
                 </Typography>
               </Grid>
               <Grid size={1} className='text-center'>
@@ -175,20 +221,20 @@ const IngedientUnitConversionDrawer = (props: Props) => {
               </Grid>
               <Grid size={1.5}>
                 <Typography variant='body2' fontWeight='medium'>
-                  Jumlah
+                  Factor
                 </Typography>
               </Grid>
               <Grid size={1.5}>
                 <Typography variant='body2' fontWeight='medium'>
-                  Unit
+                  To Unit
                 </Typography>
               </Grid>
-              <Grid size={2}>
+              <Grid size={2.5}>
                 <Typography variant='body2' fontWeight='medium'>
                   Harga Beli
                 </Typography>
               </Grid>
-              <Grid size={2}>
+              <Grid size={2.5}>
                 <Typography variant='body2' fontWeight='medium'>
                   Harga Jual
                 </Typography>
@@ -198,37 +244,48 @@ const IngedientUnitConversionDrawer = (props: Props) => {
                   Default
                 </Typography>
               </Grid>
-              <Grid size={1}>
+            </Grid>
+
+            {/* Form Input Row */}
+            <Grid container spacing={2} alignItems='center' className='py-2'>
+              {/* From Unit (Satuan) */}
+              <Grid size={2}>
+                <div className='flex items-center gap-2'>
                   <Typography variant='body2' fontWeight='medium'>
-                  Action
+                    1
                   </Typography>
-              </Grid>
-            </Grid>
-
-            {/* Baris Konversi */}
-            {conversions.map((conversion, index) => (
-              <Grid container spacing={2} alignItems='center' key={index} className='py-2'>
-                <Grid size={0.5}>
-                  <Typography variant='body2' color='text.secondary'>
-                    {index + 1}
-                  </Typography>
-                </Grid>
-
-                {/* Satuan */}
-                <Grid size={1.5}>
+                  <Controller
+                    name='satuan'
+                    control={control}
+                    rules={{ required: 'From unit wajib dipilih' }}
+                    render={({ field }) => (
                       <CustomTextField
+                        {...field}
                         select
                         fullWidth
                         size='small'
-                    value={conversion.satuan}
-                    onChange={e => handleChangeConversion(index, 'satuan', e.target.value)}
+                        error={!!errors.satuan}
+                        onChange={e => {
+                          field.onChange(e.target.value)
+                          handleChangeConversion('satuan', e.target.value)
+                        }}
                       >
-                    <MenuItem value='Box'>Box</MenuItem>
-                    <MenuItem value='Kg'>Kg</MenuItem>
-                    <MenuItem value='Liter'>Liter</MenuItem>
-                    <MenuItem value='Pack'>Pack</MenuItem>
-                    <MenuItem value='Pcs'>Pcs</MenuItem>
+                        {units?.data
+                          .filter(unit => unit.id !== toUnitId) // Prevent selecting same unit as target
+                          .map(unit => (
+                            <MenuItem key={unit.id} value={unit.id}>
+                              {unit.name}
+                            </MenuItem>
+                          )) ?? []}
                       </CustomTextField>
+                    )}
+                  />
+                </div>
+                {errors.satuan && (
+                  <Typography variant='caption' color='error' className='mt-1'>
+                    {errors.satuan.message}
+                  </Typography>
+                )}
               </Grid>
 
               {/* Tanda sama dengan */}
@@ -236,59 +293,106 @@ const IngedientUnitConversionDrawer = (props: Props) => {
                 <Typography variant='h6'>=</Typography>
               </Grid>
 
-                {/* Quantity */}
+              {/* Conversion Factor (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'
-                    value={conversion.quantity}
-                    onChange={e => handleChangeConversion(index, 'quantity', parseInt(e.target.value) || 0)}
+                      error={!!errors.quantity}
+                      onChange={e => {
+                        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>
 
-                {/* Unit */}
+              {/* To Unit - Disabled because it comes from data */}
               <Grid size={1.5}>
                 <CustomTextField
                   select
                   fullWidth
                   size='small'
-                    value={conversion.unit}
-                    onChange={e => handleChangeConversion(index, 'unit', e.target.value)}
+                  value={toUnitId}
+                  disabled
+                  InputProps={{
+                    sx: { backgroundColor: 'grey.100' }
+                  }}
                 >
-                    <MenuItem value='Pcs'>Pcs</MenuItem>
-                    <MenuItem value='Kg'>Kg</MenuItem>
-                    <MenuItem value='Gram'>Gram</MenuItem>
-                    <MenuItem value='Liter'>Liter</MenuItem>
-                    <MenuItem value='ML'>ML</MenuItem>
+                  {units?.data.map(unit => (
+                    <MenuItem key={unit.id} value={unit.id}>
+                      {unit.name}
+                    </MenuItem>
+                  )) ?? []}
                 </CustomTextField>
               </Grid>
 
-                {/* Harga Beli */}
-                <Grid size={2}>
+              {/* Harga Beli - Calculated as factor * ingredientCost */}
+              <Grid size={2.5}>
                 <CustomTextField
                   fullWidth
                   size='small'
-                    value={formatNumber(conversion.hargaBeli)}
-                    onChange={e => handleChangeConversion(index, 'hargaBeli', parseNumber(e.target.value))}
+                  value={formatNumber(totalPurchasePrice)}
+                  disabled
+                  InputProps={{
+                    sx: { backgroundColor: 'grey.100' }
+                  }}
+                  placeholder='Calculated purchase price'
                 />
               </Grid>
 
               {/* Harga Jual */}
-                <Grid size={2}>
+              <Grid size={2.5}>
+                <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 => handleChangeConversion(index, 'hargaJual', parseNumber(e.target.value))}
+                      onChange={e => {
+                        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={() => handleToggleDefault(index)}
+                  onClick={() => handleChangeConversion('isDefault', !conversion.isDefault)}
                   sx={{
                     color: conversion.isDefault ? 'warning.main' : 'grey.400'
                   }}
@@ -296,48 +400,67 @@ const IngedientUnitConversionDrawer = (props: Props) => {
                   <i className={conversion.isDefault ? 'tabler-star-filled' : 'tabler-star'} />
                 </IconButton>
               </Grid>
+            </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>
+            {/* Conversion Preview */}
+            {conversion.quantity > 0 && conversion.satuan && toUnitId && (
+              <Box className='bg-green-50 p-4 rounded-lg border-l-4 border-green-500'>
+                <Typography variant='body2' fontWeight='medium' className='mb-2'>
+                  Conversion Preview:
+                </Typography>
+                <Typography variant='body2' className='mb-1'>
+                  <strong>1 {units?.data.find(u => u.id === conversion.satuan)?.name || 'Unit'}</strong> ={' '}
+                  <strong>
+                    {conversion.quantity} {units?.data.find(u => u.id === toUnitId)?.name || 'Unit'}
+                  </strong>
+                </Typography>
+                <Typography variant='caption' color='text.secondary'>
+                  Conversion Factor: {conversion.quantity}
+                </Typography>
+              </Box>
             )}
-                </Grid>
-              </Grid>
-            ))}
 
-            {/* Tambah Baris Button */}
-            <div className='flex items-center justify-start'>
-              <Button
-                variant='outlined'
-                startIcon={<i className='tabler-plus' />}
-                onClick={handleTambahBaris}
-                sx={{
-                  color: 'primary.main',
-                  borderColor: 'primary.main',
-                  '&:hover': {
-                    backgroundColor: 'primary.light',
-                    borderColor: 'primary.main'
-                  }
-                }}
-              >
-                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>
@@ -355,13 +478,21 @@ const IngedientUnitConversionDrawer = (props: Props) => {
         }}
       >
         <div className='flex items-center gap-4'>
-          <Button variant='contained' type='submit' form='unit-conversion-form'>
-            Simpan
+          <Button variant='contained' type='submit' form='unit-conversion-form' disabled={!isValidForSubmit}>
+            Simpan Konversi
           </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,14 +1,19 @@
+import { Ingredient } from '@/types/services/productRecipe'
 import { formatCurrency } from '@/utils/transform'
 import { Card, CardHeader, Chip, Typography } from '@mui/material'
 
-const IngredientDetailInfo = () => {
+interface Props {
+  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'>
-              Tepung Terigu
+              {data?.name ?? '-'}
             </Typography>
             <Chip label={'Active'} color={'success'} size='small' />
           </div>
@@ -17,7 +22,7 @@ const IngredientDetailInfo = () => {
           <div className='flex flex-col gap-1 mt-2'>
             <div className='flex gap-4'>
               <Typography variant='body2'>
-                <span className='font-semibold'>Cost:</span> {formatCurrency(5000)}
+                <span className='font-semibold'>Cost:</span> {formatCurrency(data?.cost ?? 0)}
               </Typography>
             </div>
           </div>

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

@@ -2,8 +2,13 @@
 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'
 
-const IngredientDetailUnit = () => {
+interface Props {
+  data: Ingredient | undefined
+}
+
+const IngredientDetailUnit = ({ data }: Props) => {
   // State untuk mengontrol drawer
   const [openConversionDrawer, setOpenConversionDrawer] = useState(false)
 
@@ -34,7 +39,7 @@ const IngredientDetailUnit = () => {
                 Satuan Dasar
               </Typography>
               <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
-                : Pcs
+                : {data?.unit.name ?? '-'}
               </Typography>
             </Box>
           </Stack>
@@ -61,6 +66,7 @@ const IngredientDetailUnit = () => {
         open={openConversionDrawer}
         handleClose={handleCloseConversionDrawer}
         setData={handleSetConversionData}
+        data={data}
       />
     </>
   )

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

@@ -6,11 +6,18 @@ 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)
@@ -32,7 +39,7 @@ const IngredientDetail = () => {
     <>
       <Grid container spacing={6}>
         <Grid size={{ xs: 12, lg: 8, md: 7 }}>
-          <IngredientDetailInfo />
+          <IngredientDetailInfo data={data} />
         </Grid>
         <Grid size={{ xs: 12, lg: 4, md: 5 }}>
           <Button
@@ -51,7 +58,7 @@ const IngredientDetail = () => {
           >
             Penyesuaian Stok
           </Button>
-          <IngredientDetailUnit />
+          <IngredientDetailUnit data={data} />
         </Grid>
       </Grid>
 

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

@@ -1,20 +1,28 @@
+'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 = {
@@ -33,7 +41,25 @@ const userData = {
 }
 
 const VendorDetails = () => {
-  // Vars
+  const [editVendorOpen, setEditVendorOpen] = useState(false)
+  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,
@@ -42,13 +68,31 @@ 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='user-profile' src='/images/avatars/1.png' variant='rounded' size={120} />
-                <Typography variant='h5'>{`${userData.firstName} ${userData.lastName}`}</Typography>
+                  {/* <CustomAvatar alt='vendor-profile' variant='rounded' size={120}>
+                    {getInitials(vendor?.name as string)}
+                  </CustomAvatar> */}
+                  <Typography variant='h5'>{vendor?.name}</Typography>
                 </div>
                 <Chip label='Vendor' color='primary' size='small' variant='tonal' />
               </div>
@@ -61,22 +105,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'>
-                  Nama:
+                    Contact Person:
                   </Typography>
-                <Typography>{`${userData.firstName} ${userData.lastName}`}</Typography>
+                  <Typography>{vendor?.contact_person}</Typography>
                 </div>
                 <div className='flex items-center flex-wrap gap-x-1.5'>
                   <Typography className='font-medium' color='text.primary'>
                     Perusahaan:
                   </Typography>
-                <Typography>{userData.perusahaan}</Typography>
+                  <Typography>{vendor?.name}</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' }}>
-                  {userData.email}
+                    {vendor?.email}
                   </Typography>
                 </div>
                 <div className='flex items-center flex-wrap gap-x-1.5'>
@@ -84,7 +128,7 @@ const VendorDetails = () => {
                     Telepon:
                   </Typography>
                   <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
-                  {userData.telepon}
+                    {vendor?.phone_number}
                   </Typography>
                 </div>
                 <div className='flex items-center flex-wrap gap-x-1.5'>
@@ -92,7 +136,7 @@ const VendorDetails = () => {
                     Alamat Penagihan:
                   </Typography>
                   <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
-                  {userData.alamatPenagihan}
+                    {vendor?.address ?? '-'}
                   </Typography>
                 </div>
               </div>
@@ -125,8 +169,31 @@ 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 } from 'react'
+import { useState, useEffect } from 'react'
 
 // MUI Imports
 import Button from '@mui/material/Button'
@@ -18,12 +18,13 @@ import { useForm, Controller } from 'react-hook-form'
 
 // Component Imports
 import CustomTextField from '@core/components/mui/TextField'
-import { VendorRequest } from '@/types/services/vendor'
+import { Vendor, 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 = {
@@ -51,9 +52,9 @@ const initialData: FormValidateType = {
   is_active: true
 }
 
-const AddVendorDrawer = (props: Props) => {
+const AddEditVendorDrawer = (props: Props) => {
   // Props
-  const { open, handleClose } = props
+  const { open, handleClose, data } = props
 
   // States
   const [showMore, setShowMore] = useState(false)
@@ -61,6 +62,9 @@ const AddVendorDrawer = (props: Props) => {
 
   const { createVendor, updateVendor } = useVendorsMutation()
 
+  // Determine if this is edit mode
+  const isEditMode = Boolean(data?.id)
+
   // Hooks
   const {
     control,
@@ -71,29 +75,73 @@ const AddVendorDrawer = (props: Props) => {
     defaultValues: initialData
   })
 
-  const handleFormSubmit = async (data: FormValidateType) => {
+  // Effect to populate form when editing
+  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: data.name,
-        email: data.email || undefined,
-        phone_number: data.phone_number || undefined,
-        address: data.address || undefined,
-        contact_person: data.contact_person || undefined,
-        tax_number: data.tax_number || undefined,
-        payment_terms: data.payment_terms || undefined,
-        notes: data.notes || undefined,
-        is_active: data.is_active
+        name: formData.name,
+        email: formData.email || undefined,
+        phone_number: formData.phone_number || undefined,
+        address: formData.address || undefined,
+        contact_person: formData.contact_person || undefined,
+        tax_number: formData.tax_number || undefined,
+        payment_terms: formData.payment_terms || undefined,
+        notes: formData.notes || undefined,
+        is_active: formData.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.)
@@ -136,7 +184,7 @@ const AddVendorDrawer = (props: Props) => {
         }}
       >
         <div className='flex items-center justify-between plb-5 pli-6'>
-          <Typography variant='h5'>Tambah Vendor Baru</Typography>
+          <Typography variant='h5'>{isEditMode ? 'Edit Vendor' : 'Tambah Vendor Baru'}</Typography>
           <IconButton size='small' onClick={handleReset}>
             <i className='tabler-x text-2xl text-textPrimary' />
           </IconButton>
@@ -359,7 +407,7 @@ const AddVendorDrawer = (props: Props) => {
       >
         <div className='flex items-center gap-4'>
           <Button variant='contained' type='submit' form='vendor-form' disabled={isSubmitting}>
-            {isSubmitting ? 'Menyimpan...' : 'Simpan'}
+            {isSubmitting ? (isEditMode ? 'Mengupdate...' : 'Menyimpan...') : isEditMode ? 'Update' : 'Simpan'}
           </Button>
           <Button variant='outlined' color='error' onClick={handleReset} disabled={isSubmitting}>
             Batal
@@ -370,4 +418,4 @@ const AddVendorDrawer = (props: Props) => {
   )
 }
 
-export default AddVendorDrawer
+export default AddEditVendorDrawer

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/detail`, locale as Locale)}>
+              <Link href={getLocalizedUrl(`/apps/vendor/${row.original.id}/detail`, locale as Locale)}>
                 <Typography className='font-medium cursor-pointer hover:underline text-primary'>
                   {row.original.contact_person}
                 </Typography>
-              </Link>
                 <Typography variant='body2'>{row.original.email}</Typography>
+              </Link>
             </div>
           </div>
         )