Skip to content

Commit 6af6682

Browse files
nitheesh-aotnitheesh-aot
authored
Review Board (#560)
* card section ui stretched * review board sectioning via apis * COMP-652: My Toggle (Deputy Director & Primary) + Primary filter card (front) * chromatic update only on repo * approval status based categories * added additional dates into the review section items
1 parent 0e4f808 commit 6af6682

File tree

8 files changed

+625
-38
lines changed

8 files changed

+625
-38
lines changed

‎.github/workflows/chromatic.yml‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,22 @@
22
name: "Chromatic Publish"
33

44
# Event for the workflow
5-
on: push
5+
on:
6+
push:
7+
branches:
8+
- develop
9+
# Only run on the main repository, not forks
10+
paths-ignore:
11+
- 'README.md'
12+
- 'LICENSE'
613

714
# List of jobs
815
jobs:
916
test:
1017
# Operating System
1118
runs-on: ubuntu-latest
19+
# Only run on the main repository (bcgov/EPIC.compliance), not forks
20+
if: github.repository == 'bcgov/EPIC.compliance'
1221
# Job steps
1322
steps:
1423
- uses: actions/checkout@v4

‎compliance-web/src/components/App/ReviewBoard/ReviewBoardFilters.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,14 @@ interface ReviewBoardFiltersProps {
1414
onFilterChange: (filterId: string, value: string[] | string) => void;
1515
externalFilters: Record<string, string[] | string>;
1616
initialChecked: boolean;
17+
onSwitchChange?: (checked: boolean) => void;
1718
}
1819

1920
const ReviewBoardFilters: React.FC<ReviewBoardFiltersProps> = ({
2021
onFilterChange,
2122
externalFilters,
2223
initialChecked,
24+
onSwitchChange,
2325
}) => {
2426
const { user: currentUser, isLoading: authLoading } = useAuth();
2527
const { data: staffUsers, isLoading: staffLoading } = useStaffUsersData();
@@ -67,8 +69,11 @@ const ReviewBoardFilters: React.FC<ReviewBoardFiltersProps> = ({
6769
// When turning OFF, clear the primary officer filter
6870
onFilterChange("primary_officer_id", []);
6971
}
72+
73+
// Notify parent so it can persist switch state explicitly
74+
onSwitchChange?.(newChecked);
7075
},
71-
[currentStaff, onFilterChange]
76+
[currentStaff, onFilterChange, onSwitchChange]
7277
);
7378

7479
if (authLoading || staffLoading) {

‎compliance-web/src/components/App/ReviewBoard/ReviewBoardSection.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Box, Typography, Chip } from "@mui/material";
22
import { BCDesignTokens } from "epic.theme";
33
import { ReviewBoardSection as ReviewBoardSectionType } from "@/models/ReviewBoard";
44
import ReviewBoardSectionItem from "@/components/App/ReviewBoard/ReviewBoardSectionItem";
5+
import { ReviewBoardCardTypeEnum } from "@/components/App/ReviewBoard/ReviewBoardUtils";
56

67
const ReviewBoardSection = ({
78
section,
@@ -18,7 +19,8 @@ const ReviewBoardSection = ({
1819
backgroundColor: BCDesignTokens.surfaceColorBackgroundLightGray,
1920
borderRadius: BCDesignTokens.layoutBorderRadiusMedium,
2021
p: 1,
21-
width: 208,
22+
flex: 1,
23+
minWidth: 0,
2224
height: "calc(100% - 1rem)", // 1rem is the margin bottom of the main page box
2325
}}
2426
>
@@ -28,7 +30,7 @@ const ReviewBoardSection = ({
2830
color={BCDesignTokens.typographyColorDisabled}
2931
fontWeight={BCDesignTokens.typographyFontWeightsBold}
3032
>
31-
{section.section}
33+
{section.sectionTitle}
3234
</Typography>
3335
<Chip
3436
size="small"
@@ -52,7 +54,11 @@ const ReviewBoardSection = ({
5254
}}
5355
>
5456
{section.items.map((item) => (
55-
<ReviewBoardSectionItem key={item.id} item={item} />
57+
<ReviewBoardSectionItem
58+
key={item.id}
59+
item={item}
60+
sectionId={section.id as ReviewBoardCardTypeEnum}
61+
/>
5662
))}
5763
</Box>
5864
</Box>

‎compliance-web/src/components/App/ReviewBoard/ReviewBoardSectionItem.tsx‎

Lines changed: 147 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
import { ReviewBoardItem } from "@/models/ReviewBoard";
2+
import { ReviewBoardCardTypeEnum } from "@/components/App/ReviewBoard/ReviewBoardUtils";
23
import { APPROVAL_STATUS } from "@/utils/constants";
34
import dateUtils from "@/utils/dateUtils";
45
import { CalendarMonthRounded } from "@mui/icons-material";
5-
import { Box, Chip, Typography } from "@mui/material";
6+
import { Box, Chip, Divider, Typography } from "@mui/material";
67
import { BCDesignTokens } from "epic.theme";
8+
import { useRouter } from "@tanstack/react-router";
9+
10+
const reviewBoardDateFormat = "DD MMM. YYYY";
11+
12+
const ReviewBoardSectionItem = ({
13+
item,
14+
sectionId,
15+
}: {
16+
item: ReviewBoardItem;
17+
sectionId: ReviewBoardCardTypeEnum;
18+
}) => {
19+
const router = useRouter();
720

8-
const ReviewBoardSectionItem = ({ item }: { item: ReviewBoardItem }) => {
921
const approvalCardColor = (approvalStatus: string) => {
1022
if (approvalStatus === APPROVAL_STATUS.APPROVED) {
1123
return "success";
@@ -17,6 +29,10 @@ const ReviewBoardSectionItem = ({ item }: { item: ReviewBoardItem }) => {
1729
return "default";
1830
};
1931

32+
const getFormattedDate = (date: string | undefined) => {
33+
return date ? dateUtils.formatDate(date, reviewBoardDateFormat) : "N/A";
34+
};
35+
2036
return (
2137
<Box
2238
key={item.id}
@@ -27,8 +43,17 @@ const ReviewBoardSectionItem = ({ item }: { item: ReviewBoardItem }) => {
2743
backgroundColor: BCDesignTokens.surfaceColorBackgroundWhite,
2844
borderRadius: BCDesignTokens.layoutBorderRadiusMedium,
2945
border: `1px solid ${BCDesignTokens.surfaceColorBorderDefault}`,
30-
// height: 400,
3146
flexShrink: 0,
47+
cursor: "pointer",
48+
}}
49+
onClick={() => {
50+
// All review board items navigate to their related inspection page
51+
if (item.ir_number) {
52+
router.navigate({
53+
to: "/ce-database/inspections/$inspectionNumber",
54+
params: { inspectionNumber: item.ir_number },
55+
});
56+
}
3257
}}
3358
>
3459
<Box
@@ -49,7 +74,9 @@ const ReviewBoardSectionItem = ({ item }: { item: ReviewBoardItem }) => {
4974
fontSize: "0.75rem",
5075
}}
5176
/>
52-
{item.approval_status ? (
77+
{item.approval_status &&
78+
(sectionId === ReviewBoardCardTypeEnum.DEPUTY_REVIEW ||
79+
sectionId === ReviewBoardCardTypeEnum.REVIEW_STATUS) ? (
5380
<Chip
5481
variant="outlined"
5582
size="small"
@@ -79,7 +106,7 @@ const ReviewBoardSectionItem = ({ item }: { item: ReviewBoardItem }) => {
79106
variant="caption"
80107
color={BCDesignTokens.typographyColorPlaceholder}
81108
>
82-
{item.name}
109+
{item.project_name}
83110
</Typography>
84111
<Box sx={{ display: "flex", alignItems: "center", mt: 1 }}>
85112
<CalendarMonthRounded
@@ -90,7 +117,7 @@ const ReviewBoardSectionItem = ({ item }: { item: ReviewBoardItem }) => {
90117
}}
91118
/>
92119
<Typography variant="caption">
93-
{dateUtils.formatDate(item.card_date)}
120+
{getFormattedDate(item.card_date)}
94121
</Typography>
95122
{item.types ? (
96123
<Typography
@@ -112,11 +139,124 @@ const ReviewBoardSectionItem = ({ item }: { item: ReviewBoardItem }) => {
112139
width: "fit-content",
113140
backgroundColor: BCDesignTokens.surfaceColorBackgroundLightBlue,
114141
padding: 0.5,
142+
my: 0.5,
115143
borderRadius: BCDesignTokens.layoutBorderRadiusMedium,
116144
}}
117145
>
118-
{item.primary_officer.last_name}
146+
{item.primary_officer?.last_name}
119147
</Typography>
148+
{sectionId !== ReviewBoardCardTypeEnum.DRAFTING && (
149+
<>
150+
<Divider />
151+
<Box
152+
sx={{
153+
display: "flex",
154+
flexDirection: "column",
155+
alignItems: "flex-start",
156+
mt: 1,
157+
}}
158+
>
159+
{sectionId === ReviewBoardCardTypeEnum.REVIEW_STATUS && (
160+
<Typography
161+
variant="caption"
162+
color={BCDesignTokens.typographyColorPlaceholder}
163+
>
164+
Review Date:
165+
<Typography
166+
variant="caption"
167+
ml={0.25}
168+
fontWeight={BCDesignTokens.typographyFontWeightsBold}
169+
>
170+
{getFormattedDate(item.review_date)}
171+
</Typography>
172+
</Typography>
173+
)}
174+
{(sectionId === ReviewBoardCardTypeEnum.DEPUTY_REVIEW ||
175+
sectionId === ReviewBoardCardTypeEnum.REVIEW_STATUS) && (
176+
<>
177+
<Typography
178+
variant="caption"
179+
color={BCDesignTokens.typographyColorPlaceholder}
180+
>
181+
Sent for Review:
182+
<Typography
183+
variant="caption"
184+
ml={0.25}
185+
fontWeight={
186+
sectionId === ReviewBoardCardTypeEnum.REVIEW_STATUS
187+
? BCDesignTokens.typographyFontWeightsRegular
188+
: BCDesignTokens.typographyFontWeightsBold
189+
}
190+
>
191+
{getFormattedDate(item.send_for_review_date)}
192+
</Typography>
193+
</Typography>
194+
{item.deputy_director_name && (
195+
<Typography
196+
variant="caption"
197+
color={BCDesignTokens.typographyColorPlaceholder}
198+
>
199+
Deputy Director:
200+
<Typography variant="caption" ml={0.25}>
201+
{item.deputy_director_name.substring(
202+
item.deputy_director_name.indexOf(" ") + 1
203+
)}
204+
</Typography>
205+
</Typography>
206+
)}
207+
</>
208+
)}
209+
{sectionId === ReviewBoardCardTypeEnum.HOLDER_REVIEW && (
210+
<>
211+
<Typography
212+
variant="caption"
213+
color={BCDesignTokens.typographyColorPlaceholder}
214+
>
215+
Due Date:
216+
<Typography
217+
variant="caption"
218+
ml={0.25}
219+
fontWeight={BCDesignTokens.typographyFontWeightsBold}
220+
>
221+
{getFormattedDate(item.expected_return_date)}
222+
</Typography>
223+
</Typography>
224+
<Typography
225+
variant="caption"
226+
color={BCDesignTokens.typographyColorPlaceholder}
227+
>
228+
Report Sent:
229+
<Typography variant="caption" ml={0.25}>
230+
{getFormattedDate(item.date_report_sent)}
231+
</Typography>
232+
</Typography>
233+
</>
234+
)}
235+
{sectionId === ReviewBoardCardTypeEnum.FINALIZING_RECORD && (
236+
<Typography
237+
variant="caption"
238+
color={BCDesignTokens.typographyColorPlaceholder}
239+
>
240+
Response Date:
241+
<Typography variant="caption" ml={0.25}>
242+
{getFormattedDate(item.date_response)}
243+
</Typography>
244+
</Typography>
245+
)}
246+
{sectionId === ReviewBoardCardTypeEnum.PENDING_ISSUANCE && (
247+
<Typography
248+
variant="caption"
249+
color={BCDesignTokens.typographyColorPlaceholder}
250+
>
251+
Issuance Date:
252+
<Typography variant="caption" ml={0.25}>
253+
{getFormattedDate(item.intended_issuance_date)}
254+
</Typography>
255+
</Typography>
256+
)}
257+
</Box>
258+
</>
259+
)}
120260
</Box>
121261
);
122262
};

0 commit comments

Comments
 (0)