diff --git a/apps/console/src/pages/organizations/vendors/VendorView.tsx b/apps/console/src/pages/organizations/vendors/VendorView.tsx index 07f4f23c9..c49fa7940 100644 --- a/apps/console/src/pages/organizations/vendors/VendorView.tsx +++ b/apps/console/src/pages/organizations/vendors/VendorView.tsx @@ -27,6 +27,7 @@ import { cn } from "@/lib/utils"; import { PageTemplate } from "@/components/PageTemplate"; import { VendorViewSkeleton } from "./VendorPage"; import PeopleSelector from "@/components/PeopleSelector"; +import { formatDistanceToNow, format, isPast } from "date-fns"; const vendorViewQuery = graphql` query VendorViewQuery($vendorId: ID!, $organizationId: ID!) { @@ -601,20 +602,6 @@ function CertificationsView({ ); } -interface RiskAssessment { - id: string; - assessedAt: string; - expiresAt: string; - dataSensitivity: string; - businessImpact: string; - notes: string | null; - assessedBy: { - id: string; - fullName: string; - } | null; - createdAt: string; -} - function RiskAssessmentsTable({ assessments, onCreateAssessment, @@ -638,18 +625,19 @@ function RiskAssessmentsTable({ }; }, []); - // Format date to match Figma design - const formatDate = (dateString: string) => { + // Format date to relative time using date-fns + const formatRelativeDate = (dateString: string) => { const date = new Date(dateString); - return date.toLocaleDateString('en-US', { - weekday: 'short', - day: 'numeric', - month: 'short', - year: 'numeric', - }); + return formatDistanceToNow(date, { addSuffix: true }); }; - const isExpired = (expiresAt: string) => new Date(expiresAt) < new Date(); + // Format date for tooltip + const formatDate = (dateString: string) => { + const date = new Date(dateString); + return format(date, "EEE, d MMM yyyy"); + }; + + const isExpired = (expiresAt: string) => isPast(new Date(expiresAt)); return (