feat: product recipes

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

@@ -3,7 +3,7 @@
 import React from 'react'
 import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
 import Loading from '../../../../../../components/layout/shared/Loading'
-import { formatCurrency, formatDate } from '../../../../../../utils/transform'
+import { formatCurrency, formatDate, formatShortCurrency } from '../../../../../../utils/transform'
 import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
 import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
 import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
@@ -55,7 +55,7 @@ const DashboardOverview = () => {
             <MetricCard
               iconClass='tabler-cash'
               title='Total Sales'
-              value={formatCurrency(salesData.overview.total_sales)}
+              value={formatShortCurrency(salesData.overview.total_sales)}
               bgColor='bg-green-500'
             />
             <MetricCard
@@ -68,7 +68,7 @@ const DashboardOverview = () => {
             <MetricCard
               iconClass='tabler-trending-up'
               title='Average Order Value'
-              value={formatCurrency(salesData.overview.average_order_value)}
+              value={formatShortCurrency(salesData.overview.average_order_value)}
               bgColor='bg-purple-500'
             />
             <MetricCard

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

@@ -1,66 +1,52 @@
 'use client'
 
-// MUI Imports
-import Grid from '@mui/material/Grid2'
-
-// Component Imports
-import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
-
-// Server Action Imports
-import Loading from '../../../../../../components/layout/shared/Loading'
+import React from 'react'
 import { useProfitLossAnalytics } from '../../../../../../services/queries/analytics'
-import { DailyData, ProductDataReport, ProfitLossReport } from '../../../../../../types/services/analytic'
-import EarningReportsWithTabs from '../../../../../../views/dashboards/crm/EarningReportsWithTabs'
+import { formatShortCurrency } from '../../../../../../utils/transform'
 import MultipleSeries from '../../../../../../views/dashboards/profit-loss/EarningReportWithTabs'
+import { DailyData, ProfitLossReport } from '../../../../../../types/services/analytic'
 
-function formatMetricName(metric: string): string {
-  const nameMap: { [key: string]: string } = {
-    revenue: 'Revenue',
-    cost: 'Cost',
-    gross_profit: 'Gross Profit',
-    gross_profit_margin: 'Gross Profit Margin (%)',
-    tax: 'Tax',
-    discount: 'Discount',
-    net_profit: 'Net Profit',
-    net_profit_margin: 'Net Profit Margin (%)',
-    orders: 'Orders'
+const DashboardProfitloss = () => {
+  // Sample data - replace with your actual data
+  const { data: profitData, isLoading } = useProfitLossAnalytics()
+
+  const formatCurrency = (amount: any) => {
+    return new Intl.NumberFormat('id-ID', {
+      style: 'currency',
+      currency: 'IDR',
+      minimumFractionDigits: 0
+    }).format(amount)
   }
 
-  return nameMap[metric] || metric.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
-}
-
-const DashboardProfitLoss = () => {
-  const { data, isLoading } = useProfitLossAnalytics()
+  const formatPercentage = (value: any) => {
+    return `${value.toFixed(2)}%`
+  }
 
   const formatDate = (dateString: any) => {
     return new Date(dateString).toLocaleDateString('id-ID', {
+      day: 'numeric',
       month: 'short',
-      day: 'numeric'
+      year: 'numeric'
     })
   }
 
-  const metrics = ['cost', 'revenue', 'gross_profit', 'net_profit']
-
-  const transformSalesData = (data: ProfitLossReport) => {
-    return [
-      {
-        type: 'products',
-        avatarIcon: 'tabler-package',
-        date: data.product_data.map((d: ProductDataReport) => d.product_name),
-        series: [{ data: data.product_data.map((d: ProductDataReport) => d.revenue) }]
-      }
-      // {
-      //   type: 'profits',
-      //   avatarIcon: 'tabler-currency-dollar',
-      //   date: data.data.map((d: DailyData) => formatDate(d.date)),
-      //   series: metrics.map(metric => ({
-      //     name: formatMetricName(metric as string),
-      //     data: data.data.map((item: any) => item[metric] as number)
-      //   }))
-      // }
-    ]
+  const getProfitabilityColor = (margin: any) => {
+    if (margin > 50) return 'text-green-600 bg-green-100'
+    if (margin > 0) return 'text-yellow-600 bg-yellow-100'
+    return 'text-red-600 bg-red-100'
   }
 
+  function formatMetricName(metric: string): string {
+    const nameMap: { [key: string]: string } = {
+      revenue: 'Revenue',
+      net_profit: 'Net Profit',
+    }
+
+    return nameMap[metric] || metric.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+  }
+
+  const metrics = ['revenue', 'net_profit']
+
   const transformMultipleData = (data: ProfitLossReport) => {
     return [
       {
@@ -75,58 +61,285 @@ const DashboardProfitLoss = () => {
     ]
   }
 
-  if (isLoading) return <Loading />
+  const MetricCard = ({ iconClass, title, value, subtitle, bgColor = 'bg-blue-500', isNegative = false }: any) => (
+    <div className='bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6'>
+      <div className='flex items-center justify-between'>
+        <div className='flex-1'>
+          <h3 className='text-sm font-medium text-gray-600 mb-2'>{title}</h3>
+          <p className={`text-2xl font-bold mb-1 ${isNegative ? 'text-red-600' : 'text-gray-900'}`}>{value}</p>
+          {subtitle && <p className='text-sm text-gray-500'>{subtitle}</p>}
+        </div>
+        <div className={`p-3 rounded-full ${bgColor} bg-opacity-10`}>
+          <i className={`${iconClass} text-[32px] ${bgColor.replace('bg-', 'text-')}`}></i>
+        </div>
+      </div>
+    </div>
+  )
 
   return (
-    <Grid container spacing={6}>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
-        <DistributedBarChartOrder
-          isLoading={isLoading}
-          title='Total Cost'
-          value={data?.summary.total_cost as number}
-          avatarIcon={'tabler-currency-dollar'}
-          avatarColor='primary'
-          avatarSkin='light'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
-        <DistributedBarChartOrder
-          isLoading={isLoading}
-          title='Total Rvenue'
-          value={data?.summary.total_revenue as number}
-          avatarIcon={'tabler-currency-dollar'}
-          avatarColor='info'
-          avatarSkin='light'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
-        <DistributedBarChartOrder
-          isLoading={isLoading}
-          title='Gross Profit'
-          value={data?.summary.gross_profit as number}
-          avatarIcon={'tabler-trending-up'}
-          avatarColor='warning'
-          avatarSkin='light'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
-        <DistributedBarChartOrder
-          isLoading={isLoading}
-          title='Net Profit'
-          value={data?.summary.net_profit as number}
-          avatarIcon={'tabler-currency-dollar'}
-          avatarColor='success'
-          avatarSkin='light'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, lg: 12 }}>
-        <EarningReportsWithTabs data={transformSalesData(data!)} />
-      </Grid>
-      <Grid size={{ xs: 12, lg: 12 }}>
-        <MultipleSeries data={transformMultipleData(data!)} />
-      </Grid>
-    </Grid>
+    <>
+      {profitData && (
+        <div>
+          {/* Header */}
+          <div className='mb-8'>
+            <h1 className='text-3xl font-bold text-gray-900 mb-2'>Profit Analysis Dashboard</h1>
+            <p className='text-gray-600'>
+              {formatDate(profitData.date_from)} - {formatDate(profitData.date_to)}
+            </p>
+          </div>
+
+          {/* Summary Metrics */}
+          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
+            <MetricCard
+              iconClass='tabler-currency-dollar'
+              title='Total Revenue'
+              value={formatShortCurrency(profitData.summary.total_revenue)}
+              bgColor='bg-green-500'
+            />
+            <MetricCard
+              iconClass='tabler-receipt'
+              title='Total Cost'
+              value={formatShortCurrency(profitData.summary.total_cost)}
+              bgColor='bg-red-500'
+            />
+            <MetricCard
+              iconClass='tabler-trending-up'
+              title='Gross Profit'
+              value={formatShortCurrency(profitData.summary.gross_profit)}
+              subtitle={`Margin: ${formatPercentage(profitData.summary.gross_profit_margin)}`}
+              bgColor='bg-blue-500'
+              isNegative={profitData.summary.gross_profit < 0}
+            />
+            <MetricCard
+              iconClass='tabler-percentage'
+              title='Profitability Ratio'
+              value={formatPercentage(profitData.summary.profitability_ratio)}
+              subtitle={`Avg Profit: ${formatShortCurrency(profitData.summary.average_profit)}`}
+              bgColor='bg-purple-500'
+            />
+          </div>
+
+          {/* Additional Summary Metrics */}
+          <div className='grid grid-cols-1 md:grid-cols-3 gap-6 mb-8'>
+            <div className='bg-white rounded-lg shadow-md p-6'>
+              <div className='flex items-center mb-4'>
+                <i className='tabler-wallet text-[24px] text-green-600 mr-2'></i>
+                <h3 className='text-lg font-semibold text-gray-900'>Net Profit</h3>
+              </div>
+              <p className='text-3xl font-bold text-green-600 mb-2'>
+                {formatShortCurrency(profitData.summary.net_profit)}
+              </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'>
+                <i className='tabler-shopping-cart text-[24px] text-blue-600 mr-2'></i>
+                <h3 className='text-lg font-semibold text-gray-900'>Total Orders</h3>
+              </div>
+              <p className='text-3xl font-bold text-blue-600'>{profitData.summary.total_orders}</p>
+            </div>
+            <div className='bg-white rounded-lg shadow-md p-6'>
+              <div className='flex items-center mb-4'>
+                <i className='tabler-discount text-[24px] text-orange-600 mr-2'></i>
+                <h3 className='text-lg font-semibold text-gray-900'>Tax & Discount</h3>
+              </div>
+              <p className='text-xl font-bold text-orange-600 mb-1'>
+                {formatShortCurrency(profitData.summary.total_tax + profitData.summary.total_discount)}
+              </p>
+              <p className='text-sm text-gray-600'>
+                Tax: {formatShortCurrency(profitData.summary.total_tax)} | Discount:{' '}
+                {formatShortCurrency(profitData.summary.total_discount)}
+              </p>
+            </div>
+          </div>
+
+          {/* Profit Chart */}
+          <div className='mb-8'>
+            <MultipleSeries data={transformMultipleData(profitData)} />
+          </div>
+
+          <div className='grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8'>
+            {/* Daily Breakdown */}
+            <div className='bg-white rounded-lg shadow-md'>
+              <div className='p-6'>
+                <div className='flex items-center mb-6'>
+                  <i className='tabler-calendar text-[24px] text-purple-500 mr-2'></i>
+                  <h2 className='text-xl font-semibold text-gray-900'>Daily Breakdown</h2>
+                </div>
+                <div className='overflow-x-auto'>
+                  <table className='min-w-full'>
+                    <thead>
+                      <tr className='bg-gray-50'>
+                        <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Date</th>
+                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
+                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
+                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
+                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
+                        <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Orders</th>
+                      </tr>
+                    </thead>
+                    <tbody className='bg-white divide-y divide-gray-200'>
+                      {profitData.data.map((day, index) => (
+                        <tr key={index} className='hover:bg-gray-50'>
+                          <td className='px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900'>
+                            {formatDate(day.date)}
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
+                            {formatCurrency(day.revenue)}
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
+                            {formatCurrency(day.cost)}
+                          </td>
+                          <td
+                            className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
+                              day.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
+                            }`}
+                          >
+                            {formatCurrency(day.gross_profit)}
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap text-right'>
+                            <span
+                              className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
+                                day.gross_profit_margin
+                              )}`}
+                            >
+                              {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>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+
+            {/* Top Performing Products */}
+            <div className='bg-white rounded-lg shadow-md'>
+              <div className='p-6'>
+                <div className='flex items-center mb-6'>
+                  <i className='tabler-trophy text-[24px] text-gold-500 mr-2'></i>
+                  <h2 className='text-xl font-semibold text-gray-900'>Top Performers</h2>
+                </div>
+                <div className='space-y-4'>
+                  {profitData.product_data
+                    .sort((a, b) => b.gross_profit - a.gross_profit)
+                    .slice(0, 5)
+                    .map((product, index) => (
+                      <div
+                        key={product.product_id}
+                        className='flex items-center justify-between p-4 bg-gray-50 rounded-lg'
+                      >
+                        <div className='flex items-center'>
+                          <span
+                            className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold mr-3 ${
+                              index === 0
+                                ? 'bg-yellow-500'
+                                : index === 1
+                                  ? 'bg-gray-400'
+                                  : index === 2
+                                    ? 'bg-orange-500'
+                                    : 'bg-blue-500'
+                            }`}
+                          >
+                            {index + 1}
+                          </span>
+                          <div>
+                            <h3 className='font-medium text-gray-900'>{product.product_name}</h3>
+                            <p className='text-sm text-gray-600'>{product.category_name}</p>
+                          </div>
+                        </div>
+                        <div className='text-right'>
+                          <p className={`font-bold ${product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+                            {formatCurrency(product.gross_profit)}
+                          </p>
+                          <p className='text-xs text-gray-500'>{formatPercentage(product.gross_profit_margin)}</p>
+                        </div>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Product Analysis Table */}
+          <div className='bg-white rounded-lg shadow-md'>
+            <div className='p-6'>
+              <div className='flex items-center mb-6'>
+                <i className='tabler-package text-[24px] text-green-500 mr-2'></i>
+                <h2 className='text-xl font-semibold text-gray-900'>Product Analysis</h2>
+              </div>
+              <div className='overflow-x-auto'>
+                <table className='min-w-full'>
+                  <thead>
+                    <tr className='bg-gray-50'>
+                      <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Product</th>
+                      <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase'>Category</th>
+                      <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Qty</th>
+                      <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Revenue</th>
+                      <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Cost</th>
+                      <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Profit</th>
+                      <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Margin</th>
+                      <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase'>Per Unit</th>
+                    </tr>
+                  </thead>
+                  <tbody className='bg-white divide-y divide-gray-200'>
+                    {profitData.product_data
+                      .sort((a, b) => b.gross_profit - a.gross_profit)
+                      .map(product => (
+                        <tr key={product.product_id} className='hover:bg-gray-50'>
+                          <td className='px-4 py-4 whitespace-nowrap'>
+                            <div className='text-sm font-medium text-gray-900'>{product.product_name}</div>
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap'>
+                            <span className='inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800'>
+                              {product.category_name}
+                            </span>
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
+                            {product.quantity_sold}
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
+                            {formatCurrency(product.revenue)}
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-red-600'>
+                            {formatCurrency(product.cost)}
+                          </td>
+                          <td
+                            className={`px-4 py-4 whitespace-nowrap text-right text-sm font-medium ${
+                              product.gross_profit >= 0 ? 'text-green-600' : 'text-red-600'
+                            }`}
+                          >
+                            {formatCurrency(product.gross_profit)}
+                          </td>
+                          <td className='px-4 py-4 whitespace-nowrap text-right'>
+                            <span
+                              className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getProfitabilityColor(
+                                product.gross_profit_margin
+                              )}`}
+                            >
+                              {formatPercentage(product.gross_profit_margin)}
+                            </span>
+                          </td>
+                          <td
+                            className={`px-4 py-4 whitespace-nowrap text-right text-sm ${
+                              product.profit_per_unit >= 0 ? 'text-green-600' : 'text-red-600'
+                            }`}
+                          >
+                            {formatCurrency(product.profit_per_unit)}
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   )
 }
 
-export default DashboardProfitLoss
+export default DashboardProfitloss

src/redux-store/index.ts

@@ -6,6 +6,7 @@ import customerReducer from '@/redux-store/slices/customer'
 import paymentMethodReducer from '@/redux-store/slices/paymentMethod'
 import ingredientReducer from '@/redux-store/slices/ingredient'
 import orderReducer from '@/redux-store/slices/order'
+import productRecipeReducer from '@/redux-store/slices/productRecipe'
 
 export const store = configureStore({
   reducer: {
@@ -13,7 +14,8 @@ export const store = configureStore({
     customerReducer,
     paymentMethodReducer,
     ingredientReducer,
-    orderReducer
+    orderReducer,
+    productRecipeReducer
   },
   middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: false })
 })

src/redux-store/slices/productRecipe.ts

@@ -0,0 +1,28 @@
+// Third-party Imports
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
+
+// Type Imports
+
+// Data Imports
+
+const initialState: { currentProductRecipe: any } = {
+  currentProductRecipe: {}
+}
+
+export const productRecipeSlice = createSlice({
+  name: 'productRecipe',
+  initialState,
+  reducers: {
+    setProductRecipe: (state, action: PayloadAction<any>) => {
+      state.currentProductRecipe = action.payload
+    },
+    resetProductRecipe: state => {
+      state.currentProductRecipe = initialState.currentProductRecipe
+    }
+  }
+})
+
+export const { setProductRecipe, resetProductRecipe } = productRecipeSlice.actions
+
+export default productRecipeSlice.reducer

src/services/mutations/productRecipes.ts

@@ -0,0 +1,45 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'react-toastify'
+import { ProductRecipeRequest } from '../../types/services/productRecipe'
+import { api } from '../api'
+
+export const useProductRecipesMutation = () => {
+  const queryClient = useQueryClient()
+
+  const createProductRecipe = useMutation({
+    mutationFn: async (newProductRecipe: ProductRecipeRequest) => {
+      const { variant_id, ...rest } = newProductRecipe
+
+      const cleanRequest = variant_id ? newProductRecipe : rest
+
+      const response = await api.post('/product-recipes', cleanRequest)
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success('Product Recipe created successfully!')
+      queryClient.invalidateQueries({ queryKey: ['product-recipes'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Create failed')
+    }
+  })
+
+  const updateProductRecipe = useMutation({
+    mutationFn: async ({ id, payload }: { id: string; payload: ProductRecipeRequest }) => {
+      const response = await api.put(`/product-recipes/${id}`, payload)
+      return response.data
+    },
+    onSuccess: () => {
+      toast.success('Product Recipe updated successfully!')
+      queryClient.invalidateQueries({ queryKey: ['product-recipes'] })
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.errors?.[0]?.cause || 'Update failed')
+    }
+  })
+
+  return {
+    createProductRecipe,
+    updateProductRecipe
+  }
+}

src/services/queries/productRecipes.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query'
+import { ProductRecipe } from '../../types/services/productRecipe'
+import { api } from '../api'
+
+export function useProductRecipesByProduct(productId: string) {
+  return useQuery<ProductRecipe[]>({
+    queryKey: ['product-recipes', productId],
+    queryFn: async () => {
+      const res = await api.get(`/product-recipes/product/${productId}`)
+      return res.data.data
+    }
+  })
+}

src/services/queries/products.ts

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
-import { Products } from '../../types/services/product'
+import { Product, Products } from '../../types/services/product'
 import { api } from '../api'
+import { ProductRecipe } from '../../types/services/productRecipe'
 
 interface ProductsQueryParams {
   page?: number
@@ -39,7 +40,7 @@ export function useProducts(params: ProductsQueryParams = {}) {
 }
 
 export function useProductById(id: string) {
-  return useQuery({
+  return useQuery<Product>({
     queryKey: ['product', id],
     queryFn: async () => {
       const res = await api.get(`/products/${id}`)

src/types/services/productRecipe.ts

@@ -0,0 +1,56 @@
+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
+}
+
+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;
+}
+
+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;
+}
+
+export interface ProductRecipeRequest {
+  product_id: string;
+  variant_id: string | null;
+  ingredient_id: string;
+  quantity: number;
+  outlet_id: string | null;
+}

src/utils/transform.ts

@@ -7,12 +7,23 @@ export const formatCurrency = (amount: number) => {
 }
 
 export const formatShortCurrency = (num: number): string => {
-  if (num >= 1_000_000) {
-    return (num / 1_000_000).toFixed(2) + 'M'
-  } else if (num >= 1_000) {
-    return (num / 1_000).toFixed(2) + 'k'
+  const formatNumber = (value: number, suffix: string) => {
+    const str = value.toFixed(2).replace(/\.00$/, '')
+    return str + suffix
   }
-  return num.toString()
+
+  const absNum = Math.abs(num)
+  let result: string
+
+  if (absNum >= 1_000_000) {
+    result = formatNumber(absNum / 1_000_000, 'M')
+  } else if (absNum >= 1_000) {
+    result = formatNumber(absNum / 1_000, 'k')
+  } else {
+    result = absNum.toString()
+  }
+
+  return num < 0 ? '-' + 'Rp ' + result : 'Rp ' + result
 }
 
 export const formatDate = (dateString: any) => {

src/views/apps/ecommerce/products/detail/AddRecipeDialog.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+// MUI Imports
+import Dialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+
+// Third-party Imports
+import { Autocomplete, Button, Grid2, MenuItem } from '@mui/material'
+import { useMemo, useState } from 'react'
+import CustomTextField from '../../../../../@core/components/mui/TextField'
+import DialogCloseButton from '../../../../../components/dialogs/DialogCloseButton'
+import { Product } from '../../../../../types/services/product'
+import { ProductRecipeRequest } from '../../../../../types/services/productRecipe'
+import { useOutlets } from '../../../../../services/queries/outlets'
+import { useDebounce } from 'use-debounce'
+import { useIngredients } from '../../../../../services/queries/ingredients'
+
+// Component Imports
+
+type PaymentMethodProps = {
+  open: boolean
+  setOpen: (open: boolean) => void
+  product: Product
+}
+
+const initialValues = {
+  product_id: '',
+  variant_id: '',
+  ingredient_id: '',
+  quantity: 0,
+  outlet_id: ''
+}
+
+const AddRecipeDialog = ({ open, setOpen, product }: PaymentMethodProps) => {
+  const [formData, setFormData] = useState<ProductRecipeRequest>(initialValues)
+
+  const [outletInput, setOutletInput] = useState('')
+  const [outletDebouncedInput] = useDebounce(outletInput, 500)
+  const [ingredientInput, setIngredientInput] = useState('')
+  const [ingredientDebouncedInput] = useDebounce(ingredientInput, 500)
+
+  const { data: outlets, isLoading: outletsLoading } = useOutlets({
+    search: outletDebouncedInput
+  })
+  const { data: ingredients, isLoading: ingredientsLoading } = useIngredients({
+    search: ingredientDebouncedInput
+  })
+
+  const outletOptions = useMemo(() => outlets?.outlets || [], [outlets])
+  const ingredientOptions = useMemo(() => ingredients?.data || [], [ingredients])
+
+  return (
+    <Dialog
+      fullWidth
+      open={open}
+      onClose={() => setOpen(false)}
+      maxWidth='sm'
+      scroll='body'
+      closeAfterTransition={false}
+      sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }}
+    >
+      <DialogCloseButton onClick={() => setOpen(false)} disableRipple>
+        <i className='tabler-x' />
+      </DialogCloseButton>
+      <DialogTitle variant='h4' className='flex gap-2 flex-col text-center sm:pbs-16 sm:pbe-10 sm:pli-16'>
+        Create Recipe
+      </DialogTitle>
+      <DialogContent className='pbs-0 sm:pli-16 sm:pbe-20 space-y-4'>
+        {product.variants && (
+          <CustomTextField
+            select
+            fullWidth
+            label='Variant'
+            value={formData.variant_id}
+            onChange={e => setFormData({ ...formData, variant_id: e.target.value })}
+          >
+            {product.variants.map((variant, index) => (
+              <MenuItem value={variant.id} key={index}>
+                {variant.name}
+              </MenuItem>
+            ))}
+          </CustomTextField>
+        )}
+        <Autocomplete
+          options={outletOptions}
+          loading={outletsLoading}
+          getOptionLabel={option => option.name}
+          value={outletOptions.find(p => p.id === formData.outlet_id) || null}
+          onInputChange={(event, newOutlettInput) => {
+            setOutletInput(newOutlettInput)
+          }}
+          onChange={(event, newValue) => {
+            setFormData({
+              ...formData,
+              outlet_id: newValue?.id || ''
+            })
+          }}
+          renderInput={params => (
+            <CustomTextField
+              {...params}
+              className=''
+              label='Outlet'
+              fullWidth
+              InputProps={{
+                ...params.InputProps,
+                endAdornment: <>{params.InputProps.endAdornment}</>
+              }}
+            />
+          )}
+        />
+        <Grid2 container spacing={2}>
+          <Grid2 size={{ xs: 6 }}>
+            <Autocomplete
+              options={ingredientOptions || []}
+              loading={ingredientsLoading}
+              getOptionLabel={option => option.name}
+              value={ingredientOptions?.find(p => p.id === formData.ingredient_id) || null}
+              onInputChange={(event, newIngredientInput) => {
+                setIngredientInput(newIngredientInput)
+              }}
+              onChange={(event, newValue) => {
+                setFormData({
+                  ...formData,
+                  ingredient_id: newValue?.id || ''
+                })
+              }}
+              renderInput={params => (
+                <CustomTextField
+                  {...params}
+                  className=''
+                  label='Ingredient'
+                  fullWidth
+                  InputProps={{
+                    ...params.InputProps,
+                    endAdornment: <>{params.InputProps.endAdornment}</>
+                  }}
+                />
+              )}
+            />
+          </Grid2>
+          <Grid2 size={{ xs: 4 }}>
+            <CustomTextField
+              type='number'
+              label='Quantity'
+              fullWidth
+              value={formData.quantity}
+              onChange={e => setFormData({ ...formData, quantity: Number(e.target.value) })}
+            />
+          </Grid2>
+          <Grid2 size={{ xs: 2 }}>
+            <Button variant='contained' color='primary' className='rounded-full' startIcon={<i className='tabler-plus' />} />
+          </Grid2>
+        </Grid2>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default AddRecipeDialog

src/views/apps/ecommerce/products/detail/AddRecipeDrawer.tsx

@@ -0,0 +1,227 @@
+// React Imports
+import { useMemo, useState } from 'react'
+
+// MUI Imports
+import Button from '@mui/material/Button'
+import Divider from '@mui/material/Divider'
+import Drawer from '@mui/material/Drawer'
+import IconButton from '@mui/material/IconButton'
+import Typography from '@mui/material/Typography'
+
+// Third-party Imports
+import PerfectScrollbar from 'react-perfect-scrollbar'
+
+// Type Imports
+
+// Component Imports
+import CustomTextField from '@core/components/mui/TextField'
+import { Autocomplete } from '@mui/material'
+import { useDispatch, useSelector } from 'react-redux'
+import { useDebounce } from 'use-debounce'
+import { RootState } from '../../../../../redux-store'
+import { resetProductRecipe } from '../../../../../redux-store/slices/productRecipe'
+import { useProductRecipesMutation } from '../../../../../services/mutations/productRecipes'
+import { useIngredients } from '../../../../../services/queries/ingredients'
+import { useOutlets } from '../../../../../services/queries/outlets'
+import { Product } from '../../../../../types/services/product'
+import { ProductRecipeRequest } from '../../../../../types/services/productRecipe'
+
+type Props = {
+  open: boolean
+  handleClose: () => void
+  product: Product
+}
+
+// Vars
+const initialData = {
+  outlet_id: '',
+  product_id: '',
+  variant_id: '',
+  ingredient_id: '',
+  quantity: 0
+}
+
+const AddRecipeDrawer = (props: Props) => {
+  const dispatch = useDispatch()
+
+  // Props
+  const { open, handleClose, product } = props
+
+  const { currentProductRecipe } = useSelector((state: RootState) => state.productRecipeReducer)
+
+  console.log('currentProductRecipe', currentProductRecipe)
+
+  const [outletInput, setOutletInput] = useState('')
+  const [outletDebouncedInput] = useDebounce(outletInput, 500)
+  const [ingredientInput, setIngredientInput] = useState('')
+  const [ingredientDebouncedInput] = useDebounce(ingredientInput, 500)
+  const [formData, setFormData] = useState<ProductRecipeRequest>(initialData)
+
+  const { data: outlets, isLoading: outletsLoading } = useOutlets({
+    search: outletDebouncedInput
+  })
+  const { data: ingredients, isLoading: ingredientsLoading } = useIngredients({
+    search: ingredientDebouncedInput
+  })
+
+  const outletOptions = useMemo(() => outlets?.outlets || [], [outlets])
+  const ingredientOptions = useMemo(() => ingredients?.data || [], [ingredients])
+
+  const { createProductRecipe, updateProductRecipe } = useProductRecipesMutation()
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault()
+
+    if (currentProductRecipe.id) {
+      updateProductRecipe.mutate(
+        { id: currentProductRecipe.id, payload: formData },
+        {
+          onSuccess: () => {
+            handleReset()
+          }
+        }
+      )
+    } else {
+      createProductRecipe.mutate(
+        { ...formData, product_id: product.id, variant_id: currentProductRecipe.variant?.ID || '' },
+        {
+          onSuccess: () => {
+            handleReset()
+          }
+        }
+      )
+    }
+  }
+
+  const handleReset = () => {
+    handleClose()
+    dispatch(resetProductRecipe())
+    setFormData(initialData)
+  }
+
+  const handleInputChange = (e: any) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  const setTitleDrawer = (recipe: any) => {
+    let title = 'Original'
+
+    if (recipe?.variant?.Name) {
+      title = recipe?.variant?.Name
+    }
+
+    return title
+  }
+
+  return (
+    <Drawer
+      open={open}
+      anchor='right'
+      variant='temporary'
+      onClose={handleReset}
+      ModalProps={{ keepMounted: true }}
+      sx={{ '& .MuiDrawer-paper': { width: { xs: 300, sm: 400 } } }}
+    >
+      <div className='flex items-center justify-between pli-6 plb-5'>
+        <Typography variant='h5'>{setTitleDrawer(currentProductRecipe)} Variant Ingredient</Typography>
+        <IconButton size='small' onClick={handleReset}>
+          <i className='tabler-x text-2xl' />
+        </IconButton>
+      </div>
+      <Divider />
+      <PerfectScrollbar options={{ wheelPropagation: false, suppressScrollX: true }}>
+        <div className='p-6'>
+          <form onSubmit={handleSubmit} className='flex flex-col gap-5'>
+            <Typography color='text.primary' className='font-medium'>
+              Basic Information
+            </Typography>
+            <Autocomplete
+              options={outletOptions}
+              loading={outletsLoading}
+              getOptionLabel={option => option.name}
+              value={outletOptions.find(p => p.id === formData.outlet_id) || null}
+              onInputChange={(event, newOutlettInput) => {
+                setOutletInput(newOutlettInput)
+              }}
+              onChange={(event, newValue) => {
+                setFormData({
+                  ...formData,
+                  outlet_id: newValue?.id || ''
+                })
+              }}
+              renderInput={params => (
+                <CustomTextField
+                  {...params}
+                  className=''
+                  label='Outlet'
+                  fullWidth
+                  InputProps={{
+                    ...params.InputProps,
+                    endAdornment: <>{params.InputProps.endAdornment}</>
+                  }}
+                />
+              )}
+            />
+            <Autocomplete
+              options={ingredientOptions || []}
+              loading={ingredientsLoading}
+              getOptionLabel={option => option.name}
+              value={ingredientOptions?.find(p => p.id === formData.ingredient_id) || null}
+              onInputChange={(event, newIngredientInput) => {
+                setIngredientInput(newIngredientInput)
+              }}
+              onChange={(event, newValue) => {
+                setFormData({
+                  ...formData,
+                  ingredient_id: newValue?.id || ''
+                })
+              }}
+              renderInput={params => (
+                <CustomTextField
+                  {...params}
+                  className=''
+                  label='Ingredient'
+                  fullWidth
+                  InputProps={{
+                    ...params.InputProps,
+                    endAdornment: <>{params.InputProps.endAdornment}</>
+                  }}
+                />
+              )}
+            />
+            <CustomTextField
+              type='number'
+              label='Quantity'
+              fullWidth
+              value={formData.quantity}
+              onChange={e => setFormData({ ...formData, quantity: Number(e.target.value) })}
+            />
+            <div className='flex items-center gap-4'>
+              <Button
+                variant='contained'
+                type='submit'
+                disabled={createProductRecipe.isPending || updateProductRecipe.isPending}
+              >
+                {currentProductRecipe?.id
+                  ? updateProductRecipe.isPending
+                    ? 'Updating...'
+                    : 'Update'
+                  : createProductRecipe.isPending
+                    ? 'Adding...'
+                    : 'Add'}
+              </Button>
+              <Button variant='tonal' color='error' type='reset' onClick={handleReset}>
+                Discard
+              </Button>
+            </div>
+          </form>
+        </div>
+      </PerfectScrollbar>
+    </Drawer>
+  )
+}
+
+export default AddRecipeDrawer

src/views/apps/ecommerce/products/detail/ProductDetail.tsx

@@ -2,319 +2,333 @@
 
 import {
   Avatar,
-  Badge,
+  Box,
+  Button,
   Card,
   CardContent,
-  CardMedia,
+  CardHeader,
   Chip,
-  Divider,
   Grid,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
   Typography
 } from '@mui/material'
 import { useParams } from 'next/navigation'
-import React, { useEffect } from 'react'
+import { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import Loading from '../../../../../components/layout/shared/Loading'
-import { setProduct } from '../../../../../redux-store/slices/product'
+import { setProductRecipe } from '../../../../../redux-store/slices/productRecipe'
+import { useProductRecipesByProduct } from '../../../../../services/queries/productRecipes'
 import { useProductById } from '../../../../../services/queries/products'
-import { ProductVariant } from '../../../../../types/services/product'
-import { formatCurrency, formatDate } from '../../../../../utils/transform'
-// Tabler icons (using class names)
-const TablerIcon = ({ name, className = '' }: { name: string; className?: string }) => (
-  <i className={`tabler-${name} ${className}`} />
-)
+import { formatCurrency } from '../../../../../utils/transform'
+import AddRecipeDrawer from './AddRecipeDrawer'
 
 const ProductDetail = () => {
   const dispatch = useDispatch()
   const params = useParams()
 
+  const [openProductRecipe, setOpenProductRecipe] = useState(false)
+
   const { data: product, isLoading, error } = useProductById(params?.id as string)
+  const { data: productRecipe, isLoading: isLoadingProductRecipe } = useProductRecipesByProduct(params?.id as string)
 
-  useEffect(() => {
-    if (product) {
-      dispatch(setProduct(product))
+  const groupedByVariant = productRecipe?.reduce((acc: any, item: any) => {
+    const variantId = item.variant_id
+    if (!acc[variantId]) {
+      acc[variantId] = {
+        variant: item.product_variant,
+        product: item.product,
+        ingredients: []
+      }
     }
-  }, [product, dispatch])
+    acc[variantId].ingredients.push(item)
+    return acc
+  }, {})
 
-  const getBusinessTypeColor = (type: string) => {
-    switch (type.toLowerCase()) {
-      case 'restaurant':
-        return 'primary'
-      case 'retail':
-        return 'secondary'
-      case 'cafe':
-        return 'info'
-      default:
-        return 'default'
-    }
+  const handleOpenProductRecipe = (recipe: any) => {
+    setOpenProductRecipe(true)
+    dispatch(setProductRecipe(recipe))
   }
 
-  const getPrinterTypeColor = (type: string) => {
-    switch (type.toLowerCase()) {
-      case 'kitchen':
-        return 'warning'
-      case 'bar':
-        return 'info'
-      case 'receipt':
-        return 'success'
-      default:
-        return 'default'
-    }
-  }
-
-  const getPlainText = (html: string) => {
-    const doc = new DOMParser().parseFromString(html, 'text/html')
-    return doc.body.textContent || ''
-  }
-
-  if (isLoading) return <Loading />
+  if (isLoading || isLoadingProductRecipe) return <Loading />
 
   return (
-    <div className='max-w-6xl mx-auto p-4 space-y-6'>
-      {/* Header Card */}
-      <Card className='shadow-lg'>
-        <Grid container>
-          <Grid item xs={12} md={4}>
-            <CardMedia
-              component='img'
-              sx={{ height: 300, objectFit: 'cover' }}
-              image={product.image_url || '/placeholder-image.jpg'}
-              alt={product.name}
-              className='rounded-l-lg'
-            />
-          </Grid>
-          <Grid item xs={12} md={8}>
-            <CardContent className='h-full flex flex-col justify-between'>
-              <div>
-                <div className='flex items-start justify-between mb-3'>
-                  <div>
-                    <Typography variant='h4' component='h1' className='font-bold text-gray-800 mb-2'>
-                      {product.name}
-                    </Typography>
-                    <div className='flex items-center gap-2 mb-3'>
-                      <Chip
-                        icon={<TablerIcon name='barcode' className='text-sm' />}
-                        label={product.sku}
-                        size='small'
-                        variant='outlined'
-                      />
-                      <Chip
-                        icon={<TablerIcon name={product.is_active ? 'check-circle' : 'x-circle'} className='text-sm' />}
-                        label={product.is_active ? 'Active' : 'Inactive'}
-                        color={product.is_active ? 'success' : 'error'}
-                        size='small'
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                {product.description && (
-                  <Typography variant='body1' className='text-gray-600 mb-4'>
-                    {getPlainText(product.description)}
-                  </Typography>
-                )}
-
-                <div className='grid grid-cols-2 gap-4 mb-4'>
-                  <div className='flex items-center gap-2'>
-                    <TablerIcon name='currency-dollar' className='text-green-600 text-xl' />
-                    <div>
-                      <Typography variant='body2' className='text-gray-500'>
-                        Price
-                      </Typography>
-                      <Typography variant='h6' className='font-semibold text-green-600'>
-                        {formatCurrency(product.price)}
-                      </Typography>
-                    </div>
-                  </div>
-                  <div className='flex items-center gap-2'>
-                    <TablerIcon name='receipt' className='text-orange-600 text-xl' />
-                    <div>
-                      <Typography variant='body2' className='text-gray-500'>
-                        Cost
-                      </Typography>
-                      <Typography variant='h6' className='font-semibold text-orange-600'>
-                        {formatCurrency(product.cost)}
-                      </Typography>
-                    </div>
-                  </div>
-                </div>
-
-                <div className='flex gap-2'>
-                  <Chip
-                    icon={<TablerIcon name='building-store' className='text-sm' />}
-                    label={product.business_type}
-                    color={getBusinessTypeColor(product.business_type)}
-                    size='small'
-                  />
-                  <Chip
-                    icon={<TablerIcon name='printer' className='text-sm' />}
-                    label={product.printer_type}
-                    color={getPrinterTypeColor(product.printer_type)}
-                    size='small'
-                  />
-                </div>
-              </div>
-            </CardContent>
-          </Grid>
-        </Grid>
-      </Card>
-
-      <Grid container spacing={3}>
-        {/* Product Information */}
-        <Grid item xs={12} md={8}>
-          <Card className='shadow-md'>
-            <CardContent>
-              <Typography variant='h6' className='font-semibold mb-4 flex items-center gap-2'>
-                <TablerIcon name='info-circle' className='text-blue-600 text-xl' />
-                Product Information
-              </Typography>
-              <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
-                <div>
-                  <Typography variant='body2' className='text-gray-500 mb-1'>
-                    Product ID
-                  </Typography>
-                  <Typography variant='body1' className='font-mono text-sm bg-gray-100 p-2 rounded'>
-                    {product.id}
-                  </Typography>
-                </div>
-                <div>
-                  <Typography variant='body2' className='text-gray-500 mb-1'>
-                    Category ID
-                  </Typography>
-                  <Typography variant='body1' className='font-mono text-sm bg-gray-100 p-2 rounded'>
-                    {product.category_id}
-                  </Typography>
-                </div>
-                <div>
-                  <Typography variant='body2' className='text-gray-500 mb-1'>
-                    Organization ID
-                  </Typography>
-                  <Typography variant='body1' className='font-mono text-sm bg-gray-100 p-2 rounded'>
-                    {product.organization_id}
-                  </Typography>
-                </div>
-                <div>
-                  <Typography variant='body2' className='text-gray-500 mb-1'>
-                    Profit Margin
-                  </Typography>
-                  <Typography variant='body1' className='font-semibold text-green-600'>
-                    {formatCurrency(product.price - product.cost)}
-                    <span className='text-sm text-gray-500 ml-1'>
-                      ({(((product.price - product.cost) / product.cost) * 100).toFixed(1)}%)
-                    </span>
-                  </Typography>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Variants Section */}
-          {product.variants && product.variants.length > 0 && (
-            <Card className='shadow-md mt-4'>
-              <CardContent>
-                <Typography variant='h6' className='font-semibold mb-4 flex items-center gap-2'>
-                  <TablerIcon name='versions' className='text-purple-600 text-xl' />
-                  Product Variants
-                  <Badge badgeContent={product.variants.length} color='primary' />
+    <>
+      <div className='space-y-6'>
+        {/* Header Card */}
+        <Card>
+          <CardHeader
+            avatar={<Avatar src={product?.image_url || ''} alt={product?.name} className='w-16 h-16' />}
+            title={
+              <div className='flex items-center gap-3'>
+                <Typography variant='h4' component='h1' className='font-bold'>
+                  {product?.name}
                 </Typography>
-                <List>
-                  {product.variants.map((variant: ProductVariant, index: number) => (
-                    <React.Fragment key={variant.id}>
-                      <ListItem className='px-0'>
-                        <ListItemIcon>
-                          <Avatar className='bg-purple-100 text-purple-600 w-8 h-8 text-sm'>
-                            {variant.name.charAt(0)}
-                          </Avatar>
-                        </ListItemIcon>
-                        <ListItemText
-                          primary={
-                            <div className='flex items-center justify-between'>
-                              <Typography variant='subtitle1' className='font-medium'>
-                                {variant.name}
-                              </Typography>
-                              <div className='flex gap-3'>
-                                <Typography variant='body2' className='text-green-600 font-semibold'>
-                                  +{formatCurrency(variant.price_modifier)}
-                                </Typography>
-                                <Typography variant='body2' className='text-orange-600'>
-                                  Cost: {formatCurrency(variant.cost)}
-                                </Typography>
-                              </div>
-                            </div>
-                          }
-                          secondary={
-                            <Typography variant='caption' className='text-gray-500'>
-                              Total Price: {formatCurrency(product.price + variant.price_modifier)}
-                            </Typography>
-                          }
-                        />
-                      </ListItem>
-                      {index < product.variants.length - 1 && <Divider />}
-                    </React.Fragment>
-                  ))}
-                </List>
-              </CardContent>
-            </Card>
-          )}
-        </Grid>
-
-        {/* Metadata & Timestamps */}
-        <Grid item xs={12} md={4}>
-          <Card className='shadow-md'>
-            <CardContent>
-              <Typography variant='h6' className='font-semibold mb-4 flex items-center gap-2'>
-                <TablerIcon name='clock' className='text-indigo-600 text-xl' />
-                Timestamps
-              </Typography>
-              <div className='space-y-3'>
-                <div>
-                  <Typography variant='body2' className='text-gray-500 mb-1'>
-                    Created
+                <Chip
+                  label={product?.is_active ? 'Active' : 'Inactive'}
+                  color={product?.is_active ? 'success' : 'error'}
+                  size='small'
+                />
+              </div>
+            }
+            subheader={
+              <div className='flex flex-col gap-1 mt-2'>
+                <Typography variant='body2' color='textSecondary'>
+                  SKU: {product?.sku} • Category: {product?.business_type}
+                </Typography>
+                <div className='flex gap-4'>
+                  <Typography variant='body2'>
+                    <span className='font-semibold'>Price:</span> {formatCurrency(product?.price || 0)}
                   </Typography>
-                  <Typography variant='body2' className='text-sm'>
-                    {formatDate(product.created_at)}
-                  </Typography>
-                </div>
-                <Divider />
-                <div>
-                  <Typography variant='body2' className='text-gray-500 mb-1'>
-                    Last Updated
-                  </Typography>
-                  <Typography variant='body2' className='text-sm'>
-                    {formatDate(product.updated_at)}
+                  <Typography variant='body2'>
+                    <span className='font-semibold'>Base Cost:</span> {formatCurrency(product?.cost || 0)}
                   </Typography>
                 </div>
               </div>
+            }
+          />
+        </Card>
 
-              {Object.keys(product.metadata).length > 0 && (
-                <>
-                  <Divider className='my-4' />
-                  <Typography variant='h6' className='font-semibold mb-3'>
-                    Metadata
-                  </Typography>
-                  <div className='space-y-2'>
-                    {Object.entries(product.metadata).map(([key, value]) => (
-                      <div key={key}>
-                        <Typography variant='body2' className='text-gray-500 mb-1 capitalize'>
-                          {key.replace(/_/g, ' ')}
-                        </Typography>
-                        <Typography variant='body2' className='text-sm bg-gray-50 p-2 rounded'>
-                          {typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)}
-                        </Typography>
+        {productRecipe && (
+          <div className='space-y-6'>
+            {/* Recipe Details by Variant */}
+            <div className='space-y-4'>
+              <div className='flex items-center gap-2 mb-4'>
+                <i className='tabler-chef-hat text-textPrimary text-xl' />
+                <Typography variant='h5' component='h2' className='font-semibold'>
+                  Recipe Details
+                </Typography>
+              </div>
+
+              {Object.keys(groupedByVariant).length > 0 ? (
+                Object.entries(groupedByVariant).map(([variantId, variantData]: any) => (
+                  <Card key={variantId} className=''>
+                    <CardHeader
+                      title={
+                        <div className='flex items-center justify-between'>
+                          <div className='flex items-center gap-3'>
+                            <i className='tabler-variant text-blue-600 text-lg' />
+                            <Typography variant='h6' className='font-semibold'>
+                              {variantData?.variant?.Name || 'Original'} Variant
+                            </Typography>
+                          </div>
+                          <div className='flex gap-4 text-sm'>
+                            <Chip
+                              label={`Cost: ${formatCurrency(variantData?.variant?.Cost || variantData.product?.Cost)}`}
+                              variant='outlined'
+                              color='primary'
+                            />
+                            <Chip
+                              label={`Price Modifier: ${formatCurrency(variantData?.variant?.PriceModifier || 0)}`}
+                              variant='outlined'
+                              color='secondary'
+                            />
+                          </div>
+                        </div>
+                      }
+                    />
+                    <CardContent>
+                      <TableContainer component={Paper} variant='outlined'>
+                        <Table>
+                          <TableHead>
+                            <TableRow className='bg-gray-50'>
+                              <TableCell className='font-semibold'>
+                                <div className='flex items-center gap-2'>
+                                  <i className='tabler-ingredients text-green-600' />
+                                  Ingredient
+                                </div>
+                              </TableCell>
+                              <TableCell className='font-semibold text-center'>
+                                <div className='flex items-center justify-center gap-2'>
+                                  <i className='tabler-scale text-orange-600' />
+                                  Quantity
+                                </div>
+                              </TableCell>
+                              <TableCell className='font-semibold text-center'>
+                                <div className='flex items-center justify-center gap-2'>
+                                  <i className='tabler-currency-dollar text-purple-600' />
+                                  Unit Cost
+                                </div>
+                              </TableCell>
+                              <TableCell className='font-semibold text-center'>
+                                <div className='flex items-center justify-center gap-2'>
+                                  <i className='tabler-package text-blue-600' />
+                                  Stock Available
+                                </div>
+                              </TableCell>
+                              <TableCell className='font-semibold text-right'>
+                                <div className='flex items-center justify-end gap-2'>
+                                  <i className='tabler-calculator text-red-600' />
+                                  Total Cost
+                                </div>
+                              </TableCell>
+                            </TableRow>
+                          </TableHead>
+                          <TableBody>
+                            {variantData.ingredients.map((item: any) => (
+                              <TableRow key={item.id} className='hover:bg-gray-50'>
+                                <TableCell>
+                                  <div className='flex items-center gap-3'>
+                                    <div className='w-2 h-2 rounded-full bg-green-500' />
+                                    <div>
+                                      <Typography variant='body2' className='font-medium capitalize'>
+                                        {item.ingredient.name}
+                                      </Typography>
+                                      <Typography variant='caption' color='textSecondary'>
+                                        {item.ingredient.is_semi_finished ? 'Semi-finished' : 'Raw ingredient'}
+                                      </Typography>
+                                    </div>
+                                  </div>
+                                </TableCell>
+                                <TableCell className='text-center'>
+                                  <Chip label={item.quantity} size='small' variant='outlined' color='primary' />
+                                </TableCell>
+                                <TableCell className='text-center'>{formatCurrency(item.ingredient.cost)}</TableCell>
+                                <TableCell className='text-center'>
+                                  <Chip
+                                    label={item.ingredient.stock}
+                                    size='small'
+                                    color={item.ingredient.stock > 5 ? 'success' : 'warning'}
+                                    variant='outlined'
+                                  />
+                                </TableCell>
+                                <TableCell className='text-right font-medium'>
+                                  {formatCurrency(item.ingredient.cost * item.quantity)}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </TableContainer>
+
+                      {/* Variant Summary */}
+                      <Box className='mt-4 p-4 bg-blue-50 rounded-lg'>
+                        <Grid container spacing={2}>
+                          <Grid item xs={12} md={6}>
+                            <Typography variant='body2' className='flex items-center gap-2'>
+                              <i className='tabler-list-numbers text-blue-600' />
+                              <span className='font-semibold'>Total Ingredients:</span>
+                              {variantData.ingredients.length}
+                            </Typography>
+                          </Grid>
+                          <Grid item xs={12} md={6}>
+                            <Typography variant='body2' className='flex items-center gap-2'>
+                              <i className='tabler-sum text-green-600' />
+                              <span className='font-semibold'>Total Recipe Cost:</span>
+                              {formatCurrency(
+                                variantData.ingredients.reduce(
+                                  (sum: any, item: any) => sum + item.ingredient.cost * item.quantity,
+                                  0
+                                )
+                              )}
+                            </Typography>
+                          </Grid>
+                        </Grid>
+                      </Box>
+
+                      <Button
+                        variant='outlined'
+                        fullWidth
+                        className='mt-4'
+                        startIcon={<i className='tabler-plus' />}
+                        onClick={() => handleOpenProductRecipe(variantData)}
+                      >
+                        Add Ingredient
+                      </Button>
+                    </CardContent>
+                  </Card>
+                ))
+              ) : (
+                <Card className=''>
+                  <CardHeader
+                    title={
+                      <div className='flex items-center justify-between'>
+                        <div className='flex items-center gap-3'>
+                          <i className='tabler-variant text-blue-600 text-lg' />
+                          <Typography variant='h6' className='font-semibold'>
+                            Original Variant
+                          </Typography>
+                        </div>
+                        <div className='flex gap-4 text-sm'>
+                          <Chip
+                            label={`Cost: ${formatCurrency(product?.cost || 0)}`}
+                            variant='outlined'
+                            color='primary'
+                          />
+                          <Chip
+                            label={`Price Modifier: ${formatCurrency(product?.price || 0)}`}
+                            variant='outlined'
+                            color='secondary'
+                          />
+                        </div>
                       </div>
-                    ))}
-                  </div>
-                </>
+                    }
+                  />
+                  <CardContent>
+                    <TableContainer component={Paper} variant='outlined'>
+                      <Table>
+                        <TableHead>
+                          <TableRow className='bg-gray-50'>
+                            <TableCell className='font-semibold'>
+                              <div className='flex items-center gap-2'>
+                                <i className='tabler-ingredients text-green-600' />
+                                Ingredient
+                              </div>
+                            </TableCell>
+                            <TableCell className='font-semibold text-center'>
+                              <div className='flex items-center justify-center gap-2'>
+                                <i className='tabler-scale text-orange-600' />
+                                Quantity
+                              </div>
+                            </TableCell>
+                            <TableCell className='font-semibold text-center'>
+                              <div className='flex items-center justify-center gap-2'>
+                                <i className='tabler-currency-dollar text-purple-600' />
+                                Unit Cost
+                              </div>
+                            </TableCell>
+                            <TableCell className='font-semibold text-center'>
+                              <div className='flex items-center justify-center gap-2'>
+                                <i className='tabler-package text-blue-600' />
+                                Stock Available
+                              </div>
+                            </TableCell>
+                            <TableCell className='font-semibold text-right'>
+                              <div className='flex items-center justify-end gap-2'>
+                                <i className='tabler-calculator text-red-600' />
+                                Total Cost
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody></TableBody>
+                      </Table>
+                    </TableContainer>
+
+                    <Button
+                      variant='outlined'
+                      fullWidth
+                      className='mt-4'
+                      startIcon={<i className='tabler-plus' />}
+                      onClick={() => handleOpenProductRecipe({ variant: undefined })}
+                    >
+                      Add Ingredient
+                    </Button>
+                  </CardContent>
+                </Card>
               )}
-            </CardContent>
-          </Card>
-        </Grid>
-      </Grid>
-    </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <AddRecipeDrawer open={openProductRecipe} handleClose={() => setOpenProductRecipe(false)} product={product!} />
+    </>
   )
 }
 

src/views/dashboards/profit-loss/EarningReportWithTabs.tsx

@@ -9,7 +9,6 @@ import dynamic from 'next/dynamic'
 
 // MUI Imports
 import TabContext from '@mui/lab/TabContext'
-import TabList from '@mui/lab/TabList'
 import TabPanel from '@mui/lab/TabPanel'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
@@ -26,7 +25,6 @@ import classnames from 'classnames'
 // Components Imports
 import CustomAvatar from '@core/components/mui/Avatar'
 import OptionMenu from '@core/components/option-menu'
-import Loading from '../../../components/layout/shared/Loading'
 import { formatShortCurrency } from '../../../utils/transform'
 
 // Styled Component Imports
@@ -207,38 +205,12 @@ const MultipleSeries = ({ data }: { data: TabType[] }) => {
   return (
     <Card>
       <CardHeader
-        title='Profit Reports'
-        subheader='Yearly Earnings Overview'
+        title='Earnings Report'
+        subheader='Monthly Earning Overview'
         action={<OptionMenu options={['Last Week', 'Last Month', 'Last Year']} />}
       />
       <CardContent>
         <TabContext value={value}>
-          {data.length > 1 && (
-            <TabList
-              variant='scrollable'
-              scrollButtons='auto'
-              onChange={handleChange}
-              aria-label='earning report tabs'
-              className='!border-0 mbe-10'
-              sx={{
-                '& .MuiTabs-indicator': { display: 'none !important' },
-                '& .MuiTab-root': { padding: '0 !important', border: '0 !important' }
-              }}
-            >
-              {renderTabs(data, value)}
-              <Tab
-                disabled
-                value='add'
-                label={
-                  <div className='flex flex-col items-center justify-center is-[110px] bs-[100px] border border-dashed rounded-xl'>
-                    <CustomAvatar variant='rounded' size={34}>
-                      <i className='tabler-plus text-textSecondary' />
-                    </CustomAvatar>
-                  </div>
-                }
-              />
-            </TabList>
-          )}
           {renderTabPanels(data, theme, options, colors)}
         </TabContext>
       </CardContent>