Initial commit: mini-erp (backend FastAPI + frontend React/Vite)

Base para el flujo de ramas por cliente.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

mini-frontend/src/components/ui/SelectField.tsx

@@ -0,0 +1,58 @@
+import StatusBadge from "./StatusBadge";
+import { getStatusColors } from "../../utils/statusColors";
+
+interface SelectFieldProps {
+  options: Record<string, string>;
+  value?: string;
+  onChange: (value: string) => void;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  statusColorsKey?: string;
+}
+
+export default function SelectField({
+  options,
+  value,
+  onChange,
+  label,
+  placeholder,
+  disabled,
+  className = "",
+  statusColorsKey,
+}: SelectFieldProps) {
+  const colors = statusColorsKey ? getStatusColors(statusColorsKey, value) : null;
+  const selectedLabel = value ? (options[value] ?? value) : "";
+  return (
+    <div className={className}>
+      {label && (
+        <label className="block text-[var(--color-text-muted)] font-medium mb-1">
+          {label}
+        </label>
+      )}
+      <select
+        value={String(value ?? "")}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        className="w-full px-2 py-1 h-[28px] border border-[var(--color-input-border)] bg-white rounded-none outline-none focus:border-[var(--color-input-focus)] disabled:opacity-50 text-xs"
+      >
+        {placeholder && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
+        {Object.entries(options).map(([key, label]) => (
+          <option key={key} value={key}>
+            {label}
+          </option>
+        ))}
+      </select>
+      {colors && selectedLabel && (
+        <div className="mt-1">
+          <StatusBadge label={selectedLabel} {...colors} />
+        </div>
+      )}
+    </div>
+  );
+}