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,33 @@
+import React from 'react';
+
+const styles = {
+  error: 'bg-red-50 border-red-200 text-red-800',
+  success: 'bg-green-50 border-green-200 text-green-800',
+  warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+  info: 'bg-blue-50 border-blue-200 text-blue-800',
+};
+
+export default function Alert({ type = 'error', message, details, onDismiss }) {
+  if (!message) return null;
+  return (
+    <div role="alert" className={`rounded-md border px-4 py-3 text-sm ${styles[type]}`}>
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex-1">
+          <p className="font-medium">{message}</p>
+          {details && (
+            <ul className="mt-1 list-disc list-inside space-y-0.5 text-xs opacity-80">
+              {details.map((d, i) => (
+                <li key={i}>{d.field ? `${d.field}: ${d.message}` : d.message}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+        {onDismiss && (
+          <button onClick={onDismiss} className="shrink-0 opacity-60 hover:opacity-100" aria-label="Dismiss">
+            ✕
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,49 @@
+import React from 'react';
+
+const variants = {
+  primary: 'bg-blue-600 hover:bg-blue-700 text-white border-transparent',
+  secondary: 'bg-white hover:bg-gray-50 text-gray-700 border-gray-300',
+  danger: 'bg-red-600 hover:bg-red-700 text-white border-transparent',
+  ghost: 'bg-transparent hover:bg-gray-100 text-gray-600 border-transparent',
+};
+
+const sizes = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-4 py-2 text-sm',
+  lg: 'px-6 py-3 text-base',
+};
+
+export default function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  onClick,
+  type = 'button',
+  className = '',
+  ...rest
+}) {
+  return (
+    <button
+      type={type}
+      disabled={disabled || loading}
+      onClick={onClick}
+      className={`
+        inline-flex items-center gap-1.5 rounded-md border font-medium
+        transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
+        disabled:opacity-50 disabled:cursor-not-allowed
+        ${variants[variant]} ${sizes[size]} ${className}
+      `}
+      {...rest}
+    >
+      {loading && (
+        <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
+        </svg>
+      )}
+      {children}
+    </button>
+  );
+}
@@ -0,0 +1,19 @@
+import React from 'react';
+import Modal from './Modal';
+import Button from './Button';
+
+export default function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, loading }) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={title} size="sm">
+      <p className="text-sm text-gray-600 mb-6">{message}</p>
+      <div className="flex justify-end gap-3">
+        <Button variant="secondary" onClick={onClose} disabled={loading}>
+          Cancel
+        </Button>
+        <Button variant="danger" onClick={onConfirm} loading={loading}>
+          Delete
+        </Button>
+      </div>
+    </Modal>
+  );
+}
@@ -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}
+      `}
+    />
+  );
+}
@@ -0,0 +1,40 @@
+import React, { useEffect } from 'react';
+
+export default function Modal({ isOpen, onClose, title, children, size = 'md' }) {
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const widths = { sm: 'max-w-md', md: 'max-w-lg', lg: 'max-w-2xl', xl: 'max-w-4xl' };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+    >
+      <div className={`bg-white rounded-xl shadow-2xl w-full mx-4 ${widths[size]} max-h-[90vh] flex flex-col`}>
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+          <h2 id="modal-title" className="text-lg font-semibold text-gray-900">{title}</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 rounded p-1 transition-colors"
+            aria-label="Close modal"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className="p-6 overflow-y-auto flex-1">{children}</div>
+      </div>
+    </div>
+  );
+}