@serhii.olishevskyi/docs 1.2.26 → 1.2.28

package/dist/index.mjs

@@ -1157,33 +1157,763 @@ function UrlComponent({
   ] });
 }
 
+// src/UI/components/inputs/DateTimePickerComponent.tsx
+import { useState as useState7, useEffect as useEffect4, useMemo as useMemo2 } from "react";
+import {
+  TextField as TextField4,
+  InputAdornment as InputAdornment6,
+  IconButton as IconButton6,
+  Box as Box6,
+  MenuItem as MenuItem2,
+  Select as Select2,
+  Typography as Typography2,
+  Popover as Popover2,
+  Grid,
+  Button as Button2,
+  Divider
+} from "@mui/material";
+import {
+  CalendarMonth as CalendarIcon,
+  AccessTime as TimeIcon,
+  Event as DateTimeIcon,
+  Lock as LockIcon3,
+  ContentCopy as ContentCopyIcon3,
+  Check as CheckIcon3,
+  Clear as ClearIcon3,
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+  Today as TodayIcon
+} from "@mui/icons-material";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var LOCALE_CONFIGS = {
+  de: {
+    locale: "de-DE",
+    dateFormat: "DD.MM.YYYY",
+    timeFormat: "24",
+    placeholderDate: "TT.MM.JJJJ",
+    placeholderTime: "HH:MM",
+    placeholderDateTime: "TT.MM.JJJJ HH:MM",
+    weekStartsOn: 1
+  },
+  en: {
+    locale: "en-US",
+    dateFormat: "MM/DD/YYYY",
+    timeFormat: "12",
+    placeholderDate: "MM/DD/YYYY",
+    placeholderTime: "HH:MM AM/PM",
+    placeholderDateTime: "MM/DD/YYYY, HH:MM AM/PM",
+    weekStartsOn: 0
+  },
+  es: {
+    locale: "es-ES",
+    dateFormat: "DD/MM/YYYY",
+    timeFormat: "24",
+    placeholderDate: "DD/MM/AAAA",
+    placeholderTime: "HH:MM",
+    placeholderDateTime: "DD/MM/AAAA HH:MM",
+    weekStartsOn: 1
+  },
+  fr: {
+    locale: "fr-FR",
+    dateFormat: "DD/MM/YYYY",
+    timeFormat: "24",
+    placeholderDate: "JJ/MM/AAAA",
+    placeholderTime: "HH:MM",
+    placeholderDateTime: "JJ/MM/AAAA HH:MM",
+    weekStartsOn: 1
+  },
+  it: {
+    locale: "it-IT",
+    dateFormat: "DD/MM/YYYY",
+    timeFormat: "24",
+    placeholderDate: "GG/MM/AAAA",
+    placeholderTime: "HH:MM",
+    placeholderDateTime: "GG/MM/AAAA HH:MM",
+    weekStartsOn: 1
+  },
+  pl: {
+    locale: "pl-PL",
+    dateFormat: "DD.MM.YYYY",
+    timeFormat: "24",
+    placeholderDate: "DD.MM.RRRR",
+    placeholderTime: "HH:MM",
+    placeholderDateTime: "DD.MM.RRRR HH:MM",
+    weekStartsOn: 1
+  },
+  uk: {
+    locale: "uk-UA",
+    dateFormat: "DD.MM.YYYY",
+    timeFormat: "24",
+    placeholderDate: "\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420",
+    placeholderTime: "\u0413\u0413:\u0425\u0425",
+    placeholderDateTime: "\u0414\u0414.\u041C\u041C.\u0420\u0420\u0420\u0420 \u0413\u0413:\u0425\u0425",
+    weekStartsOn: 1
+  }
+};
+function getLocaleConfig(langCode) {
+  const code = (langCode || "en").toLowerCase().substring(0, 2);
+  return LOCALE_CONFIGS[code] || LOCALE_CONFIGS.en;
+}
+function getMonthNames(langCode) {
+  const config = getLocaleConfig(langCode);
+  const formatter = new Intl.DateTimeFormat(config.locale, { month: "long" });
+  return Array.from({ length: 12 }, (_, i) => {
+    const d = new Date(2026, i, 15);
+    const name = formatter.format(d);
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  });
+}
+function getDayOfWeekShortNames(langCode) {
+  const config = getLocaleConfig(langCode);
+  const formatter = new Intl.DateTimeFormat(config.locale, { weekday: "short" });
+  const baseSunday = new Date(2026, 4, 10);
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(baseSunday);
+    d.setDate(baseSunday.getDate() + i);
+    const dayStr = formatter.format(d);
+    days.push(dayStr.charAt(0).toUpperCase() + dayStr.slice(1, 3));
+  }
+  if (config.weekStartsOn === 1) {
+    const sunday = days.shift();
+    days.push(sunday);
+  }
+  return days;
+}
+function applyInputMask(val, langCode, mode) {
+  const config = getLocaleConfig(langCode);
+  const isSlash = config.dateFormat.includes("/");
+  const dateSep = isSlash ? "/" : ".";
+  const digits = val.replace(/\D/g, "");
+  if (mode === "date") {
+    const d = digits.slice(0, 8);
+    let res = "";
+    if (d.length > 0) res += d.slice(0, 2);
+    if (d.length >= 2) res += dateSep;
+    if (d.length > 2) res += d.slice(2, 4);
+    if (d.length >= 4) res += dateSep;
+    if (d.length > 4) res += d.slice(4, 8);
+    return res;
+  } else if (mode === "time") {
+    const t = digits.slice(0, 4);
+    let res = "";
+    if (t.length > 0) res += t.slice(0, 2);
+    if (t.length >= 2) res += ":";
+    if (t.length > 2) res += t.slice(2, 4);
+    return res;
+  } else {
+    const dt = digits.slice(0, 12);
+    let res = "";
+    if (dt.length > 0) res += dt.slice(0, 2);
+    if (dt.length >= 2) res += dateSep;
+    if (dt.length > 2) res += dt.slice(2, 4);
+    if (dt.length >= 4) res += dateSep;
+    if (dt.length > 4) res += dt.slice(4, 8);
+    if (dt.length > 8) res += " " + dt.slice(8, 10);
+    if (dt.length >= 10) res += ":";
+    if (dt.length > 10) res += dt.slice(10, 12);
+    return res;
+  }
+}
+function parseDateFromMask(maskedStr, langCode, mode) {
+  const config = getLocaleConfig(langCode);
+  const digits = maskedStr.replace(/\D/g, "");
+  if (mode === "date" && digits.length !== 8) return null;
+  if (mode === "time" && digits.length !== 4) return null;
+  if (mode === "datetime" && digits.length !== 12) return null;
+  try {
+    let day = 1, month = 0, year = 2026, hours = 0, minutes = 0;
+    if (mode === "date" || mode === "datetime") {
+      const isMMDD = config.dateFormat.startsWith("MM");
+      if (isMMDD) {
+        month = parseInt(digits.slice(0, 2), 10) - 1;
+        day = parseInt(digits.slice(2, 4), 10);
+      } else {
+        day = parseInt(digits.slice(0, 2), 10);
+        month = parseInt(digits.slice(2, 4), 10) - 1;
+      }
+      year = parseInt(digits.slice(4, 8), 10);
+      if (month < 0 || month > 11) return null;
+      if (day < 1 || day > 31) return null;
+      if (year < 1900 || year > 2100) return null;
+    }
+    if (mode === "time") {
+      hours = parseInt(digits.slice(0, 2), 10);
+      minutes = parseInt(digits.slice(2, 4), 10);
+      if (hours < 0 || hours > 23) return null;
+      if (minutes < 0 || minutes > 59) return null;
+    } else if (mode === "datetime") {
+      hours = parseInt(digits.slice(8, 10), 10);
+      minutes = parseInt(digits.slice(10, 12), 10);
+      if (hours < 0 || hours > 23) return null;
+      if (minutes < 0 || minutes > 59) return null;
+    }
+    const d = new Date(year, month, day, hours, minutes, 0);
+    if (isNaN(d.getTime())) return null;
+    if (mode !== "time" && (d.getDate() !== day || d.getMonth() !== month)) return null;
+    return d;
+  } catch {
+    return null;
+  }
+}
+function formatDateByLocale(date, langCode, mode) {
+  if (!date || isNaN(date.getTime())) return "";
+  const config = getLocaleConfig(langCode);
+  try {
+    if (mode === "date") {
+      return new Intl.DateTimeFormat(config.locale, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric"
+      }).format(date);
+    } else if (mode === "time") {
+      return new Intl.DateTimeFormat(config.locale, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: config.timeFormat === "12"
+      }).format(date);
+    } else {
+      return new Intl.DateTimeFormat(config.locale, {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: config.timeFormat === "12"
+      }).format(date);
+    }
+  } catch (err) {
+    return date.toISOString();
+  }
+}
+var DateTimePickerComponent = ({
+  overrideNamespace,
+  value = null,
+  mode = "datetime",
+  onDateChange,
+  onChange,
+  disabled = false,
+  slotProps,
+  copyTooltip = "Copy",
+  copiedTooltip = "Copied!",
+  clearTooltip = "Clear",
+  lockTooltip = "Field is read-only",
+  showLock = false,
+  hideCopyButton = false,
+  hideClearButton = false,
+  error: customError,
+  helperText: customHelperText,
+  label,
+  ...props
+}) => {
+  const namespace = "form_components";
+  const { languages, currentLang } = useLocalization();
+  const [isFocused, setIsFocused] = useState7(false);
+  const [selectedDate, setSelectedDate] = useState7(() => {
+    if (!value) return null;
+    const d = typeof value === "string" ? new Date(value) : value;
+    return isNaN(d.getTime()) ? null : d;
+  });
+  const activeLang = useMemo2(() => {
+    return languages.find((l) => l.code.toLowerCase() === currentLang.toLowerCase()) || languages[0];
+  }, [currentLang]);
+  const [inputValue, setInputValue] = useState7(() => {
+    return selectedDate ? formatDateByLocale(selectedDate, activeLang.code, mode) : "";
+  });
+  useEffect4(() => {
+    if (value === null || value === "") {
+      setSelectedDate(null);
+      setInputValue("");
+    } else {
+      const parsed = typeof value === "string" ? new Date(value) : value;
+      if (!isNaN(parsed.getTime())) {
+        setSelectedDate(parsed);
+        if (!isFocused) {
+          setInputValue(formatDateByLocale(parsed, activeLang.code, mode));
+        }
+      }
+    }
+  }, [value, activeLang.code, mode, isFocused]);
+  const [anchorEl, setAnchorEl] = useState7(null);
+  const [copied, setCopied] = useState7(false);
+  const [inputError, setInputError] = useState7(false);
+  const [viewDate, setViewDate] = useState7(() => selectedDate || /* @__PURE__ */ new Date());
+  const localeConfig = useMemo2(() => getLocaleConfig(activeLang.code), [activeLang]);
+  const placeholderText = useMemo2(() => {
+    if (mode === "date") return localeConfig.placeholderDate;
+    if (mode === "time") return localeConfig.placeholderTime;
+    return localeConfig.placeholderDateTime;
+  }, [mode, localeConfig]);
+  const isReadOnly = Boolean(slotProps?.htmlInput?.readOnly);
+  const isLocked = disabled || isReadOnly;
+  const notifyChanges = (newDate, updateText = true) => {
+    setSelectedDate(newDate);
+    const formatted = formatDateByLocale(newDate, activeLang.code, mode);
+    if (updateText) {
+      setInputValue(formatted);
+    }
+    setInputError(false);
+    const iso = newDate ? newDate.toISOString() : "";
+    if (onDateChange) {
+      onDateChange({
+        date: newDate,
+        formatted,
+        iso,
+        mode
+      });
+    }
+    if (onChange) {
+      const syntheticEvent = {
+        target: { value: iso },
+        currentTarget: { value: iso }
+      };
+      onChange(syntheticEvent);
+    }
+  };
+  const handleManualInput = (e) => {
+    const rawVal = e.target.value;
+    const masked = applyInputMask(rawVal, activeLang.code, mode);
+    setInputValue(masked);
+    if (onChange) {
+      onChange(e);
+    }
+    if (!masked.trim()) {
+      notifyChanges(null, false);
+      setInputError(false);
+      return;
+    }
+    const parsedDate = parseDateFromMask(masked, activeLang.code, mode);
+    if (parsedDate) {
+      setInputError(false);
+      notifyChanges(parsedDate, false);
+    } else {
+      const digits = masked.replace(/\D/g, "");
+      const expectedDigits = mode === "date" ? 8 : mode === "time" ? 4 : 12;
+      if (digits.length === expectedDigits) {
+        setInputError(true);
+      } else {
+        setInputError(false);
+      }
+      if (onDateChange) {
+        onDateChange({
+          date: null,
+          formatted: masked,
+          iso: "",
+          mode
+        });
+      }
+    }
+  };
+  const handleOpenPicker = (event) => {
+    if (isLocked) return;
+    setViewDate(selectedDate || /* @__PURE__ */ new Date());
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClosePicker = () => {
+    setAnchorEl(null);
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    notifyChanges(null, true);
+  };
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    if (!inputValue || copied) return;
+    let success = false;
+    if (navigator.clipboard && window.isSecureContext) {
+      try {
+        await navigator.clipboard.writeText(inputValue);
+        success = true;
+      } catch {
+      }
+    }
+    if (!success) {
+      try {
+        const textArea = document.createElement("textarea");
+        textArea.value = inputValue;
+        textArea.style.position = "fixed";
+        textArea.style.left = "-999999px";
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        success = document.execCommand("copy");
+        document.body.removeChild(textArea);
+      } catch (err) {
+        console.warn("Copy fallback error", err);
+      }
+    }
+    if (success) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  const monthNames = useMemo2(() => getMonthNames(activeLang.code), [activeLang.code]);
+  const dayShortNames = useMemo2(() => getDayOfWeekShortNames(activeLang.code), [activeLang.code]);
+  const calendarGrid = useMemo2(() => {
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const firstDayOfMonth = new Date(year, month, 1);
+    const lastDayOfMonth = new Date(year, month + 1, 0);
+    let startDayOfWeek = firstDayOfMonth.getDay();
+    if (localeConfig.weekStartsOn === 1) {
+      startDayOfWeek = (startDayOfWeek + 6) % 7;
+    }
+    const daysInMonth = lastDayOfMonth.getDate();
+    const grid = [];
+    for (let i = 0; i < startDayOfWeek; i++) {
+      grid.push(null);
+    }
+    for (let d = 1; d <= daysInMonth; d++) {
+      grid.push(new Date(year, month, d));
+    }
+    return grid;
+  }, [viewDate, localeConfig.weekStartsOn]);
+  const handleSelectDay = (day) => {
+    const base = selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date();
+    base.setFullYear(day.getFullYear(), day.getMonth(), day.getDate());
+    notifyChanges(base, true);
+    if (mode === "date") {
+      handleClosePicker();
+    }
+  };
+  const handleTimeChange = (hours, minutes) => {
+    const base = selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date();
+    base.setHours(hours);
+    base.setMinutes(minutes);
+    base.setSeconds(0);
+    notifyChanges(base, true);
+  };
+  const isToday = (d) => {
+    if (!d) return false;
+    const now = /* @__PURE__ */ new Date();
+    return d.getDate() === now.getDate() && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear();
+  };
+  const isSelected = (d) => {
+    if (!d || !selectedDate) return false;
+    return d.getDate() === selectedDate.getDate() && d.getMonth() === selectedDate.getMonth() && d.getFullYear() === selectedDate.getFullYear();
+  };
+  const getModeIcon = () => {
+    if (mode === "date") return /* @__PURE__ */ jsx9(CalendarIcon, { fontSize: "small", color: "action" });
+    if (mode === "time") return /* @__PURE__ */ jsx9(TimeIcon, { fontSize: "small", color: "action" });
+    return /* @__PURE__ */ jsx9(DateTimeIcon, { fontSize: "small", color: "action" });
+  };
+  return /* @__PURE__ */ jsxs6(Box6, { sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx9(
+      TextField4,
+      {
+        value: inputValue,
+        onChange: handleManualInput,
+        onFocus: (e) => {
+          setIsFocused(true);
+          if (props.onFocus) props.onFocus(e);
+        },
+        onBlur: (e) => {
+          setIsFocused(false);
+          if (selectedDate) {
+            setInputValue(formatDateByLocale(selectedDate, activeLang.code, mode));
+          }
+          if (props.onBlur) props.onBlur(e);
+        },
+        disabled,
+        placeholder: placeholderText,
+        label,
+        error: customError || inputError,
+        margin: "dense",
+        helperText: customHelperText || (inputError ? /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: "Invalid date or time format" }) : ""),
+        sx: {
+          "& .MuiInputLabel-asterisk": {
+            color: "red",
+            fontSize: "1.5rem"
+          },
+          "& .MuiInputBase-input": {
+            color: isReadOnly ? "text.disabled" : void 0,
+            fontWeight: 500,
+            letterSpacing: "0.02em"
+          }
+        },
+        ...props,
+        slotProps: {
+          ...slotProps,
+          input: {
+            ...slotProps?.input || {},
+            readOnly: isReadOnly,
+            /* END ADORNMENT: Action Icons (Clear, Animated Copy, Lock, Trigger) */
+            endAdornment: /* @__PURE__ */ jsxs6(InputAdornment6, { position: "end", sx: { gap: 0.5 }, children: [
+              inputValue && !isLocked && !hideClearButton && /* @__PURE__ */ jsx9(TranslatableTooltipComponent, { title: clearTooltip, children: /* @__PURE__ */ jsx9(
+                IconButton6,
+                {
+                  size: "small",
+                  onClick: handleClear,
+                  edge: "end",
+                  "aria-label": "clear date input",
+                  children: /* @__PURE__ */ jsx9(ClearIcon3, { fontSize: "small" })
+                }
+              ) }),
+              inputValue && !hideCopyButton && /* @__PURE__ */ jsx9(TranslatableTooltipComponent, { title: copied ? copiedTooltip : copyTooltip, children: /* @__PURE__ */ jsx9(
+                IconButton6,
+                {
+                  size: "small",
+                  onClick: handleCopy,
+                  edge: "end",
+                  "aria-label": "copy date value",
+                  color: copied ? "success" : "default",
+                  children: /* @__PURE__ */ jsxs6(
+                    Box6,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        position: "relative",
+                        width: 20,
+                        height: 20
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx9(
+                          ContentCopyIcon3,
+                          {
+                            fontSize: "small",
+                            sx: {
+                              position: "absolute",
+                              transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+                              opacity: copied ? 0 : 1,
+                              transform: copied ? "scale(0.5) rotate(-45deg)" : "scale(1) rotate(0deg)"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx9(
+                          CheckIcon3,
+                          {
+                            fontSize: "small",
+                            color: "success",
+                            sx: {
+                              position: "absolute",
+                              transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+                              opacity: copied ? 1 : 0,
+                              transform: copied ? "scale(1) rotate(0deg)" : "scale(0.5) rotate(45deg)"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ) }),
+              !isLocked && /* @__PURE__ */ jsx9(
+                IconButton6,
+                {
+                  size: "small",
+                  onClick: handleOpenPicker,
+                  edge: "end",
+                  color: Boolean(anchorEl) ? "primary" : "default",
+                  children: getModeIcon()
+                }
+              ),
+              isLocked && showLock && /* @__PURE__ */ jsx9(TranslatableTooltipComponent, { title: lockTooltip, children: /* @__PURE__ */ jsx9(
+                IconButton6,
+                {
+                  size: "small",
+                  disabled: true,
+                  edge: "end",
+                  "aria-label": "locked input",
+                  sx: {
+                    "&.Mui-disabled": {
+                      color: "text.secondary"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx9(LockIcon3, { fontSize: "small" })
+                }
+              ) }),
+              slotProps?.input?.endAdornment
+            ] })
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      Popover2,
+      {
+        open: Boolean(anchorEl),
+        anchorEl,
+        onClose: handleClosePicker,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        slotProps: {
+          paper: {
+            elevation: 6,
+            sx: {
+              p: 2,
+              width: 320,
+              //borderRadius: 3,
+              mt: 1,
+              border: "1px solid",
+              borderColor: "divider"
+            }
+          }
+        },
+        children: /* @__PURE__ */ jsxs6(Box6, { children: [
+          mode !== "time" && /* @__PURE__ */ jsxs6(Box6, { children: [
+            /* @__PURE__ */ jsxs6(Box6, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 1 }, children: [
+              /* @__PURE__ */ jsx9(
+                IconButton6,
+                {
+                  size: "small",
+                  onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)),
+                  children: /* @__PURE__ */ jsx9(ChevronLeftIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsxs6(Typography2, { variant: "body2", sx: { fontWeight: 700 }, children: [
+                monthNames[viewDate.getMonth()],
+                " ",
+                viewDate.getFullYear()
+              ] }),
+              /* @__PURE__ */ jsx9(
+                IconButton6,
+                {
+                  size: "small",
+                  onClick: () => setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)),
+                  children: /* @__PURE__ */ jsx9(ChevronRightIcon, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx9(Grid, { container: true, columns: 7, sx: { mb: 0.5, textAlign: "center" }, children: dayShortNames.map((dayName, idx) => /* @__PURE__ */ jsx9(Grid, { size: { xs: 1 }, children: /* @__PURE__ */ jsx9(
+              Typography2,
+              {
+                variant: "caption",
+                color: "secondary",
+                sx: { fontSize: "0.7rem", fontWeight: 700 },
+                children: dayName
+              }
+            ) }, idx)) }),
+            /* @__PURE__ */ jsx9(Grid, { container: true, columns: 7, spacing: 0.5, sx: { textAlign: "center", mb: 2 }, children: calendarGrid.map((day, idx) => /* @__PURE__ */ jsx9(Grid, { size: { xs: 1 }, children: day ? /* @__PURE__ */ jsx9(
+              Button2,
+              {
+                size: "small",
+                onClick: () => handleSelectDay(day),
+                sx: {
+                  minWidth: 0,
+                  width: "100%",
+                  height: 32,
+                  p: 0,
+                  borderRadius: "50%",
+                  fontSize: "0.8rem",
+                  fontWeight: isSelected(day) || isToday(day) ? 700 : 400,
+                  bgcolor: isSelected(day) ? "primary.main" : isToday(day) ? "action.hover" : "transparent",
+                  color: isSelected(day) ? "primary.contrastText" : isToday(day) ? "primary.main" : "text.primary",
+                  border: isToday(day) && !isSelected(day) ? "1px solid" : "none",
+                  borderColor: "primary.main",
+                  "&:hover": {
+                    bgcolor: isSelected(day) ? "primary.dark" : "action.selected"
+                  }
+                },
+                children: day.getDate()
+              }
+            ) : /* @__PURE__ */ jsx9(Box6, { sx: { height: 32 } }) }, idx)) })
+          ] }),
+          mode !== "date" && /* @__PURE__ */ jsxs6(Box6, { sx: { pt: mode === "datetime" ? 1.5 : 0, borderTop: mode === "datetime" ? "1px solid" : "none", borderColor: "divider" }, children: [
+            /* @__PURE__ */ jsxs6(Typography2, { variant: "caption", color: "secondary", sx: { fontWeight: 700, display: "block", mb: 1 }, children: [
+              /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: `Time Selection (${localeConfig.timeFormat === "12" ? "12-hour AM/PM" : "24-hour format"})` }),
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxs6(Box6, { sx: { display: "flex", alignItems: "center", justifyContent: "center", gap: 1, my: 1 }, children: [
+              /* @__PURE__ */ jsx9(
+                Select2,
+                {
+                  size: "small",
+                  value: (selectedDate || /* @__PURE__ */ new Date()).getHours(),
+                  onChange: (e) => handleTimeChange(Number(e.target.value), (selectedDate || /* @__PURE__ */ new Date()).getMinutes()),
+                  sx: { minWidth: 70 },
+                  children: Array.from({ length: 24 }, (_, i) => {
+                    let labelStr = i.toString().padStart(2, "0");
+                    if (localeConfig.timeFormat === "12") {
+                      const period = i >= 12 ? "PM" : "AM";
+                      const h12 = i % 12 || 12;
+                      labelStr = `${h12} ${period}`;
+                    }
+                    return /* @__PURE__ */ jsx9(MenuItem2, { value: i, children: labelStr }, i);
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx9(Typography2, { variant: "h6", sx: { fontWeight: 700 }, children: ":" }),
+              /* @__PURE__ */ jsx9(
+                Select2,
+                {
+                  size: "small",
+                  value: Math.floor((selectedDate || /* @__PURE__ */ new Date()).getMinutes() / 5) * 5,
+                  onChange: (e) => handleTimeChange((selectedDate || /* @__PURE__ */ new Date()).getHours(), Number(e.target.value)),
+                  sx: { minWidth: 70 },
+                  children: Array.from({ length: 12 }, (_, i) => i * 5).map((m) => /* @__PURE__ */ jsx9(MenuItem2, { value: m, children: m.toString().padStart(2, "0") }, m))
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx9(Divider, { sx: { my: 1.5 } }),
+          /* @__PURE__ */ jsxs6(Box6, { sx: { display: "flex", flexWrap: "wrap", gap: 1, justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx9(
+              Button2,
+              {
+                size: "small",
+                variant: "outlined",
+                startIcon: /* @__PURE__ */ jsx9(TodayIcon, { fontSize: "inherit" }),
+                onClick: () => {
+                  const now = /* @__PURE__ */ new Date();
+                  notifyChanges(now, true);
+                  if (mode === "date") handleClosePicker();
+                },
+                sx: { fontSize: "0.72rem", py: 0.3 },
+                children: /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Now" })
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              Button2,
+              {
+                size: "small",
+                variant: "contained",
+                onClick: handleClosePicker,
+                sx: { fontSize: "0.72rem", py: 0.3 },
+                children: /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Done" })
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+
 // src/UI/components/buttons/ButtonComponent.tsx
 import { forwardRef } from "react";
-import { Button as Button2 } from "@mui/material";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { Button as Button3 } from "@mui/material";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var ButtonComponent = forwardRef(
   ({ label, children, overrideNamespace, ...props }, ref) => {
     const renderContent = (content) => {
       if (typeof content === "string") {
-        return /* @__PURE__ */ jsx9(TranslateText, { overrideNamespace, children: content });
+        return /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace, children: content });
       }
       return content;
     };
     const contentToRender = label !== void 0 ? label : children;
-    return /* @__PURE__ */ jsx9(Button2, { ref, ...props, children: renderContent(contentToRender) });
+    return /* @__PURE__ */ jsx10(Button3, { ref, ...props, children: renderContent(contentToRender) });
   }
 );
 ButtonComponent.displayName = "ButtonComponent";
 
 // src/UI/components/buttons/RefreshButtonComponent.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import {
-  Button as Button3,
+  Button as Button4,
   Fab,
   styled
 } from "@mui/material";
 import RefreshIconMui from "@mui/icons-material/Refresh";
-import { Fragment as Fragment5, jsx as jsx10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx11 } from "react/jsx-runtime";
 var AnimatedRefreshIcon = styled(RefreshIconMui, {
   shouldForwardProp: (prop) => prop !== "isSpinning"
 })(({ isSpinning }) => ({
@@ -1211,7 +1941,7 @@ var RefreshButtonComponent = ({
   hideTooltipOnDesktop
 }) => {
   const { displayState } = useAppTheme();
-  const [internalLoading, setInternalLoading] = useState7(false);
+  const [internalLoading, setInternalLoading] = useState8(false);
   const isLoading = externalLoading !== void 0 ? externalLoading : internalLoading;
   const handleClick = async (event) => {
     if (!onClick || isLoading || disabled) return;
@@ -1222,9 +1952,9 @@ var RefreshButtonComponent = ({
       setInternalLoading(false);
     }
   };
-  const renderIcon = () => /* @__PURE__ */ jsx10(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
+  const renderIcon = () => /* @__PURE__ */ jsx11(AnimatedRefreshIcon, { fontSize: size, isSpinning: isLoading });
   if (displayState.isMobile && !disableMobileView || mobileViewOnly) {
-    return /* @__PURE__ */ jsx10(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ jsx10(Fragment5, {}) : tooltip || /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(TranslatableTooltipComponent, { title: hideTooltipOnMobile ? /* @__PURE__ */ jsx11(Fragment5, {}) : tooltip || /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx11("span", { children: /* @__PURE__ */ jsx11(
       Fab,
       {
         size,
@@ -1236,8 +1966,8 @@ var RefreshButtonComponent = ({
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx10(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ jsx10(Fragment5, {}) : tooltip || /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx10(
-    Button3,
+  return /* @__PURE__ */ jsx11(TranslatableTooltipComponent, { title: hideTooltipOnDesktop ? /* @__PURE__ */ jsx11(Fragment5, {}) : tooltip || /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx11(
+    Button4,
     {
       variant: "contained",
       color: "inherit",
@@ -1246,15 +1976,15 @@ var RefreshButtonComponent = ({
       disabled: disabled || isLoading,
       fullWidth,
       startIcon: renderIcon(),
-      children: /* @__PURE__ */ jsx10(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
+      children: /* @__PURE__ */ jsx11(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" })
     }
   ) });
 };
 
 // src/UI/components/data.display/UserAvatarComponent.tsx
-import { useState as useState8, useEffect as useEffect4, lazy, Suspense } from "react";
-import { Avatar, Tooltip as Tooltip5, Typography as Typography2 } from "@mui/material";
-import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState9, useEffect as useEffect5, lazy, Suspense } from "react";
+import { Avatar, Tooltip as Tooltip5, Typography as Typography3 } from "@mui/material";
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var LazyUserPopover = lazy(() => import("./UserPopoverComponent-VFSZ5ZO2.mjs"));
 var getInitials = (name) => {
   if (!name) return "?";
@@ -1277,11 +2007,11 @@ var UserAvatarComponent = ({
   sx = {}
 }) => {
   const supabase = useSupabase();
-  const [anchorEl, setAnchorEl] = useState8(null);
-  const [hasInteracted, setHasInteracted] = useState8(false);
-  const [resolvedAvatarUrl, setResolvedAvatarUrl] = useState8(null);
+  const [anchorEl, setAnchorEl] = useState9(null);
+  const [hasInteracted, setHasInteracted] = useState9(false);
+  const [resolvedAvatarUrl, setResolvedAvatarUrl] = useState9(null);
   const canShowPopover = !disablePopover && Boolean(userId);
-  useEffect4(() => {
+  useEffect5(() => {
     let isMounted = true;
     const resolveAvatar = async () => {
       if (!avatarUrl) {
@@ -1326,12 +2056,12 @@ var UserAvatarComponent = ({
   };
   const isPopoverOpen = Boolean(anchorEl);
   const initials = getInitials(displayName || "");
-  const getTooltip = /* @__PURE__ */ jsxs6(Fragment6, { children: [
-    /* @__PURE__ */ jsx11(Typography2, { component: "div", variant: "caption", children: displayName }),
-    displayName && employeePost && /* @__PURE__ */ jsx11(Typography2, { component: "div", variant: "caption", children: employeePost })
+  const getTooltip = /* @__PURE__ */ jsxs7(Fragment6, { children: [
+    /* @__PURE__ */ jsx12(Typography3, { component: "div", variant: "caption", children: displayName }),
+    displayName && employeePost && /* @__PURE__ */ jsx12(Typography3, { component: "div", variant: "caption", children: employeePost })
   ] });
-  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
-    /* @__PURE__ */ jsx11(Tooltip5, { title: disableTooltip || isPopoverOpen ? "" : getTooltip, children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs7(Fragment6, { children: [
+    /* @__PURE__ */ jsx12(Tooltip5, { title: disableTooltip || isPopoverOpen ? "" : getTooltip, children: /* @__PURE__ */ jsx12(
       Avatar,
       {
         src: resolvedAvatarUrl || void 0,
@@ -1357,7 +2087,7 @@ var UserAvatarComponent = ({
         children: !resolvedAvatarUrl && initials
       }
     ) }),
-    canShowPopover && hasInteracted && /* @__PURE__ */ jsx11(Suspense, { fallback: null, children: /* @__PURE__ */ jsx11(
+    canShowPopover && hasInteracted && /* @__PURE__ */ jsx12(Suspense, { fallback: null, children: /* @__PURE__ */ jsx12(
       LazyUserPopover,
       {
         userId,
@@ -1370,9 +2100,9 @@ var UserAvatarComponent = ({
 };
 
 // src/UI/components/data.display/MyAvatarComponent.tsx
-import { useState as useState9 } from "react";
-import { Avatar as Avatar2, Box as Box6, Popover as Popover2, Typography as Typography3, Skeleton } from "@mui/material";
-import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { Avatar as Avatar2, Box as Box7, Popover as Popover3, Typography as Typography4, Skeleton } from "@mui/material";
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var getInitials2 = (name) => {
   if (!name) return "?";
   const parts = name.trim().split(" ");
@@ -1389,7 +2119,7 @@ var MyAvatarComponent = ({
   sx = {}
 }) => {
   const { profile: userProfile, loading: isLoading } = useAuth();
-  const [anchorEl, setAnchorEl] = useState9(null);
+  const [anchorEl, setAnchorEl] = useState10(null);
   const handlePopoverOpen = (event) => {
     if (!disablePopover) {
       setAnchorEl(event.currentTarget);
@@ -1400,7 +2130,7 @@ var MyAvatarComponent = ({
   };
   const isPopoverOpen = Boolean(anchorEl);
   if (isLoading) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       Skeleton,
       {
         variant: "circular",
@@ -1411,8 +2141,8 @@ var MyAvatarComponent = ({
     );
   }
   const initials = getInitials2(userProfile?.display_name || "");
-  return /* @__PURE__ */ jsxs7(Fragment7, { children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs8(Fragment7, { children: [
+    /* @__PURE__ */ jsx13(
       Avatar2,
       {
         src: userProfile?.avatar_url || void 0,
@@ -1439,8 +2169,8 @@ var MyAvatarComponent = ({
         children: !userProfile?.avatar_url && initials
       }
     ),
-    !disablePopover && /* @__PURE__ */ jsx12(
-      Popover2,
+    !disablePopover && /* @__PURE__ */ jsx13(
+      Popover3,
       {
         id: `avatar-popover-${userProfile?.id}`,
         open: isPopoverOpen,
@@ -1470,9 +2200,9 @@ var MyAvatarComponent = ({
             }
           }
         },
-        children: /* @__PURE__ */ jsxs7(Box6, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsx12(Typography3, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
-          userProfile?.email && /* @__PURE__ */ jsx12(Typography3, { variant: "caption", color: "text.secondary", children: userProfile.email })
+        children: /* @__PURE__ */ jsxs8(Box7, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx13(Typography4, { variant: "subtitle2", sx: { fontWeight: 600 }, children: userProfile?.display_name }),
+          userProfile?.email && /* @__PURE__ */ jsx13(Typography4, { variant: "caption", color: "text.secondary", children: userProfile.email })
         ] })
       }
     )
@@ -1480,9 +2210,9 @@ var MyAvatarComponent = ({
 };
 
 // src/UI/components/data.display/ExpandableNoteComponent.tsx
-import { useState as useState10 } from "react";
-import { Typography as Typography4, Link } from "@mui/material";
-import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { Typography as Typography5, Link } from "@mui/material";
+import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var ExpandableNoteComponent = ({
   overrideNamespace,
   text,
@@ -1491,7 +2221,7 @@ var ExpandableNoteComponent = ({
   sx,
   ...restProps
 }) => {
-  const [isExpanded, setIsExpanded] = useState10(false);
+  const [isExpanded, setIsExpanded] = useState11(false);
   if (!text) return null;
   const isLong = text.length > maxLength;
   const displayedText = isExpanded || !isLong ? text : `${text.slice(0, maxLength).trim()}...`;
@@ -1499,8 +2229,8 @@ var ExpandableNoteComponent = ({
     e.stopPropagation();
     setIsExpanded((prev) => !prev);
   };
-  return /* @__PURE__ */ jsxs8(
-    Typography4,
+  return /* @__PURE__ */ jsxs9(
+    Typography5,
     {
       variant: "caption",
       sx: {
@@ -1511,14 +2241,14 @@ var ExpandableNoteComponent = ({
       },
       ...restProps,
       children: [
-        label !== void 0 ? label : /* @__PURE__ */ jsxs8(Fragment8, { children: [
-          /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Note" }),
+        label !== void 0 ? label : /* @__PURE__ */ jsxs9(Fragment8, { children: [
+          /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Note" }),
           ": "
         ] }),
         " ",
         displayedText,
         " ",
-        isLong && /* @__PURE__ */ jsx13(
+        isLong && /* @__PURE__ */ jsx14(
           Link,
           {
             component: "button",
@@ -1533,8 +2263,8 @@ var ExpandableNoteComponent = ({
               cursor: "pointer",
               verticalAlign: "baseline"
             },
-            children: isExpanded ? /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "less" }) : /* @__PURE__ */ jsxs8(Fragment8, { children: [
-              /* @__PURE__ */ jsx13(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "more" }),
+            children: isExpanded ? /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "less" }) : /* @__PURE__ */ jsxs9(Fragment8, { children: [
+              /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "more" }),
               "..."
             ] })
           }
@@ -1545,15 +2275,15 @@ var ExpandableNoteComponent = ({
 };
 
 // src/UI/components/data.display/ErrorAlertComponent.tsx
-import { Alert, Box as Box7, Button as Button4, Typography as Typography5, useTheme } from "@mui/material";
+import { Alert, Box as Box8, Button as Button5, Typography as Typography6, useTheme } from "@mui/material";
 import ReplayIcon from "@mui/icons-material/Replay";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var ErrorIllustration = ({ size = 64 }) => {
   const theme = useTheme();
   const mainColor = theme.palette.error.main;
   const lightColor = theme.palette.error.light;
-  return /* @__PURE__ */ jsx14(
-    Box7,
+  return /* @__PURE__ */ jsx15(
+    Box8,
     {
       sx: {
         display: "flex",
@@ -1561,7 +2291,7 @@ var ErrorIllustration = ({ size = 64 }) => {
         justifyContent: "center",
         flexShrink: 0
       },
-      children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs10(
         "svg",
         {
           width: size,
@@ -1570,7 +2300,7 @@ var ErrorIllustration = ({ size = 64 }) => {
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ jsxs9(
+            /* @__PURE__ */ jsxs10(
               "circle",
               {
                 cx: "50",
@@ -1579,7 +2309,7 @@ var ErrorIllustration = ({ size = 64 }) => {
                 fill: lightColor,
                 fillOpacity: "0.25",
                 children: [
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "animate",
                     {
                       attributeName: "r",
@@ -1588,7 +2318,7 @@ var ErrorIllustration = ({ size = 64 }) => {
                       repeatCount: "indefinite"
                     }
                   ),
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "animate",
                     {
                       attributeName: "fill-opacity",
@@ -1600,8 +2330,8 @@ var ErrorIllustration = ({ size = 64 }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx14("circle", { cx: "50", cy: "50", r: "34", fill: lightColor, fillOpacity: "0.35" }),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15("circle", { cx: "50", cy: "50", r: "34", fill: lightColor, fillOpacity: "0.35" }),
+            /* @__PURE__ */ jsx15(
               "path",
               {
                 d: "M50 20L80 72H20L50 20Z",
@@ -1611,7 +2341,7 @@ var ErrorIllustration = ({ size = 64 }) => {
                 strokeLinejoin: "round"
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(
               "path",
               {
                 d: "M50 36V54",
@@ -1620,10 +2350,10 @@ var ErrorIllustration = ({ size = 64 }) => {
                 strokeLinecap: "round"
               }
             ),
-            /* @__PURE__ */ jsx14("circle", { cx: "50", cy: "62", r: "2.5", fill: "#FFFFFF" }),
-            /* @__PURE__ */ jsx14("circle", { cx: "16", cy: "30", r: "3", fill: mainColor, opacity: "0.4" }),
-            /* @__PURE__ */ jsx14("circle", { cx: "84", cy: "30", r: "2", fill: mainColor, opacity: "0.6" }),
-            /* @__PURE__ */ jsx14("circle", { cx: "88", cy: "68", r: "3", fill: mainColor, opacity: "0.3" })
+            /* @__PURE__ */ jsx15("circle", { cx: "50", cy: "62", r: "2.5", fill: "#FFFFFF" }),
+            /* @__PURE__ */ jsx15("circle", { cx: "16", cy: "30", r: "3", fill: mainColor, opacity: "0.4" }),
+            /* @__PURE__ */ jsx15("circle", { cx: "84", cy: "30", r: "2", fill: mainColor, opacity: "0.6" }),
+            /* @__PURE__ */ jsx15("circle", { cx: "88", cy: "68", r: "3", fill: mainColor, opacity: "0.3" })
           ]
         }
       )
@@ -1638,7 +2368,7 @@ var ErrorAlertComponent = ({
   retryText = "Retry",
   isRetrying = false
 }) => {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     Alert,
     {
       severity: "error",
@@ -1656,8 +2386,8 @@ var ErrorAlertComponent = ({
           p: 0
         }
       },
-      children: /* @__PURE__ */ jsxs9(
-        Box7,
+      children: /* @__PURE__ */ jsxs10(
+        Box8,
         {
           sx: {
             display: "flex",
@@ -1666,34 +2396,34 @@ var ErrorAlertComponent = ({
             gap: 2
           },
           children: [
-            /* @__PURE__ */ jsx14(ErrorIllustration, { size: 68 }),
-            /* @__PURE__ */ jsxs9(Box7, { sx: { flexGrow: 1 }, children: [
-              typeof title === "string" ? /* @__PURE__ */ jsx14(
-                Typography5,
+            /* @__PURE__ */ jsx15(ErrorIllustration, { size: 68 }),
+            /* @__PURE__ */ jsxs10(Box8, { sx: { flexGrow: 1 }, children: [
+              typeof title === "string" ? /* @__PURE__ */ jsx15(
+                Typography6,
                 {
                   variant: "subtitle1",
                   sx: { fontWeight: 600, color: "error.main", mb: 0.5 },
-                  children: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace, children: title })
+                  children: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace, children: title })
                 }
               ) : title,
-              typeof message === "string" ? /* @__PURE__ */ jsx14(Typography5, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ jsx14(TranslateText, { overrideNamespace, children: message }) }) : message
+              typeof message === "string" ? /* @__PURE__ */ jsx15(Typography6, { variant: "body2", color: "text.secondary", children: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace, children: message }) }) : message
             ] }),
-            onRetry && /* @__PURE__ */ jsx14(
-              Box7,
+            onRetry && /* @__PURE__ */ jsx15(
+              Box8,
               {
                 sx: {
                   alignSelf: { xs: "flex-end", sm: "center" },
                   mt: { xs: 1, sm: 0 }
                 },
-                children: /* @__PURE__ */ jsx14(
-                  Button4,
+                children: /* @__PURE__ */ jsx15(
+                  Button5,
                   {
                     variant: "outlined",
                     color: "error",
                     size: "small",
                     disabled: isRetrying,
                     onClick: onRetry,
-                    startIcon: /* @__PURE__ */ jsx14(
+                    startIcon: /* @__PURE__ */ jsx15(
                       ReplayIcon,
                       {
                         sx: {
@@ -1725,11 +2455,11 @@ var ErrorAlertComponent = ({
   );
 };
 
-// src/UI/components/data.display/TruncatedTypography.tsx
-import { useRef, useState as useState11, useEffect as useEffect5 } from "react";
-import { Typography as Typography6 } from "@mui/material";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var TruncatedTypography = ({
+// src/UI/components/data.display/TruncatedTypographyComponent.tsx
+import { useRef, useState as useState12, useEffect as useEffect6 } from "react";
+import { Typography as Typography7 } from "@mui/material";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var TruncatedTypographyComponent = ({
   children,
   lines = 1,
   tooltipProps,
@@ -1738,7 +2468,7 @@ var TruncatedTypography = ({
   ...typographyProps
 }) => {
   const textRef = useRef(null);
-  const [isTruncated, setIsTruncated] = useState11(false);
+  const [isTruncated, setIsTruncated] = useState12(false);
   const checkOverflow = () => {
     const element = textRef.current;
     if (!element) return;
@@ -1748,7 +2478,7 @@ var TruncatedTypography = ({
       setIsTruncated(element.scrollHeight > element.clientHeight);
     }
   };
-  useEffect5(() => {
+  useEffect6(() => {
     checkOverflow();
     window.addEventListener("resize", checkOverflow);
     return () => window.removeEventListener("resize", checkOverflow);
@@ -1766,14 +2496,14 @@ var TruncatedTypography = ({
     whiteSpace: "nowrap"
   };
   const textContent = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     TranslatableTooltipComponent,
     {
       title: alwaysShowTooltip || isTruncated ? textContent || children : "",
       disableHoverListener: !alwaysShowTooltip && !isTruncated,
       ...tooltipProps,
-      children: /* @__PURE__ */ jsx15(
-        Typography6,
+      children: /* @__PURE__ */ jsx16(
+        Typography7,
         {
           ref: textRef,
           sx: {
@@ -1789,17 +2519,17 @@ var TruncatedTypography = ({
 };
 
 // src/UI/components/layout/PageComponent.tsx
-import React11, { useState as useState12 } from "react";
+import React12, { useState as useState13 } from "react";
 import {
-  Box as Box8,
-  Typography as Typography7,
-  Button as Button5,
-  IconButton as IconButton6,
+  Box as Box9,
+  Typography as Typography8,
+  Button as Button6,
+  IconButton as IconButton7,
   Menu,
-  MenuItem as MenuItem2,
+  MenuItem as MenuItem3,
   ListItemIcon,
   ListItemText as ListItemText2,
-  Divider,
+  Divider as Divider2,
   Tooltip as Tooltip6,
   useTheme as useTheme2,
   useMediaQuery,
@@ -1809,7 +2539,7 @@ import {
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { Refresh as RefreshIcon } from "@mui/icons-material";
-import { Fragment as Fragment9, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var getTruncateStyles = (mode = "truncate") => {
   switch (mode) {
     case "truncate":
@@ -1840,7 +2570,7 @@ var PageHeader = ({
   const theme = useTheme2();
   const mediaIsMobile = useMediaQuery(theme.breakpoints.down(mobileBreakpoint));
   const isMobile = forceMobileView ?? mediaIsMobile;
-  const [anchorEl, setAnchorEl] = useState12(null);
+  const [anchorEl, setAnchorEl] = useState13(null);
   const isMenuOpen = Boolean(anchorEl);
   const handleOpenMenu = (e) => setAnchorEl(e.currentTarget);
   const handleCloseMenu = () => setAnchorEl(null);
@@ -1850,8 +2580,8 @@ var PageHeader = ({
   };
   const hasSecondaryActions = secondaryActions.length > 0;
   const hasActions = Boolean(primaryAction || hasSecondaryActions || refreshAction);
-  return /* @__PURE__ */ jsxs10(
-    Box8,
+  return /* @__PURE__ */ jsxs11(
+    Box9,
     {
       sx: [
         {
@@ -1869,9 +2599,9 @@ var PageHeader = ({
         ...Array.isArray(sx) ? sx : [sx]
       ],
       children: [
-        /* @__PURE__ */ jsxs10(Box8, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
-          icon && /* @__PURE__ */ jsx16(
-            Box8,
+        /* @__PURE__ */ jsxs11(Box9, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
+          icon && /* @__PURE__ */ jsx17(
+            Box9,
             {
               sx: {
                 display: "flex",
@@ -1890,10 +2620,10 @@ var PageHeader = ({
               children: icon
             }
           ),
-          /* @__PURE__ */ jsxs10(Box8, { sx: { minWidth: 0, flex: 1 }, children: [
-            tag && /* @__PURE__ */ jsx16(Box8, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
-            /* @__PURE__ */ jsx16(Tooltip6, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ jsx16(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx16(
-              Typography7,
+          /* @__PURE__ */ jsxs11(Box9, { sx: { minWidth: 0, flex: 1 }, children: [
+            tag && /* @__PURE__ */ jsx17(Box9, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
+            /* @__PURE__ */ jsx17(Tooltip6, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ jsx17(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx17(
+              Typography8,
               {
                 variant: "h5",
                 component: "h1",
@@ -1904,11 +2634,11 @@ var PageHeader = ({
                   lineHeight: 1.3,
                   ...getTruncateStyles(titleTruncateMode)
                 },
-                children: /* @__PURE__ */ jsx16(TranslateText, { children: title })
+                children: /* @__PURE__ */ jsx17(TranslateText, { children: title })
               }
             ) }),
-            subtitle && /* @__PURE__ */ jsx16(Tooltip6, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ jsx16(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx16(
-              Typography7,
+            subtitle && /* @__PURE__ */ jsx17(Tooltip6, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ jsx17(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx17(
+              Typography8,
               {
                 variant: "body2",
                 sx: {
@@ -1918,23 +2648,23 @@ var PageHeader = ({
                   lineHeight: 1.4,
                   ...getTruncateStyles(subtitleTruncateMode)
                 },
-                children: /* @__PURE__ */ jsx16(TranslateText, { children: subtitle })
+                children: /* @__PURE__ */ jsx17(TranslateText, { children: subtitle })
               }
             ) })
           ] })
         ] }),
-        hasActions && /* @__PURE__ */ jsx16(Box8, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
+        hasActions && /* @__PURE__ */ jsx17(Box9, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
           /* MOBILE: IconButton with MoreVertIcon showing ALL actions inside Menu */
-          /* @__PURE__ */ jsxs10(Fragment9, { children: [
-            /* @__PURE__ */ jsx16(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx16(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ jsx16(
-              IconButton6,
+          /* @__PURE__ */ jsxs11(Fragment9, { children: [
+            /* @__PURE__ */ jsx17(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ jsx17(
+              IconButton7,
               {
                 onClick: handleOpenMenu,
                 sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                children: /* @__PURE__ */ jsx16(MoreVertIcon, {})
+                children: /* @__PURE__ */ jsx17(MoreVertIcon, {})
               }
             ) }),
-            /* @__PURE__ */ jsxs10(
+            /* @__PURE__ */ jsxs11(
               Menu,
               {
                 anchorEl,
@@ -1944,9 +2674,9 @@ var PageHeader = ({
                 anchorOrigin: { horizontal: "right", vertical: "bottom" },
                 slotProps: { paper: { elevation: 4, sx: { minWidth: 200, borderRadius: 2, mt: 1, p: 0.5 } } },
                 children: [
-                  primaryAction && /* @__PURE__ */ jsxs10(Fragment9, { children: [
-                    /* @__PURE__ */ jsxs10(
-                      MenuItem2,
+                  primaryAction && /* @__PURE__ */ jsxs11(Fragment9, { children: [
+                    /* @__PURE__ */ jsxs11(
+                      MenuItem3,
                       {
                         onClick: () => handleMenuAction(primaryAction.onClick),
                         disabled: primaryAction.disabled,
@@ -1959,32 +2689,32 @@ var PageHeader = ({
                           px: 1.5
                         },
                         children: [
-                          primaryAction.icon && /* @__PURE__ */ jsx16(ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
-                          /* @__PURE__ */ jsx16(ListItemText2, { primary: /* @__PURE__ */ jsx16(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                          primaryAction.icon && /* @__PURE__ */ jsx17(ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
+                          /* @__PURE__ */ jsx17(ListItemText2, { primary: /* @__PURE__ */ jsx17(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
                         ]
                       }
                     ),
-                    hasSecondaryActions && /* @__PURE__ */ jsx16(Divider, { sx: { my: 0.75 } })
+                    hasSecondaryActions && /* @__PURE__ */ jsx17(Divider2, { sx: { my: 0.75 } })
                   ] }),
-                  secondaryActions.map((action) => /* @__PURE__ */ jsxs10(React11.Fragment, { children: [
-                    action.divider && /* @__PURE__ */ jsx16(Divider, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ jsxs10(
-                      MenuItem2,
+                  secondaryActions.map((action) => /* @__PURE__ */ jsxs11(React12.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ jsx17(Divider2, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsxs11(
+                      MenuItem3,
                       {
                         onClick: () => handleMenuAction(action.onClick),
                         disabled: action.disabled,
                         sx: { borderRadius: 1, py: 1, px: 1.5, color: action.color ? `${action.color}.main` : "text.primary" },
                         children: [
-                          action.icon && /* @__PURE__ */ jsx16(ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
-                          /* @__PURE__ */ jsx16(ListItemText2, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                          action.icon && /* @__PURE__ */ jsx17(ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ jsx17(ListItemText2, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
                         ]
                       }
                     )
                   ] }, action.id)),
-                  refreshAction && /* @__PURE__ */ jsxs10(Fragment9, { children: [
-                    /* @__PURE__ */ jsx16(Divider, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ jsxs10(
-                      MenuItem2,
+                  refreshAction && /* @__PURE__ */ jsxs11(Fragment9, { children: [
+                    /* @__PURE__ */ jsx17(Divider2, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsxs11(
+                      MenuItem3,
                       {
                         onClick: () => handleMenuAction(refreshAction.onClick),
                         disabled: refreshAction.disabled,
@@ -1996,8 +2726,8 @@ var PageHeader = ({
                           px: 1.5
                         },
                         children: [
-                          /* @__PURE__ */ jsx16(ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ jsx16(RefreshIcon, {}) }),
-                          /* @__PURE__ */ jsx16(ListItemText2, { primary: /* @__PURE__ */ jsx16(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                          /* @__PURE__ */ jsx17(ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ jsx17(RefreshIcon, {}) }),
+                          /* @__PURE__ */ jsx17(ListItemText2, { primary: /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
                         ]
                       }
                     )
@@ -2008,10 +2738,10 @@ var PageHeader = ({
           ] })
         ) : (
           /* DESKTOP: Primary Action Button + Secondary Actions Dropdown Button */
-          /* @__PURE__ */ jsxs10(Box8, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            (primaryAction || refreshAction) && /* @__PURE__ */ jsxs10(Stack, { direction: "row", spacing: 2, children: [
-              primaryAction && /* @__PURE__ */ jsx16(
-                Button5,
+          /* @__PURE__ */ jsxs11(Box9, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            (primaryAction || refreshAction) && /* @__PURE__ */ jsxs11(Stack, { direction: "row", spacing: 2, children: [
+              primaryAction && /* @__PURE__ */ jsx17(
+                Button6,
                 {
                   variant: primaryAction.variant || "contained",
                   color: primaryAction.color || "primary",
@@ -2019,10 +2749,10 @@ var PageHeader = ({
                   disabled: primaryAction.disabled,
                   startIcon: primaryAction.icon,
                   sx: { borderRadius: 2, textTransform: "none", fontWeight: 600, px: 2, py: 0.85 },
-                  children: /* @__PURE__ */ jsx16(TranslateText, { children: primaryAction.label })
+                  children: /* @__PURE__ */ jsx17(TranslateText, { children: primaryAction.label })
                 }
               ),
-              refreshAction && /* @__PURE__ */ jsx16(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx16(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx16(
+              refreshAction && /* @__PURE__ */ jsx17(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx17(
                 Fab2,
                 {
                   color: "default",
@@ -2030,20 +2760,20 @@ var PageHeader = ({
                   disabled: refreshAction.disabled,
                   "aria-label": "refresh",
                   size: "small",
-                  children: /* @__PURE__ */ jsx16(RefreshIcon, {})
+                  children: /* @__PURE__ */ jsx17(RefreshIcon, {})
                 }
               ) })
             ] }),
-            hasSecondaryActions && /* @__PURE__ */ jsxs10(Fragment9, { children: [
-              /* @__PURE__ */ jsx16(
-                IconButton6,
+            hasSecondaryActions && /* @__PURE__ */ jsxs11(Fragment9, { children: [
+              /* @__PURE__ */ jsx17(
+                IconButton7,
                 {
                   onClick: handleOpenMenu,
                   sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                  children: /* @__PURE__ */ jsx16(KeyboardArrowDownIcon, {})
+                  children: /* @__PURE__ */ jsx17(KeyboardArrowDownIcon, {})
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx17(
                 Menu,
                 {
                   anchorEl,
@@ -2052,17 +2782,17 @@ var PageHeader = ({
                   transformOrigin: { horizontal: "right", vertical: "top" },
                   anchorOrigin: { horizontal: "right", vertical: "bottom" },
                   slotProps: { paper: { elevation: 4, sx: { minWidth: 180, borderRadius: 2, mt: 1, p: 0.5 } } },
-                  children: secondaryActions.map((action) => /* @__PURE__ */ jsxs10(React11.Fragment, { children: [
-                    action.divider && /* @__PURE__ */ jsx16(Divider, { sx: { my: 0.5 } }),
-                    /* @__PURE__ */ jsxs10(
-                      MenuItem2,
+                  children: secondaryActions.map((action) => /* @__PURE__ */ jsxs11(React12.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ jsx17(Divider2, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsxs11(
+                      MenuItem3,
                       {
                         onClick: () => handleMenuAction(action.onClick),
                         disabled: action.disabled,
                         sx: { borderRadius: 1, py: 0.85, color: action.color ? `${action.color}.main` : "text.primary" },
                         children: [
-                          action.icon && /* @__PURE__ */ jsx16(ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
-                          /* @__PURE__ */ jsx16(ListItemText2, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                          action.icon && /* @__PURE__ */ jsx17(ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ jsx17(ListItemText2, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
                         ]
                       }
                     )
@@ -2072,14 +2802,14 @@ var PageHeader = ({
             ] })
           ] })
         ) }),
-        customFragment && /* @__PURE__ */ jsx16(Fragment9, { children: customFragment })
+        customFragment && /* @__PURE__ */ jsx17(Fragment9, { children: customFragment })
       ]
     }
   );
 };
 var PageContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx16(
-    Box8,
+  return /* @__PURE__ */ jsx17(
+    Box9,
     {
       sx: {
         width: "100%",
@@ -2095,8 +2825,8 @@ var PageComponent = ({
   header,
   children
 }) => {
-  return /* @__PURE__ */ jsx16(
-    Box8,
+  return /* @__PURE__ */ jsx17(
+    Box9,
     {
       sx: {
         //pt: 2,
@@ -2105,8 +2835,8 @@ var PageComponent = ({
         overflowY: "auto",
         boxSizing: "border-box"
       },
-      children: /* @__PURE__ */ jsxs10(PageContainer, { children: [
-        header && /* @__PURE__ */ jsx16(PageHeader, { ...header }),
+      children: /* @__PURE__ */ jsxs11(PageContainer, { children: [
+        header && /* @__PURE__ */ jsx17(PageHeader, { ...header }),
         children
       ] })
     }
@@ -2114,15 +2844,15 @@ var PageComponent = ({
 };
 
 // src/UI/components/layout/FilterContainerComponent.tsx
-import React12 from "react";
-import { Grid, Paper } from "@mui/material";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import React13 from "react";
+import { Grid as Grid2, Paper } from "@mui/material";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var FilterContainerComponent = ({
   sections,
   children,
   sx
 }) => {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Paper,
     {
       variant: "outlined",
@@ -2130,7 +2860,7 @@ var FilterContainerComponent = ({
         { p: 2, mb: 3 },
         ...Array.isArray(sx) ? sx : [sx]
       ],
-      children: /* @__PURE__ */ jsx17(Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ jsx17(React12.Fragment, { children: sec }, idx)) : children })
+      children: /* @__PURE__ */ jsx18(Grid2, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ jsx18(React13.Fragment, { children: sec }, idx)) : children })
     }
   );
 };
@@ -2138,22 +2868,22 @@ var FilterContainerComponent = ({
 // src/UI/components/layout/PageLinkComponent.tsx
 import { ArrowRight, Settings } from "@mui/icons-material";
 import {
-  Button as Button6,
+  Button as Button7,
   Card,
   CardActions,
   CardContent,
   CardHeader,
-  Divider as Divider2,
+  Divider as Divider3,
   List,
   ListItem,
   ListItemIcon as ListItemIcon2,
   ListItemText as ListItemText3,
-  Typography as Typography8,
+  Typography as Typography9,
   Link as MuiLink
 } from "@mui/material";
-import React13 from "react";
+import React14 from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var PageLinkComponent = ({
   overrideNamespace,
   title,
@@ -2166,7 +2896,7 @@ var PageLinkComponent = ({
   bgcolor
 }) => {
   const navigate = useNavigate();
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     Card,
     {
       sx: (theme) => ({
@@ -2180,20 +2910,20 @@ var PageLinkComponent = ({
         ) : typeof bgcolor === "function" ? theme.palette.getContrastText(bgcolor(theme)) : theme.palette.getContrastText(bgcolor) : "text.primary"
       }),
       children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           CardHeader,
           {
-            avatar: icon ? React13.cloneElement(icon, {
+            avatar: icon ? React14.cloneElement(icon, {
               sx: { color: bgcolor ? "inherit" : "primary", ...icon.props.sx }
-            }) : /* @__PURE__ */ jsx18(Settings, { color: bgcolor ? "inherit" : "primary" }),
-            title: /* @__PURE__ */ jsx18(Typography8, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: title }) : title }),
-            subheader: subheader && /* @__PURE__ */ jsx18(Typography8, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: subheader }) : subheader })
+            }) : /* @__PURE__ */ jsx19(Settings, { color: bgcolor ? "inherit" : "primary" }),
+            title: /* @__PURE__ */ jsx19(Typography9, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ jsx19(TranslateText, { overrideNamespace, children: title }) : title }),
+            subheader: subheader && /* @__PURE__ */ jsx19(Typography9, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ jsx19(TranslateText, { overrideNamespace, children: subheader }) : subheader })
           }
         ),
-        /* @__PURE__ */ jsx18(Divider2, { sx: { borderColor: "inherit", opacity: 0.2 } }),
-        /* @__PURE__ */ jsxs11(CardContent, { sx: { flexGrow: 1 }, children: [
-          /* @__PURE__ */ jsx18(Typography8, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: description }) : description }),
-          links && links.length > 0 && /* @__PURE__ */ jsx18(List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsx19(Divider3, { sx: { borderColor: "inherit", opacity: 0.2 } }),
+        /* @__PURE__ */ jsxs12(CardContent, { sx: { flexGrow: 1 }, children: [
+          /* @__PURE__ */ jsx19(Typography9, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ jsx19(TranslateText, { overrideNamespace, children: description }) : description }),
+          links && links.length > 0 && /* @__PURE__ */ jsx19(List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ jsxs12(
             ListItem,
             {
               disablePadding: true,
@@ -2205,18 +2935,18 @@ var PageLinkComponent = ({
                 }
               },
               children: [
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx19(
                   ListItemIcon2,
                   {
                     sx: { minWidth: 30, cursor: "pointer", color: "inherit" },
                     onClick: () => {
                       if (link?.href) navigate(link.href);
                     },
-                    children: /* @__PURE__ */ jsx18(ArrowRight, { fontSize: "small", color: "inherit" })
+                    children: /* @__PURE__ */ jsx19(ArrowRight, { fontSize: "small", color: "inherit" })
                   }
                 ),
-                /* @__PURE__ */ jsx18(ListItemText3, { children: link.onClick ? /* @__PURE__ */ jsx18(
-                  Button6,
+                /* @__PURE__ */ jsx19(ListItemText3, { children: link.onClick ? /* @__PURE__ */ jsx19(
+                  Button7,
                   {
                     size: "small",
                     variant: "text",
@@ -2239,9 +2969,9 @@ var PageLinkComponent = ({
                         // Эффект подчеркивания, как у ссылки
                       }
                     },
-                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx19(TranslateText, { overrideNamespace, children: link.text }) : link.text
                   }
-                ) : link.href ? /* @__PURE__ */ jsx18(
+                ) : link.href ? /* @__PURE__ */ jsx19(
                   MuiLink,
                   {
                     component: RouterLink,
@@ -2259,15 +2989,15 @@ var PageLinkComponent = ({
                         backgroundColor: "transparent"
                       }
                     },
-                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx19(TranslateText, { overrideNamespace, children: link.text }) : link.text
                   }
-                ) : /* @__PURE__ */ jsx18(Typography8, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
+                ) : /* @__PURE__ */ jsx19(Typography9, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ jsx19(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
               ]
             },
             index
           )) })
         ] }),
-        actionButtonText && onActionButtonClick && /* @__PURE__ */ jsx18(CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ jsx18(Button6, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
+        actionButtonText && onActionButtonClick && /* @__PURE__ */ jsx19(CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ jsx19(Button7, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ jsx19(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
       ]
     }
   );
@@ -2275,12 +3005,12 @@ var PageLinkComponent = ({
 
 // src/UI/components/layout/CollapsedContainerComponent.tsx
 import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
-import { Avatar as Avatar3, Box as Box9, Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, Collapse, Divider as Divider3, IconButton as IconButton7, styled as styled2, Tooltip as Tooltip7, Typography as Typography9 } from "@mui/material";
-import { useState as useState13 } from "react";
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Avatar as Avatar3, Box as Box10, Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, Collapse, Divider as Divider4, IconButton as IconButton8, styled as styled2, Tooltip as Tooltip7, Typography as Typography10 } from "@mui/material";
+import { useState as useState14 } from "react";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var ExpandMore = styled2((props) => {
   const { expand, ...other } = props;
-  return /* @__PURE__ */ jsx19(IconButton7, { size: "small", ...other, children: /* @__PURE__ */ jsx19(ExpandMoreIcon, {}) });
+  return /* @__PURE__ */ jsx20(IconButton8, { size: "small", ...other, children: /* @__PURE__ */ jsx20(ExpandMoreIcon, {}) });
 })(({ theme, expand }) => ({
   transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
   transition: theme.transitions.create("transform", {
@@ -2295,14 +3025,14 @@ var ExpandMore = styled2((props) => {
 }));
 var CollapsedContainerComponent = (props) => {
   const { displayState } = useAppTheme();
-  const [expanded, setExpanded] = useState13(props.expanded === void 0 ? false : props.expanded);
+  const [expanded, setExpanded] = useState14(props.expanded === void 0 ? false : props.expanded);
   const handleExpandClick = () => {
     setExpanded(!expanded);
     props.onExpanded && props.onExpanded(!expanded);
   };
-  return /* @__PURE__ */ jsxs12(Card2, { sx: { width: "100%", overflow: "hidden", mb: 2, boxShadow: displayState.isMobile ? "none" : props.disableShadow ? "none" : "0 20px 25px -5px rgb(0 0 0 / 0.1)", borderRadius: displayState.isMobile ? 0 : 1 }, children: [
-    /* @__PURE__ */ jsxs12(
-      Box9,
+  return /* @__PURE__ */ jsxs13(Card2, { sx: { width: "100%", overflow: "hidden", mb: 2, boxShadow: displayState.isMobile ? "none" : props.disableShadow ? "none" : "0 20px 25px -5px rgb(0 0 0 / 0.1)", borderRadius: displayState.isMobile ? 0 : 1 }, children: [
+    /* @__PURE__ */ jsxs13(
+      Box10,
       {
         onClick: () => handleExpandClick(),
         sx: {
@@ -2313,16 +3043,16 @@ var CollapsedContainerComponent = (props) => {
           pr: 2
         },
         children: [
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             CardHeader2,
             {
               sx: { flexGrow: 1 },
-              avatar: /* @__PURE__ */ jsx19(Avatar3, { sx: { bgcolor: "primary.main" }, children: props.icon }),
-              title: typeof props.title === "string" ? /* @__PURE__ */ jsx19(Typography9, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ jsx19(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
-              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ jsx19(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
+              avatar: /* @__PURE__ */ jsx20(Avatar3, { sx: { bgcolor: "primary.main" }, children: props.icon }),
+              title: typeof props.title === "string" ? /* @__PURE__ */ jsx20(Typography10, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ jsx20(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
+              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ jsx20(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
             }
           ),
-          /* @__PURE__ */ jsx19(Tooltip7, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ jsx19(Box9, { sx: { ml: 1 }, children: /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(Tooltip7, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ jsx20(Box10, { sx: { ml: 1 }, children: /* @__PURE__ */ jsx20(
             ExpandMore,
             {
               expand: expanded,
@@ -2333,36 +3063,36 @@ var CollapsedContainerComponent = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs12(Collapse, { in: expanded, timeout: "auto", children: [
-      /* @__PURE__ */ jsx19(Divider3, { variant: "middle" }),
-      /* @__PURE__ */ jsx19(CardContent2, { children: props.children })
+    /* @__PURE__ */ jsxs13(Collapse, { in: expanded, timeout: "auto", children: [
+      /* @__PURE__ */ jsx20(Divider4, { variant: "middle" }),
+      /* @__PURE__ */ jsx20(CardContent2, { children: props.children })
     ] })
   ] });
 };
 
 // src/i18n/LanguageSelector.tsx
-import { useEffect as useEffect6, useState as useState14 } from "react";
+import { useEffect as useEffect7, useState as useState15 } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import {
-  Box as Box10,
-  Typography as Typography10,
+  Box as Box11,
+  Typography as Typography11,
   CircularProgress,
-  IconButton as IconButton8,
+  IconButton as IconButton9,
   Menu as Menu2,
-  MenuItem as MenuItem3,
+  MenuItem as MenuItem4,
   Tooltip as Tooltip8
 } from "@mui/material";
-import { Fragment as Fragment10, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var LanguageSelector = () => {
   const supabase = useSupabase();
   const { i18n } = useTranslation3();
-  const [languages, setLanguages] = useState14([]);
-  const [loading, setLoading] = useState14(true);
+  const [languages, setLanguages] = useState15([]);
+  const [loading, setLoading] = useState15(true);
   const { changeLanguage } = useLocalization();
   const { settings: userSettings, setLanguage } = useUserSettings();
-  const [anchorEl, setAnchorEl] = useState14(null);
+  const [anchorEl, setAnchorEl] = useState15(null);
   const open = Boolean(anchorEl);
-  useEffect6(() => {
+  useEffect7(() => {
     const fetchLanguages = async () => {
       try {
         const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
@@ -2389,14 +3119,14 @@ var LanguageSelector = () => {
     handleClose();
   };
   if (loading) {
-    return /* @__PURE__ */ jsx20(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+    return /* @__PURE__ */ jsx21(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
   }
   const rawCurrentLang = i18n.language || "uk";
   const currentLangCode = rawCurrentLang.split("-")[0];
   const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
-  return /* @__PURE__ */ jsxs13(Fragment10, { children: [
-    /* @__PURE__ */ jsx20(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx20(
-      IconButton8,
+  return /* @__PURE__ */ jsxs14(Fragment10, { children: [
+    /* @__PURE__ */ jsx21(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx21(
+      IconButton9,
       {
         onClick: handleClick,
         size: "small",
@@ -2411,8 +3141,8 @@ var LanguageSelector = () => {
             backgroundColor: "action.hover"
           }
         },
-        children: currentLang?.svg_flag && /* @__PURE__ */ jsx20(
-          Box10,
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx21(
+          Box11,
           {
             sx: {
               width: 24,
@@ -2431,7 +3161,7 @@ var LanguageSelector = () => {
         )
       }
     ) }),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(
       Menu2,
       {
         id: "language-menu",
@@ -2452,8 +3182,8 @@ var LanguageSelector = () => {
         anchorOrigin: { horizontal: "right", vertical: "bottom" },
         children: languages.map((lang) => {
           const isSelected = lang.code === currentLangCode;
-          return /* @__PURE__ */ jsxs13(
-            MenuItem3,
+          return /* @__PURE__ */ jsxs14(
+            MenuItem4,
             {
               selected: isSelected,
               onClick: () => handleSelectLanguage(lang.code),
@@ -2465,8 +3195,8 @@ var LanguageSelector = () => {
                 px: 2
               },
               children: [
-                /* @__PURE__ */ jsx20(
-                  Box10,
+                /* @__PURE__ */ jsx21(
+                  Box11,
                   {
                     sx: {
                       width: 22,
@@ -2480,7 +3210,7 @@ var LanguageSelector = () => {
                     dangerouslySetInnerHTML: { __html: lang.svg_flag }
                   }
                 ),
-                /* @__PURE__ */ jsx20(Typography10, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+                /* @__PURE__ */ jsx21(Typography11, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
               ]
             },
             lang.code
@@ -2494,11 +3224,11 @@ var PublicLanguageSelector = () => {
   const supabase = useSupabase();
   const { i18n } = useTranslation3();
   const { changeLanguage } = useLocalization();
-  const [languages, setLanguages] = useState14([]);
-  const [loading, setLoading] = useState14(true);
-  const [anchorEl, setAnchorEl] = useState14(null);
+  const [languages, setLanguages] = useState15([]);
+  const [loading, setLoading] = useState15(true);
+  const [anchorEl, setAnchorEl] = useState15(null);
   const open = Boolean(anchorEl);
-  useEffect6(() => {
+  useEffect7(() => {
     const fetchLanguages = async () => {
       try {
         const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
@@ -2523,14 +3253,14 @@ var PublicLanguageSelector = () => {
     handleClose();
   };
   if (loading) {
-    return /* @__PURE__ */ jsx20(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+    return /* @__PURE__ */ jsx21(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
   }
   const rawCurrentLang = i18n.language || "uk";
   const currentLangCode = rawCurrentLang.split("-")[0];
   const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
-  return /* @__PURE__ */ jsxs13(Fragment10, { children: [
-    /* @__PURE__ */ jsx20(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx20(
-      IconButton8,
+  return /* @__PURE__ */ jsxs14(Fragment10, { children: [
+    /* @__PURE__ */ jsx21(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx21(
+      IconButton9,
       {
         onClick: handleClick,
         size: "small",
@@ -2545,8 +3275,8 @@ var PublicLanguageSelector = () => {
             backgroundColor: "action.hover"
           }
         },
-        children: currentLang?.svg_flag && /* @__PURE__ */ jsx20(
-          Box10,
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx21(
+          Box11,
           {
             sx: {
               width: 24,
@@ -2565,7 +3295,7 @@ var PublicLanguageSelector = () => {
         )
       }
     ) }),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(
       Menu2,
       {
         id: "language-menu",
@@ -2586,8 +3316,8 @@ var PublicLanguageSelector = () => {
         anchorOrigin: { horizontal: "right", vertical: "bottom" },
         children: languages.map((lang) => {
           const isSelected = lang.code === currentLangCode;
-          return /* @__PURE__ */ jsxs13(
-            MenuItem3,
+          return /* @__PURE__ */ jsxs14(
+            MenuItem4,
             {
               selected: isSelected,
               onClick: () => handleSelectLanguage(lang.code),
@@ -2599,8 +3329,8 @@ var PublicLanguageSelector = () => {
                 px: 2
               },
               children: [
-                /* @__PURE__ */ jsx20(
-                  Box10,
+                /* @__PURE__ */ jsx21(
+                  Box11,
                   {
                     sx: {
                       width: 22,
@@ -2614,7 +3344,7 @@ var PublicLanguageSelector = () => {
                     dangerouslySetInnerHTML: { __html: lang.svg_flag }
                   }
                 ),
-                /* @__PURE__ */ jsx20(Typography10, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+                /* @__PURE__ */ jsx21(Typography11, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
               ]
             },
             lang.code
@@ -2627,15 +3357,15 @@ var PublicLanguageSelector = () => {
 
 // src/UI/components/tables/TablePaginationComponent.tsx
 import {
-  Box as Box11,
-  IconButton as IconButton9,
+  Box as Box12,
+  IconButton as IconButton10,
   TablePagination
 } from "@mui/material";
 import FirstPageIcon from "@mui/icons-material/FirstPage";
 import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
 import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import LastPageIcon from "@mui/icons-material/LastPage";
-import { Fragment as Fragment11, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var CustomPaginationActions = (props) => {
   const {
     count,
@@ -2653,11 +3383,11 @@ var CustomPaginationActions = (props) => {
   const handleLast = (e) => onPageChange(e, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
   const isFirstDisabled = page === 0;
   const isLastDisabled = page >= Math.ceil(count / rowsPerPage) - 1;
-  return /* @__PURE__ */ jsxs14(Box11, { sx: { flexShrink: 0, ml: 2, display: "flex", alignItems: "center" }, children: [
-    showFirstButton && /* @__PURE__ */ jsx21(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx21(TranslateText, { overrideNamespace: ns, children: "First page" }), children: /* @__PURE__ */ jsx21("span", { children: /* @__PURE__ */ jsx21(IconButton9, { onClick: handleFirstPage, disabled: isFirstDisabled, size: "small", children: /* @__PURE__ */ jsx21(FirstPageIcon, {}) }) }) }),
-    /* @__PURE__ */ jsx21(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx21(TranslateText, { overrideNamespace: ns, children: "Previous page" }), children: /* @__PURE__ */ jsx21("span", { children: /* @__PURE__ */ jsx21(IconButton9, { onClick: handleBack, disabled: isFirstDisabled, size: "small", children: /* @__PURE__ */ jsx21(KeyboardArrowLeft, {}) }) }) }),
-    /* @__PURE__ */ jsx21(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx21(TranslateText, { overrideNamespace: ns, children: "Next page" }), children: /* @__PURE__ */ jsx21("span", { children: /* @__PURE__ */ jsx21(IconButton9, { onClick: handleNext, disabled: isLastDisabled, size: "small", children: /* @__PURE__ */ jsx21(KeyboardArrowRight, {}) }) }) }),
-    showLastButton && /* @__PURE__ */ jsx21(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx21(TranslateText, { overrideNamespace: ns, children: "Last page" }), children: /* @__PURE__ */ jsx21("span", { children: /* @__PURE__ */ jsx21(IconButton9, { onClick: handleLast, disabled: isLastDisabled, size: "small", children: /* @__PURE__ */ jsx21(LastPageIcon, {}) }) }) })
+  return /* @__PURE__ */ jsxs15(Box12, { sx: { flexShrink: 0, ml: 2, display: "flex", alignItems: "center" }, children: [
+    showFirstButton && /* @__PURE__ */ jsx22(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx22(TranslateText, { overrideNamespace: ns, children: "First page" }), children: /* @__PURE__ */ jsx22("span", { children: /* @__PURE__ */ jsx22(IconButton10, { onClick: handleFirstPage, disabled: isFirstDisabled, size: "small", children: /* @__PURE__ */ jsx22(FirstPageIcon, {}) }) }) }),
+    /* @__PURE__ */ jsx22(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx22(TranslateText, { overrideNamespace: ns, children: "Previous page" }), children: /* @__PURE__ */ jsx22("span", { children: /* @__PURE__ */ jsx22(IconButton10, { onClick: handleBack, disabled: isFirstDisabled, size: "small", children: /* @__PURE__ */ jsx22(KeyboardArrowLeft, {}) }) }) }),
+    /* @__PURE__ */ jsx22(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx22(TranslateText, { overrideNamespace: ns, children: "Next page" }), children: /* @__PURE__ */ jsx22("span", { children: /* @__PURE__ */ jsx22(IconButton10, { onClick: handleNext, disabled: isLastDisabled, size: "small", children: /* @__PURE__ */ jsx22(KeyboardArrowRight, {}) }) }) }),
+    showLastButton && /* @__PURE__ */ jsx22(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx22(TranslateText, { overrideNamespace: ns, children: "Last page" }), children: /* @__PURE__ */ jsx22("span", { children: /* @__PURE__ */ jsx22(IconButton10, { onClick: handleLast, disabled: isLastDisabled, size: "small", children: /* @__PURE__ */ jsx22(LastPageIcon, {}) }) }) })
   ] });
 };
 var TablePaginationComponent = ({
@@ -2671,7 +3401,7 @@ var TablePaginationComponent = ({
 }) => {
   const { displayState } = useAppTheme();
   const activeNamespace = overrideNamespace || "form_components";
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     TablePagination,
     {
       rowsPerPageOptions,
@@ -2683,8 +3413,8 @@ var TablePaginationComponent = ({
       onRowsPerPageChange,
       showFirstButton: true,
       showLastButton: true,
-      labelRowsPerPage: displayState.isMobile ? /* @__PURE__ */ jsx21(Fragment11, {}) : /* @__PURE__ */ jsxs14(Fragment11, { children: [
-        /* @__PURE__ */ jsx21(TranslateText, { overrideNamespace: activeNamespace, children: "Rows per page" }),
+      labelRowsPerPage: displayState.isMobile ? /* @__PURE__ */ jsx22(Fragment11, {}) : /* @__PURE__ */ jsxs15(Fragment11, { children: [
+        /* @__PURE__ */ jsx22(TranslateText, { overrideNamespace: activeNamespace, children: "Rows per page" }),
         ":"
       ] }),
       ActionsComponent: CustomPaginationActions,
@@ -2712,13 +3442,13 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-import { useEffect as useEffect7, useRef as useRef2, useState as useState15 } from "react";
+import { useEffect as useEffect8, useRef as useRef2, useState as useState16 } from "react";
 var ONLINE_THRESHOLD_MINUTES = 2;
 var AWAY_THRESHOLD_MINUTES = 15;
 var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
   const supabase = useSupabase();
-  const [status, setStatus] = useState15("offline");
-  const [lastSeen, setLastSeen] = useState15(initialLastSeenAt ?? null);
+  const [status, setStatus] = useState16("offline");
+  const [lastSeen, setLastSeen] = useState16(initialLastSeenAt ?? null);
   const lastSeenRef = useRef2(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
@@ -2735,7 +3465,7 @@ var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
     }
     return "offline";
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (!userId) return;
     let isMounted = true;
     const isSelf = currentAuthUserId && userId === currentAuthUserId;
@@ -2841,6 +3571,7 @@ export {
   CollapsedContainerComponent,
   ConfirmationProvider,
   CopyClipboardButtonComponent,
+  DateTimePickerComponent,
   EmailInputComponent,
   ErrorAlertComponent,
   ExpandableNoteComponent,
@@ -2868,7 +3599,7 @@ export {
   TranslateProvider,
   TranslateText,
   TranslationEditProvider,
-  TruncatedTypography,
+  TruncatedTypographyComponent,
   UrlComponent,
   UserAvatarComponent,
   UserPopoverComponent,