KAFM-Project/utils/table.tsx

import  { useState } from 'react';
import {
  Pencil,
  Menu,
  ShieldCheck,
  QrCode,
  Power,
  Check,
  Sparkles,
} from 'lucide-react';
import { mockData } from '@/constants/constant';


export default function LocationTable(){
  const [selectedIds, setSelectedIds] = useState<string[]>(['1']); // Row 1 selected by default (teal indicator bar)

  const toggleSelectAll = () => {
    if (selectedIds.length === mockData.length) {
      setSelectedIds([]);
    } else {
      setSelectedIds(mockData.map((row) => row.id));
    }
  };

  const toggleSelectRow = (id: string) => {
    setSelectedIds((prev) =>
      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
    );
  };

  return (
    <div className="w-full bg-[#071321] text-slate-300 rounded-xl overflow-hidden border border-slate-800/80 shadow-2xl relative font-sans">
      <div className="overflow-x-auto">
        <table className="w-full text-left text-xs border-collapse">
          {/* TABLE HEADER */}
          <thead>
            <tr className="border-b border-slate-800/90 text-[11px] font-bold tracking-wider text-slate-500 uppercase font-mono">
              <th className="py-4 px-4 w-12 text-center">
                <input
                  type="checkbox"
                  checked={selectedIds.length === mockData.length}
                  onChange={toggleSelectAll}
                  className="rounded border-slate-700 bg-slate-900/80 text-teal-400 focus:ring-0 focus:ring-offset-0 cursor-pointer accent-teal-400 h-3.5 w-3.5"
                />
              </th>
              <th className="py-4 px-3 font-mono">BLOCK</th>
              <th className="py-4 px-3 font-mono">FLOOR</th>
              <th className="py-4 px-3 font-mono">ZONE</th>
              <th className="py-4 px-3 font-mono">DEPARTMENT</th>
              <th className="py-4 px-3 font-mono">LOCATION</th>
              <th className="py-4 px-3 font-mono">WINDOW</th>
              <th className="py-4 px-3 font-mono">TAT</th>
              <th className="py-4 px-3 font-mono">SCHED.</th>
              <th className="py-4 px-3 font-mono">APPROVAL</th>
              <th className="py-4 px-3 font-mono">STATUS</th>
              <th className="py-4 px-4 font-mono text-right pr-6">ACTIONS</th>
            </tr>
          </thead>

          {/* TABLE BODY */}
          <tbody className="divide-y divide-slate-800/50">
            {mockData.map((row) => {
              const isSelected = selectedIds.includes(row.id);

              return (
                <tr
                  key={row.id}
                  className={`group relative transition-colors ${
                    isSelected
                      ? 'bg-[#0e2238]/60 hover:bg-[#122942]/80'
                      : 'hover:bg-slate-800/30'
                  }`}
                >
                  {/* Left Selection Indicator Bar (for Row 1 / Selected Rows) */}
                  <td className="py-3 px-4 text-center relative">
                    {isSelected && (
                      <span className="absolute left-0 top-0 bottom-0 w-[3px] bg-teal-400 rounded-r" />
                    )}
                    <input
                      type="checkbox"
                      checked={isSelected}
                      onChange={() => toggleSelectRow(row.id)}
                      className="rounded border-slate-700 bg-slate-900/80 text-teal-400 focus:ring-0 focus:ring-offset-0 cursor-pointer accent-teal-400 h-3.5 w-3.5"
                    />
                  </td>

                  {/* Block */}
                  <td className="py-3 px-3 font-semibold text-slate-100 whitespace-nowrap">
                    {row.block}
                  </td>

                  {/* Floor */}
                  <td className="py-3 px-3 font-medium text-slate-200">
                    {row.floor}
                  </td>

                  {/* Zone */}
                  <td className="py-3 px-3 font-medium text-slate-300">
                    {row.zone}
                  </td>

                  {/* Department */}
                  <td className="py-3 px-3 font-semibold text-slate-200 whitespace-nowrap">
                    {row.department}
                  </td>

                  {/* Location */}
                  <td className="py-3 px-3 font-extrabold text-white whitespace-nowrap">
                    {row.location}
                  </td>

                  {/* Window */}
                  <td className="py-3 px-3 font-mono text-slate-400 text-[11px] whitespace-nowrap">
                    {row.window}
                  </td>

                  {/* TAT */}
                  <td className="py-3 px-3 font-mono text-slate-200 font-medium">
                    {row.tat}
                  </td>

                  {/* Sched */}
                  <td className="py-3 px-3 font-mono text-slate-200 font-medium">
                    {row.sched}
                  </td>

                  {/* Approval */}
                  <td className="py-3 px-3 whitespace-nowrap">
                    {row.approval ? (
                      <span className="inline-flex items-center gap-1.5 text-emerald-400 font-semibold">
                        <Check size={14} className="stroke-[3]" />
                        <span>Yes</span>
                      </span>
                    ) : (
                      <span className="text-slate-500 font-mono">——</span>
                    )}
                  </td>

                  {/* Status Badge */}
                  <td className="py-3 px-3 whitespace-nowrap">
                    {row.status === 'ACTIVE' ? (
                      <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold font-mono tracking-wider bg-emerald-950/80 border border-emerald-800/40 text-emerald-400">
                        <span className="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
                        ACTIVE
                      </span>
                    ) : (
                      <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold font-mono tracking-wider bg-slate-800/80 border border-slate-700/50 text-slate-400">
                        <span className="h-1.5 w-1.5 rounded-full bg-slate-400"></span>
                        INACTIVE
                      </span>
                    )}
                  </td>

                  {/* Action Icon Buttons */}
                  <td className="py-3 px-4 text-right whitespace-nowrap pr-6">
                    <div className="inline-flex items-center gap-1.5">
                      <button
                        title="Edit"
                        className="p-1.5 rounded-md bg-[#0b1b2d] hover:bg-slate-700/60 border border-slate-800 text-slate-400 hover:text-slate-200 transition-colors"
                      >
                        <Pencil size={13} />
                      </button>
                      <button
                        title="Options"
                        className="p-1.5 rounded-md bg-[#0b1b2d] hover:bg-slate-700/60 border border-slate-800 text-slate-400 hover:text-slate-200 transition-colors"
                      >
                        <Menu size={13} />
                      </button>
                      <button
                        title="Security"
                        className="p-1.5 rounded-md bg-[#0b1b2d] hover:bg-slate-700/60 border border-slate-800 text-slate-400 hover:text-slate-200 transition-colors"
                      >
                        <ShieldCheck size={13} />
                      </button>
                      <button
                        title="QR Code"
                        className="p-1.5 rounded-md bg-[#0b1b2d] hover:bg-slate-700/60 border border-slate-800 text-slate-400 hover:text-slate-200 transition-colors"
                      >
                        <QrCode size={13} />
                      </button>
                      <button
                        title="Toggle Power"
                        className="p-1.5 rounded-md bg-[#0b1b2d] hover:bg-slate-700/60 border border-slate-800 text-slate-400 hover:text-slate-200 transition-colors"
                      >
                        <Power size={13} />
                      </button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

     
    </div>
  );
}