update for lp_categories,

002_source/cms/src/app/dashboard/Sample/BasicDetailCard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import Avatar from '@mui/material/Avatar';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
@@ -15,7 +15,6 @@ import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr
 import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
 import { useTranslation } from 'react-i18next';
 
-import { paths } from '@/paths';
 import { PropertyItem } from '@/components/core/property-item';
 import { PropertyList } from '@/components/core/property-list';
 
@@ -27,7 +26,6 @@ export default function BasicDetailCard({
   handleEditClick: () => void;
 }): React.JSX.Element {
   const { t } = useTranslation();
-  const router = useRouter();
 
   return (
     <Card>
@@ -48,10 +46,23 @@ export default function BasicDetailCard({
         }
         title={t('list.basic-details')}
       />
-      <PropertyList divider={<Divider />} orientation="vertical" sx={{ '--PropertyItem-padding': '12px 24px' }}>
+      <PropertyList
+        divider={<Divider />}
+        orientation="vertical"
+        sx={{ '--PropertyItem-padding': '12px 24px' }}
+      >
         {(
           [
-            { key: 'Customer ID', value: <Chip label="USR-001" size="small" variant="soft" /> },
+            {
+              key: 'Customer ID',
+              value: (
+                <Chip
+                  label="USR-001"
+                  size="small"
+                  variant="soft"
+                />
+              ),
+            },
             { key: 'Name', value: 'Miron Vitold' },
             { key: 'Email', value: 'miron.vitold@domain.com' },
             { key: 'Phone', value: '(425) 434-5535' },
@@ -59,9 +70,20 @@ export default function BasicDetailCard({
             {
               key: 'Quota',
               value: (
-                <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
-                  <LinearProgress sx={{ flex: '1 1 auto' }} value={50} variant="determinate" />
-                  <Typography color="text.secondary" variant="body2">
+                <Stack
+                  direction="row"
+                  spacing={2}
+                  sx={{ alignItems: 'center' }}
+                >
+                  <LinearProgress
+                    sx={{ flex: '1 1 auto' }}
+                    value={50}
+                    variant="determinate"
+                  />
+                  <Typography
+                    color="text.secondary"
+                    variant="body2"
+                  >
                     50%
                   </Typography>
                 </Stack>
@@ -70,7 +92,11 @@ export default function BasicDetailCard({
           ] satisfies { key: string; value: React.ReactNode }[]
         ).map(
           (item): React.JSX.Element => (
-            <PropertyItem key={item.key} name={item.key} value={item.value} />
+            <PropertyItem
+              key={item.key}
+              name={item.key}
+              value={item.value}
+            />
           )
         )}
       </PropertyList>

002_source/cms/src/app/dashboard/Sample/SampleTitleCard.tsx

@@ -15,27 +15,49 @@ export default function SampleTitleCard(): React.JSX.Element {
 
   return (
     <>
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto' }}>
-        <Avatar src="/assets/avatar-1.png" sx={{ '--Avatar-size': '64px' }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center', flex: '1 1 auto' }}
+      >
+        <Avatar
+          src="/assets/avatar-1.png"
+          sx={{ '--Avatar-size': '64px' }}
+        >
           empty
         </Avatar>
         <div>
-          <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
+          <Stack
+            direction="row"
+            spacing={2}
+            sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+          >
             <Typography variant="h4">{t('list.customer-name')}</Typography>
             <Chip
-              icon={<CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" />}
+              icon={
+                <CheckCircleIcon
+                  color="var(--mui-palette-success-main)"
+                  weight="fill"
+                />
+              }
               label={t('list.active')}
               size="small"
               variant="outlined"
             />
           </Stack>
-          <Typography color="text.secondary" variant="body1">
+          <Typography
+            color="text.secondary"
+            variant="body1"
+          >
             {t('list.customer-email')}
           </Typography>
         </div>
       </Stack>
       <div>
-        <Button endIcon={<CaretDownIcon />} variant="contained">
+        <Button
+          endIcon={<CaretDownIcon />}
+          variant="contained"
+        >
           {t('list.action')}
         </Button>
       </div>