From 76ee71e7fed8e1a0de51cbe3bbe14fb7f460aed5 Mon Sep 17 00:00:00 2001
From: efrilm <efril.mulanda@gmail.com>
Date: Fri, 12 Sep 2025 18:57:23 +0700
Subject: [PATCH] Get Unit Converter

---
 src/services/queries/unitConverter.ts         | 13 ++++++++++
 src/types/services/productRecipe.ts           | 26 +++++++++++++++++++
 .../detail/IngredientDetailUnit.tsx           | 13 ++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 src/services/queries/unitConverter.ts

diff --git a/src/services/queries/unitConverter.ts b/src/services/queries/unitConverter.ts
new file mode 100644
index 0000000..8615bad
--- /dev/null
+++ b/src/services/queries/unitConverter.ts
@@ -0,0 +1,13 @@
+import { UnitConversion } from '@/types/services/productRecipe'
+import { useQuery } from '@tanstack/react-query'
+import { api } from '../api'
+
+export function useUnitConverterByIngredient(IngredientId: string) {
+  return useQuery<UnitConversion[]>({
+    queryKey: ['unit-converters/ingredient', IngredientId],
+    queryFn: async () => {
+      const res = await api.get(`/unit-converters/ingredient/${IngredientId}`)
+      return res.data.data
+    }
+  })
+}
diff --git a/src/types/services/productRecipe.ts b/src/types/services/productRecipe.ts
index fe1733f..d13ce3f 100644
--- a/src/types/services/productRecipe.ts
+++ b/src/types/services/productRecipe.ts
@@ -73,3 +73,29 @@ export interface IngredientUnitConverterRequest {
   to_unit_id: string
   conversion_factor: number
 }
+
+export interface UnitConversion {
+  id: string
+  organization_id: string
+  ingredient_id: string
+  from_unit_id: string
+  to_unit_id: string
+  conversion_factor: number
+  is_active: boolean
+  created_at: string
+  updated_at: string
+  created_by: string
+  updated_by: string
+  from_unit: UnitConversionFrom
+  to_unit: UnitConversionTo
+}
+
+export interface UnitConversionFrom {
+  id: string
+  name: string
+}
+
+export interface UnitConversionTo {
+  id: string
+  name: string
+}
diff --git a/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx b/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx
index d5d1bf5..31e8cde 100644
--- a/src/views/apps/ecommerce/products/ingredient/detail/IngredientDetailUnit.tsx
+++ b/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