Merge pull request #4 from Chia-Network/ui-and-codebase-improvements

refactor: refactor dashboard components and enhance data handling

src/main.ts

@@ -32,7 +32,7 @@ function createWindow() {
   // Load URL based on the environment
   const loadUrl =
     process.env.NODE_ENV === 'development'
-      ? 'http://localhost:5173/' // Development URL
+      ? 'http://localhost:5176/' // Development URL
       : `http://localhost:${serverPort}/`; // Production URL served by Express
 
   win.loadURL(loadUrl);

src/renderer/api/index.ts

@@ -1,4 +1,3 @@
-export * from './cadt/v1/sampleProjects.api';
 export * from './cadt/v1/system.api';
 export * from './cadt/v1/projectsCount.api';
 export * from './cadt/v1/governance.api';

src/renderer/components/blocks/layout/ApprovedProjectsCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl, IntlShape } from 'react-intl';
 import { useGetProjectsCountQuery } from '@/api';
 import { Card, SkeletonCard } from '@/components';
 import { ProjectsStatusCount } from '@/schemas/ProjectsStatusCount.schema';
@@ -16,6 +16,7 @@ const ApprovedProjectsCard: React.FC<ApprovedProjectsCardProps> = ({ onGlossaryC
   } = useGetProjectsCountQuery({
     status: true,
   });
+  const intl: IntlShape = useIntl();
 
   if (projectsStatusCountLoading) {
     return <SkeletonCard />;
@@ -37,8 +38,10 @@ const ApprovedProjectsCard: React.FC<ApprovedProjectsCardProps> = ({ onGlossaryC
     );
   }
 
-  const projectStatusData = projectsStatusCountData.data as ProjectsStatusCount[];
-  const statusCount = projectStatusData.find((s) => s.projectStatus === 'Approved')?.count || 0;
+  const projectStatusData = projectsStatusCountData?.data
+    ? (projectsStatusCountData?.data as ProjectsStatusCount[])
+    : [];
+  const statusCount = projectStatusData.find((s) => s?.projectStatus === 'Approved')?.count || 0;
 
   return (
     <Card>
@@ -50,7 +53,7 @@ const ApprovedProjectsCard: React.FC<ApprovedProjectsCardProps> = ({ onGlossaryC
             onClick={onGlossaryClick}
             className="text-left underline text-lime-500 dark:text-green-400"
           >
-            Projects Approved
+            {intl.formatMessage({ id: 'projects-approved' })}
           </a>
         </h4>
       </div>

src/renderer/components/blocks/layout/AuthorizedProjectsCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl, IntlShape } from 'react-intl';
 import { useGetProjectsCountQuery } from '@/api';
 import { Card, SkeletonCard } from '@/components';
 import { ProjectsStatusCount } from '@/schemas/ProjectsStatusCount.schema';
@@ -16,6 +16,7 @@ const AuthorizedProjectsCard: React.FC<AuthorizedProjectsCardProps> = ({ onGloss
   } = useGetProjectsCountQuery({
     status: true,
   });
+  const intl: IntlShape = useIntl();
 
   if (projectsStatusCountLoading) {
     return <SkeletonCard />;
@@ -37,16 +38,18 @@ const AuthorizedProjectsCard: React.FC<AuthorizedProjectsCardProps> = ({ onGloss
     );
   }
 
-  const projectStatusData = projectsStatusCountData.data as ProjectsStatusCount[];
-  const statusCount = projectStatusData.find((s) => s.projectStatus === 'Authorized')?.count || 0;
+  const projectStatusData = projectsStatusCountData?.data
+    ? (projectsStatusCountData?.data as ProjectsStatusCount[])
+    : [];
+  const statusCount = projectStatusData.find((s) => s?.projectStatus === 'Authorized')?.count || 0;
 
   return (
     <Card>
       <div className="flex flex-col gap-4 p-4 text-center">
         <h3 className="text-7xl bold">{statusCount}</h3>
         <h4 className="text-lg font-semibold">
           <a href="#glossary" onClick={onGlossaryClick} className="text-left underline text-sky-400 dark:text-blue-500">
-            Projects Authorized
+            {intl.formatMessage({ id: 'projects-authorized' })}
           </a>
         </h4>
       </div>

src/renderer/components/blocks/layout/CarbonCreditByStatusChart.tsx

@@ -10,8 +10,9 @@ import { capitalizeText } from '@/utils/text-utils';
 ChartJS.register(ArcElement, Tooltip, Legend);
 
 const CarbonCreditByStatusChart: React.FC = () => {
+  const currentYear = new Date().getFullYear();
   const [unitStatus] = useQueryParamState('carbonCreditUnitStatus', 'all');
-  const [vintageYear, setVintageYear] = useQueryParamState('vintageYear', undefined);
+  const [vintageYear, setVintageYear] = useQueryParamState('vintageYear', String(currentYear));
   const intl: IntlShape = useIntl();
 
   const {
@@ -20,14 +21,6 @@ const CarbonCreditByStatusChart: React.FC = () => {
     error: carbonCreditByStatusError,
   } = useGetTonsCo2Query({ unitStatus, vintageYear });
 
-  const labels = carbonCreditByStatusData?.data.map((item: any) => item.unitStatus) || [];
-  const datasetData = carbonCreditByStatusData?.data.map((item: any) => item.tonsCo2) || [];
-  const chartData = createChartDataWithSingleDataset(labels, datasetData, 'TonsCo2');
-
-  const handleYearChange = (value: string | number) => {
-    setVintageYear(value as string);
-  };
-
   if (carbonCreditByStatusLoading) {
     return <SkeletonCard />;
   }
@@ -48,13 +41,25 @@ const CarbonCreditByStatusChart: React.FC = () => {
     );
   }
 
+  const labels = carbonCreditByStatusData?.data?.map((item: any) => item?.unitStatus) || [];
+  const datasetData = carbonCreditByStatusData?.data?.map((item: any) => item?.tonsCo2) || [];
+  const chartData = createChartDataWithSingleDataset(
+    labels,
+    datasetData,
+    capitalizeText(intl.formatMessage({ id: 'tons-co2' })),
+  );
+
+  const handleYearChange = (value: string | number) => {
+    setVintageYear(value as string);
+  };
+
   return (
     <Card>
       <div className="grid justify-end">
         <Select name="year" options={generateYearsRange(10)} initialValue={vintageYear} onChange={handleYearChange} />
       </div>
       <PieChart
-        className="max-h-[450px]"
+        className="max-h-[420px]"
         data={chartData}
         options={{
           ...pieChartOptionsBase,