feat(policies): Enhance policies dashboard with comprehensive overvie…

apps/app/languine.lock

@@ -183,6 +183,8 @@ files:
     policies.dashboard.policy_status: 52786fa7ae1ab7c63781647461d378ae
     policies.dashboard.policies_by_assignee: 78a5313bf44384663f9ddf1253a26d02
     policies.dashboard.policies_by_framework: b6c2212b46c6baa166b653aae7d5b014
+    policies.dashboard.sub_pages.overview: 3b878279a04dc47d60932cb294d96259
+    policies.dashboard.sub_pages.edit_policy: 49f0aa41a6a6350d9888573e1435281d
     policies.table.name: 002f7378a5fcfc2f66cfea851a7fd5f4
     policies.table.statuses.draft: f03ab16cd58372c77ba45a3d9a5a1cb9
     policies.table.statuses.published: 9b9d8a976b42e0bd66381797644943d5

apps/app/package.json

@@ -32,12 +32,14 @@
     "@tiptap/starter-kit": "^2.11.5",
     "@trigger.dev/react-hooks": "3.3.16",
     "@trigger.dev/sdk": "3.3.16",
+    "@types/d3": "^7.4.3",
     "@uploadthing/react": "^7.2.0",
     "@upstash/ratelimit": "^2.0.5",
     "ai": "^4.1.41",
     "argon2": "^0.41.1",
     "bun": "^1.2.2",
     "crypto": "^1.0.1",
+    "d3": "^7.9.0",
     "dub": "^0.46.29",
     "framer-motion": "^11.18.2",
     "geist": "^1.3.1",

apps/app/src/app/[locale]/(app)/(dashboard)/policies/(overview)/layout.tsx

@@ -11,7 +11,10 @@ export default async function Layout({
   return (
     <div className="max-w-[1200px] m-auto">
       <SecondaryMenu
-        items={[{ path: "/policies", label: t("policies.title") }]}
+        items={[
+          { path: "/policies", label: t("policies.dashboard.title") },
+          { path: "/policies/all", label: t("policies.dashboard.all") },
+        ]}
       />
 
       <main className="mt-8">{children}</main>

apps/app/src/app/[locale]/(app)/(dashboard)/policies/(overview)/page.tsx

@@ -1,12 +1,14 @@
 import { auth } from "@/auth";
-import { getServerColumnHeaders } from "@/components/tables/policies/server-columns";
+import { PoliciesStatus } from "@/components/policies/charts/policies-status";
+import { PoliciesByAssignee } from "@/components/policies/charts/policies-by-assignee";
 import { getI18n } from "@/locales/server";
+import { db } from "@bubba/db";
 import type { Metadata } from "next";
 import { setStaticParamsLocale } from "next-international/server";
+import { unstable_cache } from "next/cache";
 import { redirect } from "next/navigation";
-import { PoliciesList } from "./components/PoliciesList";
 
-export default async function PoliciesPage({
+export default async function PoliciesOverview({
   params,
 }: {
   params: Promise<{ locale: string }>;
@@ -15,24 +17,82 @@ export default async function PoliciesPage({
   setStaticParamsLocale(locale);
 
   const session = await auth();
-  const organizationId = session?.user.organizationId;
 
-  if (!organizationId) {
-    return redirect("/");
+  if (!session?.user?.organizationId) {
+    redirect("/onboarding");
   }
 
-  const columnHeaders = await getServerColumnHeaders();
+  const overview = await getPoliciesOverview(session.user.organizationId);
 
-  return <PoliciesList columnHeaders={columnHeaders} />;
+  if (overview?.totalPolicies === 0) {
+    redirect("/policies/all");
+  }
+
+  return (
+    <div className="space-y-4 sm:space-y-8">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <PoliciesStatus
+          totalPolicies={overview.totalPolicies}
+          publishedPolicies={overview.publishedPolicies}
+          draftPolicies={overview.draftPolicies}
+          archivedPolicies={overview.archivedPolicies}
+        />
+        <PoliciesByAssignee organizationId={session.user.organizationId} />
+      </div>
+    </div>
+  );
 }
+const getPoliciesOverview = unstable_cache(
+  async (organizationId: string) => {
+    return await db.$transaction(async (tx) => {
+      const [
+        totalPolicies,
+        publishedPolicies,
+        draftPolicies,
+        archivedPolicies,
+      ] = await Promise.all([
+        tx.organizationPolicy.count({
+          where: {
+            organizationId,
+          },
+        }),
+        tx.organizationPolicy.count({
+          where: {
+            organizationId,
+            status: "published",
+          },
+        }),
+        tx.organizationPolicy.count({
+          where: {
+            organizationId,
+            status: "draft",
+          },
+        }),
+        tx.organizationPolicy.count({
+          where: {
+            organizationId,
+            status: "archived",
+          },
+        }),
+      ]);
+
+      return {
+        totalPolicies,
+        publishedPolicies,
+        draftPolicies,
+        archivedPolicies,
+      };
+    });
+  },
+  ["policies-overview-cache"],
+);
 
 export async function generateMetadata({
   params,
 }: {
   params: Promise<{ locale: string }>;
 }): Promise<Metadata> {
   const { locale } = await params;
-
   setStaticParamsLocale(locale);
   const t = await getI18n();
 

apps/app/src/app/[locale]/(app)/(dashboard)/policies/(overview)/hooks/usePolicy.ts → apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/hooks/usePolicy.ts

@@ -3,7 +3,7 @@
 import useSWR from "swr";
 import { getPolicyDetails } from "../../[policyId]/editor/actions/get-policy-details";
 import { updatePolicy } from "../../[policyId]/editor/actions/update-policy";
-import type { AppError, PolicyDetails, UpdatePolicyInput } from "../../[policyId]/editor/types";
+import type { AppError, PolicyDetails } from "../../[policyId]/editor/types";
 
 interface ContentNode {
   type: string;

apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/layout.tsx

@@ -0,0 +1,23 @@
+import { getI18n } from "@/locales/server";
+import { SecondaryMenu } from "@bubba/ui/secondary-menu";
+
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const t = await getI18n();
+
+  return (
+    <div className="max-w-[1200px] m-auto">
+      <SecondaryMenu
+        items={[
+          { path: "/policies", label: t("policies.dashboard.title") },
+          { path: "/policies/all", label: t("policies.dashboard.all") },
+        ]}
+      />
+
+      <main className="mt-8">{children}</main>
+    </div>
+  );
+}

apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/page.tsx

@@ -0,0 +1,42 @@
+import { auth } from "@/auth";
+import { getServerColumnHeaders } from "@/components/tables/policies/server-columns";
+import { getI18n } from "@/locales/server";
+import type { Metadata } from "next";
+import { setStaticParamsLocale } from "next-international/server";
+import { redirect } from "next/navigation";
+import { PoliciesList } from "./components/PoliciesList";
+
+export default async function PoliciesPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setStaticParamsLocale(locale);
+
+  const session = await auth();
+  const organizationId = session?.user.organizationId;
+
+  if (!organizationId) {
+    return redirect("/");
+  }
+
+  const columnHeaders = await getServerColumnHeaders();
+
+  return <PoliciesList columnHeaders={columnHeaders} />;
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+
+  setStaticParamsLocale(locale);
+  const t = await getI18n();
+
+  return {
+    title: t("sidebar.policies"),
+  };
+}

apps/app/src/app/[locale]/(app)/(dashboard)/policies/[policyId]/layout.tsx → apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/[policyId]/layout.tsx

@@ -31,15 +31,17 @@ export default async function Layout({ children, params }: LayoutProps) {
 
   return (
     <div className="max-w-[1200px] space-y-4 m-auto">
-      <Title title={policy.policy.name} href="/policies" />
-
       <SecondaryMenu
-        isChild
+        showBackButton
+        backButtonHref="/policies/all"
         items={[
-          { path: `/policies/${policyId.policyId}`, label: "Overview" },
           {
-            path: `/policies/${policyId.policyId}/editor`,
-            label: "Edit Policy",
+            path: `/policies/all/${policyId.policyId}`,
+            label: t("policies.dashboard.sub_pages.overview"),
+          },
+          {
+            path: `/policies/all/${policyId.policyId}/editor`,
+            label: t("policies.dashboard.sub_pages.edit_policy"),
           },
         ]}
       />

apps/app/src/app/[locale]/(app)/(dashboard)/risk/(overview)/page.tsx

@@ -1,5 +1,6 @@
 import { auth } from "@/auth";
 import { RiskOverview } from "@/components/risks/charts/risk-overview";
+import { RisksAssignee } from "@/components/risks/charts/risks-assignee";
 import { RisksByAssignee } from "@/components/risks/charts/risks-by-assignee";
 import { getI18n } from "@/locales/server";
 import { db } from "@bubba/db";
@@ -38,7 +39,7 @@ export default async function RiskManagement({
       </div>
 
       <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
-        <RisksByAssignee organizationId={session.user.organizationId} />
+        <RisksAssignee organizationId={session.user.organizationId} />
       </div>
     </div>
   );

apps/app/src/app/[locale]/(app)/(dashboard)/risk/[riskId]/layout.tsx

@@ -28,10 +28,9 @@ export default async function Layout({ children, params }: LayoutProps) {
 
   return (
     <div className="max-w-[1200px] space-y-4 m-auto">
-      <Title title={risk.title} href="/risk/register" />
-
       <SecondaryMenu
-        isChild
+        showBackButton
+        backButtonHref="/risk/register"
         items={[
           { path: `/risk/${riskId.riskId}`, label: t("risk.overview") },
           {
@@ -57,5 +56,5 @@ const getRisk = unstable_cache(
 
     return risk;
   },
-  ["risk-cache"]
+  ["risk-cache"],
 );