Add COE PQP Rates page

app/(default)/@breadcrumbs/[...slug]/page.tsx

@@ -20,6 +20,7 @@ interface BreadcrumbItem {
 
 const BREADCRUMB_MAP: Record<string, string> = {
   coe: "COE",
+  pqp: "PQP Rates",
 };
 
 const generateBreadcrumbs = (slug: string[]): BreadcrumbItem[] => {

app/(default)/coe/pqp/columns.tsx

@@ -0,0 +1,10 @@
+export const columns = [
+  {
+    accessorKey: "month",
+    header: "Month",
+  },
+  { accessorKey: "Category A", header: "Category A" },
+  { accessorKey: "Category B", header: "Category B" },
+  { accessorKey: "Category C", header: "Category C" },
+  { accessorKey: "Category D", header: "Category D" },
+];

app/(default)/coe/pqp/page.tsx

@@ -0,0 +1,50 @@
+import { Alert } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+import Typography from "@/components/Typography";
+import { DataTable } from "@/components/ui/data-table";
+import { API_URL } from "@/config";
+import { fetchApi } from "@/utils/fetchApi";
+import { columns } from "./columns";
+
+const PQPRatesPage = async () => {
+  const pqpRates = await fetchApi<
+    Array<Record<string, Record<string, number>>>
+  >(`${API_URL}/coe/pqp`);
+
+  const data = Object.entries(pqpRates).map(([month, pqpRates]) => ({
+    month,
+    ...pqpRates,
+  }));
+
+  return (
+    <div className="flex flex-col gap-y-4">
+      <Typography.H1>PQP Rates</Typography.H1>
+      <Alert
+        variant="light"
+        title="Understanding PQP Rates"
+        icon={<IconInfoCircle />}
+      >
+        <Typography.P>
+          Certificate of Entitlement (COE) Prevailing Quota Premium (PQP) rates
+          are specific to Singapore&apos;s vehicle ownership system. They
+          represent the average COE prices over the last 3 months, which car
+          owners must pay to renew their existing vehicle&apos;s COE.
+        </Typography.P>
+        <Typography.P>
+          The PQP system allows car owners to extend their COE for another 5 or
+          10 years by paying the prevailing market rate rather than bidding in
+          the open market. This is particularly relevant for owners who wish to
+          keep their vehicles beyond the initial 10-year COE period.
+        </Typography.P>
+        <Typography.P>
+          The Land Transport Authority (LTA) calculates and updates these rates
+          monthly based on the moving average of COE prices in the preceding
+          three months.
+        </Typography.P>
+      </Alert>
+      <DataTable columns={columns} data={data} />
+    </div>
+  );
+};
+
+export default PQPRatesPage;

app/(default)/layout.tsx

@@ -1,6 +1,7 @@
 import React, { type ReactNode } from "react";
 import { Inter } from "next/font/google";
 import Script from "next/script";
+import { MantineProvider } from "@mantine/core";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import classNames from "classnames";
 import { Analytics } from "@/app/components/Analytics";
@@ -10,6 +11,7 @@ import { Header } from "@/components/Header";
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { ANNOUNCEMENT, SITE_TITLE, SITE_URL } from "@/config";
 import "../globals.css";
+import "@mantine/core/styles.css";
 import type { Metadata } from "next";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -64,7 +66,9 @@ const RootLayout = async ({
             <Header breadcrumbs={breadcrumbs}>
               <SidebarTrigger />
             </Header>
-            <div className="bg-gray-50 p-4">{children}</div>
+            <div className="bg-gray-50 p-4">
+              <MantineProvider>{children}</MantineProvider>
+            </div>
           </main>
         </SidebarProvider>
         {/*<Footer />*/}

components/AppSidebar.tsx

@@ -265,6 +265,10 @@ const data: Nav = {
       icon: DollarSign,
       url: "/coe",
     },
+    {
+      title: "PQP Rates",
+      url: "/coe/pqp",
+    },
     // {
     //   title: "COE",
     //   icon: "",

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@icons-pack/react-simple-icons": "^10.2.0",
+    "@mantine/core": "^7.16.2",
     "@neondatabase/serverless": "^0.9.4",
     "@next/third-parties": "^15.0.4",
     "@radix-ui/react-accordion": "^1.2.1",
@@ -32,6 +33,7 @@
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@ruchernchong/number-format": "^2.3.4",
+    "@tabler/icons-react": "^3.29.0",
     "@tanstack/react-table": "^8.20.1",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.2",