update,

002_source/cms/src/components/dashboard/overview/summary/ActiveUserCount/index.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import * as React from 'react';
+import getAllUserMetasCount from '@/db/UserMetas/GetAllCount';
+// import GetAllUsersCount from '@/db/Users/GetAllCount.tsx';
+import { Typography } from '@mui/material';
+import { Users as UsersIcon } from '@phosphor-icons/react/dist/ssr/Users';
+import { useTranslation } from 'react-i18next';
+
+import { Summary } from '@/components/dashboard/overview/summary';
+
+function ActiveUserCount(): React.JSX.Element {
+  const { t } = useTranslation();
+  const [amount, setAmount] = React.useState<number>(0);
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    getAllUserMetasCount()
+      .then((count) => {
+        setAmount(count);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        setAmount(-99);
+      });
+  }, []);
+
+  if (isLoading) {
+    return <Typography>Loading...</Typography>;
+  }
+
+  return (
+    <Summary
+      amount={amount}
+      diff={10}
+      icon={UsersIcon}
+      title={t('用戶數量1')}
+      trend="up"
+      //
+    />
+  );
+}
+
+export default ActiveUserCount;

002_source/cms/src/components/dashboard/overview/summary/LessonCategoriesCount/index.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+/*
+# PROMPT
+
+this is a subset of a typescript project
+
+clone `LessonTypeCount`, `LessonCategoriesCount` to `UserCount` and do modifiy to get the count of users, thanks.
+*/
+import * as React from 'react';
+import GetAllCount from '@/db/LessonCategories/GetAllCount.tsx';
+import { Typography } from '@mui/material';
+import { ListChecks as ListChecksIcon } from '@phosphor-icons/react/dist/ssr/ListChecks';
+import { useTranslation } from 'react-i18next';
+
+import { Summary } from '@/components/dashboard/overview/summary';
+
+function LessonCategoriesCount(): React.JSX.Element {
+  const { t } = useTranslation();
+  const [amount, setAmount] = React.useState<number>(0);
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    GetAllCount()
+      .then((count) => {
+        setAmount(count);
+      })
+      .catch((err) => {
+        // console.error(err);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  if (isLoading) {
+    return <Typography>Loading</Typography>;
+  }
+
+  return (
+    <Summary
+      amount={amount}
+      diff={15}
+      icon={ListChecksIcon}
+      title={t('課程類別')}
+      trend="up"
+      //
+    />
+  );
+}
+
+export default React.memo(LessonCategoriesCount);

002_source/cms/src/components/dashboard/overview/summary/LessonTypeCount/index.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+/*
+# PROMPT
+
+this is a subset of a typescript project
+
+clone `LessonTypeCount` to `LessonCategoriesCount` and do modifiy to get the count of lesson category, thanks.
+*/
+import * as React from 'react';
+import GetAllCount from '@/db/LessonTypes/GetAllCount.tsx';
+import { Typography } from '@mui/material';
+import { ListChecks as ListChecksIcon } from '@phosphor-icons/react/dist/ssr/ListChecks';
+import { useTranslation } from 'react-i18next';
+
+import { Summary } from '@/components/dashboard/overview/summary';
+
+function LessonTypeCount(): React.JSX.Element {
+  const { t } = useTranslation();
+  const [amount, setAmount] = React.useState<number>(0);
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    GetAllCount()
+      .then((count) => {
+        setAmount(count);
+      })
+      .catch((err) => {
+        // console.error(err);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  if (isLoading) {
+    return <Typography>Loading...</Typography>;
+  }
+
+  return (
+    <Summary
+      amount={amount}
+      diff={15}
+      icon={ListChecksIcon}
+      title={t('課程類型')}
+      trend="up"
+      //
+    />
+  );
+}
+
+export default React.memo(LessonTypeCount);