update,

002_source/cms/src/app/dashboard/SampleEvents.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { dayjs } from '@/lib/dayjs';
+
+export interface Event {
+  id: string;
+  title: string;
+  description: string;
+  createdAt: Date;
+}
+export const events: Event[] = [
+  {
+    id: 'EV-004',
+    title: 'Meeting with partners',
+    description: '17:00 to 18:00',
+    createdAt: dayjs().add(1, 'day').toDate(),
+  },
+  {
+    id: 'EV-003',
+    title: 'Interview with Jonas',
+    description: '15:30 to 16:45',
+    createdAt: dayjs().add(4, 'day').toDate(),
+  },
+  {
+    id: 'EV-002',
+    title: "Doctor's appointment",
+    description: '12:30 to 15:30',
+    createdAt: dayjs().add(4, 'day').toDate(),
+  },
+  {
+    id: 'EV-001',
+    title: 'Weekly meeting',
+    description: '09:00 to 09:30',
+    createdAt: dayjs().add(7, 'day').toDate(),
+  },
+];

002_source/cms/src/app/dashboard/SampleMessages.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { dayjs } from '@/lib/dayjs';
+
+interface Message {
+  id: string;
+  content: string;
+  author: { name: string; avatar?: string; status?: 'online' | 'offline' | 'away' | 'busy' };
+  createdAt: Date;
+}
+export const messages: Message[] = [
+  {
+    id: 'MSG-001',
+    content: 'Hello, we spoke earlier on the phone',
+    author: { name: 'Alcides Antonio', avatar: '/assets/avatar-10.png', status: 'online' },
+    createdAt: dayjs().subtract(2, 'minute').toDate(),
+  },
+  {
+    id: 'MSG-002',
+    content: 'Is the job still available?',
+    author: { name: 'Marcus Finn', avatar: '/assets/avatar-9.png', status: 'offline' },
+    createdAt: dayjs().subtract(56, 'minute').toDate(),
+  },
+  {
+    id: 'MSG-003',
+    content: "What is a screening task? I'd like to",
+    author: { name: 'Carson Darrin', avatar: '/assets/avatar-3.png', status: 'online' },
+    createdAt: dayjs().subtract(3, 'hour').subtract(23, 'minute').toDate(),
+  },
+  {
+    id: 'MSG-004',
+    content: 'Still waiting for feedback',
+    author: { name: 'Fran Perez', avatar: '/assets/avatar-5.png', status: 'online' },
+    createdAt: dayjs().subtract(8, 'hour').subtract(6, 'minute').toDate(),
+  },
+  {
+    id: 'MSG-005',
+    content: 'Need more information about campaigns',
+    author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png', status: 'offline' },
+    createdAt: dayjs().subtract(10, 'hour').subtract(18, 'minute').toDate(),
+  },
+];

002_source/cms/src/app/dashboard/SamplesubScriptions.tsx

@@ -0,0 +1,51 @@
+'use client';
+interface Subscription {
+  id: string;
+  title: string;
+  icon: string;
+  costs: string;
+  billingCycle: string;
+  status: 'paid' | 'canceled' | 'expiring';
+}
+export const SamplesubScriptions: Subscription[] = [
+  {
+    id: 'supabase',
+    title: 'Supabase',
+    icon: '/assets/company-avatar-5.png',
+    costs: '$599',
+    billingCycle: 'year',
+    status: 'paid',
+  },
+  {
+    id: 'vercel',
+    title: 'Vercel',
+    icon: '/assets/company-avatar-4.png',
+    costs: '$20',
+    billingCycle: 'month',
+    status: 'expiring',
+  },
+  {
+    id: 'auth0',
+    title: 'Auth0',
+    icon: '/assets/company-avatar-3.png',
+    costs: '$20-80',
+    billingCycle: 'month',
+    status: 'canceled',
+  },
+  {
+    id: 'google_cloud',
+    title: 'Google Cloud',
+    icon: '/assets/company-avatar-2.png',
+    costs: '$100-200',
+    billingCycle: 'month',
+    status: 'paid',
+  },
+  {
+    id: 'stripe',
+    title: 'Stripe',
+    icon: '/assets/company-avatar-1.png',
+    costs: '$70',
+    billingCycle: 'month',
+    status: 'paid',
+  },
+];

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

@@ -1,7 +1,9 @@
 'use client';
 
 import * as React from 'react';
-// import type { Metadata } from 'next';
+import GetAllLessonCategoriesCount from '@/db/LessonCategories/GetAllCount';
+import GetAllLessonTypesCount from '@/db/LessonTypes/GetAllCount';
+import GetAllUsersCount from '@/db/Users/GetAllCount';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
@@ -11,14 +13,12 @@ import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/dist/ssr/Arr
 import { Briefcase as BriefcaseIcon } from '@phosphor-icons/react/dist/ssr/Briefcase';
 import { FileCode as FileCodeIcon } from '@phosphor-icons/react/dist/ssr/FileCode';
 import { Info as InfoIcon } from '@phosphor-icons/react/dist/ssr/Info';
+// import type { Metadata } from 'next';
 import { ListChecks as ListChecksIcon } from '@phosphor-icons/react/dist/ssr/ListChecks';
 import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
-import { Users as UsersIcon } from '@phosphor-icons/react/dist/ssr/Users';
-import { Warning as WarningIcon } from '@phosphor-icons/react/dist/ssr/Warning';
 import { useTranslation } from 'react-i18next';
 
 // import { config } from '@/config';
-import { dayjs } from '@/lib/dayjs';
 import { AppChat } from '@/components/dashboard/overview/app-chat';
 import { AppLimits } from '@/components/dashboard/overview/app-limits';
 import { AppUsage } from '@/components/dashboard/overview/app-usage';
@@ -27,13 +27,27 @@ import { HelperWidget } from '@/components/dashboard/overview/helper-widget';
 import { Subscriptions } from '@/components/dashboard/overview/subscriptions';
 import { Summary } from '@/components/dashboard/overview/summary';
 
-// TODO: remove me
-// export const metadata = { title: `Overview | Dashboard | ${config.site.name}` } satisfies Metadata;
+import ActiveUserCount from '../../components/dashboard/overview/summary/ActiveUserCount';
+import { events as SampleEvents } from './SampleEvents';
+import { messages as SampleMessages } from './SampleMessages';
+import { SamplesubScriptions } from './SamplesubScriptions';
 
 export default function Page(): React.JSX.Element {
   const { t } = useTranslation();
 
-  // return <>helloworld</>;
+  const [lessonTypesCount, setLessonTypesCount] = React.useState(0);
+  const [lessonCategoriesCount, setLessonCategoriesCount] = React.useState(0);
+  const [usersCount, setUsersCount] = React.useState(0);
+
+  async function fetchAllCount(): Promise<void> {
+    setLessonTypesCount(await GetAllLessonTypesCount());
+    setLessonCategoriesCount(await GetAllLessonCategoriesCount());
+    setUsersCount(await GetAllUsersCount());
+  }
+
+  React.useEffect(() => {
+    void fetchAllCount();
+  }, []);
 
   return (
     <Box
@@ -57,13 +71,25 @@ export default function Page(): React.JSX.Element {
         </Stack>
         <Grid container spacing={4}>
           <Grid md={4} xs={12}>
-            <Summary amount={31} diff={15} icon={ListChecksIcon} title={t('Tickets')} trend="up" />
+            <ActiveUserCount />
           </Grid>
           <Grid md={4} xs={12}>
-            <Summary amount={240} diff={5} icon={UsersIcon} title={t('Sign ups')} trend="down" />
+            <Summary
+              amount={lessonCategoriesCount}
+              diff={15}
+              icon={ListChecksIcon}
+              title={t('lessonCategoriesCount')}
+              trend="up"
+            />
           </Grid>
           <Grid md={4} xs={12}>
-            <Summary amount={21} diff={12} icon={WarningIcon} title={t('Open issues')} trend="up" />
+            <Summary
+              amount={lessonTypesCount}
+              diff={15}
+              icon={ListChecksIcon}
+              title={t('lessonTypesCount')}
+              trend="up"
+            />
           </Grid>
           <Grid md={8} xs={12}>
             <AppUsage
@@ -84,116 +110,13 @@ export default function Page(): React.JSX.Element {
             />
           </Grid>
           <Grid md={4} xs={12}>
-            <Subscriptions
-              subscriptions={[
-                {
-                  id: 'supabase',
-                  title: 'Supabase',
-                  icon: '/assets/company-avatar-5.png',
-                  costs: '$599',
-                  billingCycle: 'year',
-                  status: 'paid',
-                },
-                {
-                  id: 'vercel',
-                  title: 'Vercel',
-                  icon: '/assets/company-avatar-4.png',
-                  costs: '$20',
-                  billingCycle: 'month',
-                  status: 'expiring',
-                },
-                {
-                  id: 'auth0',
-                  title: 'Auth0',
-                  icon: '/assets/company-avatar-3.png',
-                  costs: '$20-80',
-                  billingCycle: 'month',
-                  status: 'canceled',
-                },
-                {
-                  id: 'google_cloud',
-                  title: 'Google Cloud',
-                  icon: '/assets/company-avatar-2.png',
-                  costs: '$100-200',
-                  billingCycle: 'month',
-                  status: 'paid',
-                },
-                {
-                  id: 'stripe',
-                  title: 'Stripe',
-                  icon: '/assets/company-avatar-1.png',
-                  costs: '$70',
-                  billingCycle: 'month',
-                  status: 'paid',
-                },
-              ]}
-            />
+            <Subscriptions subscriptions={SamplesubScriptions} />
           </Grid>
           <Grid md={4} xs={12}>
-            <AppChat
-              messages={[
-                {
-                  id: 'MSG-001',
-                  content: 'Hello, we spoke earlier on the phone',
-                  author: { name: 'Alcides Antonio', avatar: '/assets/avatar-10.png', status: 'online' },
-                  createdAt: dayjs().subtract(2, 'minute').toDate(),
-                },
-                {
-                  id: 'MSG-002',
-                  content: 'Is the job still available?',
-                  author: { name: 'Marcus Finn', avatar: '/assets/avatar-9.png', status: 'offline' },
-                  createdAt: dayjs().subtract(56, 'minute').toDate(),
-                },
-                {
-                  id: 'MSG-003',
-                  content: "What is a screening task? I'd like to",
-                  author: { name: 'Carson Darrin', avatar: '/assets/avatar-3.png', status: 'online' },
-                  createdAt: dayjs().subtract(3, 'hour').subtract(23, 'minute').toDate(),
-                },
-                {
-                  id: 'MSG-004',
-                  content: 'Still waiting for feedback',
-                  author: { name: 'Fran Perez', avatar: '/assets/avatar-5.png', status: 'online' },
-                  createdAt: dayjs().subtract(8, 'hour').subtract(6, 'minute').toDate(),
-                },
-                {
-                  id: 'MSG-005',
-                  content: 'Need more information about campaigns',
-                  author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png', status: 'offline' },
-                  createdAt: dayjs().subtract(10, 'hour').subtract(18, 'minute').toDate(),
-                },
-              ]}
-            />
+            <AppChat messages={SampleMessages} />
           </Grid>
           <Grid md={4} xs={12}>
-            <Events
-              events={[
-                {
-                  id: 'EV-004',
-                  title: t('Meeting with partners'),
-                  description: '17:00 to 18:00',
-                  createdAt: dayjs().add(1, 'day').toDate(),
-                },
-                {
-                  id: 'EV-003',
-                  title: 'Interview with Jonas',
-                  description: '15:30 to 16:45',
-                  createdAt: dayjs().add(4, 'day').toDate(),
-                },
-                {
-                  id: 'EV-002',
-                  title: "Doctor's appointment",
-                  description: '12:30 to 15:30',
-                  createdAt: dayjs().add(4, 'day').toDate(),
-                },
-                {
-                  id: 'EV-001',
-                  title: 'Weekly meeting',
-                  description: '09:00 to 09:30',
-                  createdAt: dayjs().add(7, 'day').toDate(),
-                },
-              ]}
-            />
+            <Events events={SampleEvents} />
           </Grid>
           <Grid md={4} xs={12}>
             <AppLimits usage={80} />