feat: add zod validation for role and user forms

src/components/form/FormField.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+interface FormFieldProps {
+  id?: string;
+  label: ReactNode;
+  labelEnd?: ReactNode;
+  required?: boolean;
+  error?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  labelClassName?: string;
+  errorClassName?: string;
+}
+
+export function FormField({
+  id,
+  label,
+  labelEnd,
+  required = false,
+  error,
+  children,
+  className,
+  labelClassName,
+  errorClassName,
+}: FormFieldProps) {
+  return (
+    <div className={cn('space-y-2', className)}>
+      <div className="flex items-center justify-between gap-3">
+        <Label htmlFor={id} className={labelClassName}>
+          {label} {required ? <span className="text-destructive">*</span> : null}
+        </Label>
+        {labelEnd}
+      </div>
+      {children}
+      {error ? (
+        <p className={cn('-mt-1 text-sm text-destructive', errorClassName)}>{error}</p>
+      ) : null}
+    </div>
+  );
+}

src/components/form/index.ts

@@ -0,0 +1 @@
+export { FormField } from './FormField';