Clients/src/domain/enums/policy.enum.ts (1)

1-8: Enum definition looks good; just ensure backend/category alignment.

The PolicyTemplateCategory enum is well-typed and readable. Please double-check that these string values exactly match whatever the backend or template JSON expects (if any mapping is done there), so you don’t end up with subtle mismatches at integration time.

Clients/src/presentation/components/Tags/TagChip.tsx (1)

8-53: Tag-to-style mapping is solid; consider hoisting and simplifying lookup.

Logic and defaults look good, and the case-insensitive behavior matches the comment about official tags.

As optional cleanup:

• Move tagStyles outside getTagStyle so it isn’t reallocated on every call.
• Since you normalize to tagLower, you can avoid the loop and just do a direct lookup:

const TAG_STYLES: Record<string, { bg: string; color: string }> = { /* ... */ };

const getTagStyle = (tag: string) => TAG_STYLES[tag.toLowerCase()] ?? {
  bg: "#F5F5F5",
  color: "#616161",
};

Clients/src/application/config/routes.tsx (1)

82-85: Nested /policies routes are redundant without an <Outlet />; consider simplifying.

Right now you have:

<Route path="/policies" element={<PolicyDashboard />}>
  <Route index element={<PolicyDashboard />} />
  <Route path="templates" element={<PolicyDashboard />} />
</Route>

Since PolicyDashboard doesn’t render an <Outlet />, the child route elements are effectively unused; navigation to /policies and /policies/templates is already handled by the parent element and your location.pathname logic inside PolicyDashboard.

You can simplify and avoid confusion by flattening this to:

<Route path="/policies" element={<PolicyDashboard />} />
<Route path="/policies/templates" element={<PolicyDashboard />} />

This preserves behavior while making the routing intent clearer.

Clients/src/domain/interfaces/IPolicy.ts (1)

66-75: Props for PolicyManager/PolicyTemplates are reasonable; refine fetchAll typing.

PolicyManagerProps and PolicyTemplatesProps are clear and map well onto how PoliciesDashboard passes data down.

Since fetchAll is implemented as an async function in PoliciesDashboard, it would be slightly more accurate to type it as returning a promise:

export interface PolicyManagerProps {
  policies: PolicyManagerModel[];
  tags: string[];
  fetchAll: () => Promise<void>;
}

export interface PolicyTemplatesProps {
  tags: string[];
  fetchAll: () => Promise<void>;
}

This keeps call sites unchanged but better documents the async nature of the reload.

Clients/src/presentation/pages/PolicyDashboard/PoliciesDashboard.tsx (1)

21-30: Prefer useLocation over the global location for tab state.

Using location.pathname directly works in the browser, but relying on the global location can be brittle (e.g., SSR, tests, or if react-router location ever diverges from window.location).

You can make this more idiomatic and robust by switching to useLocation:

import { useNavigate, useLocation } from "react-router-dom";

const PolicyDashboard: React.FC = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  const isPolicyTemplateTab = pathname.includes("/policies/templates");
  const activeTab = isPolicyTemplateTab ? "templates" : "policies";
  // ...
};

This keeps tab selection in lockstep with the router state.

Clients/src/presentation/components/Policies/PolicyDetailsModal.tsx (1)

111-117: Template-aware close handling is consistent; minor scope consideration.

Wiring handleClose through useModalKeyHandling, the Drawer onClose, and the close icon ensures that all close paths reset formData and then delegate to the parent via onClose. That’s a good centralization of close logic.

One thing to be aware of: handleClose currently only resets formData. If the parent ever chooses to keep this component mounted and just toggle visibility (vs unmounting it), you may also want to reset errors and other local state there to avoid leaking old validation errors into a fresh open.

Also applies to: 167-182, 600-605, 632-636

Clients/src/presentation/pages/PolicyDashboard/PolicyTemplates.tsx (5)

46-48: Avoid any for SelectorVertical props; use a typed alias

SelectorVertical currently uses props: any, which drops type safety for the pagination select icon.

You can keep it typed while staying simple:

-const SelectorVertical = (props: any) => (
-  <ChevronsUpDown size={16} {...props} />
-);
+const SelectorVertical = (props: React.ComponentProps<typeof ChevronsUpDown>) => (
+  <ChevronsUpDown size={16} {...props} />
+);

Based on learnings.

---

72-86: Remove debug console.log from template selection

console.log(selectedPolicy); in handleSelectPolicyTemplate is a debug artifact and will spam the console every row click in production.

Consider removing it:

-      const selectedPolicy = policyTemplates.find((policy) => policy.id === id);
-      console.log(selectedPolicy);
+      const selectedPolicy = policyTemplates.find((policy) => policy.id === id);

---

203-215: Tune empty-state copy for templates context

The empty state message says "No policies found in database", but this view is for policy templates loaded from static JSON and/or filters.

Consider a more specific message such as:

-                      <EmptyState message="No policies found in database" />
+                      <EmptyState message="No policy templates match your filters" />

This better reflects what the user is seeing.

---

220-234: Add keyboard activation for clickable table rows

Rows are focusable (tabIndex={0}) and have role="button", but there is no keyboard handler, so pressing Enter/Space does nothing.

Example:

-                    <TableRow
+                    <TableRow
                       key={policy.id}
                       onClick={() => handleSelectPolicyTemplate(policy.id)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          handleSelectPolicyTemplate(policy.id);
+                        }
+                      }}
                       sx={{
                         cursor: "pointer",

This improves accessibility for keyboard-only users.

---

140-169: Hardcoded white background may not match theme (optional)

Both the filter Select and search container use bgcolor: "#fff". This can clash with non-light themes and bypass theming.

Consider using theme values instead, e.g.:

-            sx={{
-              minWidth: "225px",
-              height: "34px",
-              bgcolor: "#fff",
-            }}
+            sx={{
+              minWidth: "225px",
+              height: "34px",
+              bgcolor: theme.palette.background.paper,
+            }}

Same idea for other "#fff" usages in this file.

Clients/src/presentation/pages/PolicyDashboard/PolicyManager.tsx (1)

19-236: PolicyManager behavior and structure look correct; consider deduplicating shared patterns

The component cleanly handles syncing incoming policies, auto-opening the create modal from navigation state, filter + search, delete flow with alerts, and conditional modal rendering based on tags. No functional issues stand out.

You might later factor shared pieces (e.g., handleSaved alert pattern and filter/search logic) into small helpers or hooks shared with PolicyTemplates, but that’s optional.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: MuhammadKhalilzadeh
Repo: bluewave-labs/verifywise PR: 254
File: Clients/src/presentation/components/Modals/Controlpane/index.tsx:22-24
Timestamp: 2024-11-18T05:28:01.115Z
Learning: In `Clients/src/presentation/components/Modals/Controlpane/index.tsx` (TypeScript React component), avoid changing prop types from specific types like `string` to `any` when the exact type is known. Maintaining explicit types ensures better type safety and code reliability.

Clients/src/presentation/pages/PolicyDashboard/PolicyTemplates.tsx (1)

282-288: Fix pagination summary for zero items case.

This issue was previously flagged: when there are no filtered results, the summary incorrectly displays "Showing 1 - 0 of 0 items" because the start index always computes as page * rowsPerPage + 1. The start should be 0 when the list is empty.

Apply this diff:

-                   Showing {page * rowsPerPage + 1} -{" "}
+                   Showing{" "}
+                   {filteredPolicyTemplates.length === 0
+                     ? 0
+                     : page * rowsPerPage + 1}{" "}
+                   -{" "}
                    {Math.min(
                      page * rowsPerPage + rowsPerPage,
                      filteredPolicyTemplates.length,
                    )}{" "}
                    of {filteredPolicyTemplates.length} items

Clients/src/presentation/pages/PolicyDashboard/PolicyTemplates.tsx (1)

45-47: Consider typing the props parameter.

The any type reduces type safety. For better type inference, consider using React.ComponentProps<typeof ChevronsUpDown> or React.SVGProps<SVGSVGElement>.

Apply this diff:

-const SelectorVertical = (props: any) => (
+const SelectorVertical = (props: React.ComponentProps<typeof ChevronsUpDown>) => (
   <ChevronsUpDown size={16} {...props} />
 );

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: MuhammadKhalilzadeh
Repo: bluewave-labs/verifywise PR: 254
File: Clients/src/presentation/components/Modals/Controlpane/index.tsx:22-24
Timestamp: 2024-11-18T05:28:01.115Z
Learning: In `Clients/src/presentation/components/Modals/Controlpane/index.tsx` (TypeScript React component), avoid changing prop types from specific types like `string` to `any` when the exact type is known. Maintaining explicit types ensures better type safety and code reliability.