first commit

2026-07-13 17:59:12 +05:30
commit f07c46a9a6
19 changed files with 7345 additions and 0 deletions
@@ -0,0 +1,9 @@
+# GEMINI_API_KEY: Required for Gemini AI API calls.
+# AI Studio automatically injects this at runtime from user secrets.
+# Users configure this via the Secrets panel in the AI Studio UI.
+GEMINI_API_KEY="MY_GEMINI_API_KEY"
+
+# APP_URL: The URL where this applet is hosted.
+# AI Studio automatically injects this at runtime with the Cloud Run service URL.
+# Used for self-referential links, OAuth callbacks, and API endpoints.
+APP_URL="MY_APP_URL"
@@ -0,0 +1,8 @@
+node_modules/
+build/
+dist/
+coverage/
+.DS_Store
+*.log
+.env*
+!.env.example
@@ -0,0 +1,20 @@
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://ai.google.dev/static/site-assets/images/share-ais-513315318.png" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/483f53b4-d69a-4b46-bbb7-6fd7de9d4aaa
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CavinKare ID CARD Maker</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+
@@ -0,0 +1,6 @@
+{
+  "name": "Corporate ID Card Generator",
+  "description": "Professional multi-region corporate ID card builder with batch processing, CSV import, and instant digital card export.",
+  "requestFramePermissions": [],
+  "majorCapabilities": ["MAJOR_CAPABILITY_SERVER_SIDE_GEMINI_API"]
+}
@@ -0,0 +1,46 @@
+{
+  "name": "react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently \"node server.cjs\" \"vite --port=5678 --host=0.0.0.0\"",
+    "start": "node server.cjs",
+    "build": "vite build",
+    "preview": "vite preview",
+    "clean": "rm -rf dist",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@google/genai": "^2.4.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@vitejs/plugin-react": "^5.0.4",
+    "cors": "^2.8.6",
+    "dotenv": "^17.4.2",
+    "express": "^4.22.2",
+    "file-saver": "^2.0.5",
+    "html-to-image": "^1.11.13",
+    "html2canvas": "^1.4.1",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.546.0",
+    "motion": "^12.23.24",
+    "papaparse": "^5.5.4",
+    "pg": "^8.22.0",
+    "react": "^19.0.1",
+    "react-dom": "^19.0.1",
+    "vite": "^6.2.3"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/file-saver": "^2.0.7",
+    "@types/node": "^22.14.0",
+    "@types/papaparse": "^5.5.2",
+    "autoprefixer": "^10.4.21",
+    "concurrently": "^10.0.3",
+    "esbuild": "^0.25.0",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.21.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.3"
+  }
+}
@@ -0,0 +1,410 @@
+const express = require('express');
+const { Pool } = require('pg');
+const cors = require('cors');
+const path = require('path');
+require('dotenv').config();
+
+const app = express();
+const port = process.env.PORT || 3001;
+
+app.use(cors());
+app.use(express.json({ limit: '10mb' })); // support large payloads for base64 background images
+
+// Database connection configuration
+const pool = new Pool({
+  connectionString: process.env.DATABASE_URL,
+  ssl: {
+    rejectUnauthorized: false // Required for Neon Postgres
+  }
+});
+
+// Default regions data
+const DEFAULT_REGIONS = [
+  {
+    id: "assam",
+    name: "Assam",
+    address: "INDUSTRIES GROWTH CENTRE, MATIA (MORNAI)\nOPPOSITE TO SAINIK SCHOOL, GOALPARA, ASSAM - 783 101.",
+    phone: "",
+  },
+  {
+    id: "bhiwandi",
+    name: "Bhiwandi Plant",
+    address: "S.NO. 31/B / 32 A, DHAMANGAON OLD AGRA ROAD,\nTAL. - BHIWANDI, DISTT. - THANE, MUMBAI, MAHARASHTRA - 421 302.",
+    phone: "",
+  },
+  {
+    id: "erode",
+    name: "Erode",
+    address: "SF NO. 532, BHAVANI TO ANTHIYUR MAIN ROAD, MYLAMPADI,\nKANNADIPALAYAM POST, BHAVANI TK, ERODE DT - 638 314.",
+    phone: "04256 - 238 202 / 302 / 402",
+  },
+  {
+    id: "haridwar",
+    name: "Haridwar",
+    address: "PLOT NO.16 & 17,SECTOR-4, INTEGRATED INDUSTRIAL ESTATE,\nSIDCUL,RANIPUR, HARIDWAR-249403",
+    phone: "01334-239246",
+  },
+  {
+    id: "kanchipuram",
+    name: "Kanchipuram",
+    address: "NO. 18, ARYAPERUMBAKKAM VILLAGE, KANCHIPURAM - 631 502.",
+    phone: "2729 4580/81",
+  },
+  {
+    id: "pondy",
+    name: "Pondy",
+    address: "R.S. NO. 81/4, KORKADU VILLAGE, NETTAPAKKAM COMMUNE,\nPONDICHERRY -605 110.",
+    phone: "0413 - 2665146",
+  },
+  {
+    id: "ro-east",
+    name: "RO East",
+    address: "14TH FLOOR, P.S. SRIJAN TECH PARK, DN - 52, DN BLOCK, SECTOR - 5,\nSALT LAKE CITY, KOLKATA - 700091",
+    phone: "033 - 40669540",
+  },
+  {
+    id: "ro-north",
+    name: "RO North",
+    address: "D-12/ 2ND FLOOR, KAUSHAMBI, GHAZIABAD - 201010\nUTTAR PRADESH",
+    phone: "0120-4335396",
+  },
+  {
+    id: "ro-south",
+    name: "RO South",
+    address: "NO. 12, POONAMALLEE ROAD, EKKATTUTHANGAL,\nCHENNAI - 6OO 032.",
+    phone: "044 - 2225 1011 / 12",
+  },
+  {
+    id: "ro-west",
+    name: "RO West",
+    address: "504-A, RAHEJA PLAZA PREMISES CO-OP SOCIETY LTD.,\nL.B.S. MARG, GHATKOPAR (WEST), MUMBAI – 400086",
+    phone: "",
+  },
+];
+
+// Initialize Database Tables
+async function initDb() {
+  let client;
+  try {
+    console.log("Connecting to Neon PostgreSQL database...");
+    client = await pool.connect();
+    console.log("Initializing database tables...");
+    await client.query("BEGIN");
+
+    // 1. App Users Table
+    await client.query(`
+      CREATE TABLE IF NOT EXISTS app_users (
+        username VARCHAR(255) PRIMARY KEY,
+        password VARCHAR(255) NOT NULL,
+        role VARCHAR(50) NOT NULL
+      )
+    `);
+
+    // 2. Regions Table
+    await client.query(`
+      CREATE TABLE IF NOT EXISTS regions (
+        id VARCHAR(255) PRIMARY KEY,
+        name VARCHAR(255) NOT NULL,
+        address TEXT NOT NULL,
+        phone VARCHAR(255)
+      )
+    `);
+
+    // 3. Stats Table
+    await client.query(`
+      CREATE TABLE IF NOT EXISTS stats (
+        unit_id VARCHAR(255) PRIMARY KEY,
+        count INT NOT NULL DEFAULT 0
+      )
+    `);
+
+    // 4. Settings Table
+    await client.query(`
+      CREATE TABLE IF NOT EXISTS settings (
+        key VARCHAR(255) PRIMARY KEY,
+        value TEXT NOT NULL
+      )
+    `);
+
+    // Seed default users if empty
+    const usersCountRes = await client.query("SELECT COUNT(*) FROM app_users");
+    if (parseInt(usersCountRes.rows[0].count) === 0) {
+      console.log("Seeding default users...");
+      await client.query(`
+        INSERT INTO app_users (username, password, role) VALUES 
+        ('user', 'user', 'user'),
+        ('admin', 'admin', 'admin')
+      `);
+    }
+
+    // Seed default regions if empty
+    const regionsCountRes = await client.query("SELECT COUNT(*) FROM regions");
+    if (parseInt(regionsCountRes.rows[0].count) === 0) {
+      console.log("Seeding default regions...");
+      for (const region of DEFAULT_REGIONS) {
+        await client.query(
+          "INSERT INTO regions (id, name, address, phone) VALUES ($1, $2, $3, $4)",
+          [region.id, region.name, region.address, region.phone]
+        );
+      }
+    }
+
+    await client.query("COMMIT");
+    console.log("Database initialized successfully.");
+  } catch (err) {
+    if (client) {
+      try {
+        await client.query("ROLLBACK");
+      } catch (rollbackErr) {
+        console.error("Rollback failed:", rollbackErr);
+      }
+    }
+    console.error("Error initializing database:", err);
+  } finally {
+    if (client) client.release();
+  }
+}
+
+// REST API Endpoints
+
+// Authentication API
+app.post('/api/auth/login', async (req, res) => {
+  const { username, password } = req.body;
+  if (!username || !password) {
+    return res.status(400).json({ error: "Username and password are required" });
+  }
+
+  try {
+    const result = await pool.query(
+      "SELECT role FROM app_users WHERE username = $1 AND password = $2",
+      [username, password]
+    );
+
+    if (result.rows.length > 0) {
+      res.json({ success: true, role: result.rows[0].role });
+    } else {
+      res.status(401).json({ error: "Invalid username or password" });
+    }
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "Database error during authentication" });
+  }
+});
+
+app.post('/api/auth/reset', async (req, res) => {
+  const { username, password } = req.body;
+  if (!username || !password) {
+    return res.status(400).json({ error: "Username and password are required" });
+  }
+
+  try {
+    const result = await pool.query(
+      "UPDATE app_users SET password = $2 WHERE username = $1 RETURNING role",
+      [username, password]
+    );
+    if (result.rows.length > 0) {
+      res.json({ success: true });
+    } else {
+      res.status(404).json({ error: "Username not found" });
+    }
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "Database error during password reset" });
+  }
+});
+
+// Users Management APIs
+app.get('/api/users', async (req, res) => {
+  try {
+    const result = await pool.query("SELECT username, role, password FROM app_users");
+    const usersMap = {};
+    result.rows.forEach(row => {
+      usersMap[row.username] = { password: row.password, role: row.role };
+    });
+    res.json(usersMap);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "Failed to fetch users" });
+  }
+});
+
+app.post('/api/users', async (req, res) => {
+  const { username, password, role } = req.body;
+  if (!username || !password || !role) {
+    return res.status(400).json({ error: "Missing fields" });
+  }
+
+  try {
+    await pool.query(
+      "INSERT INTO app_users (username, password, role) VALUES ($1, $2, $3)",
+      [username, password, role]
+    );
+    res.json({ success: true });
+  } catch (err) {
+    console.error(err);
+    if (err.code === '23505') {
+      res.status(400).json({ error: "Username already exists" });
+    } else {
+      res.status(500).json({ error: "Failed to create user" });
+    }
+  }
+});
+
+app.put('/api/users/:username', async (req, res) => {
+  const { username } = req.params;
+  const { password, role } = req.body;
+  if (!password || !role) {
+    return res.status(400).json({ error: "Missing fields" });
+  }
+
+  try {
+    const result = await pool.query(
+      "UPDATE app_users SET password = $1, role = $2 WHERE username = $3",
+      [password, role, username]
+    );
+    if (result.rowCount > 0) {
+      res.json({ success: true });
+    } else {
+      res.status(404).json({ error: "User not found" });
+    }
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "Failed to update user" });
+  }
+});
+
+app.delete('/api/users/:username', async (req, res) => {
+  const { username } = req.params;
+  try {
+    const result = await pool.query("DELETE FROM app_users WHERE username = $1", [username]);
+    if (result.rowCount > 0) {
+      res.json({ success: true });
+    } else {
+      res.status(404).json({ error: "User not found" });
+    }
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "Failed to delete user" });
+  }
+});
+
+// Regions Management APIs
+app.get('/api/regions', async (req, res) => {
+  try {
+    const result = await pool.query("SELECT id, name, address, phone FROM regions ORDER BY name ASC");
+    res.json(result.rows);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "Failed to fetch regions" });
+  }
+});
+
+app.post('/api/regions', async (req, res) => {
+  const regions = req.body;
+  if (!Array.isArray(regions)) {
+    return res.status(400).json({ error: "Invalid payload, expected array" });
+  }
+
+  const client = await pool.connect();
+  try {
+    await client.query("BEGIN");
+    await client.query("DELETE FROM regions");
+    for (const region of regions) {
+      await client.query(
+        "INSERT INTO regions (id, name, address, phone) VALUES ($1, $2, $3, $4)",
+        [region.id, region.name, region.address, region.phone || '']
+      );
+    }
+    await client.query("COMMIT");
+    res.json({ success: true });
+  } catch (err) {
+    await client.query("ROLLBACK");
+    console.error(err);
+    res.status(500).json({ error: "Failed to save regions" });
+  } finally {
+    client.release();
+  }
+});
+
+// Stats Logging APIs
+app.get('/api/stats', async (req, res) => {
+  try {
+    const result = await pool.query("SELECT unit_id, count FROM stats");
+    const statsMap = {};
+    result.rows.forEach(row => {
+      statsMap[row.unit_id] = row.count;
+    });
+    res.json(statsMap);
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "Failed to fetch stats" });
+  }
+});
+
+app.post('/api/stats', async (req, res) => {
+  const { unitId, count } = req.body;
+  if (!unitId || count === undefined) {
+    return res.status(400).json({ error: "Missing unitId or count" });
+  }
+
+  try {
+    await pool.query(
+      `INSERT INTO stats (unit_id, count) VALUES ($1, $2)
+       ON CONFLICT (unit_id) DO UPDATE SET count = stats.count + $2`,
+      [unitId, count]
+    );
+    res.json({ success: true });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "Failed to log stats" });
+  }
+});
+
+// Settings APIs
+app.get('/api/settings/:key', async (req, res) => {
+  const { key } = req.params;
+  try {
+    const result = await pool.query("SELECT value FROM settings WHERE key = $1", [key]);
+    if (result.rows.length > 0) {
+      res.json({ value: result.rows[0].value });
+    } else {
+      res.json({ value: null });
+    }
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "Failed to fetch settings" });
+  }
+});
+
+app.post('/api/settings', async (req, res) => {
+  const { key, value } = req.body;
+  if (!key || value === undefined) {
+    return res.status(400).json({ error: "Missing key or value" });
+  }
+
+  try {
+    await pool.query(
+      `INSERT INTO settings (key, value) VALUES ($1, $2)
+       ON CONFLICT (key) DO UPDATE SET value = $2`,
+      [key, value]
+    );
+    res.json({ success: true });
+  } catch (err) {
+    console.error(err);
+    res.status(500).json({ error: "Failed to update settings" });
+  }
+});
+
+// Serve Static Files in Production
+app.use(express.static(path.join(__dirname, 'dist')));
+
+// Fallback for Single Page Application routing (Vite React app)
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
+});
+
+// Start Server and Init Database
+app.listen(port, async () => {
+  console.log(`Server is running on port ${port}`);
+  await initDb();
+});
@@ -0,0 +1,549 @@
+import React, { useState, useEffect } from "react";
+import { Region } from "../types";
+import {
+  LogOut,
+  Save,
+  Image as ImageIcon,
+  BarChart3,
+  Settings,
+  Plus,
+  Trash2,
+  Users,
+  Edit2,
+} from "lucide-react";
+
+interface AdminDashboardProps {
+  onLogout: () => void;
+  regions: Region[];
+  setRegions: React.Dispatch<React.SetStateAction<Region[]>>;
+}
+
+export function AdminDashboard({
+  onLogout,
+  regions,
+  setRegions,
+}: AdminDashboardProps) {
+  const [stats, setStats] = useState<Record<string, number>>({});
+  const [globalBg, setGlobalBg] = useState<string | null>(null);
+  const [editingRegions, setEditingRegions] = useState<Region[]>(regions);
+  const [appUsers, setAppUsers] = useState<Record<string, any>>({});
+  const [newUsername, setNewUsername] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [newUserRole, setNewUserRole] = useState<"user" | "admin">("user");
+  const [editingUser, setEditingUser] = useState<string | null>(null);
+
+  useEffect(() => {
+    // 1. Fetch Stats
+    fetch("/api/stats")
+      .then(res => res.json())
+      .then(data => setStats(data))
+      .catch(err => console.error("Error fetching stats:", err));
+
+    // 2. Fetch Global Background Setting
+    fetch("/api/settings/globalBgImage")
+      .then(res => res.json())
+      .then(data => {
+        if (data.value) setGlobalBg(data.value);
+      })
+      .catch(err => console.error("Error fetching global bg setting:", err));
+
+    // 3. Fetch Users
+    fetch("/api/users")
+      .then(res => res.json())
+      .then(data => setAppUsers(data))
+      .catch(err => console.error("Error fetching users:", err));
+  }, []);
+
+  const handleSaveUser = async () => {
+    if (!newUsername || !newPassword) {
+      alert("Please provide both username and password");
+      return;
+    }
+    if (appUsers[newUsername] && editingUser !== newUsername) {
+      alert("Username already exists");
+      return;
+    }
+
+    try {
+      if (editingUser) {
+        if (editingUser !== newUsername) {
+          // Username changed: delete old user and insert new
+          const delRes = await fetch(`/api/users/${editingUser}`, { method: "DELETE" });
+          if (!delRes.ok) throw new Error("Failed to delete old username");
+
+          const addRes = await fetch("/api/users", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ username: newUsername, password: newPassword, role: newUserRole }),
+          });
+          if (!addRes.ok) throw new Error("Failed to create new username");
+        } else {
+          // Just update password/role
+          const putRes = await fetch(`/api/users/${newUsername}`, {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ password: newPassword, role: newUserRole }),
+          });
+          if (!putRes.ok) throw new Error("Failed to update user details");
+        }
+      } else {
+        // Create new user
+        const addRes = await fetch("/api/users", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ username: newUsername, password: newPassword, role: newUserRole }),
+        });
+        if (!addRes.ok) {
+          const errData = await addRes.json();
+          throw new Error(errData.error || "Failed to create user");
+        }
+      }
+
+      // Re-fetch users list to sync UI
+      const usersRes = await fetch("/api/users");
+      const updatedUsers = await usersRes.json();
+      setAppUsers(updatedUsers);
+
+      setNewUsername("");
+      setNewPassword("");
+      setNewUserRole("user");
+      setEditingUser(null);
+      alert(editingUser ? "User updated successfully!" : "User created successfully!");
+    } catch (err: any) {
+      alert(err.message || "An error occurred while saving user.");
+    }
+  };
+
+  const handleEditUser = (username: string) => {
+    setNewUsername(username);
+    setNewPassword(appUsers[username]?.password || "");
+    setNewUserRole(appUsers[username]?.role || "user");
+    setEditingUser(username);
+  };
+
+  const handleDeleteUser = async (username: string) => {
+    if (appUsers[username]?.role === "admin") {
+      alert("Administrator users cannot be deleted.");
+      return;
+    }
+    if (confirm(`Are you sure you want to delete user '${username}'?`)) {
+      try {
+        const response = await fetch(`/api/users/${username}`, { method: "DELETE" });
+        if (!response.ok) throw new Error("Failed to delete user");
+
+        // Sync UI
+        const usersRes = await fetch("/api/users");
+        const updatedUsers = await usersRes.json();
+        setAppUsers(updatedUsers);
+
+        if (editingUser === username) {
+          setNewUsername("");
+          setNewPassword("");
+          setNewUserRole("user");
+          setEditingUser(null);
+        }
+      } catch (err: any) {
+        alert(err.message || "An error occurred while deleting user.");
+      }
+    }
+  };
+
+  const handleGlobalBgUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const reader = new FileReader();
+      reader.onload = async (event) => {
+        const result = event.target?.result as string;
+        try {
+          const response = await fetch("/api/settings", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ key: "globalBgImage", value: result }),
+          });
+          if (!response.ok) throw new Error("Failed to upload background setting");
+          setGlobalBg(result);
+          alert("Global background image updated!");
+        } catch (err: any) {
+          alert(err.message || "Failed to update global background.");
+        }
+      };
+      reader.readAsDataURL(e.target.files[0]);
+    }
+  };
+
+  const saveRegions = async () => {
+    try {
+      const response = await fetch("/api/regions", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(editingRegions),
+      });
+      if (!response.ok) throw new Error("Failed to save regions");
+      setRegions(editingRegions);
+      alert("Regions updated successfully!");
+    } catch (err: any) {
+      alert(err.message || "Failed to update regions.");
+    }
+  };
+
+  const handleAddRegion = () => {
+    const newRegion: Region = {
+      id: crypto.randomUUID(),
+      name: "New Unit",
+      address: "",
+      phone: "",
+    };
+    setEditingRegions((prev) => [...prev, newRegion]);
+  };
+
+  const handleRegionChange = (
+    id: string,
+    field: keyof Region,
+    value: string,
+  ) => {
+    setEditingRegions((prev) =>
+      prev.map((r) => (r.id === id ? { ...r, [field]: value } : r)),
+    );
+  };
+
+  const handleRemoveRegion = (id: string) => {
+    if (confirm("Are you sure you want to remove this unit?")) {
+      setEditingRegions((prev) => prev.filter((r) => r.id !== id));
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-100 p-6 font-sans">
+      <div className="max-w-6xl mx-auto space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between bg-white p-6 rounded-xl shadow-sm border border-slate-200">
+          <div className="flex items-center gap-3">
+            <div className="w-12 h-12 bg-blue-600 text-white rounded-lg flex items-center justify-center">
+              <Settings className="w-6 h-6" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-slate-900">
+                Admin Dashboard
+              </h1>
+              <p className="text-sm text-slate-500">
+                Manage ID Card configurations and view stats
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onLogout}
+            className="flex items-center gap-2 px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg font-semibold transition-colors"
+          >
+            <LogOut className="w-4 h-4" /> Logout
+          </button>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {/* Stats Column */}
+          <div className="md:col-span-1 space-y-6">
+            <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
+              <div className="flex items-center gap-2 mb-4 text-blue-600">
+                <BarChart3 className="w-5 h-5" />
+                <h2 className="text-lg font-bold text-slate-900">
+                  Creation Stats
+                </h2>
+              </div>
+
+              <div className="space-y-3">
+                {editingRegions.map((region) => (
+                  <div
+                    key={region.id}
+                    className="flex justify-between items-center p-3 bg-slate-50 rounded-lg border border-slate-100"
+                  >
+                    <span className="font-semibold text-slate-700">
+                      {region.name}
+                    </span>
+                    <span className="bg-blue-100 text-blue-800 py-1 px-3 rounded-full text-xs font-bold">
+                      {stats[region.id] || 0} cards
+                    </span>
+                  </div>
+                ))}
+
+                <div className="mt-4 pt-4 border-t border-slate-200 flex justify-between items-center px-1">
+                  <span className="font-bold text-slate-900">
+                    Total Cards Created
+                  </span>
+                  <span className="font-black text-blue-600 text-xl">
+                    {Object.values(stats).reduce(
+                      (a: number, b: number) => a + b,
+                      0,
+                    )}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Global Background */}
+            <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
+              <div className="flex items-center gap-2 mb-4 text-blue-600">
+                <ImageIcon className="w-5 h-5" />
+                <h2 className="text-lg font-bold text-slate-900">
+                  Global Background
+                </h2>
+              </div>
+              <p className="text-xs text-slate-500 mb-4">
+                Set a default background for all users.
+              </p>
+
+              {globalBg && (
+                <div className="mb-4 rounded-lg overflow-hidden border border-slate-200 h-32 relative">
+                  <img
+                    src={globalBg}
+                    alt="Global Bg"
+                    className="w-full h-full object-cover"
+                  />
+                  <button
+                    onClick={async () => {
+                      try {
+                        const response = await fetch("/api/settings", {
+                          method: "POST",
+                          headers: { "Content-Type": "application/json" },
+                          body: JSON.stringify({ key: "globalBgImage", value: "" }),
+                        });
+                        if (!response.ok) throw new Error("Failed to clear background setting");
+                        setGlobalBg(null);
+                      } catch (err: any) {
+                        alert(err.message || "Failed to clear background.");
+                      }
+                    }}
+                    className="absolute top-2 right-2 bg-white text-red-500 p-1 rounded shadow text-xs font-bold"
+                  >
+                    Clear
+                  </button>
+                </div>
+              )}
+
+              <label className="flex items-center justify-center gap-2 w-full p-3 border-2 border-dashed border-slate-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 cursor-pointer text-sm font-semibold text-slate-600 transition-colors">
+                <ImageIcon className="w-4 h-4" />
+                {globalBg ? "Replace Image" : "Upload Image"}
+                <input
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleGlobalBgUpload}
+                />
+              </label>
+            </div>
+          </div>
+
+          {/* Units / Regions Manager */}
+          <div className="md:col-span-2 bg-white p-6 rounded-xl shadow-sm border border-slate-200">
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h2 className="text-lg font-bold text-slate-900">
+                  Manage Units / Regions
+                </h2>
+                <p className="text-sm text-slate-500">
+                  Update address and contact info for each plant
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <button
+                  onClick={handleAddRegion}
+                  className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-green-700 transition-colors shadow-sm"
+                >
+                  <Plus className="w-4 h-4" /> Add Unit
+                </button>
+                <button
+                  onClick={saveRegions}
+                  className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-blue-700 transition-colors shadow-sm"
+                >
+                  <Save className="w-4 h-4" /> Save Changes
+                </button>
+              </div>
+            </div>
+
+            <div className="space-y-4 max-h-[600px] overflow-y-auto pr-2">
+              {editingRegions.map((region) => (
+                <div
+                  key={region.id}
+                  className="p-4 border border-slate-200 rounded-lg bg-slate-50 space-y-3"
+                >
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <div className="flex justify-between items-center mb-1">
+                        <label className="block text-xs font-bold text-slate-500 uppercase">
+                          Unit Name
+                        </label>
+                        <button
+                          onClick={() => handleRemoveRegion(region.id)}
+                          className="text-red-500 hover:text-red-700 bg-red-50 hover:bg-red-100 p-1 rounded transition-colors"
+                          title="Remove Unit"
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </button>
+                      </div>
+                      <input
+                        type="text"
+                        value={region.name}
+                        onChange={(e) =>
+                          handleRegionChange(region.id, "name", e.target.value)
+                        }
+                        className="w-full border border-slate-300 rounded-md p-2 text-sm focus:ring-blue-500 outline-none font-semibold"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-bold text-slate-500 uppercase mb-1">
+                        Phone
+                      </label>
+                      <input
+                        type="text"
+                        value={region.phone || ""}
+                        onChange={(e) =>
+                          handleRegionChange(region.id, "phone", e.target.value)
+                        }
+                        className="w-full border border-slate-300 rounded-md p-2 text-sm focus:ring-blue-500 outline-none"
+                        placeholder="e.g. 04256 - 238 202"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <label className="block text-xs font-bold text-slate-500 uppercase mb-1">
+                      Address
+                    </label>
+                    <textarea
+                      value={region.address}
+                      onChange={(e) =>
+                        handleRegionChange(region.id, "address", e.target.value)
+                      }
+                      className="w-full border border-slate-300 rounded-md p-2 text-sm focus:ring-blue-500 outline-none min-h-[60px]"
+                      rows={2}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* User Management */}
+          <div className="md:col-span-3 bg-white p-6 rounded-xl shadow-sm border border-slate-200">
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
+                  <Users className="w-5 h-5 text-blue-600" /> Manage Users
+                </h2>
+                <p className="text-sm text-slate-500">
+                  Create users and provide credentials for ID Card generation
+                </p>
+              </div>
+            </div>
+
+            <div className="flex flex-col md:flex-row gap-6">
+              {/* Add User Form */}
+              <div className="md:w-1/3 space-y-4 p-4 border border-slate-200 rounded-lg bg-slate-50">
+                <h3 className="font-bold text-slate-800 mb-3">{editingUser ? "Edit User" : "Add New User"}</h3>
+                <div>
+                  <label className="block text-xs font-bold text-slate-500 uppercase mb-1">
+                    Username
+                  </label>
+                  <input
+                    type="text"
+                    value={newUsername}
+                    onChange={(e) => setNewUsername(e.target.value)}
+                    className="w-full border border-slate-300 rounded-md p-2 text-sm focus:ring-blue-500 outline-none"
+                    placeholder="e.g. jdoe"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-bold text-slate-500 uppercase mb-1">
+                    Password
+                  </label>
+                  <input
+                    type="text"
+                    value={newPassword}
+                    onChange={(e) => setNewPassword(e.target.value)}
+                    className="w-full border border-slate-300 rounded-md p-2 text-sm focus:ring-blue-500 outline-none"
+                    placeholder="Enter a secure password"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-bold text-slate-500 uppercase mb-1">
+                    Role
+                  </label>
+                  <select
+                    value={newUserRole}
+                    onChange={(e) => setNewUserRole(e.target.value as "user" | "admin")}
+                    className="w-full border border-slate-300 rounded-md p-2 text-sm focus:ring-blue-500 outline-none bg-white font-medium text-slate-800"
+                  >
+                    <option value="user">User</option>
+                    <option value="admin">Admin</option>
+                  </select>
+                </div>
+                <div className="flex gap-2 mt-2">
+                  <button
+                    onClick={handleSaveUser}
+                    className="flex-1 flex items-center justify-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-green-700 transition-colors shadow-sm"
+                  >
+                    {editingUser ? <Save className="w-4 h-4" /> : <Plus className="w-4 h-4" />} 
+                    {editingUser ? "Update User" : "Create User"}
+                  </button>
+                  {editingUser && (
+                    <button
+                      onClick={() => {
+                        setEditingUser(null);
+                        setNewUsername("");
+                        setNewPassword("");
+                        setNewUserRole("user");
+                      }}
+                      className="px-4 py-2 bg-slate-200 text-slate-700 rounded-lg font-bold hover:bg-slate-300 transition-colors shadow-sm"
+                    >
+                      Cancel
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              {/* Users List */}
+              <div className="md:w-2/3 space-y-3">
+                <h3 className="font-bold text-slate-800 mb-3">
+                  Existing Users
+                </h3>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[300px] overflow-y-auto pr-2">
+                  {Object.entries(appUsers).map(
+                    ([username, data]: [string, any]) => (
+                      <div
+                        key={username}
+                        className={`flex justify-between items-center p-3 bg-white border ${editingUser === username ? 'border-blue-500 ring-1 ring-blue-500' : 'border-slate-200'} rounded-lg shadow-sm`}
+                      >
+                        <div>
+                          <div className="font-bold text-slate-900">
+                            {username}
+                          </div>
+                          <div className="text-xs text-slate-500 capitalize">
+                            Role: {data.role}
+                          </div>
+                        </div>
+                        <div className="flex gap-1">
+                          <button
+                            onClick={() => handleEditUser(username)}
+                            className="p-2 rounded transition-colors text-blue-500 hover:text-blue-700 hover:bg-blue-50"
+                            title="Edit User"
+                          >
+                            <Edit2 className="w-4 h-4" />
+                          </button>
+                          {data.role !== "admin" && (
+                            <button
+                              onClick={() => handleDeleteUser(username)}
+                              className="p-2 rounded transition-colors text-red-500 hover:text-red-700 hover:bg-red-50"
+                              title="Delete User"
+                            >
+                              <Trash2 className="w-4 h-4" />
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    ),
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from "react";
+import { Users, Lock, ArrowLeft, Eye, EyeOff } from "lucide-react";
+import cavinKareLogo from "../../assets/images/CavinKare-logo-z3dMoof1.png";
+
+interface LoginProps {
+  onLogin: (role: "user" | "admin") => void;
+}
+
+export function Login({ onLogin }: LoginProps) {
+  const [view, setView] = useState<"login" | "forgot">("login");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setSuccess("");
+
+    if (!username || !password) {
+      setError("Please fill all fields");
+      return;
+    }
+
+    if (view === "login") {
+      try {
+        const response = await fetch("/api/auth/login", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ username, password }),
+        });
+        const data = await response.json();
+        if (response.ok && data.success) {
+          onLogin(data.role);
+        } else {
+          setError(data.error || "Invalid username or password");
+        }
+      } catch (err) {
+        setError("Network error, please try again");
+      }
+    } else if (view === "forgot") {
+      try {
+        const response = await fetch("/api/auth/reset", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ username, password }),
+        });
+        const data = await response.json();
+        if (response.ok && data.success) {
+          setSuccess("Password reset successfully!");
+          setTimeout(() => setView("login"), 1500);
+        } else {
+          setError(data.error || "Username not found");
+        }
+      } catch (err) {
+        setError("Network error, please try again");
+      }
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-xl shadow-lg border border-slate-200 p-8 max-w-md w-full">
+        {view !== "login" && (
+          <button
+            onClick={() => {
+              setView("login");
+              setError("");
+              setSuccess("");
+              setShowPassword(false);
+            }}
+            className="text-slate-500 hover:text-slate-700 flex items-center gap-1 text-sm font-semibold mb-4"
+          >
+            <ArrowLeft className="w-4 h-4" /> Back to Login
+          </button>
+        )}
+
+        <div className="text-center mb-8">
+          <div className="w-16 h-16 flex items-center justify-center mx-auto mb-4">
+            <img
+              src={cavinKareLogo}
+              alt="CavinKare Logo"
+              className="w-14 h-14 object-contain"
+            />
+          </div>
+          <h1 className="text-2xl font-bold text-slate-900">
+            {view === "login" ? "Login to ID CARD Maker" : "Reset Password"}
+          </h1>
+          <p className="text-sm text-slate-500 mt-2">
+            {view === "login"
+              ? "Enter your credentials to continue"
+              : "Enter your username and a new password"}
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-bold text-slate-700 mb-1">
+              Username
+            </label>
+            <input
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="w-full border border-slate-300 rounded-md p-3 text-sm focus:ring-2 focus:ring-blue-500 outline-none"
+              placeholder="Username"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-bold text-slate-700 mb-1">
+              {view === "forgot" ? "New Password" : "Password"}
+            </label>
+            <div className="relative">
+              <input
+                type={showPassword ? "text" : "password"}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full border border-slate-300 rounded-md py-3 pl-3 pr-10 text-sm focus:ring-2 focus:ring-blue-500 outline-none"
+                placeholder="••••••••"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 focus:outline-none"
+              >
+                {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+              </button>
+            </div>
+          </div>
+
+          {error && (
+            <p className="text-red-500 text-sm font-semibold">{error}</p>
+          )}
+          {success && (
+            <p className="text-green-600 text-sm font-semibold">{success}</p>
+          )}
+
+          <button
+            type="submit"
+            className="w-full bg-blue-600 text-white font-bold py-3 rounded-md hover:bg-blue-700 transition-colors"
+          >
+            {view === "login" ? "Sign In" : "Reset Password"}
+          </button>
+        </form>
+
+        {view === "login" && (
+          <div className="mt-4 flex items-center justify-between text-sm">
+            <button
+              onClick={() => {
+                setView("forgot");
+                setError("");
+                setSuccess("");
+                setShowPassword(false);
+              }}
+              className="text-blue-600 hover:text-blue-800 font-semibold"
+            >
+              Forgot Password?
+            </button>
+          </div>
+        )}
+
+
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,11 @@
+@import "tailwindcss";
+
+/* Global Cursor Reset for Clickable Elements */
+button,
+select,
+a,
+label.cursor-pointer,
+input[type="button"],
+input[type="submit"] {
+  cursor: pointer !important;
+}
@@ -0,0 +1,10 @@
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
@@ -0,0 +1,21 @@
+export interface Region {
+  id: string;
+  name: string;
+  address: string;
+  phone: string;
+}
+
+export interface Employee {
+  id: string;
+  name: string;
+  employeeId: string;
+  unitId: string;
+  doj: string;
+  dob: string;
+  bloodGroup: string;
+  emergencyNo: string;
+  photoUrl: string | null;
+  photoScale?: number;
+  photoOffsetX?: number;
+  photoOffsetY?: number;
+}
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}
@@ -0,0 +1,28 @@
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import {defineConfig} from 'vite';
+
+export default defineConfig(() => {
+  return {
+    plugins: [react(), tailwindcss()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '.'),
+      },
+    },
+    server: {
+      proxy: {
+        '/api': {
+          target: 'http://127.0.0.1:5000',
+          changeOrigin: true,
+        },
+      },
+      // HMR is disabled in AI Studio via DISABLE_HMR env var.
+      // Do not modify—file watching is disabled to prevent flickering during agent edits.
+      hmr: process.env.DISABLE_HMR !== 'true',
+      // Disable file watching when DISABLE_HMR is true to save CPU during agent edits.
+      watch: process.env.DISABLE_HMR === 'true' ? null : {},
+    },
+  };
+});