From 2723b3f29ea41e43184920d04eaac2a955cdd45f Mon Sep 17 00:00:00 2001
From: Luca <102960244+Luca-Timo@users.noreply.github.com>
Date: Tue, 2 Jun 2026 15:03:35 +0200
Subject: [PATCH] fix(business-profile): honor 24h time format in
 business-hours pickers

Native <input type="time"> renders AM/PM from the browser locale, ignoring
general_time_format. Pin a lang hint (en-GB for 24h, en-US for 12h) so
Chrome/Edge render the admin's chosen format. Display-only; the stored
value was already 24h HH:MM.
---
 .../admin/settings/SettingsBusinessProfilePage.tsx     | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/pages/admin/settings/SettingsBusinessProfilePage.tsx b/frontend/src/pages/admin/settings/SettingsBusinessProfilePage.tsx
index eda44bc5..b1d86332 100644
--- a/frontend/src/pages/admin/settings/SettingsBusinessProfilePage.tsx
+++ b/frontend/src/pages/admin/settings/SettingsBusinessProfilePage.tsx
@@ -19,6 +19,7 @@ import {
 } from '../../../services/businessProfile.service';
 import { Button, Card, Loading, Input, CountrySelect } from '../../../components/common';
 import { DecimalInput } from '../../../components/common/DecimalInput';
+import { useLocalizedDate } from '../../../hooks/useLocalizedDate';
 import { toast } from 'react-toastify';
 
 export const SettingsBusinessProfilePage: React.FC = () => {
@@ -354,6 +355,13 @@ const BusinessHoursEditor: React.FC<{
   onChange: (next: BusinessHours) => void;
 }> = ({ value, onChange }) => {
   const { t } = useTranslation();
+  const { timeFormat } = useLocalizedDate();
+  // A native <input type="time"> renders 12h (AM/PM) or 24h purely from the
+  // browser/OS locale — it ignores our `general_time_format` setting. Pin a
+  // `lang` hint so Chrome/Edge render the admin's chosen format. (Safari /
+  // Firefox follow the OS locale regardless — same caveat as date inputs.)
+  // The stored value is always 24h "HH:MM" either way, so this is display-only.
+  const timeInputLang = timeFormat === '12h' ? 'en-US' : 'en-GB';
 
   // Always work with a fully-populated 7-day object so toggling a day on
   // and off doesn't drop sibling keys.
@@ -427,6 +435,7 @@ const BusinessHoursEditor: React.FC<{
                 <div key={idx} className="flex items-center gap-2">
                   <Input
                     type="time"
+                    lang={timeInputLang}
                     value={block.start}
                     onChange={(e) => updateBlock(iso, idx, { start: e.target.value })}
                     className="w-32"
@@ -434,6 +443,7 @@ const BusinessHoursEditor: React.FC<{
                   <span className="text-neutral-400">–</span>
                   <Input
                     type="time"
+                    lang={timeInputLang}
                     value={block.end}
                     onChange={(e) => updateBlock(iso, idx, { end: e.target.value })}
                     className="w-32"