Merge pull request #6214 from bcgov/chore/6168

refactor(6153): reorganize cost component structure

Author: junminahn

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

@@ -0,0 +1,99 @@
+import { Select, Switch, Tooltip } from '@mantine/core';
+import { MonthPickerInput, YearPickerInput } from '@mantine/dates';
+import { useQuery } from '@tanstack/react-query';
+import { format } from 'date-fns';
+import { useEffect } from 'react';
+import { getMonthlyCosts, getQuarterlyCosts, getYearlyCosts } from '@/services/backend/private-cloud/products';
+import { PeriodCosts, CostPeriod } from '@/types/private-cloud';
+import { formatCurrency } from '@/utils/js';
+import { formatAsYearQuarter, getDateFromYyyyMmDd } from '@/utils/js';
+import { useCostState } from './state';
+
+const inputClasses = 'border-gray-600 focus:border-gray-800 dark:border-gray-500 dark:focus:border-gray-300';
+
+const switchStyles = (enabled: boolean) => ({
+  track: {
+    cursor: 'pointer',
+    backgroundColor: enabled ? '#0D5EA6' : undefined,
+  },
+});
+
+export default function PeriodSelector({ licencePlate }: { licencePlate: string }) {
+  const [state, snap] = useCostState();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['costItems', licencePlate, snap.period, snap.selectedDate],
+    queryFn: () => {
+      console.log('here');
+      if (snap.period === CostPeriod.Monthly) {
+        return getMonthlyCosts(licencePlate, format(snap.selectedDate, 'yyyy-MM'));
+      }
+
+      if (snap.period === CostPeriod.Quarterly) {
+        return getQuarterlyCosts(licencePlate, formatAsYearQuarter(snap.selectedDate));
+      }
+
+      return getYearlyCosts(licencePlate, snap.selectedDate.getFullYear().toString());
+    },
+    enabled: !!licencePlate && !!snap.selectedDate,
+  });
+
+  useEffect(() => {
+    if (data) state.data = data;
+  }, [data]);
+
+  const isMonthPicker = snap.period === CostPeriod.Monthly || snap.period === CostPeriod.Quarterly;
+
+  const handlePeriodChange = (value: string | null) => (state.period = value as CostPeriod);
+  const handleDateChange = (value: string | null) =>
+    (state.selectedDate = value ? getDateFromYyyyMmDd(value) : new Date());
+
+  return (
+    <div className="space-y-4">
+      <div className="flex px-8 bg-zinc-100 items-center justify-between w-full border-b">
+        <div className="flex items-center gap-4 py-7">
+          <Tooltip label="Select Mode">
+            <Select
+              placeholder="Select Mode"
+              value={snap.period}
+              data={Object.values(CostPeriod)}
+              onChange={handlePeriodChange}
+              classNames={{ input: inputClasses }}
+            />
+          </Tooltip>
+
+          <Tooltip label={`Select a ${isMonthPicker ? 'month' : 'year'}`}>
+            {isMonthPicker ? (
+              <MonthPickerInput
+                placeholder="Select a month"
+                maw={200}
+                value={snap.selectedDate}
+                onChange={handleDateChange}
+                classNames={{ input: inputClasses }}
+              />
+            ) : (
+              <YearPickerInput
+                placeholder="Select a year"
+                maw={200}
+                value={snap.selectedDate}
+                onChange={handleDateChange}
+                classNames={{ input: inputClasses }}
+              />
+            )}
+          </Tooltip>
+        </div>
+        {/*
+        <Switch
+          label="Forecast"
+          checked={forecastEnabled}
+          onChange={(event) => onForecastChange(event.currentTarget.checked)}
+          classNames={{
+            label: 'cursor-pointer',
+            thumb: 'cursor-pointer',
+          }}
+          styles={switchStyles(forecastEnabled)}
+        /> */}
+      </div>
+    </div>
+  );
+}

app/app/private-cloud/products/(product)/[licencePlate]/costs/DateSelector.tsx renamed to app/app/private-cloud/products/(product)/[licencePlate]/costs/PeriodSelector_tobedeleted.tsx

@@ -1,7 +1,7 @@
 import { Select, Switch, Tooltip } from '@mantine/core';
 import { MonthPickerInput, YearPickerInput } from '@mantine/dates';
 import { format } from 'date-fns';
-import { PeriodCosts, TimeView } from '@/types/private-cloud';
+import { PeriodCosts, CostPeriod } from '@/types/private-cloud';
 import { formatCurrency } from '@/utils/js';
 
 const inputClasses = 'border-gray-600 focus:border-gray-800 dark:border-gray-500 dark:focus:border-gray-300';
@@ -13,7 +13,7 @@ const switchStyles = (enabled: boolean) => ({
   },
 });
 
-export default function DateSelector({
+export default function PeriodSelector({
   selectedDate,
   handleDateChange,
   viewMode,
@@ -26,21 +26,21 @@ export default function DateSelector({
 }: {
   selectedDate: Date;
   handleDateChange: (date: string | null) => void;
-  viewMode: TimeView;
-  onModeChange: (mode: TimeView) => void;
+  viewMode: CostPeriod;
+  onModeChange: (mode: CostPeriod) => void;
   onForecastChange: (enabled: boolean) => void;
   forecastEnabled: boolean;
   showForecastSwitch?: boolean;
   showTable?: boolean;
   data: PeriodCosts;
 }) {
   const handleModeChange = (value: string | null) => {
-    if (value && Object.values(TimeView).includes(value as TimeView)) {
-      onModeChange(value as TimeView);
+    if (value && Object.values(CostPeriod).includes(value as CostPeriod)) {
+      onModeChange(value as CostPeriod);
     }
   };
 
-  const isMonthPicker = viewMode === TimeView.Monthly || viewMode === TimeView.Quarterly;
+  const isMonthPicker = viewMode === CostPeriod.Monthly || viewMode === CostPeriod.Quarterly;
   const currentMonth = format(selectedDate, 'MMMM');
 
   return (
@@ -51,7 +51,7 @@ export default function DateSelector({
             <Select
               placeholder="Select Mode"
               value={viewMode}
-              data={Object.values(TimeView)}
+              data={Object.values(CostPeriod)}
               onChange={handleModeChange}
               classNames={{ input: inputClasses }}
             />
@@ -100,23 +100,23 @@ export default function DateSelector({
               condition: data.currentTotal !== -1,
               value: data.currentTotal,
               label:
-                viewMode === TimeView.Monthly
+                viewMode === CostPeriod.Monthly
                   ? `Current total cost for ${currentMonth}`
                   : `Current total cost for ${data.billingPeriod}`,
             },
             {
               condition: data.grandTotal !== -1,
               value: data.grandTotal,
               label:
-                viewMode === TimeView.Monthly
+                viewMode === CostPeriod.Monthly
                   ? `Grand total cost for ${currentMonth}`
                   : `Grand total cost for ${data.billingPeriod}`,
             },
             {
               condition: data.estimatedGrandTotal !== -1 && forecastEnabled,
               value: data.estimatedGrandTotal,
               label:
-                viewMode === TimeView.Monthly
+                viewMode === CostPeriod.Monthly
                   ? `Estimated grand total cost for ${currentMonth}`
                   : `Estimated grand total cost for ${data.billingPeriod}`,
             },