feat: labour table

app/GlobalClientSideEffects.tsx

@@ -1,8 +1,10 @@
 "use client";
+import useOutputsWorker from "./utils/workers/outputs/useOutputsWorker";
 import useSystemsWorker from "./utils/workers/systems/useSystemsWorker";
 
 const GlobalClientSideEffects = () => {
   useSystemsWorker();
+  useOutputsWorker();
 
   return null;
 };

app/analyse/app.tsx

@@ -8,15 +8,12 @@ import HousesPillsSelector, {
   useSelectedHouseIds,
 } from "../ui/HousesPillsSelector";
 import Loader from "../ui/Loader";
-import useOutputsWorker from "../utils/workers/outputs/useOutputsWorker";
 import css from "./app.module.css";
 import CarbonEmissionsChart from "./ui/CarbonEmissionsChart";
 import ChassisCostChart from "./ui/ChassisCostChart";
 import FloorAreaChart from "./ui/FloorAreaChart";
 
 const AnalyseAppMain = () => {
-  useOutputsWorker();
-
   const { orderListRows } = useOrderListData();
   const analysisData = useAnalysisData();
 

app/build/common/BuildNav.tsx

@@ -1,17 +1,18 @@
-"use client"
-import clsx from "clsx"
-import Link from "next/link"
-import { usePathname } from "next/navigation"
-import React from "react"
+"use client";
+import clsx from "clsx";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React from "react";
 
 const links = [
   { href: "/build/overview", label: "Overview" },
   { href: "/build/order", label: "Order list" },
   { href: "/build/materials", label: "Materials list" },
-]
+  { href: "/build/labour", label: "Labour" },
+];
 
 const BuildNav = () => {
-  const pathname = usePathname()
+  const pathname = usePathname();
   return (
     <div className="h-full w-60">
       {links.map(({ href, label }) => (
@@ -27,7 +28,7 @@ const BuildNav = () => {
         </Link>
       ))}
     </div>
-  )
-}
+  );
+};
 
-export default BuildNav
+export default BuildNav;

app/build/labour/LabourTable.tsx

@@ -0,0 +1,94 @@
+"use client";
+import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
+import { memo, useEffect, useMemo } from "react";
+import { csvFormatRows } from "d3-dsv";
+import {
+  useLabourListRows,
+  useProjectCurrency,
+  useHouses,
+  LabourListRow,
+} from "@opensystemslab/buildx-core";
+import { getColorClass } from "~/analyse/ui/colors";
+import { capitalizeFirstLetters } from "~/utils/functions";
+import PaginatedTable from "../PaginatedTable";
+import { pipe } from "fp-ts/lib/function";
+import { A } from "~/utils/functions";
+
+type Props = {
+  setCsvDownloadUrl: (s: string) => void;
+};
+
+export const useLabourListDownload = (labourListRows: LabourListRow[]) =>
+  useMemo(() => {
+    if (labourListRows.length > 0) {
+      const headers = Object.keys(labourListRows[0]).filter(
+        (x) => !["houseId"].includes(x)
+      ) as Array<keyof LabourListRow>;
+
+      const rows = labourListRows.map((row) =>
+        headers.map((header) => row[header]?.toString() ?? "")
+      );
+
+      const csvData = [headers, ...rows];
+      const csvContent = csvFormatRows(csvData);
+      const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+      return { url: URL.createObjectURL(blob), blob };
+    }
+  }, [labourListRows]);
+
+const LabourTable = (props: Props) => {
+  const { setCsvDownloadUrl } = props;
+  const { symbol, format } = useProjectCurrency();
+
+  const labourListRows = useLabourListRows();
+  const houses = useHouses();
+  const allHouseIds = houses.map((x) => x.houseId);
+
+  const labourListDownload = useLabourListDownload(labourListRows);
+
+  useEffect(() => {
+    if (labourListDownload) {
+      setCsvDownloadUrl(labourListDownload.url);
+    }
+  }, [labourListDownload, setCsvDownloadUrl]);
+
+  const totalCost = pipe(
+    labourListRows,
+    A.reduce(0, (acc, row) => acc + row.cost)
+  );
+
+  const columnHelper = createColumnHelper<LabourListRow>();
+
+  const columns: ColumnDef<LabourListRow, any>[] = useMemo(
+    () => [
+      columnHelper.accessor("buildingName", {
+        id: "Building Name",
+        cell: (info) => <div>{capitalizeFirstLetters(info.getValue())}</div>,
+        header: () => null,
+      }),
+      columnHelper.accessor("labourType", {
+        cell: (info) => <span>{info.getValue()}</span>,
+        header: () => <span>Labour Type</span>,
+      }),
+      columnHelper.accessor("hours", {
+        cell: (info) => <span>{info.getValue().toFixed(1)}h</span>,
+        header: () => <span>Hours</span>,
+      }),
+      columnHelper.accessor("cost", {
+        cell: (info) => <span>{format(info.getValue())}</span>,
+        header: () => <span>Cost</span>,
+        footer: () => <span>{format(totalCost)}</span>,
+      }),
+    ],
+    [columnHelper, format, totalCost]
+  );
+
+  const enhancedRows = labourListRows.map((row) => ({
+    ...row,
+    colorClass: getColorClass(allHouseIds, row.houseId),
+  }));
+
+  return <PaginatedTable data={enhancedRows} columns={columns} />;
+};
+
+export default memo(LabourTable);

app/build/labour/app.tsx

@@ -0,0 +1,41 @@
+"use client";
+import { useState } from "react";
+import LabourTable from "./LabourTable";
+import { Download } from "@carbon/icons-react";
+
+const LabourApp = () => {
+  const [csvDownloadUrl, setCsvDownloadUrl] = useState<string | null>(null);
+
+  return (
+    <div>
+      <div className="flex justify-between px-3 py-5">
+        <div>
+          <h1>Labour</h1>
+          <p className="max-w-3xl mt-2">
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab illum
+            vel sapiente placeat obcaecati laudantium officia tenetur eum, quod,
+            animi rem accusantium culpa doloribus voluptatum autem at recusandae
+            molestias deleniti.
+          </p>
+        </div>
+        <div>
+          {csvDownloadUrl !== null && (
+            <a
+              href={csvDownloadUrl}
+              download={`materials-list.csv`}
+              className="flex font-semibold items-center"
+            >
+              <span>Download CSV</span>
+              <span className="ml-2">
+                <Download size={"20"} />
+              </span>
+            </a>
+          )}
+        </div>
+      </div>
+      <LabourTable setCsvDownloadUrl={setCsvDownloadUrl} />
+    </div>
+  );
+};
+
+export default LabourApp;

app/build/labour/page.tsx

@@ -0,0 +1,9 @@
+import dynamic from "next/dynamic";
+
+const LabourApp = dynamic(() => import("./app"), { ssr: false });
+
+const LabourPage = () => {
+  return <LabourApp />;
+};
+
+export default LabourPage;

app/build/materials/app.tsx

@@ -1,14 +1,14 @@
-"use client"
-import { Download } from "@carbon/icons-react"
-import dynamic from "next/dynamic"
-import { useState } from "react"
+"use client";
+import { Download } from "@carbon/icons-react";
+import dynamic from "next/dynamic";
+import { useState } from "react";
 
 const MaterialsListTable = dynamic(() => import("./MaterialsListTable"), {
   ssr: false,
-})
+});
 
 const MaterialsListIndexPage = () => {
-  const [csvDownloadUrl, setCsvDownloadUrl] = useState<string | null>(null)
+  const [csvDownloadUrl, setCsvDownloadUrl] = useState<string | null>(null);
 
   return (
     <div>
@@ -37,7 +37,7 @@ const MaterialsListIndexPage = () => {
       </div>
       <MaterialsListTable setCsvDownloadUrl={setCsvDownloadUrl} />
     </div>
-  )
-}
+  );
+};
 
-export default MaterialsListIndexPage
+export default MaterialsListIndexPage;

app/build/overview/app.tsx

@@ -1,5 +1,4 @@
 "use client";
-import useOutputsWorker from "@/app/utils/workers/outputs/useOutputsWorker";
 import { ArrowDown } from "@carbon/icons-react";
 import {
   useAnalysisData,
@@ -16,8 +15,6 @@ import useDownloads from "./useDownloads";
 import { useSelectedHouseIds } from "@/app/ui/HousesPillsSelector";
 
 const OverviewIndex = () => {
-  useOutputsWorker();
-
   const { format } = useProjectCurrency();
 
   const { projectName, shareUrlPayload } = useProjectData();

package.json

@@ -14,7 +14,7 @@
     "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@mapbox/mapbox-gl-geocoder": "^5.0.2",
     "@oieduardorabelo/use-user-agent": "^5.0.1",
-    "@opensystemslab/buildx-core": "0.8.0-canary.8",
+    "@opensystemslab/buildx-core": "0.8.1-canary.9",
     "@sentry/nextjs": "^8",
     "@tanstack/react-table": "^8.19.3",
     "@turf/turf": "^7.0.0",