Merge branch 'main' into feature/feedback

client/package.json

@@ -12,6 +12,8 @@
     "test": "vitest --run --passWithNoTests"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "^2.1.1",
+    "@heroicons/react": "^2.1.5",
     "@hookform/resolvers": "^3.6.0",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
@@ -24,18 +26,22 @@
     "@tanstack/react-query": "^5.50.1",
     "@uploadthing/react": "^6.7.2",
     "axios": "^1.7.3",
+    "chart.js": "^4.4.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "embla-carousel-autoplay": "^8.1.6",
     "embla-carousel-react": "^8.1.6",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.417.0",
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.52.0",
     "react-router-dom": "^6.24.1",
-    "tailwind-merge": "^2.4.0",
+    "react-style-singleton": "^2.2.1",
+    "recharts": "^2.12.7",
+    "tailwind-merge": "^2.5.0",
     "tailwindcss-animate": "^1.0.7",
     "type-fest": "^4.23.0",
     "zod": "^3.23.8"
@@ -54,7 +60,7 @@
     "eslint-plugin-react-refresh": "^0.4.8",
     "eslint-plugin-tailwindcss": "^3.17.4",
     "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.9",
     "typescript": "^5.5.3",
     "vite": "^5.3.1",
     "vite-tsconfig-paths": "^4.3.2",

client/src/components/ui/graph.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+
+// Register the components
+Chart.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+);
+
+interface Sale {
+  date: string;
+  amount: number;
+}
+
+interface GraphProps {
+  salesData: Sale[];
+}
+
+const Graph: React.FC<GraphProps> = ({ salesData }) => {
+  const chartData = {
+    labels: salesData.map((sale) => sale.date),
+    datasets: [
+      {
+        label: 'Sales Amount',
+        data: salesData.map((sale) => sale.amount),
+        borderColor: 'rgba(75, 192, 192, 1)',
+        backgroundColor: 'rgba(75, 192, 192, 0.2)',
+      },
+    ],
+  };
+
+  return (
+    <div>
+      <Line data={chartData} />
+    </div>
+  );
+};
+
+export default Graph;

client/src/components/ui/pieChart.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Pie } from 'react-chartjs-2';
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
+import { TooltipItem } from 'chart.js';
+
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+interface SustainabilityPieChartProps {
+  data: {
+    label: string;
+    value: number;
+  }[];
+}
+
+const SustainabilityPieChart: React.FC<SustainabilityPieChartProps> = ({
+  data,
+}) => {
+  // Prepare data for the chart
+  const chartData = {
+    labels: data.map((item) => item.label),
+    datasets: [
+      {
+        data: data.map((item) => item.value),
+        backgroundColor: [
+          '#FF6384',
+          '#36A2EB',
+          '#FFCE56',
+          '#FF5733',
+          '#C70039',
+        ],
+        borderColor: '#fff',
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  // Options for the pie chart
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        position: 'top' as const,
+      },
+      tooltip: {
+        callbacks: {
+          label: (tooltipItem: TooltipItem<'pie'>) => {
+            return `${tooltipItem.label}: ${tooltipItem.raw}`;
+          },
+        },
+      },
+    },
+  };
+
+  return (
+    <div className="flex size-full items-center justify-center p-6">
+      <div className="size-80">
+        <Pie data={chartData} options={options} />
+      </div>
+    </div>
+  );
+};
+
+export default SustainabilityPieChart;

client/src/lib/api-types/dashboard.ts

@@ -5,15 +5,40 @@
  */
 
 import * as z from 'zod';
-
-import { dashboard } from './schemas';
 import type { SuccessResponse, ErrorResponse } from './index';
+import { dashboardUpdateSchema } from './schemas/dashboard';
 
 /**
  * Successful response for /v1/user endpoint
  */
+// Define types for sales data and sustainability data
+interface SalesData {
+  date: string;
+  amount: number;
+}
+
+interface SustainabilityData {
+  label: string; // Ensure the 'label' property is included
+  value: number;
+}
+
+// Define the Dashboard type using z.infer and dashboardUpdateSchema
+export type Dashboard = z.infer<typeof dashboardUpdateSchema>;
+
+export interface DashboardResponse {
+  data: DashboardResponse | PromiseLike<DashboardResponse>;
+  dashboard: Dashboard[];
+  salesData: SalesData[];
+  sustainabilityData: SustainabilityData[];
+}
+
+// Successful response for /v1/dashboard endpoint
 export interface GetDashboardSuccAPI
-  extends SuccessResponse<z.infer<typeof dashboard.dashboardSchema>> {}
+  extends SuccessResponse<{
+    dashboard: Dashboard[];
+    salesData: SalesData[];
+    sustainabilityData: SustainabilityData[];
+  }> {}
 
 /**
  * Failure response for dashboard-related endpoints
@@ -22,3 +47,10 @@ export type GetDashboardFailAPI = ErrorResponse<
   | 'An unexpected error occurred. Please try again later'
   | 'There was a problem accessing the database. Please try again later'
 >;
+
+/**
+ * Successful response for /v1/user/update POST endpoint
+ */
+export interface UpdateDashboardSuccAPI
+  extends SuccessResponse<{ updated: true }> {}
+export type UpdateDashboardFailAPI = ErrorResponse<'Nothing to update!'>;

client/src/lib/api-types/schemas/dashboard.ts

@@ -7,3 +7,8 @@ export const dashboardSchema = z.object({
   createdAt: z.date(),
   updatedAt: z.date(),
 });
+
+export const dashboardUpdateSchema = z.object({
+  title: z.string().min(1, 'Title is required').optional(),
+  description: z.string().optional().optional(),
+});