feat: enhance ReassignSheet component with dynamic title and improved accessibility

- Added logic to dynamically set the sheet title based on the selected duty date, improving user context.
- Updated the description to be visually hidden while maintaining accessibility for screen readers.
- Refactored user selection display to enhance clarity and organization, ensuring a better user experience.

webapp-next/src/components/admin/ReassignSheet.tsx

@@ -6,7 +6,7 @@
 
 import type { DutyWithUser } from "@/types";
 import type { UserForAdmin } from "@/lib/api";
-import { localDateString, formatHHMM } from "@/lib/date-utils";
+import { localDateString, formatHHMM, dateKeyToDDMM } from "@/lib/date-utils";
 import { Button } from "@/components/ui/button";
 import {
   Sheet,
@@ -56,6 +56,16 @@ export function ReassignSheet({
   onCloseAnimationEnd,
   t,
 }: ReassignSheetProps) {
+  const todayKey = localDateString(new Date());
+  const dateKey = selectedDuty
+    ? localDateString(new Date(selectedDuty.start_at))
+    : "";
+  const sheetTitle = selectedDuty
+    ? dateKey === todayKey
+      ? t("duty.today") + ", " + dateKeyToDDMM(dateKey)
+      : dateKeyToDDMM(dateKey)
+    : t("admin.reassign_duty");
+
   return (
     <Sheet open={open} onOpenChange={(isOpen) => !isOpen && onRequestClose()}>
       <SheetContent
@@ -96,13 +106,14 @@ export function ReassignSheet({
             aria-hidden
           />
           <SheetHeader className="p-0">
-            <SheetTitle>{t("admin.reassign_duty")}</SheetTitle>
-            <SheetDescription>{t("admin.select_user")}</SheetDescription>
+            <SheetTitle>{sheetTitle}</SheetTitle>
+            <SheetDescription className="sr-only">
+              {t("admin.select_user")}
+            </SheetDescription>
           </SheetHeader>
           {selectedDuty && (
             <div className="flex flex-col gap-4 pt-2 pb-4">
               <p className="text-sm text-muted-foreground">
-                {localDateString(new Date(selectedDuty.start_at))}{" "}
                 {formatHHMM(selectedDuty.start_at)} – {formatHHMM(selectedDuty.end_at)}
               </p>
               <p className="text-xs text-muted-foreground">
@@ -113,6 +124,10 @@ export function ReassignSheet({
                   {t("admin.no_users_for_assign")}
                 </p>
               ) : (
+                <div className="flex flex-col gap-1">
+                  <p className="text-sm text-muted-foreground">
+                    {t("admin.select_user")}
+                  </p>
                   <div
                     className="flex flex-col gap-1 max-h-[40vh] overflow-y-auto rounded-lg border border-border py-1"
                     role="radiogroup"
@@ -151,6 +166,7 @@ export function ReassignSheet({
                     );
                   })}
                   </div>
+                </div>
               )}
               {reassignErrorKey && (
                 <p id="admin-reassign-error" className="text-sm text-destructive" role="alert">