update build ok,

002_source/cms/src/app/dashboard/lesson_categories/lesson-categories-sample-data.tsx

@@ -0,0 +1,56 @@
+import { dayjs } from '@/lib/dayjs';
+// import type { LessonCategory } from '@/components/dashboard/lesson_category/lesson-categories-table';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
+
+export const lessonCategoriesSampleData = [
+  {
+    id: 'USR-005',
+    name: 'Fran Perez',
+    avatar: '/assets/avatar-5.png',
+    email: 'fran.perez@domain.com',
+    phone: '(815) 704-0045',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(1, 'hour').toDate(),
+  },
+  {
+    id: 'USR-004',
+    name: 'Penjani Inyene',
+    avatar: '/assets/avatar-4.png',
+    email: 'penjani.inyene@domain.com',
+    phone: '(803) 937-8925',
+    quota: 100,
+    status: 'active',
+    createdAt: dayjs().subtract(3, 'hour').toDate(),
+  },
+  {
+    id: 'USR-003',
+    name: 'Carson Darrin',
+    avatar: '/assets/avatar-3.png',
+    email: 'carson.darrin@domain.com',
+    phone: '(715) 278-5041',
+    quota: 10,
+    status: 'blocked',
+    createdAt: dayjs().subtract(1, 'hour').subtract(1, 'day').toDate(),
+  },
+  {
+    id: 'USR-002',
+    name: 'Siegbert Gottfried',
+    avatar: '/assets/avatar-2.png',
+    email: 'siegbert.gottfried@domain.com',
+    phone: '(603) 766-0431',
+    quota: 0,
+    status: 'pending',
+    createdAt: dayjs().subtract(7, 'hour').subtract(1, 'day').toDate(),
+  },
+  {
+    id: 'USR-001',
+    name: 'Miron Vitold',
+    avatar: '/assets/avatar-1.png',
+    email: 'miron.vitold@domain.com',
+    phone: '(425) 434-5535',
+    quota: 50,
+    status: 'active',
+    createdAt: dayjs().subtract(2, 'hour').subtract(2, 'day').toDate(),
+  },
+] satisfies LessonCategory[];

002_source/cms/src/app/dashboard/lesson_categories/page.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import * as React from 'react';
+import type { Metadata } from 'next';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
+
+import { config } from '@/config';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
+import { LessonCategoriesFilters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
+import type { Filters } from '@/components/dashboard/lesson_category/lesson-categories-filters';
+import { LessonCategoriesPagination } from '@/components/dashboard/lesson_category/lesson-categories-pagination';
+import { LessonCategoriesSelectionProvider } from '@/components/dashboard/lesson_category/lesson-categories-selection-context';
+import { LessonCategoriesTable } from '@/components/dashboard/lesson_category/lesson-categories-table';
+
+import { lessonCategoriesSampleData } from './lesson-categories-sample-data';
+
+interface PageProps {
+  searchParams: {
+    email?: string;
+    phone?: string;
+    sortDir?: 'asc' | 'desc';
+    status?: string;
+    name?: string;
+    visible?: string;
+    type?: string;
+    //
+  };
+}
+
+export default function Page({ searchParams }: PageProps): React.JSX.Element {
+  const { email, phone, sortDir, status } = searchParams;
+
+  const sortedLessonCategories = applySort(lessonCategoriesSampleData, sortDir);
+  const filteredLessonCategories = applyFilters(sortedLessonCategories, { email, phone, status });
+
+  return (
+    <Box
+      sx={{
+        maxWidth: 'var(--Content-maxWidth)',
+        m: 'var(--Content-margin)',
+        p: 'var(--Content-padding)',
+        width: 'var(--Content-width)',
+      }}
+    >
+      Page
+    </Box>
+  );
+}
+
+// Sorting and filtering has to be done on the server.
+
+function applySort(row: LessonCategory[], sortDir: 'asc' | 'desc' | undefined): LessonCategory[] {
+  return row.sort((a, b) => {
+    if (sortDir === 'asc') {
+      return a.createdAt.getTime() - b.createdAt.getTime();
+    }
+
+    return b.createdAt.getTime() - a.createdAt.getTime();
+  });
+}
+
+function applyFilters(row: LessonCategory[], { email, phone, status }: Filters): LessonCategory[] {
+  return row.filter((item) => {
+    if (email) {
+      if (!item.email?.toLowerCase().includes(email.toLowerCase())) {
+        return false;
+      }
+    }
+
+    if (phone) {
+      if (!item.phone?.toLowerCase().includes(phone.toLowerCase())) {
+        return false;
+      }
+    }
+
+    if (status) {
+      if (item.status !== status) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+}

002_source/cms/src/components/dashboard/lesson_category/interfaces.ts

@@ -0,0 +1,10 @@
+export interface LessonCategory {
+  id: string;
+  name: string;
+  avatar?: string;
+  email: string;
+  phone?: string;
+  quota: number;
+  status: 'pending' | 'active' | 'blocked';
+  createdAt: Date;
+}

002_source/cms/src/components/dashboard/lesson_category/lesson-categories-filters.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import * as React from 'react';
+import { useRouter } from 'next/navigation';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import FormControl from '@mui/material/FormControl';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import type { SelectChangeEvent } from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Typography from '@mui/material/Typography';
+
+import { paths } from '@/paths';
+import { FilterButton, FilterPopover, useFilterContext } from '@/components/core/filter-button';
+import { Option } from '@/components/core/option';
+
+import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
+
+// The tabs should be generated using API data.
+const tabs = [
+  { label: 'All', value: '', count: 5 },
+  { label: 'Active', value: 'active', count: 3 },
+  { label: 'Pending', value: 'pending', count: 1 },
+  { label: 'Blocked', value: 'blocked', count: 1 },
+] as const;
+
+export interface Filters {
+  email?: string;
+  phone?: string;
+  status?: string;
+}
+
+export type SortDir = 'asc' | 'desc';
+
+export interface LessonCategoriesFiltersProps {
+  filters?: Filters;
+  sortDir?: SortDir;
+}
+
+export function LessonCategoriesFilters({
+  filters = {},
+  sortDir = 'desc',
+}: LessonCategoriesFiltersProps): React.JSX.Element {
+  const { email, phone, status } = filters;
+
+  const router = useRouter();
+
+  const selection = useLessonCategoriesSelection();
+
+  const updateSearchParams = React.useCallback(
+    (newFilters: Filters, newSortDir: SortDir): void => {
+      const searchParams = new URLSearchParams();
+
+      if (newSortDir === 'asc') {
+        searchParams.set('sortDir', newSortDir);
+      }
+
+      if (newFilters.status) {
+        searchParams.set('status', newFilters.status);
+      }
+
+      if (newFilters.email) {
+        searchParams.set('email', newFilters.email);
+      }
+
+      if (newFilters.phone) {
+        searchParams.set('phone', newFilters.phone);
+      }
+
+      router.push(`${paths.dashboard.lesson_categories.list}?${searchParams.toString()}`);
+    },
+    [router]
+  );
+
+  const handleClearFilters = React.useCallback(() => {
+    updateSearchParams({}, sortDir);
+  }, [updateSearchParams, sortDir]);
+
+  const handleStatusChange = React.useCallback(
+    (_: React.SyntheticEvent, value: string) => {
+      updateSearchParams({ ...filters, status: value }, sortDir);
+    },
+    [updateSearchParams, filters, sortDir]
+  );
+
+  const handleEmailChange = React.useCallback(
+    (value?: string) => {
+      updateSearchParams({ ...filters, email: value }, sortDir);
+    },
+    [updateSearchParams, filters, sortDir]
+  );
+
+  const handlePhoneChange = React.useCallback(
+    (value?: string) => {
+      updateSearchParams({ ...filters, phone: value }, sortDir);
+    },
+    [updateSearchParams, filters, sortDir]
+  );
+
+  const handleSortChange = React.useCallback(
+    (event: SelectChangeEvent) => {
+      updateSearchParams(filters, event.target.value as SortDir);
+    },
+    [updateSearchParams, filters]
+  );
+
+  const hasFilters = status || email || phone;
+
+  return (
+    <div>
+      <Tabs onChange={handleStatusChange} sx={{ px: 3 }} value={status ?? ''} variant="scrollable">
+        {tabs.map((tab) => (
+          <Tab
+            icon={<Chip label={tab.count} size="small" variant="soft" />}
+            iconPosition="end"
+            key={tab.value}
+            label={tab.label}
+            sx={{ minHeight: 'auto' }}
+            tabIndex={0}
+            value={tab.value}
+          />
+        ))}
+      </Tabs>
+      <Divider />
+      <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flexWrap: 'wrap', px: 3, py: 2 }}>
+        <Stack direction="row" spacing={2} sx={{ alignItems: 'center', flex: '1 1 auto', flexWrap: 'wrap' }}>
+          <FilterButton
+            displayValue={email}
+            label="Email"
+            onFilterApply={(value) => {
+              handleEmailChange(value as string);
+            }}
+            onFilterDelete={() => {
+              handleEmailChange();
+            }}
+            popover={<EmailFilterPopover />}
+            value={email}
+          />
+          <FilterButton
+            displayValue={phone}
+            label="Phone number"
+            onFilterApply={(value) => {
+              handlePhoneChange(value as string);
+            }}
+            onFilterDelete={() => {
+              handlePhoneChange();
+            }}
+            popover={<PhoneFilterPopover />}
+            value={phone}
+          />
+          {hasFilters ? <Button onClick={handleClearFilters}>Clear filters</Button> : null}
+        </Stack>
+        {selection.selectedAny ? (
+          <Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
+            <Typography color="text.secondary" variant="body2">
+              {selection.selected.size} selected
+            </Typography>
+            <Button color="error" variant="contained">
+              Delete
+            </Button>
+          </Stack>
+        ) : null}
+        <Select name="sort" onChange={handleSortChange} sx={{ maxWidth: '100%', width: '120px' }} value={sortDir}>
+          <Option value="desc">Newest</Option>
+          <Option value="asc">Oldest</Option>
+        </Select>
+      </Stack>
+    </div>
+  );
+}
+
+function EmailFilterPopover(): React.JSX.Element {
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by email">
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        Apply
+      </Button>
+    </FilterPopover>
+  );
+}
+
+function PhoneFilterPopover(): React.JSX.Element {
+  const { anchorEl, onApply, onClose, open, value: initialValue } = useFilterContext();
+  const [value, setValue] = React.useState<string>('');
+
+  React.useEffect(() => {
+    setValue((initialValue as string | undefined) ?? '');
+  }, [initialValue]);
+
+  return (
+    <FilterPopover anchorEl={anchorEl} onClose={onClose} open={open} title="Filter by phone number">
+      <FormControl>
+        <OutlinedInput
+          onChange={(event) => {
+            setValue(event.target.value);
+          }}
+          onKeyUp={(event) => {
+            if (event.key === 'Enter') {
+              onApply(value);
+            }
+          }}
+          value={value}
+        />
+      </FormControl>
+      <Button
+        onClick={() => {
+          onApply(value);
+        }}
+        variant="contained"
+      >
+        Apply
+      </Button>
+    </FilterPopover>
+  );
+}

002_source/cms/src/components/dashboard/lesson_category/lesson-categories-pagination.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import TablePagination from '@mui/material/TablePagination';
+
+function noop(): void {
+  return undefined;
+}
+
+interface LessonCategoriesPaginationProps {
+  count: number;
+  page: number;
+}
+
+export function LessonCategoriesPagination({ count, page }: LessonCategoriesPaginationProps): React.JSX.Element {
+  // You should implement the pagination using a similar logic as the filters.
+  // Note that when page change, you should keep the filter search params.
+
+  return (
+    <TablePagination
+      component="div"
+      count={count}
+      onPageChange={noop}
+      onRowsPerPageChange={noop}
+      page={page}
+      rowsPerPage={5}
+      rowsPerPageOptions={[5, 10, 25]}
+    />
+  );
+}

002_source/cms/src/components/dashboard/lesson_category/lesson-categories-selection-context.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+
+import { useSelection } from '@/hooks/use-selection';
+import type { Selection } from '@/hooks/use-selection';
+// import type { LessonCategory } from './lesson-categories-table';
+import type { LessonCategory } from '@/components/dashboard/lesson_category/interfaces';
+
+function noop(): void {
+  return undefined;
+}
+
+export interface LessonCategoriesSelectionContextValue extends Selection {}
+
+export const LessonCategoriesSelectionContext = React.createContext<LessonCategoriesSelectionContextValue>({
+  deselectAll: noop,
+  deselectOne: noop,
+  selectAll: noop,
+  selectOne: noop,
+  selected: new Set(),
+  selectedAny: false,
+  selectedAll: false,
+});
+
+interface LessonCategoriesSelectionProviderProps {
+  children: React.ReactNode;
+  lessonCategories: LessonCategory[];
+}
+
+export function LessonCategoriesSelectionProvider({
+  children,
+  lessonCategories = [],
+}: LessonCategoriesSelectionProviderProps): React.JSX.Element {
+  const customerIds = React.useMemo(() => lessonCategories.map((customer) => customer.id), [lessonCategories]);
+  const selection = useSelection(customerIds);
+
+  return (
+    <LessonCategoriesSelectionContext.Provider value={{ ...selection }}>
+      {children}
+    </LessonCategoriesSelectionContext.Provider>
+  );
+}
+
+export function useLessonCategoriesSelection(): LessonCategoriesSelectionContextValue {
+  return React.useContext(LessonCategoriesSelectionContext);
+}

002_source/cms/src/components/dashboard/lesson_category/lesson-categories-table.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import * as React from 'react';
+import RouterLink from 'next/link';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import LinearProgress from '@mui/material/LinearProgress';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
+import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
+import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
+import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
+
+import { paths } from '@/paths';
+import { dayjs } from '@/lib/dayjs';
+import { DataTable } from '@/components/core/data-table';
+import type { ColumnDef } from '@/components/core/data-table';
+
+import { LessonCategory } from './interfaces';
+import { useLessonCategoriesSelection } from './lesson-categories-selection-context';
+
+const columns = [
+  {
+    formatter: (row): React.JSX.Element => (
+      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+        <Avatar src={row.avatar} />{' '}
+        <div>
+          <Link
+            color="inherit"
+            component={RouterLink}
+            href={paths.dashboard.lesson_categories.details('1')}
+            sx={{ whiteSpace: 'nowrap' }}
+            variant="subtitle2"
+          >
+            {row.name}
+          </Link>
+          <Typography color="text.secondary" variant="body2">
+            {row.email}
+          </Typography>
+        </div>
+      </Stack>
+    ),
+    name: 'Name',
+    width: '250px',
+  },
+  {
+    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">
+          {new Intl.NumberFormat('en-US', { style: 'percent', maximumFractionDigits: 2 }).format(row.quota / 100)}
+        </Typography>
+      </Stack>
+    ),
+    name: 'Quota',
+    width: '250px',
+  },
+  { field: 'phone', name: 'Phone number', width: '150px' },
+  {
+    formatter(row) {
+      return dayjs(row.createdAt).format('MMM D, YYYY h:mm A');
+    },
+    name: 'Created at',
+    width: '200px',
+  },
+  {
+    formatter: (row): React.JSX.Element => {
+      const mapping = {
+        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" /> },
+      } as const;
+      const { label, icon } = mapping[row.status] ?? { label: 'Unknown', icon: null };
+
+      return <Chip icon={icon} label={label} size="small" variant="outlined" />;
+    },
+    name: 'Status',
+    width: '150px',
+  },
+  {
+    formatter: (): React.JSX.Element => (
+      <IconButton component={RouterLink} href={paths.dashboard.lesson_categories.details('1')}>
+        <PencilSimpleIcon />
+      </IconButton>
+    ),
+    name: 'Actions',
+    hideName: true,
+    width: '100px',
+    align: 'right',
+  },
+] satisfies ColumnDef<LessonCategory>[];
+
+export interface LessonCategoriesTableProps {
+  rows: LessonCategory[];
+}
+
+export function LessonCategoriesTable({ rows }: LessonCategoriesTableProps): React.JSX.Element {
+  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useLessonCategoriesSelection();
+
+  return (
+    <React.Fragment>
+      <DataTable<LessonCategory>
+        columns={columns}
+        onDeselectAll={deselectAll}
+        onDeselectOne={(_, row) => {
+          deselectOne(row.id);
+        }}
+        onSelectAll={selectAll}
+        onSelectOne={(_, row) => {
+          selectOne(row.id);
+        }}
+        rows={rows}
+        selectable
+        selected={selected}
+      />
+      {!rows.length ? (
+        <Box sx={{ p: 3 }}>
+          <Typography color="text.secondary" sx={{ textAlign: 'center' }} variant="body2">
+            No lesson categories found
+          </Typography>
+        </Box>
+      ) : null}
+    </React.Fragment>
+  );
+}