update customers in the middle,

002_source/cms/src/components/dashboard/teacher/customers-table.tsx

@@ -36,7 +36,11 @@ export interface Customer {
 const columns = [
   {
     formatter: (row): React.JSX.Element => (
-      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{ alignItems: 'center' }}
+      >
         <Avatar src={row.avatar} />{' '}
         <div>
           <Link
@@ -48,7 +52,10 @@ const columns = [
           >
             {row.name}
           </Link>
-          <Typography color="text.secondary" variant="body2">
+          <Typography
+            color="text.secondary"
+            variant="body2"
+          >
             {row.email}
           </Typography>
         </div>
@@ -59,9 +66,20 @@ const columns = [
   },
   {
     formatter: (row): React.JSX.Element => (
-      <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
-        <LinearProgress sx={{ flex: '1 1 auto' }} value={row.quota} variant="determinate" />
-        <Typography color="text.secondary" variant="body2">
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ alignItems: 'center' }}
+      >
+        <LinearProgress
+          sx={{ flex: '1 1 auto' }}
+          value={row.quota}
+          variant="determinate"
+        />
+        <Typography
+          color="text.secondary"
+          variant="body2"
+        >
           {new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(row.quota / 100)}
         </Typography>
       </Stack>
@@ -80,20 +98,46 @@ const columns = [
   {
     formatter: (row): React.JSX.Element => {
       const mapping = {
-        active: { label: 'Active', icon: <CheckCircleIcon color="var(--mui-palette-success-main)" weight="fill" /> },
+        active: {
+          label: 'Active',
+          icon: (
+            <CheckCircleIcon
+              color="var(--mui-palette-success-main)"
+              weight="fill"
+            />
+          ),
+        },
         blocked: { label: 'Blocked', icon: <MinusIcon color="var(--mui-palette-error-main)" /> },
-        pending: { label: 'Pending', icon: <ClockIcon color="var(--mui-palette-warning-main)" weight="fill" /> },
+        pending: {
+          label: 'Pending',
+          icon: (
+            <ClockIcon
+              color="var(--mui-palette-warning-main)"
+              weight="fill"
+            />
+          ),
+        },
       } as const;
       const { label, icon } = mapping[row.status] ?? { label: 'Unknown', icon: null };
 
-      return <Chip icon={icon} label={label} size="small" variant="outlined" />;
+      return (
+        <Chip
+          icon={icon}
+          label={label}
+          size="small"
+          variant="outlined"
+        />
+      );
     },
     name: 'Status',
     width: '150px',
   },
   {
     formatter: (): React.JSX.Element => (
-      <IconButton component={RouterLink} href={paths.dashboard.customers.details('1')}>
+      <IconButton
+        component={RouterLink}
+        href={paths.dashboard.customers.details('1')}
+      >
         <PencilSimpleIcon />
       </IconButton>
     ),
@@ -129,7 +173,11 @@ export function CustomersTable({ rows }: CustomersTableProps): React.JSX.Element
       />
       {!rows.length ? (
         <Box sx={{ p: 3 }}>
-          <Typography color="text.secondary" sx={{ textAlign: 'center' }} variant="body2">
+          <Typography
+            color="text.secondary"
+            sx={{ textAlign: 'center' }}
+            variant="body2"
+          >
             No customers found
           </Typography>
         </Box>