feat: Add status column to reporting operation table

bc_obps/reporting/models/report_version.py

@@ -22,13 +22,13 @@ class ReportVersion(TimeStampedModel):
     )
 
     class ReportVersionStatus(models.TextChoices):
-        Draft = 'draft'
-        Submitted = 'submitted'
+        Draft = 'Draft'
+        Submitted = 'Submitted'
 
     status = models.CharField(
         max_length=1000,
         choices=ReportVersionStatus.choices,
-        db_comment="The status for this report version: draft or submitted.",
+        db_comment="The status for this report version: Draft or Submitted.",
         default=ReportVersionStatus.Draft,
     )
 

bciers/apps/reporting/src/app/components/datagrid/models/operations/operationColumns.tsx

@@ -8,6 +8,7 @@ import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { actionHandler } from "@bciers/actions";
 import { useRouter } from "next/navigation";
 import { getReportingYear } from "@reporting/src/app/utils/getReportingYear";
+import ReportingOperationStatusCell from "../../../operations/cells/ReportingOperationStatusCell";
 
 export const OPERATOR_COLUMN_INDEX = 1;
 
@@ -122,6 +123,14 @@ const operationColumns = (): GridColDef[] => {
       sortable: false,
       width: 120,
     },
+    {
+      field: "report_status",
+      headerName: "Status",
+      renderCell: ReportingOperationStatusCell,
+      align: "center",
+      headerAlign: "center",
+      width: 160,
+    },
     {
       field: "more",
       headerName: "More",

bciers/apps/reporting/src/app/components/datagrid/models/operations/operationGroupColumns.ts

@@ -40,6 +40,12 @@ const operationGroupColumns = (
       renderHeaderGroup: SearchCell,
       children: [{ field: "status" }],
     },
+    {
+      groupId: "report_status",
+      headerName: "Status",
+      renderHeaderGroup: SearchCell,
+      children: [{ field: "report_status" }],
+    },
     {
       groupId: "action",
       headerName: "Action",

bciers/apps/reporting/src/app/components/operations/cells/ReportingOperationStatusCell.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ReportOperationStatus } from "@bciers/utils/src/enums";
+import { Chip, ChipOwnProps } from "@mui/material";
+import { GridRenderCellParams } from "@mui/x-data-grid";
+
+export default function ReportingOperationStatusCell(
+  params: GridRenderCellParams,
+) {
+  const colorMap = new Map<string, ChipOwnProps["color"]>([
+    [ReportOperationStatus.NOT_STARTED, "primary"],
+    [ReportOperationStatus.DRAFT, "primary"],
+    [ReportOperationStatus.SUBMITTED, "success"],
+  ]);
+  const status = params.value || ReportOperationStatus.NOT_STARTED;
+  const statusColor = colorMap.get(status) || "primary";
+  const isMultiLineStatus = status === ReportOperationStatus.NOT_STARTED;
+
+  // Adjust the font size for multi-line statuses so it will fit in the chip
+  const fontSize = isMultiLineStatus ? "14px" : "16px";
+  return (
+    <Chip
+      label={
+        // whiteSpace: "normal" is needed to wrap the text in the chip for multi-line statuses like "Not started"
+        <div style={{ whiteSpace: "normal", color: statusColor, fontSize }}>
+          {status}
+        </div>
+      }
+      variant="outlined"
+      color={statusColor}
+      sx={{
+        width: 100,
+        height: 40,
+        borderRadius: "20px",
+      }}
+    />
+  );
+}

bciers/libs/utils/src/enums.ts

@@ -76,6 +76,13 @@ export enum Status {
   NOT_STARTED = "Not Started",
 }
 
+// report operation statuses
+export enum ReportOperationStatus {
+  NOT_STARTED = "Not started",
+  DRAFT = "Draft",
+  SUBMITTED = "Submitted",
+}
+
 export enum FormMode {
   CREATE = "create",
   EDIT = "edit",