Untitled

import React, { useState } from 'react';
import { 
  Settings, 
  User, 
  ChevronRight, 
  Search, 
  Bell, 
  LayoutGrid,
  ExternalLink,
  MessageSquare,
  ChevronLeft
} from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('all');

  // Mock data based on the provided image
  const userModules = [
    { name: 'Employee', icon: '👤', color: 'from-rose-500 to-rose-600' },
    { name: 'Billing', icon: '📄', color: 'from-blue-500 to-blue-600' },
    { name: 'Attendance', icon: '⏱️', color: 'from-emerald-500 to-emerald-600' },
    { name: 'Payroll', icon: '💰', color: 'from-teal-500 to-teal-600' },
    { name: 'Expense', icon: '💸', color: 'from-sky-500 to-sky-600' },
    { name: 'Provident Fund', icon: '🏦', color: 'from-green-500 to-green-600' },
    { name: 'Inventory', icon: '📊', color: 'from-cyan-500 to-cyan-600' },
    { name: 'Bank', icon: '🏦', color: 'from-emerald-600 to-emerald-700' },
    { name: 'Daily Progress', icon: '👷', color: 'from-fuchsia-600 to-fuchsia-700' },
  ];

  const availableModules = [
    { name: 'Accounting', icon: '📠', color: 'from-purple-500 to-purple-600' },
    { name: 'Leave', icon: '🏃', color: 'from-green-600 to-green-700' },
  ];

  const upcomingModules = [
    { name: 'Point of Sale', icon: '🛒', color: 'from-indigo-500 to-indigo-600' },
    { name: 'Task Manager', icon: '📋', color: 'from-blue-600 to-blue-700' },
    { name: 'Performance', icon: '📈', color: 'from-lime-500 to-lime-600' },
    { name: 'Scheduling', icon: '📅', color: 'from-red-500 to-red-600' },
    { name: 'Mass Mailing', icon: '📧', color: 'from-green-500 to-green-600' },
  ];

  const ModuleCard = ({ module, status = 'active' }) => (
    <div className={`group relative bg-white rounded-xl p-4 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border border-slate-100 flex flex-col items-center text-center ${status === 'upcoming' ? 'opacity-80 grayscale-[0.2]' : ''}`}>
      <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${module.color} flex items-center justify-center text-white text-2xl mb-3 shadow-lg group-hover:scale-110 transition-transform`}>
        {module.icon}
      </div>
      <span className="text-sm font-semibold text-slate-700 leading-tight h-10 flex items-center">
        {module.name}
      </span>
      {status === 'upcoming' && (
        <span className="absolute top-2 right-2 text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Soon</span>
      )}
      {status === 'available' && (
        <button className="mt-2 text-[10px] text-blue-600 font-bold uppercase flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
          Activate <ExternalLink size={10} />
        </button>
      )}
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-50 flex flex-col font-sans">
      {/* HEADER - Preserved color (#004d5a) */}
      <header className="bg-[#004d5a] text-white h-14 px-6 flex items-center justify-between sticky top-0 z-50 shadow-md">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-white rounded-full flex items-center justify-center">
              <span className="text-[#004d5a] font-bold text-lg">B</span>
            </div>
            <span className="font-bold tracking-tight text-lg uppercase">Bequent <span className="text-xs font-normal opacity-70 lowercase">| Best HRM and Business</span></span>
          </div>
        </div>
        
        <div className="flex items-center gap-6 text-sm">
          <button className="hover:text-blue-200 transition-colors flex items-center gap-2">
            Switch department
          </button>
          <div className="flex items-center gap-3 border-l border-white/20 pl-6">
            <Settings size={18} className="cursor-pointer hover:rotate-45 transition-transform" />
            <div className="flex items-center gap-2 cursor-pointer bg-white/10 px-3 py-1 rounded-full">
              <User size={18} />
              <span className="font-medium">Admin</span>
            </div>
          </div>
        </div>
      </header>

      <div className="flex flex-1 overflow-hidden relative">
        {/* SIDEBAR - Standardized Professional Design */}
        <aside className="w-20 lg:w-64 bg-white border-r border-slate-200 hidden md:flex flex-col py-6">
          <nav className="flex-1 px-4 space-y-2">
            <div className="p-2 mb-4 bg-slate-100 rounded-lg flex items-center gap-3 border border-slate-200">
              <Search size={18} className="text-slate-400" />
              <input type="text" placeholder="Quick search..." className="bg-transparent border-none outline-none text-sm w-full hidden lg:block" />
            </div>
            
            <div className="lg:block hidden pb-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest px-2">Navigation</div>
            <a href="#" className="flex items-center gap-3 px-3 py-2 bg-[#004d5a]/5 text-[#004d5a] rounded-lg font-semibold">
              <LayoutGrid size={20} />
              <span className="lg:block hidden">Module Dashboard</span>
            </a>
            <a href="#" className="flex items-center gap-3 px-3 py-2 text-slate-500 hover:bg-slate-50 rounded-lg transition-colors">
              <Bell size={20} />
              <span className="lg:block hidden">Notifications</span>
              <span className="ml-auto bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full hidden lg:block font-bold">3</span>
            </a>
            <a href="#" className="flex items-center gap-3 px-3 py-2 text-slate-500 hover:bg-slate-50 rounded-lg transition-colors">
              <MessageSquare size={20} />
              <span className="lg:block hidden">Support Chat</span>
            </a>
          </nav>
          
          <div className="px-6 lg:block hidden">
            <div className="bg-[#f8fafb] border border-slate-200 p-4 rounded-xl text-slate-600 text-xs">
              <p className="font-bold text-[#004d5a] mb-1">Internal Modules</p>
              <p className="leading-relaxed opacity-80">Access departmental tools and resources below.</p>
            </div>
          </div>
        </aside>

        {/* MAIN CONTENT */}
        <main className="flex-1 overflow-y-auto p-6 lg:p-10 space-y-12 relative">
          {/* Breadcrumb / Title */}
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold text-slate-800 tracking-tight flex items-center gap-2">
                <span className="text-[#004d5a] font-extrabold">xyz</span>
                <span className="text-slate-400 font-light">/</span>
                Module Dashboard
              </h1>
              <p className="text-sm text-slate-500 mt-1 font-medium">Manage your enterprise suite and available extensions.</p>
            </div>
          </div>

          {/* User's Modules Section */}
          <section>
            <div className="flex items-center gap-2 mb-6 border-b border-slate-200 pb-2">
              <h2 className="text-sm font-black text-slate-800 uppercase tracking-wider">Your Active Modules</h2>
              <span className="bg-[#004d5a] text-white text-[9px] px-2 py-0.5 rounded-sm ml-2 font-bold">AUTHORIZED</span>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-5">
              {userModules.map((m, idx) => (
                <ModuleCard key={idx} module={m} />
              ))}
            </div>
          </section>

          {/* Available Modules Section */}
          <section>
            <div className="flex items-center gap-2 mb-6 border-b border-slate-200 pb-2">
              <h2 className="text-sm font-black text-slate-800 uppercase tracking-wider">Available Modules</h2>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-5">
              {availableModules.map((m, idx) => (
                <ModuleCard key={idx} module={m} status="available" />
              ))}
            </div>
          </section>

          {/* Upcoming Section */}
          <section className="bg-white border border-slate-200 -mx-6 lg:-mx-10 px-6 lg:px-10 py-12 rounded-t-[2rem] shadow-sm">
            <div className="flex items-center gap-2 mb-8">
              <h2 className="text-sm font-black text-slate-800 uppercase tracking-wider">Upcoming Release Pipeline</h2>
              <div className="h-px flex-1 bg-slate-200 ml-4"></div>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-5">
              {upcomingModules.map((m, idx) => (
                <ModuleCard key={idx} module={m} status="upcoming" />
              ))}
            </div>
          </section>
        </main>

        {/* PERSISTENT "IN" SIDEBAR INDICATOR (From original image) */}
        <div className="fixed right-0 top-1/2 -translate-y-1/2 z-[60] flex flex-col items-end">
          <div className="bg-[#004d5a] text-white flex items-center rounded-l-md overflow-hidden shadow-lg group cursor-pointer border-y border-l border-white/20">
            <div className="p-2 border-r border-white/10 bg-[#003a45]">
              <ChevronLeft size={16} />
            </div>
            <div className="px-3 py-2 font-bold text-xs tracking-tighter">
              IN
            </div>
          </div>
        </div>
      </div>

      {/* FOOTER */}
      <footer className="bg-white border-t border-slate-200 px-6 py-3 flex items-center justify-between text-[11px] text-slate-500 font-medium">
        <div className="flex items-center gap-4">
          <span>Department: <span className="font-bold text-[#004d5a] uppercase">Head Office</span></span>
          <span className="w-1 h-1 bg-slate-300 rounded-full"></span>
          <span>Version 2.4.0</span>
        </div>
        <div className="flex items-center gap-6 uppercase tracking-widest font-bold text-[10px]">
          <a href="#" className="hover:text-[#004d5a] transition-colors">Contact Us</a>
          <a href="#" className="hover:text-[#004d5a] transition-colors">Community</a>
        </div>
      </footer>

      {/* Feedback Trigger */}
      <div className="fixed bottom-0 right-10 z-[70]">
         <button className="bg-[#004d5a] text-white px-4 py-1.5 rounded-t-lg font-bold text-[10px] uppercase tracking-widest shadow-lg flex items-center gap-2 hover:bg-[#006b7a] transition-colors border-x border-t border-white/10">
           <MessageSquare size={12} />
           Feedback
         </button>
      </div>
    </div>
  );
};

export default App;