Refactor data tables

sgcarstrends · Aug 11, 2024 · 9c5c4fd · 9c5c4fd
1 parent 37758ab
commit 9c5c4fd
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 62 deletions.
diff --git a/app/cars/[type]/page.tsx b/app/cars/[type]/page.tsx
@@ -20,6 +20,15 @@ import { API_URL, EXCLUSION_LIST, SITE_URL } from "@/config";
 import { capitaliseWords } from "@/utils/capitaliseWords";
 import { fetchApi } from "@/utils/fetchApi";
 import { Car, LatestMonth } from "@/types";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { formatDateToMonthYear } from "@/utils/formatDateToMonthYear";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 interface Props {
   params: { type: string };
@@ -132,8 +141,24 @@ const CarsByFuelTypePage = async ({ params, searchParams }: Props) => {
             })}
           </TabsList>
         </Tabs>
-        <CarTreeMap data={filteredCars} />
-        <DataTable data={filteredCars} fuelType={type} />
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>Overview</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <CarTreeMap data={filteredCars} />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Registrations</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <DataTable data={filteredCars} fuelType={type} />
+            </CardContent>
+          </Card>
+        </div>
       </div>
     </section>
   );

diff --git a/app/components/DataTable.tsx b/app/components/DataTable.tsx
@@ -38,12 +38,6 @@ export const DataTable = ({ data, fuelType }: DataTableProps) => {
 
   return (
     <Table>
-      {selectedMonth && (
-        <TableCaption>
-          {capitaliseWords(fuelType)} cars registration in Singapore for{" "}
-          {formatDateToMonthYear(selectedMonth)}
-        </TableCaption>
-      )}
       <TableHeader>
         <TableRow>
           {Object.values(CARS.TABLE.HEADERS).map((header) => (
@@ -64,8 +58,7 @@ export const DataTable = ({ data, fuelType }: DataTableProps) => {
         )}
         {data.length > 0 &&
           data.map((item, index) => (
-            <TableRow key={item._id} className="even:bg-muted">
-              <TableCell>{MEDAL_MAPPING[index + 1] || index + 1}</TableCell>
+            <TableRow key={item._id}>
               <TableCell>
                 <Link href={`/make/${item.make}`}>{item.make}</Link>
               </TableCell>
@@ -82,14 +75,6 @@ export const DataTable = ({ data, fuelType }: DataTableProps) => {
             </TableRow>
           ))}
       </TableBody>
-      <TableFooter>
-        {data.length > 0 && (
-          <TableRow>
-            <TableCell colSpan={2}>Total</TableCell>
-            <TableCell colSpan={2}>{total}</TableCell>
-          </TableRow>
-        )}
-      </TableFooter>
     </Table>
   );
 };
diff --git a/app/make/[make]/page.tsx b/app/make/[make]/page.tsx
@@ -15,6 +15,7 @@ import type { Car, LatestMonth } from "@/types";
 import { StructuredData } from "@/components/StructuredData";
 import Typography from "@/components/Typography";
 import { MAKE } from "@/constants";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 interface Props {
   params: { make: string };
@@ -91,49 +92,52 @@ const CarMakePage = async ({ params, searchParams }: Props) => {
           </h1>
           <p className="text-xl text-muted-foreground">Registrations</p>
         </div>
-        <Table>
-          <TableCaption>
-            Historical trends for {decodeURIComponent(make)}
-          </TableCaption>
-          <TableHeader>
-            <TableRow>
-              {Object.values(MAKE.TABLE.HEADERS).map((header) => (
-                <TableHead key={header}>{header}</TableHead>
-              ))}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredCars.length === 0 && (
-              <TableRow>
-                <TableCell
-                  colSpan={Object.entries(MAKE.TABLE.HEADERS).length}
-                  className="text-center"
-                >
-                  <Typography.H4>No data available</Typography.H4>
-                </TableCell>
-              </TableRow>
-            )}
-            {filteredCars.map((car, index) => (
-              <TableRow
-                key={`${car.fuel_type}-${car.vehicle_type}`}
-                className="even:bg-muted"
-              >
-                <TableCell>{index + 1}</TableCell>
-                <TableCell>{car.month}</TableCell>
-                <TableCell>
-                  <Link
-                    href={`/cars/${car.fuel_type.toLowerCase()}?month=${car.month}`}
-                    className="hover:underline"
+        <Card>
+          <CardHeader>
+            <CardTitle>Trends</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  {Object.values(MAKE.TABLE.HEADERS).map((header) => (
+                    <TableHead key={header}>{header}</TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredCars.length === 0 && (
+                  <TableRow>
+                    <TableCell
+                      colSpan={Object.entries(MAKE.TABLE.HEADERS).length}
+                      className="text-center"
+                    >
+                      <Typography.H4>No data available</Typography.H4>
+                    </TableCell>
+                  </TableRow>
+                )}
+                {filteredCars.map((car, index) => (
+                  <TableRow
+                    key={`${car.fuel_type}-${car.vehicle_type}`}
+                    className="even:bg-muted"
                   >
-                    {car.fuel_type}
-                  </Link>
-                </TableCell>
-                <TableCell>{car.vehicle_type}</TableCell>
-                <TableCell>{car.number}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+                    <TableCell>{car.month}</TableCell>
+                    <TableCell>
+                      <Link
+                        href={`/cars/${car.fuel_type.toLowerCase()}?month=${car.month}`}
+                        className="hover:underline"
+                      >
+                        {car.fuel_type}
+                      </Link>
+                    </TableCell>
+                    <TableCell>{car.vehicle_type}</TableCell>
+                    <TableCell>{car.number}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
       </div>
     </section>
   );

diff --git a/constants/index.ts b/constants/index.ts
@@ -1,7 +1,6 @@
 export const CARS = {
   TABLE: {
     HEADERS: {
-      SERIAL: "#",
       MAKE: "Make",
       COUNT: "Count",
       MARKET_SHARE: "Market Share",
@@ -12,7 +11,6 @@ export const CARS = {
 export const MAKE = {
   TABLE: {
     HEADERS: {
-      SERIAL: "#",
       MONTH: "Month",
       FUEL_TYPE: "Fuel Type",
       VEHICLE_TYPE: "Vehicle Type",