Skip to content

feat: add policy layout components and enhance policy details page #273

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
carhartlewis merged 1 commit into from
Apr 4, 2025
Merged

feat: add policy layout components and enhance policy details page #273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 ...)/(dashboard)/[orgId]/policies/layout.tsx → ...d)/[orgId]/policies/(overview)/layout.tsx
View file
Open in desktop
File renamed without changes.
48 changes: 24 additions & 24 deletions ...locale]/(app)/(dashboard)/[orgId]/policies/[policyId]/editor/components/PolicyDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,33 @@ import type { JSONContent } from "@tiptap/react";
import "@comp/ui/editor.css";
import { updatePolicy } from "../actions/update-policy";
interface PolicyDetailsProps {
policyId: string;
policyContent: JSONContent | JSONContent[];
policyId: string;
policyContent: JSONContent | JSONContent[];
}

export function PolicyDetails({ policyId, policyContent }: PolicyDetailsProps) {
const formattedContent = Array.isArray(policyContent)
? policyContent
: typeof policyContent === "object" && policyContent !== null
? [policyContent as JSONContent]
: [];
export function PolicyPageEditor({ policyId, policyContent }: PolicyDetailsProps) {
const formattedContent = Array.isArray(policyContent)
? policyContent
: typeof policyContent === "object" && policyContent !== null
? [policyContent as JSONContent]
: [];

const handleSavePolicy = async (
policyContent: JSONContent[],
): Promise<void> => {
if (!policyId) return;
const handleSavePolicy = async (
policyContent: JSONContent[],
): Promise<void> => {
if (!policyId) return;

try {
await updatePolicy({ policyId, content: policyContent });
} catch (error) {
console.error("Error saving policy:", error);
throw error;
}
};
try {
await updatePolicy({ policyId, content: policyContent });
} catch (error) {
console.error("Error saving policy:", error);
throw error;
}
};

return (
<div className="flex flex-col h-full mx-auto">
<PolicyEditor content={formattedContent} onSave={handleSavePolicy} />
</div>
);
return (
<div className="flex flex-col h-full border p-2">
<PolicyEditor content={formattedContent} onSave={handleSavePolicy} />
</div>
);
}
65 changes: 0 additions & 65 deletions apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/[policyId]/editor/page.tsx
View file
Open in desktop

This file was deleted.

31 changes: 31 additions & 0 deletions apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/[policyId]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { getI18n } from "@/locales/server";
import { SecondaryMenu } from "@comp/ui/secondary-menu";

interface LayoutProps {
children: React.ReactNode;
params: Promise<{ policyId: string; orgId: string }>;
}

export default async function Layout({ children, params }: LayoutProps) {
const t = await getI18n();
const { orgId, policyId } = await params;

return (
<div className="max-w-[1200px] m-auto flex flex-col gap-6">
<SecondaryMenu
items={[
{
path: `/${orgId}/policies`,
label: t("policies.dashboard.title"),
},
{
path: `/${orgId}/policies/all`,
label: t("policies.dashboard.all"),
activeOverrideIdPrefix: "pol_",
},
]}
/>
<div>{children}</div>
</div>
);
}
133 changes: 70 additions & 63 deletions apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/[policyId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,89 +6,96 @@ import { db } from "@comp/db";
import type { Metadata } from "next";
import { setStaticParamsLocale } from "next-international/server";
import { headers } from "next/headers";
import { JSONContent } from "novel";
import { cache } from "react";
import { PolicyPageEditor } from "./editor/components/PolicyDetails";

export default async function PolicyDetails({
params,
params,
}: {
params: Promise<{ locale: string; policyId: string; orgId: string }>;
params: Promise<{ locale: string; policyId: string; orgId: string }>;
}) {
const { locale, policyId, orgId } = await params;

setStaticParamsLocale(locale);
const policy = await getPolicy(policyId);
const assignees = await getAssignees();

return (
<PageWithBreadcrumb
breadcrumbs={[
{ label: "Policies", href: `/${orgId}/policies/all` },
{ label: policy?.name ?? "Policy", current: true },
]}
>
<PolicyOverview policy={policy ?? null} assignees={assignees} />
</PageWithBreadcrumb>
);
const { locale, policyId, orgId } = await params;

setStaticParamsLocale(locale);
const policy = await getPolicy(policyId);
const assignees = await getAssignees();

return (
<PageWithBreadcrumb
breadcrumbs={[
{ label: "Policies", href: `/${orgId}/policies/all` },
{ label: policy?.name ?? "Policy", current: true },
]}
>
<PolicyOverview policy={policy ?? null} assignees={assignees} />
<PolicyPageEditor
policyId={policyId}
policyContent={policy?.content as JSONContent[]}
/>
Comment on lines +32 to +35

@coderabbitai coderabbitai Bot Apr 4, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add null check for policy content

The code casts policy?.content directly to JSONContent[] without verification. This might cause runtime errors if the content is null or undefined.

      <PolicyPageEditor
        policyId={policyId}
-        policyContent={policy?.content as JSONContent[]}
+        policyContent={policy?.content ? (policy.content as JSONContent[]) : []}
      />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<PolicyPageEditor
policyId={policyId}
policyContent={policy?.content as JSONContent[]}
/>
<PolicyPageEditor
policyId={policyId}
policyContent={policy?.content ? (policy.content as JSONContent[]) : []}
/>

</PageWithBreadcrumb>
);
}

export async function generateMetadata({
params,
params,
}: {
params: Promise<{ locale: string; policyId: string }>;
params: Promise<{ locale: string; policyId: string }>;
}): Promise<Metadata> {
const { locale } = await params;
const { locale } = await params;

setStaticParamsLocale(locale);
const t = await getI18n();
setStaticParamsLocale(locale);
const t = await getI18n();

return {
title: t("policies.overview.title"),
};
return {
title: t("policies.overview.title"),
};
}

const getPolicy = cache(async (policyId: string) => {
const session = await auth.api.getSession({
headers: await headers(),
});
const session = await auth.api.getSession({
headers: await headers(),
});

const organizationId = session?.session.activeOrganizationId;
const organizationId = session?.session.activeOrganizationId;

if (!organizationId) {
return null;
}
if (!organizationId) {
return null;
}

const policy = await db.policy.findUnique({
where: { id: policyId, organizationId },
});
const policy = await db.policy.findUnique({
where: { id: policyId, organizationId },
});

if (!policy) {
return null;
}
if (!policy) {
return null;
}

return policy;
return policy;
});

const getAssignees = cache(async () => {
const session = await auth.api.getSession({
headers: await headers(),
});

const organizationId = session?.session.activeOrganizationId;

if (!organizationId) {
return [];
}

const assignees = await db.member.findMany({
where: {
organizationId,
role: {
notIn: ["employee"],
},
},
include: {
user: true,
},
});

return assignees;
const session = await auth.api.getSession({
headers: await headers(),
});

const organizationId = session?.session.activeOrganizationId;

if (!organizationId) {
return [];
}

const assignees = await db.member.findMany({
where: {
organizationId,
role: {
notIn: ["employee"],
},
},
include: {
user: true,
},
});

return assignees;
});
31 changes: 31 additions & 0 deletions apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/all/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { getI18n } from "@/locales/server";
import { SecondaryMenu } from "@comp/ui/secondary-menu";

interface LayoutProps {
children: React.ReactNode;
params: Promise<{ policyId: string; orgId: string }>;
}
Comment on lines +4 to +7

@coderabbitai coderabbitai Bot Apr 4, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Revise the params interface for the all policies layout

The LayoutProps interface includes policyId, but this isn't applicable for the "all policies" view which doesn't have a specific policy ID in its route parameters.

interface LayoutProps {
  children: React.ReactNode;
-  params: Promise<{ policyId: string; orgId: string }>;
+  params: Promise<{ orgId: string }>;
}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
interface LayoutProps {
children: React.ReactNode;
params: Promise<{ policyId: string; orgId: string }>;
}
interface LayoutProps {
children: React.ReactNode;
params: Promise<{ orgId: string }>;
}


export default async function Layout({ children, params }: LayoutProps) {
const t = await getI18n();
const { orgId } = await params;

return (
<div className="max-w-[1200px] m-auto flex flex-col gap-6">
<SecondaryMenu
items={[
{
path: `/${orgId}/policies`,
label: t("policies.dashboard.title"),
},
{
path: `/${orgId}/policies/all`,
label: t("policies.dashboard.all"),
activeOverrideIdPrefix: "pol_",
},
]}
/>
<div>{children}</div>
</div>
);
}