Skip to content

Commit 63ca344

Browse files
gorkem-bwlgorkem-bwl
authored
Merge pull request #2696 from bluewave-labs/develop
Merge develop into master (15 Nov)
2 parents a08a5ed + 0fc099f commit 63ca344

File tree

13 files changed

+618
-372
lines changed

13 files changed

+618
-372
lines changed

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ const EmptyState: React.FC<EmptyStateProps> = ({
3434
showHalo = false,
3535
showBorder = false,
3636
}) => {
37-
3837
return (
3938
<Stack
4039
alignItems="center"
@@ -44,20 +43,22 @@ const EmptyState: React.FC<EmptyStateProps> = ({
4443
borderRadius: "4px",
4544
backgroundColor: "#FFFFFF",
4645
}),
47-
pt: '75px',
46+
pt: "75px",
4847
pb: 16,
4948
}}
5049
role="img"
5150
aria-label={imageAlt}
5251
>
53-
<Box sx={{ mb: '20px' }}>
52+
<Box sx={{ mb: "20px" }}>
5453
<SkeletonCard showHalo={showHalo} />
5554
</Box>
56-
<Typography sx={{ fontSize: 13, color: "#9CA3AF", fontWeight: 400 }}>
55+
<Typography
56+
sx={{ fontSize: 13, color: "#9CA3AF", fontWeight: 400, paddingX: 10 }}
57+
>
5758
{message}
5859
</Typography>
5960
</Stack>
6061
);
6162
};
6263

63-
export default EmptyState;
64+
export default EmptyState;

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,25 @@ const DatePicker = ({
2121
}: DatePickerProps) => {
2222
const theme = useTheme();
2323

24+
// Extract width, flexGrow, minWidth, maxWidth from sx prop to apply to wrapper Stack
25+
const extractedLayoutProps = sx && typeof sx === 'object' && !Array.isArray(sx)
26+
? {
27+
width: (sx as any).width,
28+
flexGrow: (sx as any).flexGrow,
29+
minWidth: (sx as any).minWidth,
30+
maxWidth: (sx as any).maxWidth,
31+
}
32+
: {};
33+
34+
// Create a copy of sx without layout props to pass to MuiDatePicker
35+
const sxWithoutLayoutProps = sx && typeof sx === 'object' && !Array.isArray(sx)
36+
? Object.fromEntries(Object.entries(sx).filter(([key]) => !['width', 'flexGrow', 'minWidth', 'maxWidth'].includes(key)))
37+
: sx;
38+
2439
return (
2540
<Stack
2641
gap={theme.spacing(2)}
42+
sx={extractedLayoutProps}
2743
>
2844
{label && (
2945
<Typography
@@ -70,7 +86,7 @@ const DatePicker = ({
7086
'& .MuiInputBase-root': {
7187
cursor: 'pointer',
7288
},
73-
...sx,
89+
...sxWithoutLayoutProps,
7490
}}
7591
value={date ? dayjs(date) : null}
7692
onChange={(value) => handleDateChange(value)}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -122,15 +122,15 @@ const DropDowns: React.FC<DropDownsProps> = ({
122122
<Stack
123123
id={elementId}
124124
style={{
125-
gap: theme.spacing(8),
125+
gap: theme.spacing(6),
126126
}}
127127
>
128128
<Stack
129129
display="flex"
130130
flexDirection="row"
131131
justifyContent="space-between"
132-
alignItems="center"
133-
gap={theme.spacing(15)}
132+
alignItems="flex-end"
133+
gap={theme.spacing(4)}
134134
>
135135
<Select
136136
id="status"
@@ -182,8 +182,8 @@ const DropDowns: React.FC<DropDownsProps> = ({
182182
display="flex"
183183
flexDirection="row"
184184
justifyContent="space-between"
185-
alignItems="center"
186-
gap={theme.spacing(15)}
185+
alignItems="flex-end"
186+
gap={theme.spacing(4)}
187187
>
188188
<Select
189189
id="Owner"

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
export const inputStyles = {
2-
minWidth: 200,
3-
maxWidth: 400,
4-
flexGrow: 1,
2+
width: "calc((100% - 64px) / 3)", // Account for gap between 3 fields
3+
flexShrink: 0,
54
height: 34,
65
};

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

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,19 @@ const Select: React.FC<SelectProps> = ({
5050
margin: theme.spacing(2),
5151
};
5252

53-
// Extract width from sx prop to apply to wrapper Stack
54-
const extractedWidth = sx && typeof sx === 'object' && !Array.isArray(sx)
55-
? (sx as any).width
56-
: undefined;
53+
// Extract width, flexGrow, minWidth, maxWidth from sx prop to apply to wrapper Stack
54+
const extractedLayoutProps = sx && typeof sx === 'object' && !Array.isArray(sx)
55+
? {
56+
width: (sx as any).width,
57+
flexGrow: (sx as any).flexGrow,
58+
minWidth: (sx as any).minWidth,
59+
maxWidth: (sx as any).maxWidth,
60+
}
61+
: {};
5762

58-
// Create a copy of sx without width to pass to MuiSelect
59-
const sxWithoutWidth = sx && typeof sx === 'object' && !Array.isArray(sx)
60-
? Object.fromEntries(Object.entries(sx).filter(([key]) => key !== 'width'))
63+
// Create a copy of sx without layout props to pass to MuiSelect
64+
const sxWithoutLayoutProps = sx && typeof sx === 'object' && !Array.isArray(sx)
65+
? Object.fromEntries(Object.entries(sx).filter(([key]) => !['width', 'flexGrow', 'minWidth', 'maxWidth'].includes(key)))
6166
: sx;
6267

6368
const renderValue = (value: unknown) => {
@@ -96,9 +101,7 @@ const Select: React.FC<SelectProps> = ({
96101
<Stack
97102
gap={theme.spacing(2)}
98103
className="select-wrapper"
99-
sx={{
100-
width: extractedWidth,
101-
}}
104+
sx={extractedLayoutProps}
102105
>
103106
{label && (
104107
<Typography
@@ -181,7 +184,7 @@ const Select: React.FC<SelectProps> = ({
181184
position: "relative",
182185
cursor: "pointer",
183186
...getSelectStyles(theme, { hasError: !!error }),
184-
...sxWithoutWidth,
187+
...sxWithoutLayoutProps,
185188
}}
186189
>
187190
{items.map(

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

Lines changed: 13 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
import {
22
Box,
33
Button,
4-
Divider,
5-
Modal,
64
Stack,
75
Tab,
86
Tabs,
97
Typography,
10-
useTheme,
118
} from "@mui/material";
12-
import { X as CloseIcon } from "lucide-react";
139
import DropDowns from "../../Inputs/Dropdowns";
1410
import { useState, useEffect } from "react";
1511
import AuditorFeedback from "../ComplianceFeedback/ComplianceFeedback";
@@ -18,8 +14,7 @@ import { Control } from "../../../../domain/types/Control";
1814
import { FileData } from "../../../../domain/types/File";
1915
import Alert from "../../Alert";
2016
import CustomizableToast from "../../Toast";
21-
import { Save as SaveIcon } from "lucide-react";
22-
import CustomizableButton from "../../Button/CustomizableButton";
17+
import StandardModal from "../StandardModal";
2318

2419
import {
2520
AlertBox,
@@ -63,7 +58,6 @@ const NewControlPane = ({
6358
onComplianceUpdate?: () => void;
6459
projectId: number;
6560
}) => {
66-
const theme = useTheme();
6761
const [selectedTab, setSelectedTab] = useState<number>(0);
6862
const [activeSection, setActiveSection] = useState<string>("Overview");
6963
const [alert, setAlert] = useState<AlertProps | null>(null);
@@ -345,10 +339,6 @@ const NewControlPane = ({
345339
}
346340
};
347341

348-
const handleCloseWrapper = () => {
349-
handleClose();
350-
};
351-
352342
return (
353343
<>
354344
{alert && (
@@ -367,78 +357,19 @@ const NewControlPane = ({
367357
<CustomizableToast title="Saving control. Please wait..." />
368358
)}
369359

370-
<Modal
371-
id={`${data.id}-modal`}
372-
open={isOpen}
373-
onClose={handleCloseWrapper}
374-
className="new-control-pane-modal"
375-
sx={{ zIndex: 1100 }}
360+
<StandardModal
361+
isOpen={isOpen}
362+
onClose={handleClose}
363+
title={`${controlCategoryId}.${data.order_no} ${data.title}`}
364+
description={data.description || ""}
365+
onSubmit={confirmSave}
366+
submitButtonText="Save"
367+
isSubmitting={isSubmitting}
368+
maxWidth="800px"
376369
>
377-
<Stack
378-
className="new-control-pane-modal-frame"
379-
sx={{
380-
gap: theme.spacing(4),
381-
position: "absolute",
382-
top: "50%",
383-
left: "50%",
384-
transform: "translate(-50%, -50%)",
385-
width: 800,
386-
bgcolor: theme.palette.background.alt,
387-
borderRadius: theme.shape.borderRadius,
388-
boxShadow: 24,
389-
paddingY: theme.spacing(15),
390-
paddingX: theme.spacing(20),
391-
"&:focus": {
392-
outline: "none",
393-
},
394-
maxHeight: "90vh",
395-
overflowY: "auto",
396-
}}
397-
>
398-
<Stack
399-
sx={{
400-
display: "flex",
401-
flexDirection: "row",
402-
justifyContent: "space-between",
403-
alignItems: "center",
404-
}}
405-
>
406-
<Typography
407-
component="span"
408-
fontSize={16}
409-
fontWeight={600}
410-
sx={{ textAlign: "left" }}
411-
>
412-
{`${controlCategoryId + "." + data.order_no}`} {data.title}
413-
</Typography>
414-
<Box
415-
component="span"
416-
role="button"
417-
tabIndex={0}
418-
onClick={(e) => {
419-
e.stopPropagation();
420-
handleCloseWrapper();
421-
}}
422-
sx={{
423-
cursor: "pointer",
424-
display: "flex",
425-
alignItems: "center",
426-
padding: "8px",
427-
"&:hover": {
428-
opacity: 0.8,
429-
},
430-
}}
431-
>
432-
<CloseIcon size={20} />
433-
</Box>
434-
</Stack>
435-
<Typography component="span" fontSize={13}>
436-
{data.description}
437-
</Typography>
438-
370+
<Stack spacing={6}>
439371
{/* Control-level fields removed - only subcontrols have these fields now */}
440-
<Divider sx={{ borderColor: "#C2C2C2", mt: theme.spacing(3) }} />
441-
<Box sx={{ width: "100%", bgcolor: "#FCFCFD" }}>
372+
<Box sx={{ width: "100%", bgcolor: "#FCFCFD", mt: -3 }}>
442373
<Tabs
443374
value={selectedTab}
444375
onChange={handleSelectedTab}
@@ -605,28 +536,8 @@ const NewControlPane = ({
605536
/>
606537
)}
607538
</Box>
608-
<Stack
609-
sx={{
610-
display: "flex",
611-
flexDirection: "row",
612-
justifyContent: "flex-end",
613-
mt: 2,
614-
}}
615-
>
616-
<CustomizableButton
617-
variant="contained"
618-
text="Save"
619-
sx={{
620-
backgroundColor: "#13715B",
621-
border: "1px solid #13715B",
622-
gap: 2,
623-
}}
624-
onClick={confirmSave}
625-
icon={<SaveIcon size={16} />}
626-
/>
627-
</Stack>
628539
</Stack>
629-
</Modal>
540+
</StandardModal>
630541
</>
631542
);
632543
};

0 commit comments

Comments
 (0)