src/app/[lang]/(dashboard)/(private)/apps/inventory/products/ingredients/[id]/detail/page.tsx

@@ -0,0 +1,7 @@
+import IngredientDetail from '@/views/apps/ecommerce/products/ingredient/detail'
+
+const IngredientDetailPage = () => {
+  return <IngredientDetail />
+}
+
+export default IngredientDetailPage

src/views/apps/ecommerce/products/ingredient/ProductIngredientTable.tsx

@@ -38,6 +38,10 @@ import AddProductIngredientDrawer from './AddProductIngredientDrawer'
 import { useIngredientsMutation } from '../../../../../services/mutations/ingredients'
 import { useDispatch } from 'react-redux'
 import { setIngredient } from '../../../../../redux-store/slices/ingredient'
+import Link from 'next/link'
+import { getLocalizedUrl } from '@/utils/i18n'
+import { Locale } from '@/configs/i18n'
+import { useParams } from 'next/navigation'
 
 declare module '@tanstack/table-core' {
   interface FilterFns {
@@ -110,6 +114,8 @@ const ProductIngredientTable = () => {
   const [openConfirm, setOpenConfirm] = useState(false)
   const [search, setSearch] = useState('')
 
+  const { lang: locale } = useParams()
+
   // Fetch products with pagination and search
   const { data, isLoading, error, isFetching } = useIngredients({
     page: currentPage,
@@ -166,14 +172,23 @@ const ProductIngredientTable = () => {
       columnHelper.accessor('name', {
         header: 'Name',
         cell: ({ row }) => (
-          <div className='flex items-center gap-3'>
-            {/* <img src={row.original.image} width={38} height={38} className='rounded bg-actionHover' /> */}
-            <div className='flex flex-col items-start'>
-              <Typography className='font-medium' color='text.primary'>
-                {row.original.name || '-'}
-              </Typography>
-            </div>
-          </div>
+          <Button
+            variant='text'
+            color='primary'
+            className='p-0 min-w-0 font-medium normal-case justify-start'
+            component={Link}
+            href={getLocalizedUrl(`/apps/inventory/products/ingredients/${row.original.id}/detail`, locale as Locale)}
+            sx={{
+              textTransform: 'none',
+              fontWeight: 500,
+              '&:hover': {
+                textDecoration: 'underline',
+                backgroundColor: 'transparent'
+              }
+            }}
+          >
+            {row.original.name}
+          </Button>
         )
       }),
       columnHelper.accessor('cost', {
@@ -396,7 +411,10 @@ const ProductIngredientTable = () => {
         />
       </Card>
 
-      <AddProductIngredientDrawer open={addIngredientOpen} handleClose={() => setAddIngredientOpen(!addIngredientOpen)} />
+      <AddProductIngredientDrawer
+        open={addIngredientOpen}
+        handleClose={() => setAddIngredientOpen(!addIngredientOpen)}
+      />
 
       <ConfirmDeleteDialog
         open={openConfirm}

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

@@ -0,0 +1,30 @@
+import { formatCurrency } from '@/utils/transform'
+import { Card, CardHeader, Chip, Typography } from '@mui/material'
+
+const IngredientDetailInfo = () => {
+  return (
+    <Card>
+      <CardHeader
+        title={
+          <div className='flex items-center gap-3'>
+            <Typography variant='h4' component='h1' className='font-bold'>
+              Tepung Terigu
+            </Typography>
+            <Chip label={'Active'} color={'success'} size='small' />
+          </div>
+        }
+        subheader={
+          <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)}
+              </Typography>
+            </div>
+          </div>
+        }
+      />
+    </Card>
+  )
+}
+
+export default IngredientDetailInfo

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Card, CardContent, CardHeader, Typography, Button, Box, Stack } from '@mui/material'
+
+const IngredientDetailUnit = () => {
+  return (
+    <Card sx={{ maxWidth: 400 }}>
+      <CardHeader title='Satuan' />
+      <CardContent>
+        <Stack spacing={2} sx={{ mb: 3 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography variant='body1' color='text.secondary'>
+              Satuan Dasar
+            </Typography>
+            <Typography variant='body1' sx={{ fontWeight: 'medium' }}>
+              : Pcs
+            </Typography>
+          </Box>
+        </Stack>
+
+        <Button
+          variant='contained'
+          fullWidth
+          startIcon={<span style={{ fontSize: '18px' }}>+</span>}
+          sx={{
+            py: 1.5,
+            borderRadius: 2,
+            textTransform: 'none',
+            fontSize: '16px'
+          }}
+        >
+          Ubah konversi satuan
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default IngredientDetailUnit

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

@@ -0,0 +1,18 @@
+import Grid from '@mui/material/Grid2'
+import IngredientDetailInfo from './IngredientDetailInfo'
+import IngredientDetailUnit from './IngredientDetailUnit'
+
+const IngredientDetail = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, lg: 8, md: 7 }}>
+        <IngredientDetailInfo />
+      </Grid>
+      <Grid size={{ xs: 12, lg: 4, md: 5 }}>
+        <IngredientDetailUnit />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default IngredientDetail