Add annual registrations data

app/components/KeyStatistics.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useGlobalState } from "@/context/GlobalStateContext";
+
+interface KeyStatisticsProps {
+  data: { year: number; total: number }[];
+}
+
+export const KeyStatistics = ({ data }: KeyStatisticsProps) => {
+  const { state, dispatch } = useGlobalState();
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Key Statistics</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2">
+          <div>
+            <Select
+              onValueChange={(year) =>
+                dispatch({ type: "SET_SELECTED_YEAR", payload: year })
+              }
+              defaultValue={state.selectedYear}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Select year" />
+              </SelectTrigger>
+              <SelectContent>
+                {data
+                  .sort((a, b) => b.year - a.year)
+                  .map((item) => (
+                    <SelectItem key={item.year} value={item.year.toString()}>
+                      {item.year}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <p>
+            Total Registrations in {state.selectedYear}:{" "}
+            {
+              data.find((item) => item.year.toString() === state.selectedYear)
+                ?.total
+            }
+          </p>
+          <p>
+            Highest Year:{" "}
+            {
+              data.reduce((max, item) => (item.total > max.total ? item : max))
+                .year
+            }
+          </p>
+          <p>
+            Lowest Year:{" "}
+            {
+              data.reduce((min, item) => (item.total < min.total ? item : min))
+                .year
+            }
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

app/components/Top5CarMakesByYear.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+interface Top5CarMakesByYearProps {
+  topMakes2023: any;
+}
+
+export const Top5CarMakesByYear = ({
+  topMakes2023,
+}: Top5CarMakesByYearProps) => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Top 5 Car Makes in 2023</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={300}>
+          <BarChart data={topMakes2023} layout="vertical">
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis type="number" />
+            <YAxis dataKey="make" type="category" />
+            <Tooltip />
+            <Bar dataKey="value" fill="#82ca9d" />
+          </BarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+};

app/components/TotalNewCarRegistrationsByYear.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+interface TotalNewCarRegistrationsByYearProps {
+  data: any;
+}
+
+export const TotalNewCarRegistrationsByYear = ({
+  data,
+}: TotalNewCarRegistrationsByYearProps) => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Total New Car Registrations by Year</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={300}>
+          <BarChart data={data}>
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="year" />
+            <YAxis />
+            <Tooltip />
+            <Legend />
+            <Bar dataKey="total" fill="#8884d8" />
+          </BarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+};

app/page.tsx

@@ -0,0 +1,46 @@
+import { KeyStatistics } from "@/app/components/KeyStatistics";
+import { TotalNewCarRegistrationsByYear } from "@/app/components/TotalNewCarRegistrationsByYear";
+import { Top5CarMakesByYear } from "@/app/components/Top5CarMakesByYear";
+import Typography from "@/components/Typography";
+import { FEATURE_FLAG_RELEASED } from "@/config";
+
+const data = [
+  { year: 2013, total: 22472 },
+  { year: 2014, total: 28932 },
+  { year: 2015, total: 57589 },
+  { year: 2016, total: 87504 },
+  { year: 2017, total: 91922 },
+  { year: 2018, total: 80281 },
+  { year: 2019, total: 72344 },
+  { year: 2020, total: 44465 },
+  { year: 2021, total: 45442 },
+  { year: 2022, total: 30939 },
+  { year: 2023, total: 30225 },
+];
+
+const topMakes2023 = [
+  { make: "BYD", value: 1416 },
+  { make: "Toyota", value: 7248 },
+  { make: "BMW", value: 3436 },
+  { make: "Mercedes Benz", value: 4317 },
+  { make: "Honda", value: 2631 },
+];
+
+const HomePage = () => {
+  return (
+    <section className="flex flex-col gap-y-8">
+      <Typography.H1>Dashboard</Typography.H1>
+      <div className="flex flex-col gap-y-4">
+        {FEATURE_FLAG_RELEASED && (
+          <>
+            <TotalNewCarRegistrationsByYear data={data} />
+            <KeyStatistics data={data} />
+            <Top5CarMakesByYear topMakes2023={topMakes2023} />
+          </>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default HomePage;

context/GlobalStateContext.tsx

@@ -11,6 +11,7 @@ import months from "@/data/months.json";
 
 interface GlobalState {
   selectedMonth?: string;
+  selectedYear: string;
 }
 
 interface GlobalStateContextValue {
@@ -22,8 +23,9 @@ interface GlobalProviderProps extends PropsWithChildren {}
 
 type Action = { type: string; payload: any };
 
-const initialState = {
+const initialState: GlobalState = {
   selectedMonth: months[0],
+  selectedYear: (new Date().getFullYear() - 1).toString(),
 };
 
 const globalStateReducer = (
@@ -33,6 +35,8 @@ const globalStateReducer = (
   switch (action.type) {
     case "SET_SELECTED_MONTH":
       return { ...state, selectedMonth: action.payload };
+    case "SET_SELECTED_YEAR":
+      return { ...state, selectedYear: action.payload };
     default:
       return state;
   }

package.json

@@ -37,6 +37,7 @@
     "next": "14.2.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "recharts": "^2.12.7",
     "schema-dts": "^1.1.2",
     "swr": "^2.2.5",
     "tailwind-merge": "^2.3.0",