feat(frontend): React UI — pages, forms, audit log section, Tailwind, Vite build

2026-04-15 13:18:31 -04:00
parent f1d2449808
commit c32a5d200d
22 changed files with 10356 additions and 0 deletions
@@ -0,0 +1,58 @@
+import React from 'react';
+
+export default function FormField({ label, name, error, required, children }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <label htmlFor={name} className="text-sm font-medium text-gray-700">
+        {label}
+        {required && <span className="text-red-500 ml-1" aria-hidden="true">*</span>}
+      </label>
+      {children}
+      {error && (
+        <p role="alert" className="text-sm text-red-600">{error}</p>
+      )}
+    </div>
+  );
+}
+
+export function Input({ id, name, type = 'text', value, onChange, placeholder, required, disabled, className = '', ...rest }) {
+  return (
+    <input
+      id={id || name}
+      name={name}
+      type={type}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      required={required}
+      disabled={disabled}
+      className={`
+        w-full rounded-md border border-gray-300 px-3 py-2 text-sm
+        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+        disabled:bg-gray-100 disabled:cursor-not-allowed
+        ${className}
+      `}
+      {...rest}
+    />
+  );
+}
+
+export function Textarea({ id, name, value, onChange, placeholder, rows = 3, disabled, className = '' }) {
+  return (
+    <textarea
+      id={id || name}
+      name={name}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      rows={rows}
+      disabled={disabled}
+      className={`
+        w-full rounded-md border border-gray-300 px-3 py-2 text-sm
+        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+        disabled:bg-gray-100 disabled:cursor-not-allowed resize-y
+        ${className}
+      `}
+    />
+  );
+}