Enforce task limits and update event form

resources/js/admin/mobile/components/FormControls.tsx

@@ -8,7 +8,7 @@ import { withAlpha } from './colors';
 import { useAdminTheme } from '../theme';
 
 type FieldProps = {
-  label: string;
+  label: React.ReactNode;
   hint?: string;
   error?: string | null;
   children: React.ReactNode;
@@ -19,9 +19,13 @@ export function MobileField({ label, hint, error, children }: FieldProps) {
 
   return (
     <YStack space="$1.5">
-      <Text fontSize="$sm" fontWeight="800" color={text}>
-        {label}
-      </Text>
+      {typeof label === 'string' || typeof label === 'number' ? (
+        <Text fontSize="$sm" fontWeight="800" color={text}>
+          {label}
+        </Text>
+      ) : (
+        label
+      )}
       {children}
       {hint ? (
         <Text fontSize="$xs" color={muted}>
@@ -127,6 +131,46 @@ export const MobileDateTimeInput = React.forwardRef<
   );
 });
 
+export const MobileDateInput = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentPropsWithoutRef<'input'> & ControlProps
+>(function MobileDateInput({ hasError = false, style, ...props }, ref) {
+  const { border, surface, text, primary, danger } = useAdminTheme();
+  const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);
+  const borderColor = hasError ? danger : border;
+
+  return (
+    <input
+      ref={ref}
+      type="date"
+      {...props}
+      style={{
+        width: '100%',
+        height: 44,
+        padding: '0 12px',
+        borderRadius: 12,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor,
+        backgroundColor: surface,
+        color: text,
+        fontSize: 14,
+        outline: 'none',
+        boxShadow: `0 0 0 0 ${ringColor}`,
+        ...style,
+      }}
+      onFocus={(event) => {
+        event.currentTarget.style.boxShadow = `0 0 0 3px ${ringColor}`;
+        props.onFocus?.(event);
+      }}
+      onBlur={(event) => {
+        event.currentTarget.style.boxShadow = `0 0 0 0 ${ringColor}`;
+        props.onBlur?.(event);
+      }}
+    />
+  );
+});
+
 export const MobileInput = React.forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'> & ControlProps>(
   function MobileInput({ hasError = false, compact = false, style, onChange, type, ...props }, ref) {
     const { border, surface, text, primary, danger } = useAdminTheme();