Merge develop into master (15 Nov)

Clients/src/presentation/components/EmptyState/index.tsx

@@ -34,7 +34,6 @@ const EmptyState: React.FC<EmptyStateProps> = ({
   showHalo = false,
   showBorder = false,
 }) => {
-
   return (
     <Stack
       alignItems="center"
@@ -44,20 +43,22 @@ const EmptyState: React.FC<EmptyStateProps> = ({
           borderRadius: "4px",
           backgroundColor: "#FFFFFF",
         }),
-        pt: '75px',
+        pt: "75px",
         pb: 16,
       }}
       role="img"
       aria-label={imageAlt}
     >
-      <Box sx={{ mb: '20px' }}>
+      <Box sx={{ mb: "20px" }}>
         <SkeletonCard showHalo={showHalo} />
       </Box>
-      <Typography sx={{ fontSize: 13, color: "#9CA3AF", fontWeight: 400 }}>
+      <Typography
+        sx={{ fontSize: 13, color: "#9CA3AF", fontWeight: 400, paddingX: 10 }}
+      >
         {message}
       </Typography>
     </Stack>
   );
 };
 
-export default EmptyState;
+export default EmptyState;

Clients/src/presentation/components/Inputs/Datepicker/index.tsx

@@ -21,9 +21,25 @@ const DatePicker = ({
 }: DatePickerProps) => {
   const theme = useTheme();
 
+  // Extract width, flexGrow, minWidth, maxWidth from sx prop to apply to wrapper Stack
+  const extractedLayoutProps = sx && typeof sx === 'object' && !Array.isArray(sx)
+    ? {
+        width: (sx as any).width,
+        flexGrow: (sx as any).flexGrow,
+        minWidth: (sx as any).minWidth,
+        maxWidth: (sx as any).maxWidth,
+      }
+    : {};
+
+  // Create a copy of sx without layout props to pass to MuiDatePicker
+  const sxWithoutLayoutProps = sx && typeof sx === 'object' && !Array.isArray(sx)
+    ? Object.fromEntries(Object.entries(sx).filter(([key]) => !['width', 'flexGrow', 'minWidth', 'maxWidth'].includes(key)))
+    : sx;
+
   return (
     <Stack
       gap={theme.spacing(2)}
+      sx={extractedLayoutProps}
     >
       {label && (
         <Typography
@@ -70,7 +86,7 @@ const DatePicker = ({
             '& .MuiInputBase-root': {
               cursor: 'pointer',
             },
-            ...sx,
+            ...sxWithoutLayoutProps,
           }}
           value={date ? dayjs(date) : null}
           onChange={(value) => handleDateChange(value)}

Clients/src/presentation/components/Inputs/Dropdowns/index.tsx

@@ -122,15 +122,15 @@ const DropDowns: React.FC<DropDownsProps> = ({
     <Stack
       id={elementId}
       style={{
-        gap: theme.spacing(8),
+        gap: theme.spacing(6),
       }}
     >
       <Stack
         display="flex"
         flexDirection="row"
         justifyContent="space-between"
-        alignItems="center"
-        gap={theme.spacing(15)}
+        alignItems="flex-end"
+        gap={theme.spacing(4)}
       >
         <Select
           id="status"
@@ -182,8 +182,8 @@ const DropDowns: React.FC<DropDownsProps> = ({
         display="flex"
         flexDirection="row"
         justifyContent="space-between"
-        alignItems="center"
-        gap={theme.spacing(15)}
+        alignItems="flex-end"
+        gap={theme.spacing(4)}
       >
         <Select
           id="Owner"

Clients/src/presentation/components/Inputs/Dropdowns/style.ts

@@ -1,6 +1,5 @@
 export const inputStyles = {
-  minWidth: 200,
-  maxWidth: 400,
-  flexGrow: 1,
+  width: "calc((100% - 64px) / 3)", // Account for gap between 3 fields
+  flexShrink: 0,
   height: 34,
 };

Clients/src/presentation/components/Inputs/Select/index.tsx

@@ -50,14 +50,19 @@ const Select: React.FC<SelectProps> = ({
     margin: theme.spacing(2),
   };
 
-  // Extract width from sx prop to apply to wrapper Stack
-  const extractedWidth = sx && typeof sx === 'object' && !Array.isArray(sx)
-    ? (sx as any).width
-    : undefined;
+  // Extract width, flexGrow, minWidth, maxWidth from sx prop to apply to wrapper Stack
+  const extractedLayoutProps = sx && typeof sx === 'object' && !Array.isArray(sx)
+    ? {
+        width: (sx as any).width,
+        flexGrow: (sx as any).flexGrow,
+        minWidth: (sx as any).minWidth,
+        maxWidth: (sx as any).maxWidth,
+      }
+    : {};
 
-  // Create a copy of sx without width to pass to MuiSelect
-  const sxWithoutWidth = sx && typeof sx === 'object' && !Array.isArray(sx)
-    ? Object.fromEntries(Object.entries(sx).filter(([key]) => key !== 'width'))
+  // Create a copy of sx without layout props to pass to MuiSelect
+  const sxWithoutLayoutProps = sx && typeof sx === 'object' && !Array.isArray(sx)
+    ? Object.fromEntries(Object.entries(sx).filter(([key]) => !['width', 'flexGrow', 'minWidth', 'maxWidth'].includes(key)))
     : sx;
 
   const renderValue = (value: unknown) => {
@@ -96,9 +101,7 @@ const Select: React.FC<SelectProps> = ({
     <Stack
       gap={theme.spacing(2)}
       className="select-wrapper"
-      sx={{
-        width: extractedWidth,
-      }}
+      sx={extractedLayoutProps}
     >
       {label && (
         <Typography
@@ -181,7 +184,7 @@ const Select: React.FC<SelectProps> = ({
           position: "relative",
           cursor: "pointer",
           ...getSelectStyles(theme, { hasError: !!error }),
-          ...sxWithoutWidth,
+          ...sxWithoutLayoutProps,
         }}
       >
         {items.map(

Clients/src/presentation/components/Modals/Controlpane/NewControlPane.tsx

@@ -1,15 +1,11 @@
 import {
   Box,
   Button,
-  Divider,
-  Modal,
   Stack,
   Tab,
   Tabs,
   Typography,
-  useTheme,
 } from "@mui/material";
-import { X as CloseIcon } from "lucide-react";
 import DropDowns from "../../Inputs/Dropdowns";
 import { useState, useEffect } from "react";
 import AuditorFeedback from "../ComplianceFeedback/ComplianceFeedback";
@@ -18,8 +14,7 @@ import { Control } from "../../../../domain/types/Control";
 import { FileData } from "../../../../domain/types/File";
 import Alert from "../../Alert";
 import CustomizableToast from "../../Toast";
-import { Save as SaveIcon } from "lucide-react";
-import CustomizableButton from "../../Button/CustomizableButton";
+import StandardModal from "../StandardModal";
 
 import {
   AlertBox,
@@ -63,7 +58,6 @@ const NewControlPane = ({
   onComplianceUpdate?: () => void;
   projectId: number;
 }) => {
-  const theme = useTheme();
   const [selectedTab, setSelectedTab] = useState<number>(0);
   const [activeSection, setActiveSection] = useState<string>("Overview");
   const [alert, setAlert] = useState<AlertProps | null>(null);
@@ -345,10 +339,6 @@ const NewControlPane = ({
     }
   };
 
-  const handleCloseWrapper = () => {
-    handleClose();
-  };
-
   return (
     <>
       {alert && (
@@ -367,78 +357,19 @@ const NewControlPane = ({
         <CustomizableToast title="Saving control. Please wait..." />
       )}
 
-      <Modal
-        id={`${data.id}-modal`}
-        open={isOpen}
-        onClose={handleCloseWrapper}
-        className="new-control-pane-modal"
-        sx={{ zIndex: 1100 }}
+      <StandardModal
+        isOpen={isOpen}
+        onClose={handleClose}
+        title={`${controlCategoryId}.${data.order_no} ${data.title}`}
+        description={data.description || ""}
+        onSubmit={confirmSave}
+        submitButtonText="Save"
+        isSubmitting={isSubmitting}
+        maxWidth="800px"
       >
-        <Stack
-          className="new-control-pane-modal-frame"
-          sx={{
-            gap: theme.spacing(4),
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 800,
-            bgcolor: theme.palette.background.alt,
-            borderRadius: theme.shape.borderRadius,
-            boxShadow: 24,
-            paddingY: theme.spacing(15),
-            paddingX: theme.spacing(20),
-            "&:focus": {
-              outline: "none",
-            },
-            maxHeight: "90vh",
-            overflowY: "auto",
-          }}
-        >
-          <Stack
-            sx={{
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
-            <Typography
-              component="span"
-              fontSize={16}
-              fontWeight={600}
-              sx={{ textAlign: "left" }}
-            >
-              {`${controlCategoryId + "." + data.order_no}`} {data.title}
-            </Typography>
-            <Box
-              component="span"
-              role="button"
-              tabIndex={0}
-              onClick={(e) => {
-                e.stopPropagation();
-                handleCloseWrapper();
-              }}
-              sx={{
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                padding: "8px",
-                "&:hover": {
-                  opacity: 0.8,
-                },
-              }}
-            >
-              <CloseIcon size={20} />
-            </Box>
-          </Stack>
-          <Typography component="span" fontSize={13}>
-            {data.description}
-          </Typography>
-
+        <Stack spacing={6}>
           {/* Control-level fields removed - only subcontrols have these fields now */}
-          <Divider sx={{ borderColor: "#C2C2C2", mt: theme.spacing(3) }} />
-          <Box sx={{ width: "100%", bgcolor: "#FCFCFD" }}>
+          <Box sx={{ width: "100%", bgcolor: "#FCFCFD", mt: -3 }}>
             <Tabs
               value={selectedTab}
               onChange={handleSelectedTab}
@@ -605,28 +536,8 @@ const NewControlPane = ({
               />
             )}
           </Box>
-          <Stack
-            sx={{
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "flex-end",
-              mt: 2,
-            }}
-          >
-            <CustomizableButton
-              variant="contained"
-              text="Save"
-              sx={{
-                backgroundColor: "#13715B",
-                border: "1px solid #13715B",
-                gap: 2,
-              }}
-              onClick={confirmSave}
-              icon={<SaveIcon size={16} />}
-            />
-          </Stack>
         </Stack>
-      </Modal>
+      </StandardModal>
     </>
   );
 };