feat(backoffice): redesign backoffice UI dengan shadcn/ui

Menyeluruh merancang ulang apps/backoffice memakai pola shadcn/ui sambil
mempertahankan seluruh palette warna existing (primary/neutral/success/
info/warning/danger) dan typography Bai Jamjuree.

UI library (libs/ui):
- Atoms existing (Button, Input, Label, Textarea, Card, Dialog, Drawer,
  Form, Select, Toggle) dirombak ke pola shadcn, API dipertahankan agar
  sibling apps (gacha, dimentorin, hackathon, qrcampaign) tidak break
- Select atom beralih dari native ke Radix Select + NativeSelect fallback
- 18 atom baru: Badge, Avatar, Separator, Skeleton, Tabs, Tooltip,
  DropdownMenu, Popover, AlertDialog, Checkbox, RadioGroup, Switch,
  ScrollArea, Sheet, Sidebar, Breadcrumb, Table, + use-mobile hook
- DataTable, Filter, BackofficeWrapper, Pagination, Modal (alias Dialog)
  direstyle dengan token baru
- CSS variable layer shadcn ditambahkan (--color-primary, --color-sidebar-*,
  dll) dipetakan ke palette existing; tw-animate-css di-import untuk
  transisi

Backoffice shell:
- Sidebar bersarang SidebarProvider + SidebarInset, built-in mobile Sheet,
  user DropdownMenu (Avatar + logout), ikon lucide-react

Pages redesign (19 list/dashboard/settings):
- accounts, cms-events, cms-testimonials, dashboard, dashboard-dimentorin
  (dengan recharts di Card), feedback-review-dimentorin, gacha-roll,
  hackathon-dashboard, hackathon-submissions, hackathon-teams,
  hackathon-users, permissions, prizes, roadmap-dimentorin, roles,
  session-dimentorin, settings-dimentorin (Tabs), transactions,
  users-dimentorin (Tabs mentor/mentee)
- Pola unified: BackofficeWrapper > Card (CardHeader toolbar + CardContent
  DataTable) + AlertDialog untuk delete confirm
- Form accounts_/$id diredesign; form pages lain tetap pakai
  ControlledInputField yang sekarang berbasis shadcn Input

Dependencies:
- +20 radix-ui primitives, lucide-react, cmdk, input-otp
- Select native patched di dimentorin (profile-sidebar, schedule step)
  untuk tetap kompatibel via NativeSelect alias

Verifikasi:
- nx build backoffice: sukses (2.33s, 4801 modules)
- nx build dimentorin/gacha/hackathon/qrcampaign: semua sukses (zero
  regresi dari rewrite libs/ui)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

libs/ui/src/molecules/input-field/input-field.tsx

@@ -1,95 +1,77 @@
-import {
-  DetailedHTMLProps,
-  FC,
-  InputHTMLAttributes,
-  ReactElement,
-} from 'react';
-import { Input } from '../../atoms';
+import * as React from 'react';
+import { Input } from '../../atoms/input';
+import { Label } from '../../atoms/label';
 import { cn } from '@imphnen-frontend-service/utils';
 
-export type TInputType = 'text' | 'email' | 'number' | 'password' | 'file';
+export type TInputType =
+  | 'text'
+  | 'email'
+  | 'number'
+  | 'password'
+  | 'file'
+  | 'date'
+  | 'time';
 export type TInputSize = 'sm' | 'md' | 'lg';
 export type TInputFieldProps = Omit<
-  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+  React.InputHTMLAttributes<HTMLInputElement>,
   'size' | 'type'
 > & {
   label: string;
   type?: TInputType;
   size?: TInputSize;
   error?: string;
-  disabled?: boolean;
   helperText?: string;
   htmlFor?: string;
   isRequired?: boolean;
 };
 
-const sizeClasses: Record<TInputSize, { label: string; helperText: string }> = {
-  lg: {
-    label: 'text-label1 font-medium',
-    helperText: 'text-label3 font-normal',
-  },
-  md: {
-    label: 'text-label2 font-medium',
-    helperText: 'text-label2 font-normal',
-  },
-  sm: {
-    label: 'text-label3 font-medium',
-    helperText: 'text-label2 font-normal',
-  },
-};
-
-export const InputField: FC<TInputFieldProps> = ({
-  label,
-  placeholder,
-  type = 'text',
-  size = 'md',
-  error,
-  helperText,
-  htmlFor,
-  className,
-  disabled,
-  isRequired = false,
-  ...rest
-}): ReactElement => {
-  return (
-    <div className="flex gap-[8px] flex-col">
-      <label
-        htmlFor={htmlFor}
-        className={cn(
-          'items-start justify-item-start text-start text-neutral-800!',
-          sizeClasses[size].label
-        )}
-      >
-        {label} {isRequired ? <span className="text-red-500">*</span> : null}
-      </label>
-      <Input
-        {...(htmlFor && { id: htmlFor })}
-        placeholder={placeholder}
-        type={type}
-        size={size}
-        disabled={disabled}
-        className={cn(
-          error &&
-            'border-danger-500 hover:border-danger-500 focus:outline-danger-500',
-          className,
-          disabled && 'opacity-50 cursor-not-allowed'
-        )}
-        {...rest}
-      />
-      {error ? (
-        <p className="text-danger-500 text-label2 text-left">{error}</p>
-      ) : (
-        helperText && (
-          <p
-            className={cn(
-              'text-label2 text-left',
-              sizeClasses[size].helperText
-            )}
-          >
-            {helperText}
-          </p>
-        )
-      )}
-    </div>
-  );
-};
+export const InputField = React.forwardRef<HTMLInputElement, TInputFieldProps>(
+  (
+    {
+      label,
+      placeholder,
+      type = 'text',
+      size = 'md',
+      error,
+      helperText,
+      htmlFor,
+      className,
+      disabled,
+      isRequired = false,
+      id,
+      ...rest
+    },
+    ref
+  ) => {
+    const autoId = React.useId();
+    const fieldId = htmlFor ?? id ?? autoId;
+    return (
+      <div className="flex flex-col gap-2">
+        <Label htmlFor={fieldId} className="text-sm font-medium text-foreground">
+          {label}
+          {isRequired && <span className="text-destructive">*</span>}
+        </Label>
+        <Input
+          ref={ref}
+          id={fieldId}
+          placeholder={placeholder}
+          type={type}
+          size={size}
+          disabled={disabled}
+          aria-invalid={!!error}
+          className={cn(
+            error && 'border-destructive focus-visible:ring-destructive/20',
+            className
+          )}
+          {...rest}
+        />
+        {error ? (
+          <p className="text-xs text-destructive">{error}</p>
+        ) : helperText ? (
+          <p className="text-xs text-muted-foreground">{helperText}</p>
+        ) : null}
+      </div>
+    );
+  }
+);
+InputField.displayName = 'InputField';