Get Unit Converter

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

@@ -3,6 +3,7 @@ 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'
+import { useUnitConverterByIngredient } from '@/services/queries/unitConverter'
 
 interface Props {
   data: Ingredient | undefined
@@ -12,6 +13,8 @@ const IngredientDetailUnit = ({ data }: Props) => {
   // State untuk mengontrol drawer
   const [openConversionDrawer, setOpenConversionDrawer] = useState(false)
 
+  const { data: unitConverters, isLoading } = useUnitConverterByIngredient(data?.id as string)
+
   // Function untuk membuka drawer
   const handleOpenConversionDrawer = () => {
     setOpenConversionDrawer(true)
@@ -42,6 +45,16 @@ const IngredientDetailUnit = ({ data }: Props) => {
                 : {data?.unit.name ?? '-'}
               </Typography>
             </Box>
+            {unitConverters?.map(unitConverter => (
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <Typography variant='body1' color='text.secondary'>
+                  1 {unitConverter.from_unit.name}
+                </Typography>
+                <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+                  : {unitConverter.conversion_factor} {unitConverter.to_unit.name}
+                </Typography>
+              </Box>
+            )) ?? []}
           </Stack>
 
           <Button