Merge pull request #161 from nitheesh-aot/develop

COMP-193 & COMP-194

compliance-web/src/components/App/CaseFiles/Profile/CaseFileActions.tsx

@@ -0,0 +1,121 @@
+import React, { useCallback } from "react";
+import MenuActionDropdown from "@/components/Shared/MenuActionDropdown";
+import {
+  useDeleteCaseFile,
+  useUpdateCaseFileStatus,
+} from "@/hooks/useCaseFiles";
+import { CaseFile } from "@/models/CaseFile";
+import { useQueryClient } from "@tanstack/react-query";
+import ConfirmationModal from "@/components/Shared/Popups/ConfirmationModal";
+import { useModal } from "@/store/modalStore";
+import { notify } from "@/store/snackbarStore";
+import { useRouter } from "@tanstack/react-router";
+
+interface CaseFileActionsProps {
+  status: string;
+  fileNumber: string;
+}
+
+const CaseFileActions: React.FC<CaseFileActionsProps> = ({
+  status,
+  fileNumber,
+}) => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { setOpen, setClose } = useModal();
+
+  const caseFileData = queryClient.getQueryData<CaseFile>([
+    "case-file",
+    fileNumber,
+  ]);
+
+  const onUpdateStatusSuccess = useCallback(() => {
+    queryClient.invalidateQueries({
+      queryKey: ["case-file", fileNumber],
+    });
+    notify.success("Case File status updated!");
+    setClose();
+  }, [queryClient, fileNumber, setClose]);
+
+  const onDeleteSuccess = useCallback(() => {
+    notify.success("Case File deleted!");
+    setClose();
+    router.navigate({ to: "/ce-database/case-files" });
+  }, [setClose, router]);
+
+  const { mutate: updateCaseFileStatus } = useUpdateCaseFileStatus(
+    onUpdateStatusSuccess
+  );
+  const { mutate: deleteCaseFile } = useDeleteCaseFile(onDeleteSuccess);
+
+  const actionsList = [
+    {
+      text: "Link to Case File",
+      onClick: () => {
+        // Handle linking case file
+      },
+      hidden: true,
+    },
+    {
+      text: "Unlink from Case File",
+      onClick: () => {
+        // Handle unlinking case file
+      },
+      hidden: true,
+    },
+    {
+      text: "Close Case File",
+      onClick: () => {
+        // Handle closing case file
+        setOpen({
+          content: (
+            <ConfirmationModal
+              title="Close Case File?"
+              description="Are you sure you want to close this case file? This action cannot be undone without reopening the case file."
+              confirmButtonText="Close Case File"
+              onConfirm={() => {
+                updateCaseFileStatus({
+                  id: caseFileData?.id ?? 0,
+                  caseFileStatus: { status: "CLOSED" },
+                });
+              }}
+            />
+          ),
+        });
+      },
+      hidden: status?.toLowerCase() === "closed",
+    },
+    {
+      text: "Reopen Case File",
+      onClick: () => {
+        // Handle reopening case file
+        updateCaseFileStatus({
+          id: caseFileData?.id ?? 0,
+          caseFileStatus: { status: "OPEN" },
+        });
+      },
+      hidden: status?.toLowerCase() === "open",
+    },
+    {
+      text: "Delete Case File",
+      onClick: () => {
+        // Handle deleting case file
+        setOpen({
+          content: (
+            <ConfirmationModal
+              title="Delete Case File?"
+              description="Delete Case File? You are about to delete this case file. Are you sure?"
+              confirmButtonText="Delete"
+              onConfirm={() => deleteCaseFile(caseFileData?.id ?? 0)}
+            />
+          ),
+        });
+      },
+      hidden: false,
+    },
+  ];
+
+  return <MenuActionDropdown actions={actionsList} />;
+};
+
+export default CaseFileActions;

compliance-web/src/components/App/CaseFiles/Profile/CaseFileCreateComplaint.tsx

@@ -6,16 +6,20 @@ import { useQueryClient } from "@tanstack/react-query";
 import ComplaintDrawer from "@/components/App/Complaints/ComplaintDrawer";
 import { useDrawer } from "@/store/drawerStore";
 import { CaseFile } from "@/models/CaseFile";
-import { useParams } from "@tanstack/react-router";
 
-const CaseFileCreateComplaint = () => {
+const CaseFileCreateComplaint = ({
+  fileNumber,
+  disabled = false,
+}: {
+  fileNumber: string;
+  disabled?: boolean;
+}) => {
   const queryClient = useQueryClient();
   const { setOpen, setClose } = useDrawer();
-  const { caseFileNumber } = useParams({ strict: false });
 
   const caseFileData = queryClient.getQueryData<CaseFile>([
     "case-file",
-    caseFileNumber,
+    fileNumber,
   ]);
 
   const handleOnSubmit = useCallback(
@@ -47,6 +51,7 @@ const CaseFileCreateComplaint = () => {
       size="small"
       onClick={handleOpenComplaintDrawer}
       startIcon={<AddRounded />}
+      disabled={disabled}
     >
       Complaint
     </Button>

compliance-web/src/components/App/CaseFiles/Profile/CaseFileCreateInspection.tsx

@@ -6,16 +6,20 @@ import { useQueryClient } from "@tanstack/react-query";
 import InspectionDrawer from "@/components/App/Inspections/InspectionDrawer";
 import { useDrawer } from "@/store/drawerStore";
 import { CaseFile } from "@/models/CaseFile";
-import { useParams } from "@tanstack/react-router";
 
-const CaseFileCreateInspection = () => {
+const CaseFileCreateInspection = ({
+  fileNumber,
+  disabled = false,
+}: {
+  fileNumber: string;
+  disabled?: boolean;
+}) => {
   const queryClient = useQueryClient();
   const { setOpen, setClose } = useDrawer();
-  const { caseFileNumber } = useParams({ strict: false });
 
   const caseFileData = queryClient.getQueryData<CaseFile>([
     "case-file",
-    caseFileNumber,
+    fileNumber,
   ]);
 
   const handleOnSubmit = useCallback(
@@ -47,6 +51,7 @@ const CaseFileCreateInspection = () => {
       size="small"
       onClick={handleOpenInspectionDrawer}
       startIcon={<AddRounded />}
+      disabled={disabled}
     >
       Inspection
     </Button>

compliance-web/src/components/App/CaseFiles/Profile/CaseFileGeneralInformation.tsx

@@ -91,6 +91,7 @@ const CaseFileGeneralInformation: React.FC<CaseFileGeneralInformationProps> = ({
         propertyName="Project Description"
         propertyValue={caseFileData.project_description}
         size="small"
+        expandable={true}
       />
       <CaseFileComplaintsTable caseFileId={caseFileData.id} />
       <CaseFileInspectionsTable caseFileId={caseFileData.id} />

compliance-web/src/components/App/ContinuationReports/ContinuationReportTimelineEntry.tsx

@@ -1,7 +1,7 @@
+import ParagraphWithReadMore from "@/components/Shared/ParagraphWithReadMore";
 import TimelineContent from "@mui/lab/TimelineContent";
-import { Link, Stack, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
-import { useEffect, useRef, useState } from "react";
 
 export default function ContinuationReportTimelineEntry({
   renderText,
@@ -14,22 +14,6 @@ export default function ContinuationReportTimelineEntry({
   isSystemGenerated: boolean;
   searchText?: string;
 }) {
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [showReadMore, setShowReadMore] = useState(false);
-
-  useEffect(() => {
-    if (contentRef.current && contentRef.current.scrollHeight > 170) {
-      setShowReadMore(true);
-    }
-    setIsExpanded(!!searchText); // if searchText is there, default should be open
-  }, [searchText]);
-
-  const handleReadMoreClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.stopPropagation();
-    setIsExpanded(!isExpanded);
-  };
-
   const getFormattedText = () => {
     if (!searchText) return renderText;
 
@@ -87,38 +71,28 @@ export default function ContinuationReportTimelineEntry({
 
   return (
     <TimelineContent sx={{ p: "4px 0px 8px 8px" }}>
-      <Stack
-        ref={contentRef}
-        sx={{
-          maxHeight: isExpanded ? "none" : "150px",
-          overflow: "hidden",
-        }}
-      >
-        <Typography
-          variant="subtitle2"
-          component={"div"}
-          className="quill-render"
-          dangerouslySetInnerHTML={{ __html: getFormattedText() }}
-        />
-        {!isSystemGenerated && createdByUser && (
-          <Typography
-            variant="subtitle2"
-            color={BCDesignTokens.typographyColorDisabled}
-          >
-            Created by {createdByUser}
-          </Typography>
-        )}
-      </Stack>
-      {showReadMore && (
-        <Link
-          fontSize={BCDesignTokens.typographyFontSizeSmallBody}
-          underline="hover"
-          sx={{ cursor: "pointer" }}
-          onClick={handleReadMoreClick}
-        >
-          {isExpanded ? "Read Less" : "Read More"}
-        </Link>
-      )}
+      <ParagraphWithReadMore
+        maxHeight={150}
+        expand={!!searchText}
+        renderTypography={
+          <>
+            <Typography
+              variant="subtitle2"
+              component={"div"}
+              className="quill-render"
+              dangerouslySetInnerHTML={{ __html: getFormattedText() }}
+            />
+            {!isSystemGenerated && createdByUser && (
+              <Typography
+                variant="subtitle2"
+                color={BCDesignTokens.typographyColorDisabled}
+              >
+                Created by {createdByUser}
+              </Typography>
+            )}
+          </>
+        }
+      />
     </TimelineContent>
   );
 }

compliance-web/src/components/App/FileProfileHeader.tsx

@@ -1,23 +1,27 @@
-import { ExpandMoreRounded } from "@mui/icons-material";
-import { Box, Typography, Chip, Button } from "@mui/material";
+import { Box, Typography, Chip } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
 import BreadcrumbsNav, {
   BreadcrumbItem,
 } from "@/components/Shared/BreadcrumbsNav";
 import CaseFileCreateInspection from "@/components/App/CaseFiles/Profile/CaseFileCreateInspection";
 import CaseFileCreateComplaint from "@/components/App/CaseFiles/Profile/CaseFileCreateComplaint";
+import React from "react";
+import { FILE_PROFILE_CONTEXT } from "@/utils/constants";
+import CaseFileActions from "@/components/App/CaseFiles/Profile/CaseFileActions";
+import MenuActionDropdown from "@/components/Shared/MenuActionDropdown";
+
 interface FileProfileHeaderProps {
   fileNumber: string;
   status: string;
   breadcrumbs: BreadcrumbItem[];
-  showInspectionComplaintButton?: boolean;
+  profileContext: string;
 }
 
 const FileProfileHeader: React.FC<FileProfileHeaderProps> = ({
   fileNumber,
   status,
   breadcrumbs,
-  showInspectionComplaintButton = false,
+  profileContext,
 }) => {
   return (
     <Box
@@ -39,20 +43,23 @@ const FileProfileHeader: React.FC<FileProfileHeaderProps> = ({
         </Box>
       </Box>
       <Box display={"flex"} gap={1}>
-        {showInspectionComplaintButton && (
+        {profileContext === FILE_PROFILE_CONTEXT.CASEFILE && (
           <>
-            <CaseFileCreateInspection />
-            <CaseFileCreateComplaint />
+            <CaseFileCreateInspection
+              fileNumber={fileNumber}
+              disabled={status.toLowerCase() === "closed"}
+            />
+            <CaseFileCreateComplaint
+              fileNumber={fileNumber}
+              disabled={status.toLowerCase() === "closed"}
+            />
+            <CaseFileActions status={status} fileNumber={fileNumber} />
           </>
         )}
-        <Button
-          variant="text"
-          size="small"
-          onClick={() => {}}
-          startIcon={<ExpandMoreRounded />}
-        >
-          Actions
-        </Button>
+        {(profileContext === FILE_PROFILE_CONTEXT.INSPECTION ||
+          profileContext === FILE_PROFILE_CONTEXT.COMPLAINT) && (
+          <MenuActionDropdown actions={[]} />
+        )}
       </Box>
     </Box>
   );

compliance-web/src/components/App/FileProfileProperty.tsx

@@ -1,14 +1,17 @@
 import { Box, Typography } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
+import ParagraphWithReadMore from "../Shared/ParagraphWithReadMore";
 
 export default function FileProfileProperty({
   propertyName,
   propertyValue,
   size = "default",
+  expandable = false,
 }: {
   propertyName: string;
   propertyValue?: string;
   size?: "small" | "default";
+  expandable?: boolean;
 }) {
   return (
     <Box display={"flex"} gap={size === "small" ? 4 : 2} marginBottom={1}>
@@ -19,7 +22,20 @@ export default function FileProfileProperty({
       >
         {propertyName}
       </Typography>
-      <Typography variant="body1" display={"flex"} flex={1}>{propertyValue ?? ""}</Typography>
+      {expandable ? (
+        <ParagraphWithReadMore
+          maxHeight={84}
+          renderTypography={
+            <Typography variant="body1" display={"flex"} flex={1}>
+              {propertyValue ?? ""}
+            </Typography>
+          }
+        />
+      ) : (
+        <Typography variant="body1" display={"flex"} flex={1}>
+          {propertyValue ?? ""}
+        </Typography>
+      )}
     </Box>
   );
 }