Skip to content

Lewis/settings UI #306

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 3 commits into from
Apr 5, 2025
Merged

Lewis/settings UI #306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
197259a
refactor: enhance vendor and risk components
carhartlewis Apr 5, 2025
c2d097b
refactor: enhance evidence and policy chart components
carhartlewis Apr 5, 2025
b51902b
Merge branch 'main' into lewis/settings-ui
carhartlewis Apr 5, 2025
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
370 changes: 184 additions & 186 deletions ...ale]/(app)/(dashboard)/[orgId]/evidence/(overview)/components/evidence-assignee-chart.tsx
View file
Open in desktop

Large diffs are not rendered by default.

408 changes: 203 additions & 205 deletions ...ocale]/(app)/(dashboard)/[orgId]/evidence/(overview)/components/evidence-status-chart.tsx
View file
Open in desktop

Large diffs are not rendered by default.

232 changes: 116 additions & 116 deletions ...app/[locale]/(app)/(dashboard)/[orgId]/evidence/[evidenceId]/components/ReviewSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

import { calculateNextReview } from "@/lib/utils/calculate-next-review";
import type {
Departments,
Evidence,
EvidenceStatus,
Frequency,
Member,
User,
User as UserType,
Departments,
Evidence,
EvidenceStatus,
Frequency,
Member,
User,
User as UserType,
} from "@comp/db/types";
import { Button } from "@comp/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@comp/ui/card";
Expand All @@ -21,130 +21,130 @@ import { EvidenceDepartmentSection } from "./EvidenceDepartmentSection";
import { EvidenceFrequencySection } from "./EvidenceFrequencySection";
import { EvidenceNextReviewSection } from "./EvidenceNextReviewSection";
import { EvidenceStatusSection } from "./EvidenceStatusSection";
import { SelectAssignee } from "../../../components/SelectAssignee";
import { SelectAssignee } from "@/components/SelectAssignee";

interface ReviewSectionProps {
evidence: Evidence & {
assignee?:
| (Member & {
user: User;
})
| null;
};
lastPublishedAt: Date | null;
frequency: Frequency | null;
department: Departments;
currentAssigneeId: string | null | undefined;
assignees: (Member & {
user: UserType;
})[];
evidence: Evidence & {
assignee?:
| (Member & {
user: User;
})
| null;
};
lastPublishedAt: Date | null;
frequency: Frequency | null;
department: Departments;
currentAssigneeId: string | null | undefined;
assignees: (Member & {
user: UserType;
})[];
}

export function ReviewSection({
lastPublishedAt,
frequency: initialFrequency,
department: initialDepartment,
currentAssigneeId,
evidence,
assignees,
lastPublishedAt,
frequency: initialFrequency,
department: initialDepartment,
currentAssigneeId,
evidence,
assignees,
}: ReviewSectionProps) {
const reviewInfo = calculateNextReview(lastPublishedAt, initialFrequency);
const reviewInfo = calculateNextReview(lastPublishedAt, initialFrequency);

// State for tracking form values
const [frequency, setFrequency] = useState<Frequency | null>(
initialFrequency,
);
const [department, setDepartment] = useState<Departments>(initialDepartment);
const [assigneeId, setAssigneeId] = useState<string | null>(
currentAssigneeId || null,
);
const [status, setStatus] = useState<EvidenceStatus>(
evidence.status || "draft",
);
const [isSaving, setIsSaving] = useState(false);
// State for tracking form values
const [frequency, setFrequency] = useState<Frequency | null>(
initialFrequency,
);
const [department, setDepartment] = useState<Departments>(initialDepartment);
const [assigneeId, setAssigneeId] = useState<string | null>(
currentAssigneeId || null,
);
const [status, setStatus] = useState<EvidenceStatus>(
evidence.status || "draft",
);
const [isSaving, setIsSaving] = useState(false);

const { execute: updateDetailsAction } = useAction(updateEvidenceDetails, {
onSuccess: async () => {
toast.success("Evidence details updated successfully");
setIsSaving(false);
},
onError: () => {
toast.error("Failed to update evidence details");
setIsSaving(false);
},
});
const { execute: updateDetailsAction } = useAction(updateEvidenceDetails, {
onSuccess: async () => {
toast.success("Evidence details updated successfully");
setIsSaving(false);
},
onError: () => {
toast.error("Failed to update evidence details");
setIsSaving(false);
},
});

const handleSaveChanges = () => {
setIsSaving(true);
updateDetailsAction({
id: evidence.id,
frequency,
department,
assigneeId,
status,
});
};
const handleSaveChanges = () => {
setIsSaving(true);
updateDetailsAction({
id: evidence.id,
frequency,
department,
assigneeId,
status,
});
};

const handleDepartmentChange = (value: Departments) => {
setDepartment(value);
};
const handleDepartmentChange = (value: Departments) => {
setDepartment(value);
};

const handleStatusChange = (value: EvidenceStatus) => {
setStatus(value);
};
const handleStatusChange = (value: EvidenceStatus) => {
setStatus(value);
};

return (
<Card className="overflow-hidden">
<CardHeader>
<CardTitle className="text-base flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div>
<h2 className="text-lg font-medium">{evidence.name}</h2>
<h3 className="text-sm text-muted-foreground">
{evidence.description}
</h3>
</div>
</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-4 pt-2">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8">
<SelectAssignee
assignees={assignees}
onAssigneeChange={setAssigneeId}
assigneeId={assigneeId}
disabled={isSaving}
/>
return (
<Card className="overflow-hidden">
<CardHeader>
<CardTitle className="text-base flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div>
<h2 className="text-lg font-medium">{evidence.name}</h2>
<h3 className="text-sm text-muted-foreground">
{evidence.description}
</h3>
</div>
</CardTitle>
</CardHeader>
<CardContent className="flex flex-col gap-4 pt-2">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8">
<SelectAssignee
assignees={assignees}
onAssigneeChange={setAssigneeId}
assigneeId={assigneeId}
disabled={isSaving}
/>

<EvidenceStatusSection
status={status}
handleStatusChange={handleStatusChange}
isSaving={isSaving}
/>
<EvidenceStatusSection
status={status}
handleStatusChange={handleStatusChange}
isSaving={isSaving}
/>

<EvidenceDepartmentSection
onDepartmentChange={handleDepartmentChange}
department={department}
disabled={isSaving}
/>
<EvidenceDepartmentSection
onDepartmentChange={handleDepartmentChange}
department={department}
disabled={isSaving}
/>

<EvidenceFrequencySection
onFrequencyChange={setFrequency}
frequency={frequency}
disabled={isSaving}
/>
<EvidenceFrequencySection
onFrequencyChange={setFrequency}
frequency={frequency}
disabled={isSaving}
/>

<EvidenceNextReviewSection reviewInfo={reviewInfo} />
</div>
<EvidenceNextReviewSection reviewInfo={reviewInfo} />
</div>

<Button
size="sm"
onClick={handleSaveChanges}
disabled={isSaving}
className="self-end"
>
<Save className="h-4 w-4 mr-2" />
Save
</Button>
</CardContent>
</Card>
);
<Button
size="sm"
onClick={handleSaveChanges}
disabled={isSaving}
className="self-end"
>
<Save className="h-4 w-4 mr-2" />
Save
</Button>
</CardContent>
</Card>
);
}
6 changes: 2 additions & 4 deletions apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/all/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,14 @@ import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton";
export default function Loading() {
return (
<DataTableSkeleton
columnCount={7}
columnCount={5}
filterCount={2}
cellWidths={[
"10rem",
"30rem",
"10rem",
"10rem",
"6rem",
"6rem",
"6rem",
"10rem",
]}
shrinkZero
/>
Expand Down
Loading