Add join token TTL policy and Live Show link sharing

resources/js/admin/mobile/EventFormPage.tsx

@@ -17,6 +17,7 @@ import { getApiValidationMessage, isApiError } from '../lib/apiError';
 import toast from 'react-hot-toast';
 import { useBackNavigation } from './hooks/useBackNavigation';
 import { useAdminTheme } from './theme';
+import { withAlpha } from './components/colors';
 
 type FormState = {
   name: string;
@@ -35,7 +36,7 @@ export default function MobileEventFormPage() {
   const isEdit = Boolean(slug);
   const navigate = useNavigate();
   const { t } = useTranslation(['management', 'common']);
-  const { text, muted, subtle, danger } = useAdminTheme();
+  const { text, muted, subtle, danger, border, surface, primary } = useAdminTheme();
 
   const [form, setForm] = React.useState<FormState>({
     name: '',
@@ -224,10 +225,14 @@ export default function MobileEventFormPage() {
 
         <MobileField label={t('eventForm.fields.date.label', 'Date & time')}>
           <XStack alignItems="center" space="$2">
-            <MobileInput
-              type="datetime-local"
+            <NativeDateTimeInput
               value={form.date}
-              onChange={(e) => setForm((prev) => ({ ...prev, date: e.target.value }))}
+              onChange={(value) => setForm((prev) => ({ ...prev, date: value }))}
+              border={border}
+              surface={surface}
+              text={text}
+              primary={primary}
+              danger={danger}
               style={{ flex: 1 }}
             />
             <CalendarDays size={16} color={subtle} />
@@ -443,6 +448,57 @@ function toDateTimeLocal(value?: string | null): string {
   return fallback.length >= 16 ? fallback.slice(0, 16) : '';
 }
 
+function NativeDateTimeInput({
+  value,
+  onChange,
+  border,
+  surface,
+  text,
+  primary,
+  danger,
+  hasError,
+  style,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  border: string;
+  surface: string;
+  text: string;
+  primary: string;
+  danger: string;
+  hasError?: boolean;
+  style?: React.CSSProperties;
+}) {
+  const [focused, setFocused] = React.useState(false);
+  const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);
+  const borderColor = hasError ? danger : focused ? primary : border;
+
+  return (
+    <input
+      type="datetime-local"
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      style={{
+        width: '100%',
+        height: 44,
+        padding: '0 12px',
+        borderRadius: 12,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor,
+        backgroundColor: surface,
+        color: text,
+        fontSize: 14,
+        boxShadow: focused ? `0 0 0 3px ${ringColor}` : undefined,
+        outline: 'none',
+        ...style,
+      }}
+    />
+  );
+}
+
 function resolveLocation(event: TenantEvent): string {
   const settings = (event.settings ?? {}) as Record<string, unknown>;
   const candidate =