feat(ui): enhance table and admin components with improved layout and status display

- Updated global CSS to center-align table headers and cells, ensuring a consistent layout.
- Modified admin table components to replace switches with status badges for better clarity.
- Enhanced internationalization support by adding new strings for version actions and validation messages in multiple locales.
- Refactored configuration document screens to include version selection and improved user feedback on status changes.

src/components/admin/admin-table-export-button.tsx

@@ -15,7 +15,10 @@ const OMIT_HEADER_TOKENS = [
   "download",
 ] as const;
 
-function shouldOmitColumn(headerText: string): boolean {
+function shouldOmitColumn(cell: Element, headerText: string): boolean {
+  if (cell.hasAttribute("data-export-ignore")) {
+    return true;
+  }
   const normalized = headerText.trim().toLowerCase();
   if (normalized === "") {
     return true;
@@ -33,9 +36,10 @@ function stripOmittedColumns(table: HTMLTableElement): HTMLTableElement {
   const omitIndexes = Array.from(headerRow.children)
     .map((cell, index) => ({
       index,
+      cell,
       text: cell.textContent ?? "",
     }))
-    .filter((item) => shouldOmitColumn(item.text))
+    .filter((item) => shouldOmitColumn(item.cell, item.text))
     .map((item) => item.index)
     .sort((a, b) => b - a);
 

src/components/admin/confirmable-switch.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Switch } from "@/components/ui/switch";
+
+export type ConfirmableSwitchProps = {
+  checked: boolean;
+  disabled?: boolean;
+  confirmBusy?: boolean;
+  "aria-label": string;
+  onCheckedChange: (checked: boolean) => void;
+};
+
+/**
+ * Controlled switch for flows that confirm before applying state.
+ * Disables interaction while a confirm dialog is in progress.
+ */
+export function ConfirmableSwitch({
+  checked,
+  disabled,
+  confirmBusy,
+  "aria-label": ariaLabel,
+  onCheckedChange,
+}: ConfirmableSwitchProps) {
+  return (
+    <Switch
+      checked={checked}
+      disabled={disabled || confirmBusy}
+      aria-label={ariaLabel}
+      onCheckedChange={onCheckedChange}
+    />
+  );
+}

src/components/ui/table.tsx

@@ -70,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-11 px-3 text-left align-middle font-semibold tracking-wide whitespace-nowrap text-[#17305f] [&:has([role=checkbox])]:pr-0",
+        "h-11 px-3 text-center align-middle font-semibold tracking-wide whitespace-nowrap text-[#17305f] [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}
@@ -83,7 +83,7 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     <td
       data-slot="table-cell"
       className={cn(
-        "px-3 py-2.5 text-left align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        "px-3 py-2.5 text-center align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}