feat(ui): format dashboard dates from the user preference

Clients/src/presentation/pages/EvalsDashboard/BiasAuditDetail.tsx

@@ -28,7 +28,7 @@ import {
   type ScoreDistributionTable,
 } from "../../../application/repository/deepEval.repository";
 import EditableText from "../../components/EditableText";
-import { displayFormattedDateTime } from "../../tools/isoDateToString";
+import useFormattedDate from "../../../application/hooks/useFormattedDate";
 
 interface BiasAuditDetailProps {
   auditId: string;
@@ -420,6 +420,7 @@ function ScoreDistributionView({ table }: { table: ScoreDistributionTable }) {
 }
 
 export default function BiasAuditDetail({ auditId, onBack }: BiasAuditDetailProps) {
+  const formatDate = useFormattedDate();
   const theme = useTheme();
   const [audit, setAudit] = useState<BiasAuditDetailResponse | null>(null);
   const [status, setStatus] = useState<string>("pending");
@@ -576,7 +577,7 @@ export default function BiasAuditDetail({ auditId, onBack }: BiasAuditDetailProp
           </Stack>
           {audit?.createdAt && (
             <Typography sx={{ fontSize: 12, color: theme.palette.text.secondary }}>
-              {audit.presetName} · Created {displayFormattedDateTime(audit.createdAt)}
+              {audit.presetName} · Created {formatDate(audit.createdAt, { includeTime: true })}
             </Typography>
           )}
         </Stack>

Clients/src/presentation/pages/EvalsDashboard/EvalsDashboard.tsx

@@ -65,7 +65,7 @@ import {
 import type { LLMProvider } from "../../../infrastructure/api/evaluationLlmApiKeysService";
 import { evalModelsService } from "../../../infrastructure/api/evalModelsService";
 import { Plus as PlusIcon, Trash2 as DeleteIcon } from "lucide-react";
-import { displayFormattedDate } from "../../tools/isoDateToString";
+import useFormattedDate from "../../../application/hooks/useFormattedDate";
 import { Collapse, IconButton, CircularProgress } from "@mui/material";
 import VWChip from "../../components/Chip";
 import ConfirmationModal from "../../components/Dialogs/ConfirmationModal";
@@ -230,6 +230,7 @@ interface LocalProvider {
 }
 
 export default function EvalsDashboard() {
+  const formatDate = useFormattedDate();
   const { projectId } = useParams<{ projectId?: string }>();
   const navigate = useNavigate();
   const location = useLocation();
@@ -561,7 +562,7 @@ export default function EvalsDashboard() {
   // Format date for display
   const formatKeyDate = (dateStr: string): string => {
     try {
-      return displayFormattedDate(dateStr);
+      return formatDate(dateStr);
     } catch {
       return "-";
     }

Clients/src/presentation/pages/EvalsDashboard/ExperimentDetailContent.tsx

@@ -42,7 +42,7 @@ import {
   type Experiment,
   type EvaluationLog,
 } from "../../../application/repository/deepEval.repository";
-import { displayFormattedDate } from "../../tools/isoDateToString";
+import useFormattedDate from "../../../application/hooks/useFormattedDate";
 
 // Preprocess LaTeX delimiters to work with remark-math
 const preprocessLatex = (text: string): string => {
@@ -181,6 +181,7 @@ export default function ExperimentDetailContent({
   projectId,
   onBack,
 }: ExperimentDetailContentProps) {
+  const formatDate = useFormattedDate();
   const [loading, setLoading] = useState(true);
   const [experiment, setExperiment] = useState<Experiment | null>(null);
   const [logs, setLogs] = useState<EvaluationLog[]>([]);
@@ -322,7 +323,7 @@ export default function ExperimentDetailContent({
         (experiment as unknown as { config?: Record<string, Record<string, unknown>> }).config ||
         {};
 
-      const nextName = `${experiment.name || "Eval"} (rerun ${displayFormattedDate(new Date())})`;
+      const nextName = `${experiment.name || "Eval"} (rerun ${formatDate(new Date())})`;
 
       const payload = {
         project_id: projectId,
@@ -838,7 +839,7 @@ export default function ExperimentDetailContent({
                       : palette.text.secondary,
                 }}
               >
-                {displayFormattedDate(experiment.created_at)}
+                {formatDate(experiment.created_at)}
               </Typography>
             </Box>
           </Stack>

Clients/src/presentation/pages/EvalsDashboard/ProjectExperiments.tsx

@@ -39,11 +39,8 @@ import HelperIcon from "../../components/HelperIcon";
 import TipBox from "../../components/TipBox";
 import { useAuth } from "../../../application/hooks/useAuth";
 import allowedRoles from "../../../application/constants/permissions";
-import {
-  displayFormattedDate,
-  displayFormattedDateTime,
-  displayFormattedTime,
-} from "../../tools/isoDateToString";
+import useFormattedDate from "../../../application/hooks/useFormattedDate";
+import { displayFormattedTime } from "../../tools/isoDateToString";
 
 interface ProjectExperimentsProps {
   projectId: string;
@@ -81,6 +78,7 @@ export default function ProjectExperiments({
   onViewExperiment,
   useCase,
 }: ProjectExperimentsProps) {
+  const formatDate = useFormattedDate();
   const navigate = useNavigate();
   const [experiments, setExperiments] = useState<ExperimentWithMetrics[]>([]);
   const [, setLoading] = useState(true);
@@ -280,7 +278,7 @@ export default function ProjectExperiments({
       const baseConfig = originalExp.config || {};
 
       const now = new Date();
-      const dateStr = displayFormattedDate(now);
+      const dateStr = formatDate(now);
       const timeStr = displayFormattedTime(now);
       const nextName = `${originalExp.name || "Eval"} (rerun ${dateStr}, ${timeStr})`;
 
@@ -558,7 +556,7 @@ export default function ProjectExperiments({
     }
 
     // Format the date with time
-    const createdDate = exp.created_at ? displayFormattedDateTime(exp.created_at) : "-";
+    const createdDate = exp.created_at ? formatDate(exp.created_at, { includeTime: true }) : "-";
 
     // Determine judge display based on evaluation mode
     const evaluationMode = exp.config?.evaluationMode || "standard";

Clients/src/presentation/pages/EvalsDashboard/ProjectOverview.tsx

@@ -31,7 +31,7 @@ import TipBox from "../../components/TipBox";
 import { useAuth } from "../../../application/hooks/useAuth";
 import allowedRoles from "../../../application/constants/permissions";
 import { palette } from "../../themes/palette";
-import { displayFormattedDateTime } from "../../tools/isoDateToString";
+import useFormattedDate from "../../../application/hooks/useFormattedDate";
 
 interface ProjectOverviewProps {
   projectId: string;
@@ -155,6 +155,7 @@ export default function ProjectOverview({
   onProjectUpdate,
   onViewExperiment,
 }: ProjectOverviewProps) {
+  const formatDate = useFormattedDate();
   const navigate = useNavigate();
   const [loading, setLoading] = useState(true);
   const [experiments, setExperiments] = useState<Experiment[]>([]);
@@ -339,7 +340,7 @@ export default function ProjectOverview({
       }
 
       // Format date
-      const createdDate = exp.created_at ? displayFormattedDateTime(exp.created_at) : "-";
+      const createdDate = exp.created_at ? formatDate(exp.created_at, { includeTime: true }) : "-";
 
       // Judge/scorer display
       const judgeModel = exp.config?.judgeLlm?.model || exp.config?.judgeLlm?.provider || "";

Clients/src/presentation/pages/EvalsDashboard/components/PerformanceChart.tsx

@@ -15,7 +15,8 @@ import {
   type Experiment,
 } from "../../../../application/repository/deepEval.repository";
 import { vwTooltipStyle, ChartOutlineWrapper } from "../../../components/Charts/VWCharts";
-import { displayFormattedDate, displayFormattedTime } from "../../../tools/isoDateToString";
+import useFormattedDate from "../../../../application/hooks/useFormattedDate";
+import { displayFormattedTime } from "../../../tools/isoDateToString";
 
 export type TimeRange = "7d" | "30d" | "100d" | "all";
 
@@ -102,6 +103,7 @@ type ChartPoint = {
 };
 
 export default function PerformanceChart({ projectId, timeRange }: PerformanceChartProps) {
+  const formatDate = useFormattedDate();
   const [data, setData] = useState<ChartPoint[]>([]);
   const [activeMetrics, setActiveMetrics] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
@@ -157,7 +159,7 @@ export default function PerformanceChart({ projectId, timeRange }: PerformanceCh
         });
 
         // Build chart point
-        const dateStr = displayFormattedDate(exp.created_at);
+        const dateStr = formatDate(exp.created_at);
         const timeStr = displayFormattedTime(exp.created_at);
         const point: ChartPoint = {
           name: `Run ${i + 1}`,
@@ -181,7 +183,7 @@ export default function PerformanceChart({ projectId, timeRange }: PerformanceCh
     } finally {
       setLoading(false);
     }
-  }, [projectId, timeRange, getCutoffDate]);
+  }, [projectId, timeRange, getCutoffDate, formatDate]);
 
   useEffect(() => {
     void loadPerformanceData();

Clients/src/presentation/pages/ProjectView/CEMarking/index.tsx

@@ -33,7 +33,7 @@ import { CustomizableButton } from "../../../components/button/customizable-butt
 import StandardModal from "../../../components/Modals/StandardModal";
 import Field from "../../../components/Inputs/Field";
 import DatePicker from "../../../components/Inputs/Datepicker";
-import { displayFormattedDate } from "../../../tools/isoDateToString";
+import useFormattedDate from "../../../../application/hooks/useFormattedDate";
 import VWTooltip from "../../../components/VWTooltip";
 import Checkbox from "../../../components/Inputs/Checkbox";
 import {
@@ -225,6 +225,7 @@ const getStatusBgColor = (status: ConformityStepStatus): string => {
 };
 
 const CEMarking: React.FC<CEMarkingProps> = ({ projectId }) => {
+  const formatDate = useFormattedDate();
   const theme = useTheme();
   const navigate = useNavigate();
   const { users } = useUsers();
@@ -1904,7 +1905,7 @@ const CEMarking: React.FC<CEMarkingProps> = ({ projectId }) => {
                               •
                             </Typography>
                             <Typography sx={{ fontSize: 12, color: theme.palette.text.secondary }}>
-                              Uploaded: {displayFormattedDate(evidence.uploaded_time)}
+                              Uploaded: {formatDate(evidence.uploaded_time)}
                             </Typography>
                           </>
                         )}
@@ -2001,7 +2002,7 @@ const CEMarking: React.FC<CEMarkingProps> = ({ projectId }) => {
                               •
                             </Typography>
                             <Typography sx={{ fontSize: 12, color: theme.palette.text.secondary }}>
-                              Occurred: {displayFormattedDate(incident.occurred_date)}
+                              Occurred: {formatDate(incident.occurred_date)}
                             </Typography>
                           </>
                         )}

Clients/src/presentation/pages/ProjectView/Overview/index.tsx

@@ -5,7 +5,7 @@
 import { Stack, Typography, useTheme } from "@mui/material";
 import ProgressBar from "../../../components/ProjectCard/ProgressBar";
 import { FC, memo, useCallback, useMemo } from "react";
-import { displayFormattedDate } from "../../../tools/isoDateToString";
+import useFormattedDate from "../../../../application/hooks/useFormattedDate";
 import Risks from "../../../components/Risks";
 import IntakeSubmissionCard from "../IntakeSubmissionCard";
 import { useSearchParams } from "react-router";
@@ -34,6 +34,7 @@ interface ProgressBarCardProps {
 }
 
 const Overview: FC<OverviewProps> = memo(({ projectRisksSummary }) => {
+  const formatDate = useFormattedDate();
   const [searchParams] = useSearchParams();
   const projectId = searchParams.get("projectId") ?? "1"; // default project ID is 2
   // Extract numeric ID for plugin-sourced IDs like "prefix-123"
@@ -128,7 +129,7 @@ const Overview: FC<OverviewProps> = memo(({ projectRisksSummary }) => {
           <Stack sx={styles.block}>
             <Typography sx={styles.title}>Last updated</Typography>
             <Typography sx={styles.value}>
-              {displayFormattedDate(project.last_updated.toISOString())}
+              {formatDate(project.last_updated.toISOString())}
             </Typography>
           </Stack>
           <Stack sx={styles.block}>

Clients/src/presentation/pages/ProjectView/V1.0ProjectView/Overview/index.tsx

@@ -8,7 +8,7 @@ import { DescriptionCard } from "../../../../components/Cards/DescriptionCard";
 import { TeamCard } from "../../../../components/Cards/TeamCard";
 import { Project } from "../../../../../domain/types/Project";
 import CustomizableSkeleton from "../../../../components/Skeletons";
-import { displayFormattedDate } from "../../../../tools/isoDateToString";
+import useFormattedDate from "../../../../../application/hooks/useFormattedDate";
 import { pluralizeEntityType } from "../../../../tools/pluralizeEntityType";
 import { useEffect, useMemo, useState } from "react";
 import { User } from "../../../../../domain/types/User";
@@ -26,6 +26,7 @@ import {
 import { brand } from "../../../../themes/palette";
 
 const VWProjectOverview = ({ project }: { project?: Project }) => {
+  const formatDate = useFormattedDate();
   const [projectFrameworkId, setProjectFrameworkId] = useState<number | null>(null);
   const [projectFrameworkId2, setProjectFrameworkId2] = useState<number | null>(null);
   const { users } = useUsers();
@@ -252,7 +253,7 @@ const VWProjectOverview = ({ project }: { project?: Project }) => {
               />
               <InfoCard
                 title="Last updated"
-                body={displayFormattedDate(project.last_updated.toString())}
+                body={formatDate(project.last_updated.toString())}
                 icon={<ClockIcon size={16} />}
               />
               {user.name !== undefined && user.surname !== undefined ? (

Clients/src/presentation/pages/ShadowAI/AIToolsPage.tsx

@@ -46,7 +46,7 @@ import TablePaginationActions from "../../components/TablePagination";
 import GovernanceWizardModal from "./GovernanceWizardModal";
 import { PageHeaderExtended } from "../../components/Layout/PageHeaderExtended";
 import Alert from "../../components/Alert";
-import { displayFormattedDate } from "../../tools/isoDateToString";
+import useFormattedDate from "../../../application/hooks/useFormattedDate";
 import {
   SelectorVertical,
   SortableColumn,
@@ -101,6 +101,7 @@ function ToolIcon({ vendor, size = 18 }: { vendor?: string; size?: number }) {
 }
 
 export default function AIToolsPage() {
+  const formatDate = useFormattedDate();
   const theme = useTheme();
   const navigate = useNavigate();
   const { toolId } = useParams<{ toolId?: string }>();
@@ -322,17 +323,13 @@ export default function AIToolsPage() {
               <DashboardHeaderCard
                 title="First detected"
                 count={
-                  selectedTool.first_detected_at
-                    ? displayFormattedDate(selectedTool.first_detected_at)
-                    : "—"
+                  selectedTool.first_detected_at ? formatDate(selectedTool.first_detected_at) : "—"
                 }
                 disableNavigation
               />
               <DashboardHeaderCard
                 title="Last seen"
-                count={
-                  selectedTool.last_seen_at ? displayFormattedDate(selectedTool.last_seen_at) : "—"
-                }
+                count={selectedTool.last_seen_at ? formatDate(selectedTool.last_seen_at) : "—"}
                 disableNavigation
               />
             </Box>
@@ -585,7 +582,7 @@ export default function AIToolsPage() {
                       {t.risk_score ?? 0}
                     </TableCell>
                     <TableCell sx={singleTheme.tableStyles.primary.body.cell}>
-                      {t.last_seen_at ? displayFormattedDate(t.last_seen_at) : "—"}
+                      {t.last_seen_at ? formatDate(t.last_seen_at) : "—"}
                     </TableCell>
                   </TableRow>
                 );

Clients/src/presentation/pages/ShadowAI/SettingsPage.tsx

@@ -48,7 +48,7 @@ import Select from "../../components/Inputs/Select";
 import { PageHeaderExtended } from "../../components/Layout/PageHeaderExtended";
 import { useUserGuideSidebarContext } from "../../components/UserGuide/UserGuideSidebarContext";
 import { palette } from "../../themes/palette";
-import { displayFormattedDate } from "../../tools/isoDateToString";
+import useFormattedDate from "../../../application/hooks/useFormattedDate";
 
 const numberFormatter = new Intl.NumberFormat("en-US");
 
@@ -127,6 +127,7 @@ function useCardSx() {
 }
 
 function ApiKeysSection() {
+  const formatDate = useFormattedDate();
   const cardSx = useCardSx();
   const { open: openGuide } = useUserGuideSidebarContext();
   const [loading, setLoading] = useState(true);
@@ -333,10 +334,10 @@ function ApiKeysSection() {
                       <Chip label={k.is_active ? "Active" : "Revoked"} size="small" />
                     </TableCell>
                     <TableCell sx={singleTheme.tableStyles.primary.body.cell}>
-                      {k.created_at ? displayFormattedDate(k.created_at) : "—"}
+                      {k.created_at ? formatDate(k.created_at) : "—"}
                     </TableCell>
                     <TableCell sx={singleTheme.tableStyles.primary.body.cell}>
-                      {k.last_used_at ? displayFormattedDate(k.last_used_at) : "Never"}
+                      {k.last_used_at ? formatDate(k.last_used_at) : "Never"}
                     </TableCell>
                     <TableCell align="right" sx={singleTheme.tableStyles.primary.body.cell}>
                       {k.is_active ? (
@@ -427,6 +428,7 @@ function ApiKeysSection() {
 // ─── Syslog Config Section ──────────────────────────────────────────
 
 function SyslogConfigSection() {
+  const formatDate = useFormattedDate();
   const cardSx = useCardSx();
   const { open: openGuide } = useUserGuideSidebarContext();
   const [loading, setLoading] = useState(true);
@@ -599,7 +601,7 @@ function SyslogConfigSection() {
                       <Chip label={c.is_active ? "Active" : "Inactive"} size="small" />
                     </TableCell>
                     <TableCell sx={singleTheme.tableStyles.primary.body.cell}>
-                      {c.created_at ? displayFormattedDate(c.created_at) : "—"}
+                      {c.created_at ? formatDate(c.created_at) : "—"}
                     </TableCell>
                     <TableCell align="right" sx={singleTheme.tableStyles.primary.body.cell}>
                       <Stack direction="row" gap="4px" justifyContent="flex-end">

Clients/src/presentation/pages/ShadowAI/UserActivityPage.tsx

@@ -51,7 +51,7 @@ import {
   SortableTableHead,
 } from "./constants";
 import { palette } from "../../themes/palette";
-import { displayFormattedDate } from "../../tools/isoDateToString";
+import useFormattedDate from "../../../application/hooks/useFormattedDate";
 
 interface UserDetailData {
   email: string;
@@ -80,6 +80,7 @@ const BASE_TABS = [
 const DEPT_PER_PAGE = 10;
 
 export default function UserActivityPage() {
+  const formatDate = useFormattedDate();
   const location = useLocation();
   const navigate = useNavigate();
   const theme = useTheme();
@@ -361,7 +362,7 @@ export default function UserActivityPage() {
                           {t.event_count}
                         </TableCell>
                         <TableCell sx={singleTheme.tableStyles.primary.body.cell}>
-                          {displayFormattedDate(t.last_used)}
+                          {formatDate(t.last_used)}
                         </TableCell>
                       </TableRow>
                     ))}