push

pushy

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>

src/components/generic/UserMenu.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { useAuth } from '@/contexts/AuthContext'
 import { useTheme } from '@/contexts/ThemeContext'
 import { useProfile } from '@/contexts/ProfileProvider'
+import { useDateTimePreference } from '@/contexts/DateTimePreferenceContext'
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Label } from '@/components/ui/label'
@@ -11,7 +12,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem,
 import { Dialog, DialogContent } from '@/components/ui/dialog'
 import { AlertDialog, AlertDialogContent, } from '@/components/ui/alert-dialog'
 
-import { User, Settings, LogOut, Sun, Moon, Monitor, Loader2, Check } from 'lucide-react'
+import { User, Settings, LogOut, Sun, Moon, Monitor, Loader2, Check, Clock } from 'lucide-react'
 
 import { AVATAR_COLORS } from '@/data/profile.data'
 
@@ -39,13 +40,35 @@ function ThemeOption({ value, label, icon: Icon, active, onClick }) {
   )
 }
 
+// ─── Timezone Option ──────────────────────────────────────────────────────────
+function TimezoneOption({ value, label, description, active, onClick }) {
+  return (
+    <button
+      onClick={() => onClick(value)}
+      className={`flex flex-col gap-1 p-3 rounded-lg border-2 transition-all cursor-pointer w-full text-left
+        ${active
+          ? 'border-primary bg-primary/5'
+          : 'border-border hover:border-muted-foreground/40 hover:bg-muted/40'
+        }`}
+    >
+      <span className={`text-sm font-semibold ${active ? 'text-primary' : 'text-foreground'}`}>
+        {label}
+      </span>
+      <span className="text-xs text-muted-foreground">{description}</span>
+      {active && <Check size={12} className="text-primary mt-0.5" />}
+    </button>
+  )
+}
+
 // ─── Settings Dialog ──────────────────────────────────────────────────────────
 function SettingsDialog({ open, onClose }) {
   const { theme, setTheme } = useTheme()
+  const { timezone, setTimezone } = useDateTimePreference()
   const [tab, setTab] = useState('appearance')
 
   const TABS = [
     { id: 'appearance', label: 'Appearance', icon: Sun },
+    { id: 'datetime',   label: 'Date & Time', icon: Clock },
   ]
 
   return (
@@ -100,6 +123,45 @@ function SettingsDialog({ open, onClose }) {
               </div>
             )}
 
+            {/* Date & Time */}
+            {tab === 'datetime' && (
+              <div className="space-y-5">
+                <div>
+                  <h2 className="text-base font-semibold">Date &amp; Time</h2>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    Choose how dates and times are displayed across the platform.
+                    Your locale format is taken from your browser&apos;s language setting.
+                  </p>
+                </div>
+                <Separator />
+                <div>
+                  <Label className="text-sm font-medium mb-3 block">Timezone Display</Label>
+                  <div className="grid grid-cols-2 gap-3">
+                    <TimezoneOption
+                      value="local"
+                      label="Local"
+                      description="Dates shown in your device's local timezone."
+                      active={timezone === 'local'}
+                      onClick={setTimezone}
+                    />
+                    <TimezoneOption
+                      value="UTC"
+                      label="UTC"
+                      description="Dates shown in Coordinated Universal Time (UTC+0)."
+                      active={timezone === 'UTC'}
+                      onClick={setTimezone}
+                    />
+                  </div>
+                </div>
+                <div className="rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground space-y-1">
+                  <p className="font-medium text-foreground">Preview</p>
+                  <p>Date: <span className="text-foreground">{new Date().toLocaleDateString(navigator.language, { month: 'short', day: 'numeric', year: 'numeric', ...(timezone === 'UTC' ? { timeZone: 'UTC' } : {}) })}</span></p>
+                  <p>Date &amp; Time: <span className="text-foreground">{new Date().toLocaleString(navigator.language, { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', ...(timezone === 'UTC' ? { timeZone: 'UTC' } : {}) })}</span></p>
+                  {timezone === 'UTC' && <p className="text-amber-600 dark:text-amber-400 font-medium">All times shown in UTC</p>}
+                </div>
+              </div>
+            )}
+
           </div>
         </div>
       </DialogContent>