Configure Completed is added

components/dashboard/configure/masterData.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import React, { useState } from "react";
+import { Plus, QrCode, Sparkles } from "lucide-react";
+
+export default function MasterDataPortal() {
+  const [activeTab, setActiveTab] = useState("Block / Floor / Zone");
+
+  // Sample data for the hierarchy cards
+  const blocks = ["Block 1", "Block 2", "Tower A"];
+  const floors = ["Ground", "Floor 1", "Floor 2"];
+  const zones = ["Zone N", "Zone Z1", "Zone Z2"];
+
+  return (
+    <div className=" text-slate-100 font-sans my-15">
+      {/* --- BREADCRUMB --- */}
+      <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-emerald-400 uppercase font-mono">
+        <span>APPLE ONE — HQ TOWER</span>
+        <span className="text-slate-600">•</span>
+        <span className="text-slate-500">CONFIGURE</span>
+        <span className="text-slate-600">•</span>
+        <span className="text-slate-500">MASTER DATA</span>
+      </div>
+
+      {/* --- PAGE HEADER --- */}
+      <h1 className="text-3xl font-bold text-white tracking-tight mt-1">
+        Master data
+      </h1>
+      <p className="text-sm font-medium text-slate-400 mt-2 max-w-2xl leading-relaxed">
+        Every transactional module reads from these masters — keep them complete and
+        they cascade across equipment, requests, budgets, training and reports.
+      </p>
+
+      {/* --- CATEGORY BUTTONS / TABS --- */}
+      <div className="mt-6 space-y-4">
+        {/* Row 1: Site & Location, Assets, Operations, Finance */}
+        <div className="flex flex-wrap gap-6 items-start text-xs font-semibold">
+          {/* SITE & LOCATION */}
+          <div className="flex flex-col gap-1.5">
+            <span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 font-bold">
+              SITE & LOCATION
+            </span>
+            <button
+              onClick={() => setActiveTab("Block / Floor / Zone")}
+              className={`px-3 py-1.5 rounded-lg border text-xs font-semibold transition-all ${
+                activeTab === "Block / Floor / Zone"
+                  ? "bg-[#0b2926] text-emerald-400 border-emerald-500/80 shadow-[0_0_12px_rgba(16,185,129,0.15)]"
+                  : "bg-[#0c1622] text-slate-300 border-slate-800 hover:border-slate-700"
+              }`}
+            >
+              Block / Floor / Zone
+            </button>
+          </div>
+
+          {/* ASSETS */}
+          <div className="flex flex-col gap-1.5">
+            <span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 font-bold">
+              ASSETS
+            </span>
+            <div className="flex flex-wrap gap-2">
+              {["Manufacturer", "Service Provider", "Criticality"].map((item) => (
+                <button
+                  key={item}
+                  onClick={() => setActiveTab(item)}
+                  className={`px-3 py-1.5 rounded-lg border text-xs transition-all ${
+                    activeTab === item
+                      ? "bg-[#0b2926] text-emerald-400 border-emerald-500/80"
+                      : "bg-[#0c1622] text-slate-300 border-slate-800/80 hover:bg-slate-800/50"
+                  }`}
+                >
+                  {item}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* OPERATIONS */}
+          <div className="flex flex-col gap-1.5">
+            <span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 font-bold">
+              OPERATIONS
+            </span>
+            <div className="flex flex-wrap gap-2">
+              {["Service Type", "Unit", "Store", "Partners"].map((item) => (
+                <button
+                  key={item}
+                  onClick={() => setActiveTab(item)}
+                  className={`px-3 py-1.5 rounded-lg border text-xs transition-all ${
+                    activeTab === item
+                      ? "bg-[#0b2926] text-emerald-400 border-emerald-500/80"
+                      : "bg-[#0c1622] text-slate-300 border-slate-800/80 hover:bg-slate-800/50"
+                  }`}
+                >
+                  {item}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* FINANCE */}
+          <div className="flex flex-col gap-1.5">
+            <span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 font-bold">
+              FINANCE
+            </span>
+            <div className="flex flex-wrap gap-2">
+              {["Budget Category", "Budget Type"].map((item) => (
+                <button
+                  key={item}
+                  onClick={() => setActiveTab(item)}
+                  className={`px-3 py-1.5 rounded-lg border text-xs transition-all ${
+                    activeTab === item
+                      ? "bg-[#0b2926] text-emerald-400 border-emerald-500/80"
+                      : "bg-[#0c1622] text-slate-300 border-slate-800/80 hover:bg-slate-800/50"
+                  }`}
+                >
+                  {item}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Row 2: People */}
+        <div className="flex flex-col gap-1.5">
+          <span className="text-[10px] uppercase font-mono tracking-wider text-slate-500 font-bold">
+            PEOPLE
+          </span>
+          <div>
+            <button
+              onClick={() => setActiveTab("Course")}
+              className={`px-3 py-1.5 rounded-lg border text-xs font-semibold transition-all ${
+                activeTab === "Course"
+                  ? "bg-[#0b2926] text-emerald-400 border-emerald-500/80"
+                  : "bg-[#0c1622] text-slate-300 border-slate-800/80 hover:bg-slate-800/50"
+              }`}
+            >
+              Course
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* --- INFO BANNER --- */}
+      <div className="mt-6 bg-[#081524] border border-teal-800/50 rounded-xl p-4 text-xs text-slate-300 leading-relaxed">
+        <span className="font-bold text-white">Within a site:</span> sites themselves are defined in{" "}
+        <span className="font-semibold text-slate-100">Administration → Sites</span> (with geofence).
+        Here you manage the Block / Floor / Zone hierarchy <em className="italic">inside</em> the active
+        site — reused by Equipment, Desks, Requests and Floor plans.
+      </div>
+
+      {/* --- ACTION BUTTON --- */}
+      <div className="flex justify-end mt-6">
+        <button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2.5 rounded-lg flex items-center gap-2 transition-all shadow-md">
+          <span>Generate QR</span>
+        </button>
+      </div>
+
+      {/* --- HIERARCHY CARDS GRID --- */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mt-4">
+        {/* Block Column */}
+        <div className="bg-[#0b1623]/90 border border-slate-800/90 rounded-xl p-5 flex flex-col justify-between shadow-sm">
+          <div>
+            <div className="flex items-center justify-between border-b border-slate-800/60 pb-3 mb-3">
+              <h3 className="text-sm font-bold text-white">Block</h3>
+              <span className="text-xs font-mono text-slate-500">{blocks.length}</span>
+            </div>
+            <div className="space-y-3">
+              {blocks.map((item, idx) => (
+                <div key={idx} className="flex items-center justify-between text-xs py-1">
+                  <span className="font-medium text-slate-200">{item}</span>
+                  <div className="flex items-center gap-3">
+                    <span className="flex items-center gap-1 text-[10px] font-mono font-bold text-emerald-400 uppercase tracking-wider">
+                      <span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> ACTIVE
+                    </span>
+                    <button className="text-[11px] text-slate-400 border border-slate-800 bg-slate-900/60 hover:bg-slate-800 px-2.5 py-1 rounded-md transition-colors">
+                      Remove
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <button className="mt-6 flex items-center gap-1.5 text-xs font-bold text-emerald-400 hover:text-emerald-300 transition-colors w-fit">
+            <Plus className="w-3.5 h-3.5 stroke-[3]" />
+            <span>Add block</span>
+          </button>
+        </div>
+
+        {/* Floor Column */}
+        <div className="bg-[#0b1623]/90 border border-slate-800/90 rounded-xl p-5 flex flex-col justify-between shadow-sm">
+          <div>
+            <div className="flex items-center justify-between border-b border-slate-800/60 pb-3 mb-3">
+              <h3 className="text-sm font-bold text-white">Floor</h3>
+              <span className="text-xs font-mono text-slate-500">{floors.length}</span>
+            </div>
+            <div className="space-y-3">
+              {floors.map((item, idx) => (
+                <div key={idx} className="flex items-center justify-between text-xs py-1">
+                  <span className="font-medium text-slate-200">{item}</span>
+                  <div className="flex items-center gap-3">
+                    <span className="flex items-center gap-1 text-[10px] font-mono font-bold text-emerald-400 uppercase tracking-wider">
+                      <span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> ACTIVE
+                    </span>
+                    <button className="text-[11px] text-slate-400 border border-slate-800 bg-slate-900/60 hover:bg-slate-800 px-2.5 py-1 rounded-md transition-colors">
+                      Remove
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <button className="mt-6 flex items-center gap-1.5 text-xs font-bold text-emerald-400 hover:text-emerald-300 transition-colors w-fit">
+            <Plus className="w-3.5 h-3.5 stroke-[3]" />
+            <span>Add floor</span>
+          </button>
+        </div>
+
+        {/* Zone Column */}
+        <div className="bg-[#0b1623]/90 border border-slate-800/90 rounded-xl p-5 flex flex-col justify-between shadow-sm">
+          <div>
+            <div className="flex items-center justify-between border-b border-slate-800/60 pb-3 mb-3">
+              <h3 className="text-sm font-bold text-white">Zone</h3>
+              <span className="text-xs font-mono text-slate-500">{zones.length}</span>
+            </div>
+            <div className="space-y-3">
+              {zones.map((item, idx) => (
+                <div key={idx} className="flex items-center justify-between text-xs py-1">
+                  <span className="font-medium text-slate-200">{item}</span>
+                  <div className="flex items-center gap-3">
+                    <span className="flex items-center gap-1 text-[10px] font-mono font-bold text-emerald-400 uppercase tracking-wider">
+                      <span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> ACTIVE
+                    </span>
+                    <button className="text-[11px] text-slate-400 border border-slate-800 bg-slate-900/60 hover:bg-slate-800 px-2.5 py-1 rounded-md transition-colors">
+                      Remove
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <button className="mt-6 flex items-center gap-1.5 text-xs font-bold text-emerald-400 hover:text-emerald-300 transition-colors w-fit">
+            <Plus className="w-3.5 h-3.5 stroke-[3]" />
+            <span>Add zone</span>
+          </button>
+        </div>
+      </div>
+
+     
+    </div>
+  );
+}

components/dashboard/configure/rolesaccess.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import React, { useState } from "react";
+import { Check } from "lucide-react";
+import Button from "@/components/common/button";
+
+// Initial roles state
+const rolesList = [
+  { id: "admin", label: "Admin", badge: "all" },
+  { id: "helpdesk", label: "Helpdesk", badge: "scoped" },
+  { id: "mne_supervisor", label: "M&E Supervisor", badge: "scoped" },
+  { id: "technician", label: "Technician", badge: "scoped" },
+  { id: "tenant", label: "Tenant", badge: "scoped" },
+];
+
+// Initial permissions table data
+const initialPermissions = [
+  {
+    id: 1,
+    module: "Help Desk",
+    menu: "Daily Location Checklist",
+    permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
+  },
+  {
+    id: 2,
+    module: "Equipment",
+    menu: "Site-Wise Equipment",
+    permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
+  },
+  {
+    id: 3,
+    module: "Equipment",
+    menu: "AMC Schedule",
+    permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
+  },
+  {
+    id: 4,
+    module: "Request",
+    menu: "TFM Request",
+    permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
+  },
+  {
+    id: 5,
+    module: "Energy",
+    menu: "Meter Reading",
+    permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
+  },
+  {
+    id: 6,
+    module: "Master",
+    menu: "Request Location",
+    permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
+  },
+  {
+    id: 7,
+    module: "Security",
+    menu: "Users",
+    permissions: { all: false, view: true, add: true, edit: true, delete: false, cancel: true, print: true },
+  },
+];
+
+export default function RolesAccessPortal() {
+  const [activeTopTab, setActiveTopTab] = useState("Roles & Permissions");
+  const [selectedRole, setSelectedRole] = useState("mne_supervisor");
+  const [permissions, setPermissions] = useState(initialPermissions);
+
+ 
+  return (
+    <div className="my-15 text-slate-100 font-sans">
+      {/* --- BREADCRUMB --- */}
+      <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest text-emerald-400 uppercase font-mono">
+        <span>APPLE ONE — HQ TOWER</span>
+        <span className="text-slate-600">•</span>
+        <span className="text-slate-500">CONFIGURE</span>
+        <span className="text-slate-600">•</span>
+        <span className="text-slate-500">ROLES & ACCESS</span>
+      </div>
+
+      {/* --- PAGE HEADER --- */}
+      <h1 className="text-3xl font-bold text-white tracking-tight mt-1">
+        Roles & access
+      </h1>
+      <p className="text-sm font-medium text-slate-400 mt-2 max-w-2xl leading-relaxed">
+        Per-tenant role permissions, which platform users can sign in here and with what
+        role, and ticket escalation routing.
+      </p>
+
+      {/* --- MAIN TABS --- */}
+      <div className="flex items-center gap-8 border-b border-slate-800/80 mt-8 text-sm font-semibold">
+        {["Roles & Permissions", "Tenant Access", "Escalation Matrix"].map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTopTab(tab)}
+            className={`pb-3 relative transition-colors ${
+              activeTopTab === tab
+                ? "text-emerald-400 font-bold"
+                : "text-slate-400 hover:text-slate-200"
+            }`}
+          >
+            {tab}
+            {activeTopTab === tab && (
+              <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-emerald-400 rounded-full" />
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* --- MATRIX CONTAINER --- */}
+      <div className="mt-6 bg-[#091322]/80 border border-slate-800/80 rounded-xl overflow-hidden grid grid-cols-1 md:grid-cols-12">
+        {/* --- LEFT ROLES SIDEBAR --- */}
+        <div className="md:col-span-3 border-r border-slate-800/80 py-3 divide-y divide-slate-800/40">
+          {rolesList.map((role) => {
+            const isSelected = selectedRole === role.id;
+            return (
+              <button
+                key={role.id}
+                onClick={() => setSelectedRole(role.id)}
+                className={`w-full flex items-center justify-between px-5 py-4 text-left transition-all relative ${
+                  isSelected
+                    ? "bg-[#0c1c2e] text-emerald-400 font-bold"
+                    : "text-slate-300 hover:bg-slate-900/40 hover:text-white"
+                }`}
+              >
+                {/* Active side indicator */}
+                {isSelected && (
+                  <span className="absolute left-0 top-0 bottom-0 w-1 bg-emerald-400" />
+                )}
+                
+                <span className="text-sm">{role.label}</span>
+                <span
+                  className={`text-[10px] font-mono px-2 py-0.5 rounded border ${
+                    role.badge === "all"
+                      ? "bg-slate-800/80 text-slate-300 border-slate-700"
+                      : "bg-slate-900/80 text-slate-400 border-slate-800"
+                  }`}
+                >
+                  {role.badge}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* --- RIGHT PERMISSIONS TABLE --- */}
+        <div className="md:col-span-9 overflow-x-auto">
+          <table className="w-full text-left border-collapse">
+            <thead>
+              <tr className="border-b border-slate-800/80 text-[11px] font-bold text-slate-400 uppercase tracking-wider font-mono">
+                <th className="py-4 px-6 font-medium">MODULE</th>
+                <th className="py-4 px-6 font-medium">MENU</th>
+                <th className="py-4 px-4 text-center font-medium">ALL</th>
+                <th className="py-4 px-4 text-center font-medium">VIEW</th>
+                <th className="py-4 px-4 text-center font-medium">ADD</th>
+                <th className="py-4 px-4 text-center font-medium">EDIT</th>
+                <th className="py-4 px-4 text-center font-medium">DELETE</th>
+                <th className="py-4 px-4 text-center font-medium">CANCEL</th>
+                <th className="py-4 px-4 text-center font-medium">PRINT</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-800/50 text-xs">
+              {permissions.map((row) => (
+                <tr key={row.id} className="hover:bg-slate-900/30 transition-colors">
+                  {/* Module Name */}
+                  <td className="py-4 px-6 font-mono text-slate-400">
+                    {row.module}
+                  </td>
+
+                  {/* Menu Item Name */}
+                  <td className="py-4 px-6 font-semibold text-slate-100 whitespace-nowrap">
+                    {row.menu}
+                  </td>
+
+                  {/* Permission Checkboxes */}
+                  {(["all", "view", "add", "edit", "delete", "cancel", "print"] as const).map(
+                    (permKey) => {
+                      const isChecked = row.permissions[permKey];
+                      return (
+                        <td key={permKey} className="py-4 px-4 text-center">
+                          <button
+                            type="button"
+                           
+                            className={`w-5 h-5 rounded flex items-center justify-center transition-all border mx-auto ${
+                              isChecked
+                                ? "bg-[#2dd4bf] border-[#2dd4bf] text-slate-950"
+                                : "bg-slate-900/60 border-slate-700/80 hover:border-slate-500"
+                            }`}
+                          >
+                            {isChecked && <Check className="w-3.5 h-3.5 stroke-[3]" />}
+                          </button>
+                        </td>
+                      );
+                    }
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* --- SAVE BUTTON --- */}
+      <div className="flex justify-end mt-6">
+        <Button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-5 py-2.5 rounded-lg flex items-center gap-2 transition-all shadow-md">
+          <span>Save permissions</span>
+        </Button>
+      </div>
+    </div>
+  );
+}

components/dashboard/configure/settings.tsx

@@ -0,0 +1,360 @@
+"use client";
+
+import React, { useState } from "react";
+
+export default function SettingsPortal() {
+  // App Settings State
+  const [appSettings, setAppSettings] = useState({
+    defaultTenant: "Apple One",
+    timeZone: "Asia/Kolkata (IST)",
+    dateFormat: "dd-mm-yyyy",
+    currency: "₹ INR",
+    language: "English",
+    appearance: "Light",
+  });
+
+  // Notifications State
+  const [notifications, setNotifications] = useState({
+    emailAlerts: true,
+    pushNotifications: true,
+    slaBreachAlerts: true,
+    workPermitAlerts: true,
+    dailyDigest: false,
+  });
+
+ 
+  return (
+    <div className="my-15  text-slate-200  font-sans">
+      {/* Top Header & Breadcrumb */}
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
+        <div>
+          <div className="text-xs uppercase tracking-wider text-slate-400 mb-2 font-medium">
+            <span className="hover:text-slate-200 cursor-pointer">
+              APPLE ONE — HQ TOWER
+            </span>{" "}
+            • <span className="hover:text-slate-200 cursor-pointer">CONFIGURE</span>{" "}
+            • <span className="text-slate-300">SETTINGS</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white mb-1">Settings</h1>
+          <p className="text-slate-400 text-sm">
+            Personal and notification preferences for this tenant workspace.
+          </p>
+        </div>
+
+        {/* Save Changes Button */}
+        <div>
+          <button className="bg-[#2DD4BF] hover:bg-[#26b8a5] text-[#070D19] font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors shadow-sm">
+            Save changes
+          </button>
+        </div>
+      </div>
+
+      {/* Main Grid Layout */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+        {/* Left Column: App Settings */}
+        <div className="lg:col-span-7  border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
+          <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800/60 bg-[#0E1733]/40">
+            <h2 className="text-base font-semibold text-white">App settings</h2>
+            <span className="text-xs text-slate-400">Apple One</span>
+          </div>
+
+          <div className="divide-y divide-slate-800/50 px-6 text-sm">
+            {/* Default Tenant */}
+            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <div>
+                <p className="font-semibold text-slate-100">Default tenant</p>
+                <p className="text-xs text-slate-400">Workspace loaded on sign-in</p>
+              </div>
+              <select
+                value={appSettings.defaultTenant}
+               
+                className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
+              >
+                <option value="Apple One">Apple One</option>
+              </select>
+            </div>
+
+            {/* Time Zone */}
+            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <div>
+                <p className="font-semibold text-slate-100">Time zone</p>
+                <p className="text-xs text-slate-400">
+                  Used for timestamps & SLA clocks
+                </p>
+              </div>
+              <select
+                value={appSettings.timeZone}
+               
+                className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
+              >
+                <option value="Asia/Kolkata (IST)">Asia/Kolkata (IST)</option>
+                <option value="UTC">UTC</option>
+              </select>
+            </div>
+
+            {/* Date Format */}
+            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <div>
+                <p className="font-semibold text-slate-100">Date format</p>
+                <p className="text-xs text-slate-400">
+                  Display format across the app
+                </p>
+              </div>
+              <select
+                value={appSettings.dateFormat}
+               
+                className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
+              >
+                <option value="dd-mm-yyyy">dd-mm-yyyy</option>
+                <option value="mm-dd-yyyy">mm-dd-yyyy</option>
+              </select>
+            </div>
+
+            {/* Currency */}
+            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <div>
+                <p className="font-semibold text-slate-100">Currency</p>
+                <p className="text-xs text-slate-400">Inventory, AMC & cost figures</p>
+              </div>
+              <select
+                value={appSettings.currency}
+                
+                className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
+              >
+                <option value="₹ INR">₹ INR</option>
+                <option value="$ USD">$ USD</option>
+              </select>
+            </div>
+
+            {/* Language */}
+            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <div>
+                <p className="font-semibold text-slate-100">Language</p>
+                <p className="text-xs text-slate-400">Interface language</p>
+              </div>
+              <select
+                value={appSettings.language}
+               
+                className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
+              >
+                <option value="English">English</option>
+              </select>
+            </div>
+
+            {/* Appearance */}
+            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <div>
+                <p className="font-semibold text-slate-100">Appearance</p>
+                <p className="text-xs text-slate-400">
+                  Your personal light / dark preference
+                </p>
+              </div>
+              <select
+                value={appSettings.appearance}
+              
+                className="bg-[#080E21] border border-slate-700/80 text-slate-200 text-xs rounded-lg px-3 py-2 w-full sm:w-48 focus:outline-none focus:border-[#2DD4BF] cursor-pointer"
+              >
+                <option value="Light">Light</option>
+                <option value="Dark">Dark</option>
+              </select>
+            </div>
+
+            {/* Brand Accent */}
+            <div className="py-4 flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <div>
+                <p className="font-semibold text-slate-100">Brand accent</p>
+                <p className="text-xs text-slate-400">
+                  Set per tenant in Administration → Preferences
+                </p>
+              </div>
+              <div className="flex items-center space-x-2 text-xs font-mono text-slate-400">
+                <span className="w-5 h-5 rounded bg-[#2DD4BF] border border-slate-600 inline-block" />
+                <span>#2DD4BF</span>
+                <span>• inherited</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Column: Notifications & Personal Settings */}
+        <div className="lg:col-span-5 space-y-6">
+          {/* Notifications Card */}
+          <div className="bg-[#0B132B]/80 border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
+            <div className="px-6 py-4 border-b border-slate-800/60 bg-[#0E1733]/40">
+              <h2 className="text-base font-semibold text-white">Notifications</h2>
+            </div>
+
+            <div className="divide-y divide-slate-800/50 px-6 text-sm">
+              {/* Email Alerts */}
+              <div className="py-3.5 flex items-center justify-between">
+                <div>
+                  <p className="font-semibold text-slate-100">Email alerts</p>
+                  <p className="text-xs text-slate-400">
+                    Request, approval & escalation emails
+                  </p>
+                </div>
+                <button
+                
+                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                    notifications.emailAlerts ? "bg-[#2DD4BF]" : "bg-slate-700"
+                  }`}
+                >
+                  <span
+                    className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
+                      notifications.emailAlerts ? "translate-x-6" : "translate-x-1"
+                    }`}
+                  />
+                </button>
+              </div>
+
+              {/* Push Notifications */}
+              <div className="py-3.5 flex items-center justify-between">
+                <div>
+                  <p className="font-semibold text-slate-100">Push notifications</p>
+                  <p className="text-xs text-slate-400">
+                    Mobile app push for assignments
+                  </p>
+                </div>
+                <button
+                
+                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                    notifications.pushNotifications ? "bg-[#2DD4BF]" : "bg-slate-700"
+                  }`}
+                >
+                  <span
+                    className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
+                      notifications.pushNotifications ? "translate-x-6" : "translate-x-1"
+                    }`}
+                  />
+                </button>
+              </div>
+
+              {/* SLA Breach Alerts */}
+              <div className="py-3.5 flex items-center justify-between">
+                <div>
+                  <p className="font-semibold text-slate-100">SLA breach alerts</p>
+                  <p className="text-xs text-slate-400">
+                    Notify when a request goes overdue
+                  </p>
+                </div>
+                <button
+                 
+                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                    notifications.slaBreachAlerts ? "bg-[#2DD4BF]" : "bg-slate-700"
+                  }`}
+                >
+                  <span
+                    className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
+                      notifications.slaBreachAlerts ? "translate-x-6" : "translate-x-1"
+                    }`}
+                  />
+                </button>
+              </div>
+
+              {/* Work-permit Alerts */}
+              <div className="py-3.5 flex items-center justify-between">
+                <div>
+                  <p className="font-semibold text-slate-100">Work-permit alerts</p>
+                  <p className="text-xs text-slate-400">
+                    Notify on permit raise & approval
+                  </p>
+                </div>
+                <button
+                
+                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                    notifications.workPermitAlerts ? "bg-[#2DD4BF]" : "bg-slate-700"
+                  }`}
+                >
+                  <span
+                    className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
+                      notifications.workPermitAlerts ? "translate-x-6" : "translate-x-1"
+                    }`}
+                  />
+                </button>
+              </div>
+
+              {/* Daily Digest */}
+              <div className="py-3.5 flex items-center justify-between">
+                <div>
+                  <p className="font-semibold text-slate-100">Daily digest</p>
+                  <p className="text-xs text-slate-400">
+                    Morning summary of open items
+                  </p>
+                </div>
+                <button
+                
+                  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                    notifications.dailyDigest ? "bg-[#2DD4BF]" : "bg-slate-700"
+                  }`}
+                >
+                  <span
+                    className={`inline-block h-4 w-4 transform rounded-full bg-slate-900 transition-transform ${
+                      notifications.dailyDigest ? "translate-x-6" : "translate-x-1"
+                    }`}
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Personal Settings Card */}
+          <div className="bg-[#0B132B]/80 border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
+            <div className="px-6 py-4 border-b border-slate-800/60 bg-[#0E1733]/40">
+              <h2 className="text-base font-semibold text-white">Personal settings</h2>
+            </div>
+
+            <div className="p-6 space-y-4 text-xs font-mono">
+              <div className="flex items-center">
+                <span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
+                  NAME
+                </span>
+                <span className="text-slate-100 font-sans text-sm font-semibold">
+                  Dhananjay T.
+                </span>
+              </div>
+
+              <div className="flex items-center">
+                <span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
+                  ROLE
+                </span>
+                <div className="flex items-center space-x-2">
+                  <span className="text-slate-100 font-sans text-sm font-semibold">
+                    Admin
+                  </span>
+                  <span className="inline-flex items-center space-x-1 px-2 py-0.5 rounded-full text-[10px] font-sans font-semibold bg-emerald-950/80 border border-emerald-800 text-emerald-400">
+                    <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                    <span>COMPLETED</span>
+                  </span>
+                </div>
+              </div>
+
+              <div className="flex items-center">
+                <span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
+                  EMAIL
+                </span>
+                <span className="text-slate-200">dhananjay@kafm.io</span>
+              </div>
+
+              <div className="flex items-center">
+                <span className="w-24 uppercase tracking-wider text-slate-400 font-sans text-[11px]">
+                  MOBILE
+                </span>
+                <span className="text-slate-200">98•••••012</span>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="pt-4 flex items-center space-x-4 font-sans">
+                <button className="px-4 py-2 bg-[#080E21] hover:bg-slate-800 border border-slate-700/80 rounded-lg text-slate-200 text-xs font-medium transition-colors">
+                  Edit profile
+                </button>
+                <button className="text-slate-400 hover:text-slate-200 text-xs font-medium transition-colors">
+                  Change password
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/dashboard/configure/userLocation.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import React, { useState } from "react";
+
+// Mock user location data matching the screenshot
+const userData = [
+  {
+    name: "Dhananjay T.",
+    email: "dhananjay@kafm.io",
+    mobile: "7489477369",
+    latitude: "18.5450",
+    longitude: "73.7935",
+    site: "Apple One",
+    // Relative coordinates for the map visual dots (X%, Y%)
+    x: "19%",
+    y: "38%",
+  },
+  {
+    name: "ME Local",
+    email: "me.local@kafm.io",
+    mobile: "9876543210",
+    latitude: "18.5469",
+    longitude: "73.7945",
+    site: "Apple One",
+    x: "44%",
+    y: "43%",
+  },
+  {
+    name: "TECH Local",
+    email: "tech.local@kafm.io",
+    mobile: "9123456780",
+    latitude: "18.5441",
+    longitude: "73.7951",
+    site: "Apple One",
+    x: "69%",
+    y: "48%",
+  },
+];
+
+export default function UserLocationPortal() {
+  const [viewMode, setViewMode] = useState<"map" | "table">("table");
+  const [mapType, setMapType] = useState<"MAP" | "SATELLITE">("MAP");
+
+  return (
+    <div className="my-15 text-slate-200 font-sans">
+      {/* Top Breadcrumb & Header */}
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
+        <div>
+          {/* Breadcrumb */}
+          <div className="text-xs uppercase tracking-wider text-slate-400 mb-2 font-medium">
+            <span className="hover:text-slate-200 cursor-pointer">
+              APPLE ONE — HQ TOWER
+            </span>{" "}
+            • <span className="hover:text-slate-200 cursor-pointer">CONFIGURE</span>{" "}
+            • <span className="text-slate-300">USER LOCATION</span>
+          </div>
+          
+          {/* Main Title */}
+          <h1 className="text-3xl font-bold text-white mb-2">User location</h1>
+          <p className="text-slate-400 text-sm max-w-2xl leading-relaxed">
+            Live position of active technicians, captured from the mobile app. Map
+            and table views.
+          </p>
+        </div>
+
+        {/* View Switcher Buttons */}
+        <div className="flex bg-[#0F172A] p-1 rounded-lg border border-slate-800 self-start md:self-auto">
+          <button
+            onClick={() => setViewMode("map")}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
+              viewMode === "map"
+                ? "bg-slate-800 text-white shadow-sm"
+                : "text-slate-400 hover:text-slate-200"
+            }`}
+          >
+            Map view
+          </button>
+          <button
+            onClick={() => setViewMode("table")}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
+              viewMode === "table"
+                ? "bg-[#2DD4BF] text-[#070D19] font-semibold shadow-sm"
+                : "text-slate-400 hover:text-slate-200"
+            }`}
+          >
+            Table view
+          </button>
+        </div>
+      </div>
+
+      {/* Main Container */}
+      <div className="border border-slate-800/80 rounded-xl overflow-hidden shadow-2xl backdrop-blur-sm">
+        {/* Header Bar inside card */}
+        <div className="flex items-center justify-between px-6 py-2.5 border-b border-slate-800/60">
+          <span className="text-sm font-semibold text-slate-200">
+            Active users • Apple One
+          </span>
+          <span className="text-xs font-mono tracking-widest text-slate-400">
+            GPS • live
+          </span>
+        </div>
+
+        {/* Live Grid Map Visual Area (Height Reduced to h-36) */}
+        <div className="relative h-36 bg-[#080E21] border-b border-slate-800/60">
+          {/* Dark Grid Background Effect */}
+          <div
+            className="absolute inset-0 opacity-20"
+            style={{
+              backgroundImage: `
+                linear-gradient(to right, #334155 1px, transparent 1px),
+                linear-gradient(to bottom, #334155 1px, transparent 1px)
+              `,
+              backgroundSize: "40px 20px",
+            }}
+          />
+
+          {/* User Map Markers */}
+          {userData.map((user, index) => (
+            <div
+              key={index}
+              className="absolute group transform -translate-x-1/2 -translate-y-1/2 cursor-pointer"
+              style={{ left: user.x, top: user.y }}
+            >
+              {/* Pulsing Outer Glow Effect */}
+              <div className="absolute -inset-1 bg-[#2DD4BF]/30 rounded-full blur-sm animate-pulse" />
+              
+              {/* Dot Center */}
+              <div className="relative h-3.5 w-3.5 bg-[#2DD4BF] rounded-full border-2 border-[#080E21] shadow-[0_0_12px_#2DD4BF]" />
+
+              {/* Tooltip on Hover */}
+              <div className="opacity-0 group-hover:opacity-100 transition-opacity bg-slate-900 border border-slate-700 text-xs text-slate-200 rounded px-2.5 py-1.5 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 whitespace-nowrap z-20 pointer-events-none shadow-lg">
+                <p className="font-semibold">{user.name}</p>
+                <p className="text-[10px] text-slate-400">
+                  {user.latitude}, {user.longitude}
+                </p>
+              </div>
+            </div>
+          ))}
+
+          {/* Map Type Toggle (Bottom Right of Map Area) */}
+          <div className="absolute bottom-2 right-4 flex items-center space-x-2 text-[10px] font-mono tracking-wider text-slate-500">
+            <button
+              onClick={() => setMapType("MAP")}
+              className={`hover:text-slate-300 transition-colors ${
+                mapType === "MAP" ? "text-slate-300 font-bold" : ""
+              }`}
+            >
+              MAP
+            </button>
+            <span>•</span>
+            <button
+              onClick={() => setMapType("SATELLITE")}
+              className={`hover:text-slate-300 transition-colors ${
+                mapType === "SATELLITE" ? "text-slate-300 font-bold" : ""
+              }`}
+            >
+              SATELLITE
+            </button>
+          </div>
+        </div>
+
+        {/* User Data Table */}
+        <div className="overflow-x-auto">
+          <table className="w-full text-left text-sm text-slate-300">
+            <thead>
+              <tr className="text-[11px] font-semibold tracking-wider text-slate-400 uppercase border-b border-slate-800/80 bg-[#0A1128]/40">
+                <th scope="col" className="py-2 px-6">
+                  Name
+                </th>
+                <th scope="col" className="py-2 px-6">
+                  Email
+                </th>
+                <th scope="col" className="py-2 px-6">
+                  Mobile
+                </th>
+                <th scope="col" className="py-2 px-6">
+                  Latitude
+                </th>
+                <th scope="col" className="py-2 px-6">
+                  Longitude
+                </th>
+                <th scope="col" className="py-2 px-6">
+                  Site
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-800/50 font-mono text-xs">
+              {userData.map((user, idx) => (
+                <tr
+                  key={idx}
+                  className="hover:bg-slate-800/30 transition-colors duration-150"
+                >
+                  <td className="py-2.5 px-6 font-sans font-semibold text-slate-100">
+                    {user.name}
+                  </td>
+                  <td className="py-2.5 px-6 text-slate-300">{user.email}</td>
+                  <td className="py-2.5 px-6 text-slate-300">{user.mobile}</td>
+                  <td className="py-2.5 px-6 text-slate-300">{user.latitude}</td>
+                  <td className="py-2.5 px-6 text-slate-300">{user.longitude}</td>
+                  <td className="py-2.5 px-6 font-sans text-slate-200">
+                    {user.site}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

components/dashboard/configure/workflowAutomation.tsx

@@ -0,0 +1,326 @@
+import { useState } from 'react';
+import { 
+  Bot, 
+  Activity, 
+  Check, 
+  Clock, 
+  Plus,
+  Sparkles
+} from "lucide-react";
+import Button from "@/components/common/button";
+import StatCard from "@/components/common/dashStatCard";
+import InfoBanner from '@/components/common/infoBanner';
+import Table from '@/components/common/dataTable';
+import { auditheaders, auditrows } from '@/constants/tabledata';
+
+export default function WorkFlowAutomationPortal() {
+  return (
+    <div className="relative my-15 text-slate-100 font-sans">
+      {/* --- HEADER SECTION --- */}
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
+        <div>
+          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono">
+            <span className="text-teal-400">APPLE ONE — HQ TOWER</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500">CONFIGURE</span>
+            <span className="text-slate-500">•</span>
+            <span className="text-slate-500">AUTOMATION</span>
+          </div>
+          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
+            Workflow automation
+          </h1>
+          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
+            Build if-this-then-that rules for approvals, dispatch and escalation without code — the same engine competitors gate behind IT change requests.
+          </p>
+        </div>
+
+        {/* --- HEADER BUTTONS --- */}
+        <div className="flex items-center gap-3 self-start md:mt-10">
+          <Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-4 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
+            <Activity className="w-4 h-4 text-teal-400" />
+            <span>Run log</span>
+          </Button>
+
+          <Button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
+            <Plus className="w-4 h-4 stroke-[3]" />
+            <span>New automation</span>
+          </Button>
+        </div>
+      </div>
+
+      {/* --- STAT CARDS --- */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        {/* Card 1: Active automations */}
+        <StatCard
+          variant="icon"
+          title="Active automations"
+          value="4/5"
+          icon={Bot}
+          badgeText="live"
+          badgeClassName="text-teal-400 lowercase font-mono"
+          iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
+        />
+
+        {/* Card 2: Runs this month */}
+        <StatCard
+          variant="icon"
+          title="Runs this month"
+          value="48"
+          icon={Activity}
+          badgeText="triggered"
+          badgeClassName="text-teal-400 lowercase font-mono"
+          iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
+        />
+
+        {/* Card 3: Tasks auto-handled */}
+        <StatCard
+          variant="icon"
+          title="Tasks auto-handled"
+          value="80%"
+          icon={Check}
+          badgeText="no touch"
+          badgeClassName="text-teal-400 lowercase font-mono"
+          iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
+        />
+
+        {/* Card 4: Time saved */}
+        <StatCard
+          variant="icon"
+          title="Time saved"
+          value="~34h"
+          icon={Clock}
+          badgeText="est. / month"
+          badgeClassName="text-slate-400 lowercase font-mono"
+          iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
+        />
+      </div>
+
+      {/* --- RULE BUILDER HEADER SECTION --- */}
+      <div className="border border-slate-800/80 rounded-xl p-5 mb-4 shadow-xl">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-sm font-semibold text-white tracking-wide">
+            Rule builder
+          </h2>
+          <span className="text-xs font-mono text-slate-500 tracking-wider">
+            trigger → condition → action
+          </span>
+        </div>
+
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+          <div className="flex items-center gap-6">
+            {/* WHEN Step */}
+            <div className="flex flex-col gap-1.5">
+              <span className="text-[10px] font-mono tracking-widest text-slate-400 uppercase">
+                WHEN
+              </span>
+              <button className="px-3.5 py-1.5 rounded-lg border border-[#2DD4BF]/40 text-[#2DD4BF] text-xs font-mono font-medium transition-colors">
+                Trigger event
+              </button>
+            </div>
+
+            {/* IF Step */}
+            <div className="flex flex-col gap-1.5">
+              <span className="text-[10px] font-mono tracking-widest text-slate-400 uppercase">
+                IF
+              </span>
+              <button className="px-3.5 py-1.5 rounded-lg border border-slate-700 text-slate-300 text-xs font-mono font-medium transition-colors">
+                Condition
+              </button>
+            </div>
+
+            {/* THEN Step */}
+            <div className="flex flex-col gap-1.5">
+              <span className="text-[10px] font-mono tracking-widest text-slate-400 uppercase">
+                THEN
+              </span>
+              <button className="px-3.5 py-1.5 rounded-lg border border-[#2DD4BF]/30 text-[#2DD4BF] text-xs font-mono font-medium transition-colors">
+                Action
+              </button>
+            </div>
+          </div>
+
+          {/* Add Step Button */}
+          <button className="bg-[#2DD4BF] hover:bg-teal-300 text-[#070D19] font-bold text-xs px-4 py-2.5 rounded-lg flex items-center gap-1.5 transition-colors self-end sm:self-center shadow-sm">
+            <Plus className="w-4 h-4 stroke-[3]" />
+            <span>Add step</span>
+          </button>
+        </div>
+      </div>
+
+      {/* --- AUTOMATION RULE CARDS LIST --- */}
+      <div className="space-y-3">
+        {/* Rule 1 */}
+        <div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
+          <div className="flex items-center gap-4 flex-1 min-w-0">
+            <div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
+              <span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
+            </div>
+            <div className="space-y-2 min-w-0 flex-1">
+              <h3 className="text-sm font-semibold text-white truncate">
+                Auto-dispatch critical breakdowns
+              </h3>
+              <div className="flex flex-wrap items-center gap-2 text-xs font-mono">
+                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
+                  WHEN Request raised
+                </span>
+                <span className="text-slate-600 font-sans">→</span>
+                <span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
+                  IF Criticality = Critical
+                </span>
+                <span className="text-slate-600 font-sans">→</span>
+                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
+                  THEN Assign to on-call M&E + notify supervisor
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center justify-end md:self-center gap-1 pl-4">
+            <div className="text-right font-mono">
+              <p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
+              <p className="text-[11px] text-slate-500">12 runs</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Rule 2 */}
+        <div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
+          <div className="flex items-center gap-4 flex-1 min-w-0">
+            <div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
+              <span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
+            </div>
+            <div className="space-y-2 min-w-0 flex-1">
+              <h3 className="text-sm font-semibold text-white truncate">
+                SLA breach escalation
+              </h3>
+              <div className="flex flex-wrap items-center gap-2 text-xs font-mono">
+                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
+                  WHEN SLA timer &gt; 90%
+                </span>
+                <span className="text-slate-600 font-sans">→</span>
+                <span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
+                  IF Status ≠ Completed
+                </span>
+                <span className="text-slate-600 font-sans">→</span>
+                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
+                  THEN Escalate to L2 + email FM lead
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center justify-end md:self-center gap-1 pl-4">
+            <div className="text-right font-mono">
+              <p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
+              <p className="text-[11px] text-slate-500">5 runs</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Rule 3 */}
+        <div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
+          <div className="flex items-center gap-4 flex-1 min-w-0">
+            <div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
+              <span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
+            </div>
+            <div className="space-y-2 min-w-0 flex-1">
+              <h3 className="text-sm font-semibold text-white truncate">
+                PPM from health alert
+              </h3>
+              <div className="flex flex-wrap items-center gap-2 text-xs font-mono">
+                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
+                  WHEN Asset health &lt; 58
+                </span>
+                <span className="text-slate-600 font-sans">→</span>
+                <span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
+                  IF No open PM
+                </span>
+                <span className="text-slate-600 font-sans">→</span>
+                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
+                  THEN Raise condition-based PM work order
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center justify-end md:self-center gap-1 pl-4">
+            <div className="text-right font-mono">
+              <p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
+              <p className="text-[11px] text-slate-500">8 runs</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Rule 4 */}
+        <div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
+          <div className="flex items-center gap-4 flex-1 min-w-0">
+            <div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-slate-700">
+              <span className="inline-block h-5 w-5 transform translate-x-0 rounded-full bg-[#070D19] shadow" />
+            </div>
+            <div className="space-y-2 min-w-0 flex-1">
+              <h3 className="text-sm font-semibold text-white truncate">
+                Low-stock reorder
+              </h3>
+              <div className="flex flex-wrap items-center gap-2 text-xs font-mono">
+                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
+                  WHEN Stock ≤ minimum
+                </span>
+                <span className="text-slate-600 font-sans">→</span>
+                <span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
+                  IF Item is consumable
+                </span>
+                <span className="text-slate-600 font-sans">→</span>
+                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
+                  THEN Draft purchase request to store
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center justify-end md:self-center gap-1 pl-4">
+            <div className="text-right font-mono">
+              <p className="text-xs font-semibold text-slate-400">Paused</p>
+              <p className="text-[11px] text-slate-500">0 runs</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Rule 5 */}
+        <div className="border border-slate-800/80 rounded-xl p-4 shadow-lg flex flex-col md:flex-row md:items-center justify-between gap-4 hover:border-slate-700/80 transition-colors">
+          <div className="flex items-center gap-4 flex-1 min-w-0">
+            <div className="relative inline-flex h-6 w-11 flex-shrink-0 rounded-full border-2 border-transparent bg-[#2DD4BF]">
+              <span className="inline-block h-5 w-5 transform translate-x-5 rounded-full bg-[#070D19] shadow" />
+            </div>
+            <div className="space-y-2 min-w-0 flex-1">
+              <h3 className="text-sm font-semibold text-white truncate">
+                Visitor pre-approval
+              </h3>
+              <div className="flex flex-wrap items-center gap-2 text-xs font-mono">
+                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/30 text-[#2DD4BF] text-[11px]">
+                  WHEN Visitor invited
+                </span>
+                <span className="text-slate-600 font-sans">→</span>
+                <span className="px-2.5 py-1 rounded-md border border-slate-700/80 text-slate-300 text-[11px]">
+                  IF Host confirmed
+                </span>
+                <span className="text-slate-600 font-sans">→</span>
+                <span className="px-2.5 py-1 rounded-md border border-[#2DD4BF]/20 text-[#2DD4BF] text-[11px]">
+                  THEN Issue QR pass + notify security
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center justify-end md:self-center gap-1 pl-4">
+            <div className="text-right font-mono">
+              <p className="text-xs font-semibold text-[#2DD4BF]">Active</p>
+              <p className="text-[11px] text-slate-500">23 runs</p>
+            </div>
+          </div>
+        </div>
+      </div>
+<div className="mt-5">
+      <InfoBanner 
+        boldText='No IT in the loop: ' 
+        normalText='operations staff compose these rules directly. Every automation is versioned and reversible — pause any rule with the toggle and the workflow reverts to manual instantly.' 
+      />
+</div>
+    
+    </div>
+  );
+}