fix: convert appointment time from UTC to local time for display

src/components/Dashboard/Opportunities/OpportunityCard.helpers.tsx

@@ -1,4 +1,6 @@
 import { ConfettiIcon, PersonSimpleWalkIcon, ShootingStarIcon, TranslateIcon } from "@phosphor-icons/react";
+import { utcHhmmToLocal } from "@/utils";
+import { format } from "date-fns";
 import { ApiVolunteerOpportunityGetList, OpportunityStatusType, ProfileVolunteeringType } from "need4deed-sdk";
 import { JSX } from "react";
 
@@ -9,6 +11,20 @@ export function formatAvailability(availability: ApiVolunteerOpportunityGetList[
   return parts.join(", ");
 }
 
+export function formatAccompanyingDate(details?: {
+  appointmentDate?: string;
+  appointmentTime?: string;
+}): string | null {
+  if (!details?.appointmentDate) return null;
+
+  const date = new Date(details.appointmentDate);
+  const formattedDate = isNaN(date.getTime()) ? details.appointmentDate : format(date, "dd.MM.yyyy");
+
+  const formattedTime = details.appointmentTime ? utcHhmmToLocal(details.appointmentTime) : null;
+
+  return [formattedDate, formattedTime].filter(Boolean).join(" ");
+}
+
 export const statusColorMap: Record<OpportunityStatusType, string> = {
   [OpportunityStatusType.NEW]: "var(--color-red-500)",
   [OpportunityStatusType.SEARCHING]: "var(--color-orange-500, var(--color-red-500))",

src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsDisplay.tsx

@@ -1,5 +1,6 @@
 import { EditableField } from "@/components/EditableField/EditableField";
 import { EMPTY_PLACEHOLDER_VALUE } from "@/config/constants";
+import { utcHhmmToLocal } from "@/utils";
 import { format } from "date-fns";
 import { useTranslation } from "react-i18next";
 import { AccompanyingDetailsFormData } from "./accompanyingDetailsSchema";
@@ -30,7 +31,7 @@ export const AccompanyingDetailsDisplay = ({ values, languageLabel }: Props) =>
 
       <DateFieldRow data-testid="appointment-time-field">
         <label>{t("dashboard.opportunityProfile.accompanyingDetails.appointmentTime")}</label>
-        <span>{values.appointmentTime || EMPTY_PLACEHOLDER_VALUE}</span>
+        <span>{values.appointmentTime ? utcHhmmToLocal(values.appointmentTime) : EMPTY_PLACEHOLDER_VALUE}</span>
       </DateFieldRow>
 
       <EditableField

src/components/Dashboard/Profile/sections/AccompanyingDetails/helpers.ts

@@ -31,7 +31,7 @@ export const parseDate = (date: Date | string | undefined): Date | null => {
 export const parseTime = (time: Date | string | undefined): string => {
   if (!time) return "";
   if (typeof time === "string") return time;
-  return time.toTimeString().slice(0, 5);
+  return String(time.getHours()).padStart(2, "0") + ":" + String(time.getMinutes()).padStart(2, "0");
 };
 
 export const getInitialFormValues = (

src/utils/index.ts

@@ -3,6 +3,18 @@ export * from "./helpers";
 import { cloudfrontURL } from "@/config/constants";
 import { DocumentStatusType } from "need4deed-sdk";
 
+/**
+ * Converts a UTC "HH:mm" string to the browser's local time "HH:mm" string.
+ * Returns the original value unchanged if it cannot be parsed.
+ */
+export function utcHhmmToLocal(hhmm: string): string {
+  const [h, m] = hhmm.split(":").map(Number);
+  if (isNaN(h) || isNaN(m)) return hhmm;
+  const d = new Date();
+  d.setUTCHours(h, m, 0, 0);
+  return String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
+}
+
 export function getDateLocalTooUTC(dateStr: string | undefined) {
   if (!dateStr) return undefined;