feat: implement Supabase OAuth authentication with domain-restricted login and protected routes

feat: update base path, and add image processing utility scripts
Merge pull request 'feat: implementacion de flujo n8n en el formulario principal' (#4 ) from feature/n8n-integration into dev
2026-07-10 17:46:15 -04:00 · 2026-07-10 11:58:52 -04:00 · 2026-07-10 15:06:46 +00:00 · 2026-07-10 15:01:30 +00:00 · 2026-07-07 16:55:11 -04:00 · 2026-07-07 12:24:30 -04:00
11 changed files with 974 additions and 84 deletions
@@ -9,9 +9,13 @@
      "version": "0.0.0",
      "dependencies": {
        "@supabase/supabase-js": "^2.108.2",
+        "file-saver": "^2.0.5",
+        "jszip": "^3.10.1",
+        "lucide-react": "^1.23.0",
        "react": "^19.2.7",
        "react-dom": "^19.2.7",
-        "react-router-dom": "^7.18.1"
+        "react-router-dom": "^7.18.1",
+        "xlsx": "^0.18.5"
      },
      "devDependencies": {
        "@eslint/js": "^10.0.1",
@@ -1039,6 +1043,15 @@
        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
      }
    },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/ajv": {
      "version": "6.15.0",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
@@ -1147,6 +1160,28 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1167,6 +1202,24 @@
        "url": "https://opencollective.com/express"
      }
    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1491,6 +1544,12 @@
        "node": ">=16.0.0"
      }
    },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
+      "license": "MIT"
+    },
    "node_modules/find-up": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -1529,6 +1588,15 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1616,6 +1684,12 @@
        "node": ">= 4"
      }
    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
    "node_modules/imurmurhash": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -1626,6 +1700,12 @@
        "node": ">=0.8.19"
      }
    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1649,6 +1729,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
    "node_modules/isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -1710,6 +1796,18 @@
        "node": ">=6"
      }
    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
    "node_modules/keyv": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -1734,6 +1832,15 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
    "node_modules/lightningcss": {
      "version": "1.32.0",
      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -2033,6 +2140,15 @@
        "yallist": "^3.0.2"
      }
    },
+    "node_modules/lucide-react": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.23.0.tgz",
+      "integrity": "sha512-38BpJcD0JhFosxHApP/BYsBetLpQFRoTRzEzstM/XCc3jsAG7wqaY1lgVwxiUe3xqYE+lNxo2PkCmYwXWrwwIw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/minimatch": {
      "version": "10.2.5",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
@@ -2142,6 +2258,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
    "node_modules/path-exists": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -2221,6 +2343,12 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2290,6 +2418,21 @@
        "react-dom": ">=18"
      }
    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
    "node_modules/rolldown": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.3.tgz",
@@ -2324,6 +2467,12 @@
        "@rolldown/binding-win32-x64-msvc": "1.1.3"
      }
    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
    "node_modules/scheduler": {
      "version": "0.27.0",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -2346,6 +2495,12 @@
      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
      "license": "MIT"
    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2379,6 +2534,27 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.17",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -2456,6 +2632,12 @@
        "punycode": "^2.1.0"
      }
    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
    "node_modules/vite": {
      "version": "8.1.0",
      "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.0.tgz",
@@ -2550,6 +2732,24 @@
        "node": ">= 8"
      }
    },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/word-wrap": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -2560,6 +2760,27 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/yallist": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -11,9 +11,13 @@
  },
  "dependencies": {
    "@supabase/supabase-js": "^2.108.2",
+    "file-saver": "^2.0.5",
+    "jszip": "^3.10.1",
+    "lucide-react": "^1.23.0",
    "react": "^19.2.7",
    "react-dom": "^19.2.7",
-    "react-router-dom": "^7.18.1"
+    "react-router-dom": "^7.18.1",
+    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@eslint/js": "^10.0.1",
@@ -1,29 +1,176 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Navigate, useLocation } from "react-router-dom";
+import { supabase } from "./services/supabase";
+import { useEffect, useState, createContext, useContext } from "react";
+import Login from "./components/Login";
 import EmployeeCard from "./components/EmployeeCard";
 import IdCardGenerator from "./Generator";
+import "./components/Login.css";

-export default function App() {
+const AuthContext = createContext(null);
+
+export const useAuth = () => useContext(AuthContext);
+
+const ALLOWED_DOMAIN = "@gomezleemarketing.com";
+const GLM_LOGO = "https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM_completo.png";
+
+function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!supabase) {
+      console.warn("Supabase no configurado - falta VITE_SUPABASE_ANON_KEY");
+      setLoading(false);
+      return;
+    }
+
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setUser(session?.user ?? null);
+      setLoading(false);
+    });
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      setUser(session?.user ?? null);
+      setLoading(false);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const signOut = async () => {
+    if (supabase) await supabase.auth.signOut();
+  };
+
+  if (loading) {
+    return (
+      <div style={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#EEF6E8',
+        fontFamily: 'Arial, sans-serif'
+      }}>
+        <div style={{
+          width: 40, height: 40, border: '3px solid #D0D0D0',
+          borderTopColor: '#6CC24A', borderRadius: '50%',
+          animation: 'spin 0.8s linear infinite'
+        }} />
+      </div>
+    );
+  }

  return (
-
-    <BrowserRouter>
-
-      <Routes>
-
-        <Route
-          path="/employee"
-          element={<IdCardGenerator />}
-        />
-
-        <Route
-          path="/employee/:employeeNumber"
-          element={<EmployeeCard />}
-        />
-
-      </Routes>
-
-    </BrowserRouter>
-
+    <AuthContext.Provider value={{ user, signOut, loading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+function ProtectedRoute({ children }) {
+  const { user, signOut, loading } = useAuth();
+  const location = useLocation();
+
+  if (loading) return null;
+
+  if (!user) {
+    return <Navigate to="/empleado-id/login" state={{ from: location }} replace />;
+  }
+
+  if (!user.email?.endsWith(ALLOWED_DOMAIN)) {
+    signOut();
+    return (
+      <div style={{
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#EEF6E8',
+        fontFamily: 'Arial, sans-serif',
+        padding: '20px',
+        textAlign: 'center'
+      }}>
+        <img src={GLM_LOGO} alt="GLM" style={{ maxWidth: 220, marginBottom: 24 }} />
+        <h1 style={{ color: '#4F758B', fontSize: 24, fontWeight: 700, marginBottom: 16 }}>
+          Acceso no autorizado
+        </h1>
+        <p style={{ color: '#6B8FA3', fontSize: 16, marginBottom: 24, maxWidth: 400 }}>
+          Solo se permite acceso con cuentas corporativas <strong>@gomezleemarketing.com</strong>.
+          Tu cuenta <strong>{user.email}</strong> no tiene permisos.
+        </p>
+        <button
+          onClick={signOut}
+          style={{
+            padding: '14px 32px',
+            fontSize: 15,
+            fontWeight: 600,
+            fontFamily: 'Arial',
+            color: '#fff',
+            background: '#4F758B',
+            border: 'none',
+            borderRadius: 10,
+            cursor: 'pointer'
+          }}
+        >
+          Cerrar sesión y volver a intentar
+        </button>
+      </div>
+    );
+  }
+
+  return children;
+}
+
+function PublicRoute({ children }) {
+  const { user, loading } = useAuth();
+  const location = useLocation();
+
+  if (loading) return null;
+
+  if (user?.email?.endsWith(ALLOWED_DOMAIN)) {
+    const from = location.state?.from?.pathname || '/empleado-id/';
+    return <Navigate to={from} replace />;
+  }
+
+  return children;
+}
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route
+            path="/empleado-id/login"
+            element={
+              <PublicRoute>
+                <Login />
+              </PublicRoute>
+            }
+          />
+
+          <Route
+            path="/empleado-id/"
+            element={
+              <ProtectedRoute>
+                <IdCardGenerator />
+              </ProtectedRoute>
+            }
+          />
+
+          <Route
+            path="/empleado-id/:employeeNumber"
+            element={
+              <ProtectedRoute>
+                <EmployeeCard />
+              </ProtectedRoute>
+            }
+          />
+
+          <Route path="*" element={<Navigate to="/empleado-id/" replace />} />
+        </Routes>
+      </BrowserRouter>
+    </AuthProvider>
  );
-
 }
@@ -273,7 +273,7 @@ body {
  width: 100%;
  height: 100%;
  object-fit: cover;
-  display: none;
+  display: block;
 }

 .front-photo-frame .placeholder-svg {
@@ -1,9 +1,42 @@
-import React, { useState, useRef, useEffect } from 'react';
-import './App.css';
-import { renderQRCode, downloadIDCards, downloadBulkIDCards, getXLSXLib } from './script/script.jsx';
-import { uploadEmployeePhoto } from './services/storage.js';
+import { useState, useRef, useEffect } from 'react';
+import './Generator.css';
+import { renderQRCode, downloadIDCards, downloadBulkIDCards, getXLSXLib, clientTemplates } from './script/script.jsx';
+import { uploadEmployeePhoto, saveClienteProyecto } from './services/storage.js';
 import { supabase } from "./services/supabase";

+// Convierte datos binarios recibidos (base64, buffer, array de bytes) en un Blob URL local de forma robusta
+const convertBinaryToBlobUrl = (data) => {
+    if (!data) return null;
+    try {
+        if (typeof data === 'object' && data.type === 'Buffer' && Array.isArray(data.data)) {
+            const byteArray = new Uint8Array(data.data);
+            const blob = new Blob([byteArray], { type: 'image/jpeg' });
+            return URL.createObjectURL(blob);
+        }
+
+        if (Array.isArray(data)) {
+            const byteArray = new Uint8Array(data);
+            const blob = new Blob([byteArray], { type: 'image/jpeg' });
+            return URL.createObjectURL(blob);
+        }
+
+        if (typeof data === 'string') {
+            const cleanBase64 = data.replace(/^data:image\/\w+;base64,/, "");
+            const byteCharacters = atob(cleanBase64);
+            const byteNumbers = new Array(byteCharacters.length);
+            for (let i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            const byteArray = new Uint8Array(byteNumbers);
+            const blob = new Blob([byteArray], { type: 'image/jpeg' });
+            return URL.createObjectURL(blob);
+        }
+    } catch (e) {
+        console.error("Error convirtiendo formato binario a Blob URL:", e);
+    }
+    return null;
+};
+
 export default function IdCardGenerator() {
    // --- Estados formulario individual ───
    const [name, setName] = useState('');
@@ -13,8 +46,12 @@ export default function IdCardGenerator() {
    const [employeeId, setEmployeeId] = useState('');
    const [photoSrc, setPhotoSrc] = useState('');
    const [photoFile, setPhotoFile] = useState(null);
+    const [photoProcessing, setPhotoProcessing] = useState(false);
    const [downloadStatus, setDownloadStatus] = useState({ processing: false, text: '⬇ Descargar' });

+    // Bloquea el botón Descargar hasta que nombre, puesto e ID estén llenos
+    const isFormComplete = name.trim() && role.trim() && employeeId.trim();
+
    // --- Estados Lote / Excel Masivo ───
    const [bulkEmployees, setBulkEmployees] = useState([]);
    const [bulkStatusText, setBulkStatusText] = useState('');
@@ -29,56 +66,131 @@ export default function IdCardGenerator() {
        ? import.meta.env.BASE_URL
        : `${import.meta.env.BASE_URL}/`;

-    // Al limpiar el input en tiempo real, employeeId ya vendrá totalmente limpio
    useEffect(() => {
        if (qrCanvasRef.current) {
            renderQRCode(employeeId, qrCanvasRef.current);
        }
    }, [employeeId]);

-    const handlePhotoUpload = (e) => {
+    const handlePhotoUpload = async (e) => {
        const file = e.target.files[0];
-        if (file) {
+        if (!file) return;
+
        setPhotoFile(file);
        setPhotoSrc(URL.createObjectURL(file));
+        setPhotoProcessing(true);
+
+        try {
+            const editedBlob = await processPhotoWithAI(file);
+            const editedUrl = URL.createObjectURL(editedBlob);
+            setPhotoSrc(editedUrl);
+            setPhotoFile(new File([editedBlob], file.name, { type: editedBlob.type || 'image/jpeg' }));
+        } catch (error) {
+            console.error('Error al procesar la foto con IA en n8n:', error);
+            alert('No se pudo procesar la foto con IA. Se usará la foto original para la vista previa.');
+        } finally {
+            setPhotoProcessing(false);
        }
    };

-    // Interceptor para bloquear en tiempo real guiones y espacios en blanco
+    const processPhotoWithAI = async (file) => {
+        const N8N_WEBHOOK_URL = import.meta.env.VITE_N8N_WEBHOOK_URL;
+        const TOKEN_SECRETO = import.meta.env.VITE_WEBHOOK_TOKEN;
+
+        const formData = new FormData();
+        formData.append('edited', file, file.name);
+        formData.append('name', name);
+        formData.append('role', role);
+        formData.append('employeeId', employeeId);
+        formData.append('fechaProcesado', new Date().toISOString());
+
+        const response = await fetch(N8N_WEBHOOK_URL, {
+            method: 'POST',
+            headers: {
+                'Authorization': TOKEN_SECRETO
+            },
+            body: formData
+        });
+
+        if (!response.ok) {
+            throw new Error(`El servidor de n8n rechazó la petición (Código: ${response.status})`);
+        }
+
+        const contentType = response.headers.get('content-type') || '';
+        if (contentType.includes('application/json')) {
+            const data = await response.json();
+            const bin = data.edited || data.data || data.foto_processed_base64 || data.photo || data.binary || (Array.isArray(data) && (data[0]?.edited || data[0]?.data));
+            const blobUrl = convertBinaryToBlobUrl(bin);
+            if (!blobUrl) throw new Error('n8n no devolvió un binario válido.');
+            const blob = await (await fetch(blobUrl)).blob();
+            return blob;
+        }
+
+        const blob = await response.blob();
+        if (!blob || blob.size === 0) throw new Error('n8n devolvió un binario vacío.');
+        return blob;
+    };
+
    const handleEmployeeIdChange = (e) => {
        const rawValue = e.target.value;
-        // Reemplaza instantáneamente cualquier guión o espacio por vacío
        const cleanValue = rawValue.replace(/[-\s]/g, '');
        setEmployeeId(cleanValue);
    };

-    // --- ALMACENAMIENTO AUTOMÁTICO EN EL STORAGE E INSTANCIACIÓN RPC ---
-    const handleBulkSupabasePhotoSync = async (cedula, blobData) => {
-        const cleanCedula = String(cedula).replace(/[-\s]/g, '');
+    const enviarDatosAn8n = async (datosEmpleados) => {
+        const N8N_WEBHOOK_URL = import.meta.env.VITE_N8N_WEBHOOK_URL;
+        const TOKEN_SECRETO = import.meta.env.VITE_WEBHOOK_TOKEN;
+
        try {
+            const response = await fetch(N8N_WEBHOOK_URL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': TOKEN_SECRETO
+                },
+                body: JSON.stringify({
+                    empleados: datosEmpleados,
+                    total: datosEmpleados.length,
+                    fechaProcesado: new Date().toISOString()
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`El servidor de n8n rechazó la petición (Código: ${response.status})`);
+            }
+
+            const resData = await response.json();
+            return Array.isArray(resData) ? resData : (resData.empleados || resData.data || []);
+        } catch (error) {
+            console.error('Error de comunicación con n8n:', error);
+            throw error;
+        }
+    };
+
+    const handleBulkSupabaseSync = async (cedula, blobData, currentEmployee) => {
+        const cleanCedula = String(cedula).replace(/[-\s]/g, '');
+        if (!cleanCedula) return;
+
+        try {
+            // Se usa el cliente extraído directamente del array renderizado
+            const clienteProyectoValue = currentEmployee?.selectedClient || 'Generico';
+            await saveClienteProyecto(cleanCedula, clienteProyectoValue);
+            console.log(`[Supabase DB] Guardado: ${cleanCedula} → ${clienteProyectoValue}`);
+
            const customFile = new File([blobData], `${cleanCedula}.jpg`, { type: 'image/jpeg' });
            const remoteStorageUrl = await uploadEmployeePhoto(cleanCedula, customFile);

            if (remoteStorageUrl) {
-                const { data, error } = await supabase.rpc("save_employee_photo", {
+                await supabase.rpc("save_employee_photo", {
                    p_employee_number: cleanCedula,
                    p_photo_url: remoteStorageUrl
                });
-
-                if (error) {
-                    console.warn(`[Supabase RPC Error] Cédula ${cleanCedula}:`, error.message);
-                } else if (data && data.success === false) {
-                    console.log(`[Supabase Info] Cédula ${cleanCedula}: ${data.message}`);
-                } else {
-                    console.log(`[Supabase Success] Foto sincronizada para la Cédula: ${cleanCedula}`);
-                }
            }
        } catch (error) {
-            console.error(`Sincronización abortada para la cédula ${cleanCedula}:`, error);
+            console.error(`[Supabase Sync Fallido] Cédula ${cleanCedula}:`, error);
        }
    };

-    // --- MAPEO DE COLUMNAS EXCEL CON LIMPIEZA DE CÉDULA ---
    const handleExcelUpload = async (e) => {
        const file = e.target.files[0];
        if (!file) return;
@@ -88,7 +200,7 @@ export default function IdCardGenerator() {
            const XLSXLib = await getXLSXLib();
            const reader = new FileReader();

-            reader.onload = (evt) => {
+            reader.onload = async (evt) => {
                try {
                    const bstr = evt.target.result;
                    const wb = XLSXLib.read(bstr, { type: 'binary' });
@@ -141,7 +253,9 @@ export default function IdCardGenerator() {
                    }).filter(emp => emp.name && emp.role && emp.employeeId);

                    setBulkEmployees(formatted);
-                    setBulkStatusText(`✅ ¡Cargados ${formatted.length} colaboradores con éxito!`);
+                    setBulkStatusText(`✅ ¡Cargados ${formatted.length} colaboradores! Listo para procesar.`);
+                    setBulkDownloadStatus({ processing: false, text: '⬇ Descargar' });
+
                } catch (innerErr) {
                    console.error(innerErr);
                    setBulkStatusText('❌ Error de lectura. Revisa el formato de columnas.');
@@ -156,23 +270,61 @@ export default function IdCardGenerator() {

    const triggerBulkDownload = async () => {
        if (bulkEmployees.length === 0) return;
+
+        setBulkDownloadStatus({ processing: true, text: '🔄 Descargando...' });
+        setBulkStatusText('Descargando retratos...');
+
        try {
-            await downloadBulkIDCards({
-                employees: bulkEmployees,
-                baseUrl,
-                onStateChange: setBulkDownloadStatus,
-                onProcessEmployeePhoto: handleBulkSupabasePhotoSync
+            const resultadosN8n = await enviarDatosAn8n(bulkEmployees);
+            setBulkStatusText('Generando frentes, reversos y empaquetando en carpetas locales...');
+
+            const employeesReadyForRender = bulkEmployees.map((originalEmp, index) => {
+                const n8nEmp = resultadosN8n[index] || resultadosN8n.find(e => e.employeeId === originalEmp.employeeId) || {};
+
+                const base64Source = n8nEmp.data || n8nEmp.foto_processed_base64 || originalEmp.data;
+                let finalPhotoUrl = convertBinaryToBlobUrl(base64Source) || originalEmp.fotoUrl;
+
+                const validClient = n8nEmp.selectedClient || originalEmp.selectedClient || 'Generico';
+                const validLang = n8nEmp.language || originalEmp.language || 'Esp';
+
+                return {
+                    name: n8nEmp.name || originalEmp.name,
+                    role: n8nEmp.role || originalEmp.role,
+                    selectedClient: validClient,
+                    language: validLang,
+                    employeeId: n8nEmp.employeeId || originalEmp.employeeId,
+                    fotoUrl: finalPhotoUrl
+                };
            });
-            setBulkStatusText('🎉 ¡Lote guardado!');
+
+            await downloadBulkIDCards({
+                employees: employeesReadyForRender,
+                baseUrl,
+                onStateChange: null,
+                // CORRECCIÓN AQUÍ: Buscamos al empleado en nuestro arreglo usando la cédula que nos devuelve script.jsx
+                onProcessEmployeePhoto: (cedula, blobData) => {
+                    const currentEmp = employeesReadyForRender.find(emp => emp.employeeId === cedula);
+                    return handleBulkSupabaseSync(cedula, blobData, currentEmp);
+                }
+            });
+
+            setBulkStatusText('🎉 ¡Lote de carnets guardado correctamente!');
+            setBulkEmployees([]);
+
        } catch (error) {
            console.error(error);
-            alert("Error procesando las imágenes remotas.");
+            setBulkStatusText(`❌ Error al procesar: ${error.message || error}`);
+        } finally {
+            setBulkDownloadStatus({ processing: false, text: '⬇ Descargar' });
        }
    };

    const triggerDownload = async () => {
        if (!validateForm()) return;
+        setDownloadStatus({ processing: true, text: '🔄 Descargando...' });
        try {
+            await saveClienteProyecto(employeeId, selectedClient);
+
            if (photoFile) {
                const photoUrl = await uploadEmployeePhoto(employeeId, photoFile);
                await supabase.rpc("save_employee_photo", {
@@ -190,6 +342,7 @@ export default function IdCardGenerator() {
        } catch (err) {
            console.error(err);
            alert(err.message);
+            setDownloadStatus({ processing: false, text: '⬇ Descargar' });
        }
    };

@@ -296,8 +449,8 @@ export default function IdCardGenerator() {
                            <label>Puesto</label>
                            <input type="text" placeholder="Ej: Mercaderista" value={role} onChange={(e) => setRole(e.target.value)} />
                        </div>
-                        <div className="upload-btn" onClick={() => fileInputRef.current.click()}>
-                            Subir foto del colaborador
+                        <div className="upload-btn" onClick={() => !photoProcessing && fileInputRef.current.click()} style={{ opacity: photoProcessing ? 0.6 : 1, cursor: photoProcessing ? 'wait' : 'pointer' }}>
+                            {photoProcessing ? '⏳ Procesando foto con IA...' : 'Subir foto del colaborador'}
                        </div>
                        <input type="file" accept="image/*" style={{ display: 'none' }} ref={fileInputRef} onChange={handlePhotoUpload} />
                    </div>
@@ -349,7 +502,7 @@ export default function IdCardGenerator() {

                    <div className="panel-section">
                        <div className="panel-section-title">Exportar</div>
-                        <button className="export-btn blue" disabled={downloadStatus.processing} onClick={triggerDownload}>
+                        <button className="export-btn blue" disabled={downloadStatus.processing || !isFormComplete} onClick={triggerDownload} style={{ opacity: (!isFormComplete || downloadStatus.processing) ? 0.6 : 1 }}>
                            {downloadStatus.text}
                        </button>
                    </div>
@@ -363,7 +516,18 @@ export default function IdCardGenerator() {
                            <div className="front-photo-frame" style={{ position: 'relative', overflow: 'hidden' }}>
                                {photoSrc ? (
                                    <img src={photoSrc} alt="Foto Colaborador" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
-                                ) : (
+                                ) : (null)}
+                                {photoProcessing && (
+                                    <div style={{
+                                        position: 'absolute', inset: 0, display: 'flex',
+                                        alignItems: 'center', justifyContent: 'center',
+                                        background: 'rgba(0,0,0,0.45)', color: '#fff',
+                                        fontSize: '13px', fontWeight: '600', textAlign: 'center', padding: '8px'
+                                    }}>
+                                        ⏳ Editando foto con IA...
+                                    </div>
+                                )}
+                                {!photoSrc && (
                                    <svg className="placeholder-svg" viewBox="0 0 28 28" fill="none" style={{ width: '60%', height: '60%', opacity: 0.4 }}>
                                        <circle cx="14" cy="10" r="5.5" stroke="currentColor" strokeWidth="1.5" />
                                        <path d="M3 24c0-6 22-6 22 0" stroke="currentColor" strokeWidth="1.5" />
@@ -377,7 +541,13 @@ export default function IdCardGenerator() {

                    <div className="card-wrap">
                        <div className="card-label">Reverso</div>
-                        <div className="card" id="cardBack" style={{ backgroundImage: `url('${baseUrl}${selectedClient === 'Colgate' ? 'images/AF Colgate' : 'images/AF ' + selectedClient} ${language}.png')` }}>
+                        <div
+                            className="card"
+                            id="cardBack"
+                            style={{
+                                backgroundImage: `url('${baseUrl}${(clientTemplates[language] || clientTemplates['Esp'])[selectedClient] || (clientTemplates[language] || clientTemplates['Esp'])['Generico']}')`
+                            }}
+                        >
                            <div className="back-qr-zone">
                                <canvas ref={qrCanvasRef} width={55} height={55}></canvas>
                            </div>
@@ -0,0 +1,163 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --azul-glm: #4F758B;
+    --azul-medio: #5B7F95;
+    --acero-claro: #6B8FA3;
+    --verde-glm: #6CC24A;
+    --verde-claro: #A4D65E;
+    --verde-bg: #EEF6E8;
+    --azul-seccion: #D6E8F4;
+    --gris-oscuro: #4A4A4A;
+    --gris-medio: #D0D0D0;
+    --gris-claro: #F5F5F5;
+    --blanco: #FFFFFF;
+    --naranja: #FF6A13;
+}
+
+.login-page {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    background: linear-gradient(135deg, var(--blanco) 0%, var(--gris-claro) 100%);
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.login-page.loading .login-card {
+    pointer-events: none;
+    opacity: 0.8;
+}
+
+.login-card {
+    background: var(--blanco);
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(79, 117, 139, 0.12);
+    padding: 48px 40px;
+    width: 100%;
+    max-width: 400px;
+    text-align: center;
+    border: 1px solid var(--gris-medio);
+}
+
+.logo {
+    width: 180px;
+    height: auto;
+    margin-bottom: 24px;
+}
+
+.title {
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--azul-glm);
+    letter-spacing: 0.5px;
+    margin-bottom: 6px;
+    text-transform: uppercase;
+}
+
+.subtitle {
+    font-size: 13px;
+    color: var(--acero-claro);
+    font-weight: 400;
+    margin-bottom: 24px;
+}
+
+.login-divider {
+    height: 2px;
+    background: var(--verde-glm);
+    margin: 24px 0;
+    border-radius: 1px;
+}
+
+.btn-google {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    width: 100%;
+    padding: 14px 24px;
+    background: var(--blanco);
+    border: 2px solid var(--gris-medio);
+    border-radius: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--gris-oscuro);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.btn-google:hover:not(:disabled) {
+    border-color: var(--verde-glm);
+    background: var(--verde-bg);
+    color: var(--azul-glm);
+    box-shadow: 0 4px 16px rgba(108, 194, 74, 0.2);
+    transform: translateY(-1px);
+}
+
+.btn-google:active:not(:disabled) {
+    transform: translateY(0);
+}
+
+.btn-google:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.google-icon {
+    flex-shrink: 0;
+}
+
+.domain-hint {
+    margin-top: 14px;
+    font-size: 12px;
+    color: var(--acero-claro);
+    font-weight: 500;
+}
+
+.error-message {
+    margin-top: 16px;
+    padding: 12px 16px;
+    background: #FDECEA;
+    border: 1px solid #F5C6CB;
+    border-radius: 8px;
+    font-size: 13px;
+    color: #C0392B;
+    text-align: left;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--gris-medio);
+    border-top-color: var(--verde-glm);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin: 16px auto 0;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (max-width: 480px) {
+    .login-card {
+        padding: 36px 24px;
+    }
+
+    .title {
+        font-size: 19px;
+    }
+
+    .logo {
+        width: 150px;
+    }
+}
@@ -0,0 +1,97 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { supabase } from '../services/supabase';
+import './Login.css';
+
+const ALLOWED_DOMAIN = '@gomezleemarketing.com';
+const GLM_LOGO = 'https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM_completo.png';
+
+export default function Login() {
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        supabase.auth.getSession().then(({ data: { session } }) => {
+            if (session?.user?.email?.endsWith(ALLOWED_DOMAIN)) {
+                navigate('/empleado-id/');
+            }
+        });
+    }, [navigate]);
+
+    const handleGoogleLogin = async () => {
+        setLoading(true);
+        setError('');
+
+        const redirectUrl = `${window.location.origin}/empleado-id/`;
+
+        const { error: authError } = await supabase.auth.signInWithOAuth({
+            provider: 'google',
+            options: {
+                redirectTo: redirectUrl,
+                queryParams: {
+                    hd: 'gomezleemarketing.com',
+                },
+            },
+        });
+
+        if (authError) {
+            setError(authError.message);
+            setLoading(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="login-page loading">
+                <div className="login-card">
+                    <img src={GLM_LOGO} alt="GLM" className="logo" />
+                    <div className="spinner" />
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="login-page">
+            <div className="login-card">
+                <img src={GLM_LOGO} alt="GomezLee Marketing" className="logo" />
+
+                <h1 className="title">GLM ID Card Generator</h1>
+                <p className="subtitle">GomezLee Marketing · Carnet Corporativo CR80</p>
+
+                <div className="login-divider" />
+
+                <button
+                    className="btn-google"
+                    onClick={handleGoogleLogin}
+                    disabled={loading}
+                >
+                    <svg className="google-icon" viewBox="0 0 24 24" width="20" height="20">
+                        <path
+                            fill="#4285F4"
+                            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                        />
+                        <path
+                            fill="#34A853"
+                            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                        />
+                        <path
+                            fill="#FBBC05"
+                            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                        />
+                        <path
+                            fill="#EA4335"
+                            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                        />
+                    </svg>
+                    <span>Continuar con Google</span>
+                </button>
+
+                <p className="domain-hint">Solo cuentas @gomezleemarketing.com</p>
+
+                {error && <div className="error-message">{error}</div>}
+            </div>
+        </div>
+    );
+}
@@ -65,11 +65,21 @@ export function convertDriveUrlToDirect(url) {
 export async function fetchImageAsBlob(url) {
    if (!url) return null;

-    if (url.includes('drive.google.com') || url.includes('docs.google.com')) {
+    if (url.startsWith('blob:') || url.startsWith('data:')) {
        try {
            const response = await fetch(url);
            if (response.ok) return await response.blob();
        } catch (e) {
+            console.error("Error al obtener Blob local de URL blob/data:", e);
+        }
+        return null;
+    }
+
+    if (url.includes('drive.google.com') || url.includes('docs.google.com')) {
+        try {
+            const response = await fetch(url);
+            if (response.ok) return await response.blob();
+        } catch {
            console.warn("No se pudo obtener el Blob directo de Drive debido a restricciones CORS.");
        }
        return null;
@@ -85,7 +95,7 @@ export async function fetchImageAsBlob(url) {
        try {
            const response = await fetch(url, { mode: 'cors' });
            return await response.blob();
-        } catch (err) {
+        } catch {
            return null;
        }
    }
@@ -122,7 +132,7 @@ export async function renderQRCode(employeeId, canvasElement) {
    document.body.appendChild(tmp);

    new QRCodeLib(tmp, {
-        text: `http://localhost:5173/employee/${cleanId}`,
+        text: `http://localhost:5173/empleado-id/${cleanId}`,
        width: 55,
        height: 55,
        colorDark: '#000000',
@@ -211,7 +221,7 @@ export async function downloadIDCards(config) {
    `;

    if (photoSrc) {
-        photoTagHtml = `<img src="${photoSrc}" crossorigin="anonymous" style="width:100%; height:100%; object-fit:cover; display:block;" />`;
+        photoTagHtml = `<div style="width:100%; height:100%; background-image:url('${photoSrc}'); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>`;
    }

    vFront.innerHTML = `
@@ -303,8 +313,9 @@ export async function downloadBulkIDCards({ employees, baseUrl, onStateChange, o
    for (let i = 0; i < employees.length; i++) {
        const emp = employees[i];
        const currentClient = emp.selectedClient || 'Generico';
-        const cleanName = emp.name.trim().replace(/\s+/g, '') || `Empleado_${i + 1}`;
-        const folderName = `${cleanName}_${currentClient}`;
+        const sanitizedEmpName = (emp.name || '').trim().replace(/[\\/:*?"<>|]/g, '-') || `Empleado_${i + 1}`;
+        const sanitizedClientName = String(currentClient).trim().replace(/[\\/:*?"<>|]/g, '-');
+        const folderName = `${sanitizedEmpName} - ${sanitizedClientName}`;

        const strictCleanId = String(emp.employeeId || '').replace(/[-\s]/g, '');

@@ -319,7 +330,7 @@ export async function downloadBulkIDCards({ employees, baseUrl, onStateChange, o
                if (blobData) {
                    validatedPhotoUrl = URL.createObjectURL(blobData);
                    if (onProcessEmployeePhoto) {
-                        await onProcessEmployeePhoto(strictCleanId, blobData);
+                        await onProcessEmployeePhoto(strictCleanId, blobData, emp.selectedClient || '');
                    }
                }
            } catch (err) {
@@ -345,7 +356,7 @@ export async function downloadBulkIDCards({ employees, baseUrl, onStateChange, o
        `;

        if (validatedPhotoUrl) {
-            photoTagHtml = `<img src="${validatedPhotoUrl}" crossorigin="anonymous" style="width:100%; height:100%; object-fit:cover; display:block;" />`;
+            photoTagHtml = `<div style="width:100%; height:100%; background-image:url('${validatedPhotoUrl}'); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>`;
        }

        vFront.innerHTML = `
@@ -393,11 +404,11 @@ export async function downloadBulkIDCards({ employees, baseUrl, onStateChange, o
        // Capturas gráficas del ZIP
        const frontCanvas = await html2canvasLib(vFront, renderOpts);
        const frontData = frontCanvas.toDataURL('image/png').split(',')[1];
-        zip.file(`${folderName}/${cleanName}_${currentClient}_Frente.png`, frontData, { base64: true });
+        zip.file(`${folderName}/Frente.png`, frontData, { base64: true });

        const backCanvas = await html2canvasLib(vBack, renderOpts);
        const backData = backCanvas.toDataURL('image/png').split(',')[1];
-        zip.file(`${folderName}/${cleanName}_${currentClient}_Reverso.png`, backData, { base64: true });
+        zip.file(`${folderName}/Reverso.png`, backData, { base64: true });

        if (validatedPhotoUrl && validatedPhotoUrl.startsWith('blob:')) {
            URL.revokeObjectURL(validatedPhotoUrl);
@@ -1,21 +1,97 @@
 import { supabase } from "./supabase";

-export async function uploadEmployeePhoto(employeeNumber, file) {
+/**
+ * Registra el cliente/proyecto de un carnet descargado en la tabla
+ * "carnet_empleados_creados_glm".
+ *
+ * @param {string} employeeNumber   - Número de cédula limpio (sin guiones/espacios)
+ * @param {string} clienteProyecto  - Nombre del cliente/proyecto seleccionado
+ * @returns {Promise<void>}
+ */
+export async function saveClienteProyecto(employeeNumber, clienteProyecto) {
+    const cleanCedula = String(employeeNumber || '').replace(/[-\s]/g, '');
+    const valorCliente = clienteProyecto || 'Generico';

-    const extension = file.name.split(".").pop();
+    console.log(`[Supabase] → saveClienteProyecto llamada con: cedula="${cleanCedula}", cliente_proyecto="${valorCliente}"`);

-    const fileName = `${employeeNumber}.${extension}`;
+    if (!cleanCedula) {
+        console.warn('[Supabase] saveClienteProyecto abortada: cédula vacía.');
+        return;
+    }
+
+    // CORRECCIÓN: El objeto debe llevar la cédula para que upsert funcione por conflicto
+    const { data, error } = await supabase
+        .from('carnet_empleados_creados_glm')
+        .upsert(
+            {
+                cedula: cleanCedula,
+                cliente_proyecto: valorCliente
+            },
+            { onConflict: 'cedula' }
+        )
+        .select();
+
+    if (error) {
+        console.error(`[Supabase] ❌ Error guardando cliente_proyecto para cédula ${cleanCedula}:`, error);
+    } else {
+        console.log(`[Supabase] ✅ Guardado exitoso carnet_empleados_creados_glm:`, data);
+    }
+}
+
+/**
+ * Sube la foto de un empleado al bucket "foto_empleados".
+ *
+ * El nombre del archivo sigue el patrón:
+ *   <cedula>_<cliente>.jpg          — primera foto
+ *   <cedula>_<cliente>1.jpg         — segunda foto del mismo empleado+cliente
+ *   <cedula>_<cliente>2.jpg         — tercera, etc.
+ *
+ * @param {string} employeeNumber  - Número de cédula limpio (sin guiones/espacios)
+ * @param {File}   file            - Archivo de imagen a subir
+ * @param {string} [clientKey='']  - Nombre del cliente/proyecto (p.ej. "claro", "nestle")
+ * @returns {Promise<string>}      - URL pública del archivo subido
+ */
+export async function uploadEmployeePhoto(employeeNumber, file, clientKey = '') {
+    const extension = file.name.split('.').pop() || 'jpg';
+
+    // Normalizar el nombre del cliente: minúsculas, sin espacios ni caracteres especiales
+    const safeClient = clientKey
+        ? '_' + clientKey.toLowerCase().replace(/[^a-z0-9]/g, '')
+        : '';
+
+    const baseName = `${employeeNumber}${safeClient}`;
+
+    // Buscar archivos existentes con el mismo prefijo para elegir el sufijo correcto
+    const { data: existingFiles } = await supabase.storage
+        .from('foto_empleados')
+        .list('', { search: baseName });
+
+    // Filtrar exactamente los archivos que tengan el mismo baseName base
+    const pattern = new RegExp(`^${baseName}(\\d*)\\.${extension}$`);
+    const matches = (existingFiles || []).filter(f => pattern.test(f.name));
+
+    let fileName;
+    if (matches.length === 0) {
+        // No existe ninguno: usar el nombre base sin sufijo numérico
+        fileName = `${baseName}.${extension}`;
+    } else {
+        // Extraer los sufijos numéricos usados y elegir el siguiente
+        const usedSuffixes = matches.map(f => {
+            const m = f.name.match(pattern);
+            return m ? parseInt(m[1] || '0', 10) : 0;
+        });
+        const nextSuffix = Math.max(...usedSuffixes) + 1;
+        fileName = `${baseName}${nextSuffix}.${extension}`;
+    }

    const { error } = await supabase.storage
-        .from("foto_empleados")
-        .upload(fileName, file, {
-            upsert: false
-        });
+        .from('foto_empleados')
+        .upload(fileName, file, { upsert: false });

    if (error) throw error;

    const { data } = supabase.storage
-        .from("foto_empleados")
+        .from('foto_empleados')
        .getPublicUrl(fileName);

    return data.publicUrl;
@@ -1,6 +1,7 @@
 import { createClient } from "@supabase/supabase-js";

 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
-const supabaseKey = import.meta.env.VITE_SUPABASE_SERVICE_ROLE_KEY;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

-export const supabase = createClient(supabaseUrl, supabaseKey);
+// Single client for auth (uses anon key)
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);
@@ -4,5 +4,5 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
-  base: '/employee'
+  base: '/empleado-id/'
 })
Author	SHA1	Message	Date
EidanThen	95312c9621	feat: implement Supabase OAuth authentication with domain-restricted login and protected routes	2026-07-10 17:46:15 -04:00
EidanThen	dc2fa3e681	feat: update base path, and add image processing utility scripts	2026-07-10 11:58:52 -04:00
EidanThen	d355feb243	Merge pull request 'feat: implementacion de flujo n8n en el formulario principal' (#4 ) from feature/n8n-integration into dev Reviewed-on: #4	2026-07-10 15:06:46 +00:00
EidanThen	f0ef20c41f	Merge pull request 'feat: allow duplicated employee images in Supabase storage' (#3 ) from feature/n8n-integration into dev Reviewed-on: #3	2026-07-10 15:01:30 +00:00
EidanThen	dfa0d63061	feat: implementacion de flujo n8n en el formulario principal	2026-07-07 16:55:11 -04:00
EidanThen	f2e914dbfa	feat: guardar conteo de carnet creados en Supabase	2026-07-07 12:24:30 -04:00
EidanThen	cb0636c957	feat: allow duplicated employee images in Supabase storage	2026-07-06 22:05:31 -04:00
EidanThen	c252573824	Merge pull request 'feat: implement ID card generator with bulk upload, Excel parsing, Supabase and n8n integration' (#1 ) from feature/n8n-integration into dev Reviewed-on: #1	2026-07-07 00:02:28 +00:00
EidanThen	f172d62ed4	feat: implement ID card generator with bulk upload, Excel parsing, Supabase and n8n integration	2026-07-06 19:53:50 -04:00