@@ -57,17 +57,14 @@ function FrameworkOverviewPageContent({
|
|||||||
const { organizationId } = useParams();
|
const { organizationId } = useParams();
|
||||||
|
|
||||||
// Group controls by their category
|
// Group controls by their category
|
||||||
const controlsByCategory = controls.reduce(
|
const controlsByCategory = controls.reduce((acc, control) => {
|
||||||
(acc, control) => {
|
|
||||||
if (!control?.category) return acc;
|
if (!control?.category) return acc;
|
||||||
if (!acc[control.category]) {
|
if (!acc[control.category]) {
|
||||||
acc[control.category] = [];
|
acc[control.category] = [];
|
||||||
}
|
}
|
||||||
acc[control.category].push(control);
|
acc[control.category].push(control);
|
||||||
return acc;
|
return acc;
|
||||||
},
|
}, {} as Record<string, typeof controls>);
|
||||||
{} as Record<string, typeof controls>,
|
|
||||||
);
|
|
||||||
|
|
||||||
const controlCards = Object.entries(controlsByCategory).map(
|
const controlCards = Object.entries(controlsByCategory).map(
|
||||||
([category, controls]) => ({
|
([category, controls]) => ({
|
||||||
@@ -75,11 +72,11 @@ function FrameworkOverviewPageContent({
|
|||||||
controls,
|
controls,
|
||||||
completed: controls.filter((c) => c?.state === "IMPLEMENTED").length,
|
completed: controls.filter((c) => c?.state === "IMPLEMENTED").length,
|
||||||
total: controls.length,
|
total: controls.length,
|
||||||
}),
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
const totalImplemented = controls.filter(
|
const totalImplemented = controls.filter(
|
||||||
(c) => c?.state === "IMPLEMENTED",
|
(c) => c?.state === "IMPLEMENTED"
|
||||||
).length;
|
).length;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -110,54 +107,6 @@ function FrameworkOverviewPageContent({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="flex justify-between items-center mb-4">
|
|
||||||
<h2 className="text-xl font-semibold">Timeline</h2>
|
|
||||||
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-[#F3F4F6] text-[#059669] text-sm">
|
|
||||||
<Clock className="w-4 h-4" />
|
|
||||||
<span>12 hours left</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="rounded-xl border border-gray-200 bg-card">
|
|
||||||
<div className="p-6">
|
|
||||||
<h3 className="font-medium mb-4">Preparation phase</h3>
|
|
||||||
<div className="relative">
|
|
||||||
<div className="flex w-full">
|
|
||||||
<div className="w-[10%]">
|
|
||||||
<div className="h-2 rounded-sm bg-[#D1FA84]" />
|
|
||||||
</div>
|
|
||||||
<div className="w-[8px] bg-transparent z-10" />
|
|
||||||
<div className="w-[70%]">
|
|
||||||
<div className="h-2 rounded-sm bg-muted" />
|
|
||||||
</div>
|
|
||||||
<div className="w-[8px] bg-transparent z-10" />
|
|
||||||
<div className="w-[10%]">
|
|
||||||
<div className="h-2 rounded-sm bg-muted" />
|
|
||||||
</div>
|
|
||||||
<div className="w-[8px] bg-transparent z-10" />
|
|
||||||
<div className="w-[10%]">
|
|
||||||
<div className="h-2 rounded-sm bg-muted" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-2 flex w-full text-sm text-muted-foreground">
|
|
||||||
<div className="w-[10%]">
|
|
||||||
<span>Preparation</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-[70%]">
|
|
||||||
<span>Observation period: 3 month</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-[10%]">
|
|
||||||
<span>Audit: 6-9 days</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-[10%]">
|
|
||||||
<span>Report: 10-14 days</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-6 flex justify-between items-center">
|
<div className="mb-6 flex justify-between items-center">
|
||||||
<h2 className="text-xl font-semibold">Controls</h2>
|
<h2 className="text-xl font-semibold">Controls</h2>
|
||||||
<div className="text-primary">
|
<div className="text-primary">
|
||||||
@@ -210,7 +159,7 @@ function FrameworkOverviewPageContent({
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (control?.id) {
|
if (control?.id) {
|
||||||
navigate(
|
navigate(
|
||||||
`/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`,
|
`/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
@@ -294,7 +243,7 @@ function FrameworkOverviewPageContent({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>,
|
</div>,
|
||||||
document.body,
|
document.body
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -328,7 +277,7 @@ function FrameworkOverviewPageFallback() {
|
|||||||
export default function FrameworkOverviewPage() {
|
export default function FrameworkOverviewPage() {
|
||||||
const { frameworkId } = useParams();
|
const { frameworkId } = useParams();
|
||||||
const [queryRef, loadQuery] = useQueryLoader<FrameworkOverviewPageQueryType>(
|
const [queryRef, loadQuery] = useQueryLoader<FrameworkOverviewPageQueryType>(
|
||||||
FrameworkOverviewPageQuery,
|
FrameworkOverviewPageQuery
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user