Merge pull request #5959 from bcgov/feat/5856

feat(5856): replace cost tables with table cc

Author: golebu2020

app/app/private-cloud/products/(product)/[licencePlate]/costs/Monthly.tsx

@@ -5,12 +5,14 @@ import { MonthPickerInput } from '@mantine/dates';
 import { useQuery } from '@tanstack/react-query';
 import { format } from 'date-fns';
 import { Session } from 'next-auth';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import DataTable from '@/components/generic/data-table/DataTable';
 import LoadingBox from '@/components/generic/LoadingBox';
 import MonthlyCostSummary from '@/components/private-cloud/monthly-cost/MonthlyCostSummary';
-import MonthlyCostTable from '@/components/private-cloud/monthly-cost/MonthlyCostTable';
 import MonthlyCostChart from '@/components/private-cloud/monthly-cost/MonthyCostChart';
+import { dailyCostColumns, periodicCostColumns } from '@/constants/private-cloud';
 import { downloadPrivateCloudMonthlyCosts, getMonthlyCosts } from '@/services/backend/private-cloud/products';
+import { DailyCostMetric, PeriodicCostMetric } from '@/types/private-cloud';
 import { getDateFromYyyyMmDd } from '@/utils/js';
 
 export default function Monthly({ licencePlate, session }: { licencePlate: string; session: Session }) {
@@ -31,6 +33,22 @@ export default function Monthly({ licencePlate, session }: { licencePlate: strin
     setSelectedDate(date ? getDateFromYyyyMmDd(date) : new Date());
   };
 
+  const dailyCostData = data.days.map((day, idx) => {
+    const { cpuToDate, storageToDate, cpuToProjected, storageToProjected } = data.dayDetails;
+    const totalCost = cpuToDate[idx] + storageToDate[idx] + cpuToProjected[idx] + storageToProjected[idx];
+
+    return {
+      day,
+      dayDetails: {
+        cpuToDate: cpuToDate[idx],
+        storageToDate: storageToDate[idx],
+        cpuToProjected: cpuToProjected[idx],
+        storageToProjected: storageToProjected[idx],
+        totalCost,
+      },
+    };
+  });
+
   return (
     <div>
       <div className="flex items-center gap-4 mb-6">
@@ -70,7 +88,8 @@ export default function Monthly({ licencePlate, session }: { licencePlate: strin
       )}
 
       <LoadingBox isLoading={isLoading}>
-        <MonthlyCostTable data={{ items: data.items, days: data.days, dayDetails: data.dayDetails }} />
+        <DataTable<PeriodicCostMetric> data={data.items} columns={periodicCostColumns} defaultPageSize={5} />
+        <DataTable<DailyCostMetric> data={dailyCostData} columns={dailyCostColumns} defaultPageSize={5} />
       </LoadingBox>
     </div>
   );

app/app/private-cloud/products/(product)/[licencePlate]/costs/Quarterly.tsx

@@ -4,12 +4,14 @@ import { Button, Tooltip } from '@mantine/core';
 import { MonthPickerInput } from '@mantine/dates';
 import { useQuery } from '@tanstack/react-query';
 import { Session } from 'next-auth';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import DataTable from '@/components/generic/data-table/DataTable';
 import LoadingBox from '@/components/generic/LoadingBox';
 import QuarterlyCostChart from '@/components/private-cloud/quarterly-cost/QuarterlyCostChart';
 import QuarterlyCostSummary from '@/components/private-cloud/quarterly-cost/QuarterlyCostSummary';
-import QuarterlyCostTable from '@/components/private-cloud/quarterly-cost/QuarterlyCostTable';
+import { monthlyCostColumns, periodicCostColumns } from '@/constants/private-cloud';
 import { downloadPrivateCloudQuarterlyCosts, getQuarterlyCosts } from '@/services/backend/private-cloud/products';
+import { MonthlyCostMetric, PeriodicCostMetric } from '@/types/private-cloud';
 import { formatAsYearQuarter, getDateFromYyyyMmDd } from '@/utils/js';
 
 export default function Quarterly({ licencePlate, session }: { licencePlate: string; session: Session }) {
@@ -30,6 +32,22 @@ export default function Quarterly({ licencePlate, session }: { licencePlate: str
     setSelectedDate(date ? getDateFromYyyyMmDd(date) : new Date());
   };
 
+  const monthlyCostData = data.months.map((month, idx) => {
+    const { cpuToDate, storageToDate, cpuToProjected, storageToProjected } = data.monthDetails;
+    const totalCost = cpuToDate[idx] + storageToDate[idx] + cpuToProjected[idx] + storageToProjected[idx];
+
+    return {
+      month,
+      monthDetails: {
+        cpuToDate: cpuToDate[idx],
+        storageToDate: storageToDate[idx],
+        cpuToProjected: cpuToProjected[idx],
+        storageToProjected: storageToProjected[idx],
+        totalCost,
+      },
+    };
+  });
+
   return (
     <div>
       <div className="flex items-center gap-4 mb-6">
@@ -68,7 +86,8 @@ export default function Quarterly({ licencePlate, session }: { licencePlate: str
       )}
 
       <LoadingBox isLoading={isLoading}>
-        <QuarterlyCostTable data={{ items: data.items, months: data.months, monthDetails: data.monthDetails }} />
+        <DataTable<PeriodicCostMetric> data={data.items} columns={periodicCostColumns} defaultPageSize={5} />
+        <DataTable<MonthlyCostMetric> data={monthlyCostData} columns={monthlyCostColumns} defaultPageSize={5} />
       </LoadingBox>
     </div>
   );

app/app/private-cloud/products/(product)/[licencePlate]/costs/Yearly.tsx

@@ -5,11 +5,13 @@ import { YearPickerInput } from '@mantine/dates';
 import { useQuery } from '@tanstack/react-query';
 import { Session } from 'next-auth';
 import { useState } from 'react';
+import DataTable from '@/components/generic/data-table/DataTable';
 import LoadingBox from '@/components/generic/LoadingBox';
 import YearlyCostChart from '@/components/private-cloud/yearly-cost/YearlyCostChart';
 import YearlyCostSummary from '@/components/private-cloud/yearly-cost/YearlyCostSummary';
-import YearlyCostTable from '@/components/private-cloud/yearly-cost/YearlyCostTable';
+import { monthlyCostColumns, periodicCostColumns } from '@/constants/private-cloud';
 import { downloadPrivateCloudYearlyCosts, getYearlyCosts } from '@/services/backend/private-cloud/products';
+import { MonthlyCostMetric, PeriodicCostMetric } from '@/types/private-cloud';
 
 export default function Yearly({ licencePlate, session }: { licencePlate: string; session: Session }) {
   const [selectedYear, setSelectedYear] = useState<Date>(new Date());
@@ -30,6 +32,22 @@ export default function Yearly({ licencePlate, session }: { licencePlate: string
     setSelectedYear(year ? new Date(Number(year)) : new Date());
   };
 
+  const monthlyCostData = data.months.map((month, idx) => {
+    const { cpuToDate, storageToDate, cpuToProjected, storageToProjected } = data.monthDetails;
+    const totalCost = cpuToDate[idx] + storageToDate[idx] + cpuToProjected[idx] + storageToProjected[idx];
+
+    return {
+      month,
+      monthDetails: {
+        cpuToDate: cpuToDate[idx],
+        storageToDate: storageToDate[idx],
+        cpuToProjected: cpuToProjected[idx],
+        storageToProjected: storageToProjected[idx],
+        totalCost,
+      },
+    };
+  });
+
   return (
     <div>
       <div className="flex items-center justify-between w-full mb-6">
@@ -68,7 +86,8 @@ export default function Yearly({ licencePlate, session }: { licencePlate: string
       )}
 
       <LoadingBox isLoading={isLoading}>
-        <YearlyCostTable data={{ items: data.items, months: data.months, monthDetails: data.monthDetails }} />
+        <DataTable<PeriodicCostMetric> data={data.items} columns={periodicCostColumns} defaultPageSize={5} />
+        <DataTable<MonthlyCostMetric> data={monthlyCostData} columns={monthlyCostColumns} defaultPageSize={5} />
       </LoadingBox>
     </div>
   );

app/components/generic/data-table/DataTable.tsx

@@ -89,7 +89,7 @@ export default function DataTable<TData extends object>({
 
   return (
     <>
-      <table className="w-full text-sm border-collapse border">
+      <table className="w-full text-sm border-collapse border mt-5">
         <thead>
           {table.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>

app/constants/private-cloud.ts

@@ -1,12 +1,14 @@
+import CostStatusBadge from '@/components/badges/CostStatusBadge';
 import { Cluster, Prisma, ResourceRequestsEnv, ResourceRequests, PrivateCloudProductMemberRole } from '@/prisma/client';
 import {
   CostTableColumnDef,
   CostMetric,
   DailyCostMetric,
   MonthlyCostMetric,
   PeriodicCostMetric,
+  MonthlyCost,
 } from '@/types/private-cloud';
-import { formatCurrency } from '@/utils/js';
+import { formatCurrency, getMonthNameFromNumber } from '@/utils/js';
 import { productSorts } from './common';
 
 export const privateCloudProductMemberRoles = Object.values(PrivateCloudProductMemberRole);
@@ -148,3 +150,18 @@ export const monthlyCostCommonColumns = <T extends MonthlyCostMetric>(): CostTab
 
 export const dailyCostCommonColumns = <T extends DailyCostMetric>(): CostTableColumnDef<T>[] =>
   createCostColumns<T, 'dayDetails'>('dayDetails');
+
+export const periodicCostColumns: CostTableColumnDef<PeriodicCostMetric>[] = [
+  { label: 'Data Range', value: 'startDate', cellProcessor: (item, attr) => CostStatusBadge(item) },
+  ...periodicCostCommonColumns<PeriodicCostMetric>(),
+];
+
+export const dailyCostColumns: CostTableColumnDef<DailyCostMetric>[] = [
+  { label: 'Day', value: 'day', cellProcessor: (item) => item.day },
+  ...dailyCostCommonColumns<DailyCostMetric>(),
+];
+
+export const monthlyCostColumns: CostTableColumnDef<MonthlyCostMetric>[] = [
+  { label: 'Month', value: 'month', cellProcessor: (item) => getMonthNameFromNumber(item.month) },
+  ...monthlyCostCommonColumns<MonthlyCostMetric>(),
+];