Add cars overview page

app/cars/page.tsx

@@ -1,4 +1,51 @@
-const CarsPage = () => {
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { CarPieChart } from "@/components/CarPieChart";
+import { API_URL } from "@/config";
+import { fetchApi } from "@/utils/fetchApi";
+import type { Car } from "@/types";
+
+interface CarsPageProps {
+  searchParams: { [key: string]: string | string[] };
+}
+
+const VEHICLE_TYPE_MAP: Record<string, string> = {
+  "Multi-purpose Vehicle": "MPV",
+  "Multi-purpose Vehicle/Station-wagon": "MPV/Station-wagon",
+  "Sports Utility Vehicle": "SUV",
+};
+
+const CarsPage = async ({ searchParams }: CarsPageProps) => {
+  const { month } = searchParams;
+  const cars = await fetchApi<Car[]>(`${API_URL}/cars?month=${month}`);
+
+  const numberByFuelTypeMap: Record<string, number> = {};
+  cars.map((car) => {
+    if (!numberByFuelTypeMap[car.fuel_type]) {
+      numberByFuelTypeMap[car.fuel_type] = 0;
+    }
+
+    numberByFuelTypeMap[car.fuel_type] += car.number || 0;
+  });
+
+  const numberByVehicleType: Record<string, number> = {};
+  cars.map(({ vehicle_type, number }) => {
+    if (VEHICLE_TYPE_MAP.hasOwnProperty(vehicle_type)) {
+      vehicle_type = VEHICLE_TYPE_MAP[vehicle_type];
+    }
+
+    if (!numberByVehicleType[vehicle_type]) {
+      numberByVehicleType[vehicle_type] = 0;
+    }
+
+    numberByVehicleType[vehicle_type] += number || 0;
+  });
+
   return (
     <div>
       <ul>
@@ -13,6 +60,26 @@ const CarsPage = () => {
           Toyota, Electric - BYD, Diesel - Toyota)
         </li>
       </ul>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>By Fuel Type</CardTitle>
+            <CardDescription></CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CarPieChart data={numberByFuelTypeMap} />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>By Vehicle Type</CardTitle>
+            <CardDescription></CardDescription>
+          </CardHeader>
+          <CardContent>
+            <CarPieChart data={numberByVehicleType} />
+          </CardContent>
+        </Card>
+      </div>
     </div>
   );
 };

app/components/Header.tsx

@@ -18,7 +18,7 @@ import { FEATURE_FLAG_RELEASED } from "@/config";
 
 const navItems = [
   // { title: "Overview", href: "/" },
-  { title: "Cars", href: "/cars/petrol" },
+  { title: "Cars", href: "/cars" },
   { title: "COE", href: "/coe" },
 ];
 

components/CarPieChart.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { ResponsivePie } from "@nivo/pie";
+
+export const CarPieChart = ({ data }: any) => {
+  data = Object.entries(data).map(([key, value]) => {
+    return {
+      id: key,
+      label: key,
+      value,
+    };
+  });
+
+  return (
+    <div className="h-[300px]">
+      <ResponsivePie
+        data={data}
+        margin={{ top: 40, bottom: 40 }}
+        innerRadius={0.5}
+        padAngle={0.7}
+        cornerRadius={3}
+        activeOuterRadiusOffset={8}
+        colors={{ scheme: "tableau10" }}
+        arcLinkLabelsSkipAngle={1}
+        arcLinkLabelsTextColor="#333333"
+        arcLinkLabelsThickness={2}
+        arcLinkLabelsColor={{ from: "color" }}
+        arcLabelsSkipAngle={10}
+        arcLabelsTextColor={{
+          from: "color",
+          modifiers: [["brighter", 5]],
+        }}
+      />
+    </div>
+  );
+};

package.json

@@ -19,6 +19,7 @@
     "@nivo/bar": "^0.87.0",
     "@nivo/core": "^0.87.0",
     "@nivo/line": "^0.87.0",
+    "@nivo/pie": "^0.87.0",
     "@nivo/treemap": "^0.87.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-navigation-menu": "^1.1.4",