Estructura correcta: subida desde la raíz

2026-07-16 16:09:23 -04:00
commit de83f8984a
85 changed files with 7301 additions and 0 deletions
@@ -0,0 +1,125 @@
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { supabase } from "../services/supabase";
+import "./EmployeeCard.css";
+
+export default function EmployeeCard() {
+
+    const [searchParams] = useSearchParams();
+    const employeeNumber = searchParams.get("id");
+
+    const [employee, setEmployee] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [notFound, setNotFound] = useState(false);
+
+    useEffect(() => {
+
+        async function loadEmployee() {
+
+            const { data, error } = await supabase
+                .rpc("get_carnet_publico", { p_cedula: employeeNumber });
+
+            if (error || !data || data.length === 0) {
+                setNotFound(true);
+            } else {
+                setEmployee(data[0]);
+            }
+
+            setLoading(false);
+        }
+
+        loadEmployee();
+
+    }, [employeeNumber]);
+
+    if (loading) {
+        return (
+            <div className="page">
+                <h2>Cargando...</h2>
+            </div>
+        );
+    }
+
+    if (notFound) {
+        return (
+            <div className="page">
+                <h1 style={{ color: "red" }}>
+                    Empleado no encontrado
+                </h1>
+            </div>
+        );
+    }
+
+    const active = employee.status?.toLowerCase() === "active";
+
+    return (
+        <div className="page">
+
+            <div className="employee-card">
+
+                <div
+                    className="header"
+                    style={{
+                        backgroundColor: active
+                            ? "#22c55e"
+                            : "#ef4444"
+                    }}
+                >
+                    {active
+                        ? "Empleado Activo"
+                        : "Empleado No Activo"}
+                </div>
+
+                <div className="content">
+                    {employee.photo_url ? (
+                        <img
+                            src={employee.photo_url}
+                            alt={employee.name}
+                            className="employee-photo"
+                        />
+                    ) : (
+                        <div className="employee-photo-placeholder">
+                            Sin foto
+                        </div>
+                    )}
+
+                    <div className="label">
+                        Nombre
+                    </div>
+
+                    <div className="value">
+                        {employee.name}
+                    </div>
+
+                    <div className="label">
+                        Puesto
+                    </div>
+
+                    <div className="value">
+                        {employee.job_title}
+                    </div>
+
+                    <div className="label">
+                        País
+                    </div>
+
+                    <div className="value">
+                        {employee.country}
+                    </div>
+
+                    <div className="label">
+                        Estado
+                    </div>
+
+                    <div className="value">
+                        {employee.status}
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+    );
+
+}