diff --git a/webapp/package-lock.json b/webapp/package-lock.json index da2df73..f8f81ed 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -32,6 +32,7 @@ "eslint-config-next": "^14.0.1", "formik": "^2.4.2", "formik-wizard-form": "^2.1.0", + "lucide-react": "^0.519.0", "mongoose": "^7.4.1", "next": "^13.4.12", "next-intl": "^2.19.0", @@ -4657,6 +4658,15 @@ "node": ">=10" } }, + "node_modules/lucide-react": { + "version": "0.519.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.519.0.tgz", + "integrity": "sha512-cLJyjRKBJFzaZ/+1oIeQaH7XUdxKOYU3uANcGSrKdIZWElmNbRAm8RXKiTJS7AWLCBOS8b7A497Al/kCHozd+A==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", diff --git a/webapp/package.json b/webapp/package.json index 9896dd5..9d18147 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -33,6 +33,7 @@ "eslint-config-next": "^14.0.1", "formik": "^2.4.2", "formik-wizard-form": "^2.1.0", + "lucide-react": "^0.519.0", "mongoose": "^7.4.1", "next": "^13.4.12", "next-intl": "^2.19.0", diff --git a/webapp/src/components/dashboard/home/generalLook.tsx b/webapp/src/components/dashboard/home/generalLook.tsx index ed519cd..7869f56 100644 --- a/webapp/src/components/dashboard/home/generalLook.tsx +++ b/webapp/src/components/dashboard/home/generalLook.tsx @@ -7,116 +7,90 @@ export default function GeneralLook() const t = useTranslations('statistics'); const report = useAppSelector((state) => state.statisticsReducer.value.report) - return ( - <> + if (!report) { + return (
-
-
- - - - - - -

{report?.membersCount.value}

-

{t('totalMembers')}

- -
-
- - - - - - -

{report?.activeMembersCount.value}

-

{t('totalActiveMembers')}

- -
-
- - - - - - -

{report?.disActiveMembersCount.value}

-

{t('totalUnActiveMembers')}

- -
-
-
-
- - - - - - -

{report?.servicesCount.value}

-

{t('totalServices')}

- -
-
- - - - - - -

{report?.activeServicesCount.value}

-

{t('totalActiveServices')}

- -
-
- - - - - - -

{report?.disActiveServicesCount.value}

-

{t('totalUnActiveServices')}

- -
-
-
-
- - - - - - -

{report?.activeSubscriptionsCount.value}

-

{t('totalActiveSubscriptions')}

- -
-
- - - - - - - -

{report?.expiredSoonSubscriptionsCount.value}

-

{t('expiredSoonSubscriptionsCount')}

- -
-
- - - - - - -

{report?.expiredSubscriptionsCount.value}

-

{t('totalExpiredSubscriptions')}

- -
+
+
- + ); + } + + const stats = [ + { + icon: 'members', + value: report?.membersCount?.value ?? 0, + label: t('totalMembers'), + bgColor: 'bg-info' + }, + { + icon: 'activeMembers', + value: report?.activeMembersCount?.value ?? 0, + label: t('totalActiveMembers'), + bgColor: 'bg-success' + }, + { + icon: 'disActiveMembers', + value: report?.disActiveMembersCount?.value ?? 0, + label: t('totalUnActiveMembers'), + bgColor: 'bg-error' + }, + { + icon: 'services', + value: report?.servicesCount?.value ?? 0, + label: t('totalServices'), + bgColor: 'bg-info' + }, + { + icon: 'activeServices', + value: report?.activeServicesCount?.value ?? 0, + label: t('totalActiveServices'), + bgColor: 'bg-success' + }, + { + icon: 'disActiveServices', + value: report?.disActiveServicesCount?.value ?? 0, + label: t('totalUnActiveServices'), + bgColor: 'bg-error' + }, + { + icon: 'activeSubscriptions', + value: report?.activeSubscriptionsCount?.value ?? 0, + label: t('totalActiveSubscriptions'), + bgColor: 'bg-info' + }, + { + icon: 'expiredSoonSubscriptions', + value: report?.expiredSoonSubscriptionsCount?.value ?? 0, + label: t('expiredSoonSubscriptionsCount'), + bgColor: 'bg-warning' + }, + { + icon: 'expiredSubscriptions', + value: report?.expiredSubscriptionsCount?.value ?? 0, + label: t('totalExpiredSubscriptions'), + bgColor: 'bg-error' + } + ]; + + return ( +
+ {stats.map((stat, index) => ( +
+
+ + + + + + +

{stat.value}

+

{stat.label}

+ +
+
+ ))} +
) } \ No newline at end of file