Feature/dashboard api integration

.env

@@ -4,7 +4,7 @@
 
 # Set to true to use mock data (no backend required)
 # Set to false when the real backend is ready
-VITE_USE_MOCK=false
+VITE_USE_MOCK=true
 
 # Backend API base URL (used when VITE_USE_MOCK=false)
 VITE_API_BASE_URL=https://revive-backend-production-93ea.up.railway.app/

src/components/Dashboard/LiveKitchen/ChefManagement.jsx

@@ -0,0 +1,104 @@
+import { useState, useEffect } from "react";
+import { FiUsers, FiEdit2, FiCheck, FiX } from "react-icons/fi";
+import { STATIONS, buildChefsFromTickets } from "./constants";
+import EmptyState from "../shared/EmptyState";
+import StatusBadge from "../shared/StatusBadge";
+
+function EditableChefName({ chefId, currentName, onSave }) {
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState(currentName);
+
+  // Keep the edit buffer in sync with server-side name updates
+  // (e.g. after a successful save refetches data with a new displayName).
+  useEffect(() => {
+    if (!editing) setValue(currentName);
+  }, [currentName, editing]);
+
+  const handleSave = () => {
+    const trimmed = value.trim();
+    if (trimmed && trimmed !== currentName) onSave({ chefId, displayName: trimmed });
+    setEditing(false);
+  };
+  const handleCancel = () => { setValue(currentName); setEditing(false); };
+
+  if (!editing) {
+    return (
+      <div className="flex items-center gap-2 group/name">
+        <span className="text-[14px] font-bold text-[#1a1a1a] truncate">{currentName || "Unnamed"}</span>
+        <button type="button" onClick={() => setEditing(true)}
+          aria-label={`Edit name for ${currentName || "chef"}`}
+          className="opacity-0 group-hover/name:opacity-100 bg-transparent border-none cursor-pointer p-1 rounded hover:bg-orange-50 transition-all">
+          <FiEdit2 size={13} className="text-orange-500" />
+        </button>
+      </div>
+    );
+  }
+  return (
+    <div className="flex items-center gap-1.5">
+      <input type="text" value={value} onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => { if (e.key === "Enter") handleSave(); if (e.key === "Escape") handleCancel(); }}
+        autoFocus className="text-[13px] font-medium text-[#1a1a1a] border border-orange-300 rounded-lg px-2 py-1 outline-none focus:border-orange-500 w-[140px]" />
+      <button type="button" onClick={handleSave} aria-label="Save name" className="bg-transparent border-none cursor-pointer p-1 rounded hover:bg-green-50 transition-colors">
+        <FiCheck size={14} className="text-green-600" />
+      </button>
+      <button type="button" onClick={handleCancel} aria-label="Cancel name edit" className="bg-transparent border-none cursor-pointer p-1 rounded hover:bg-red-50 transition-colors">
+        <FiX size={14} className="text-red-500" />
+      </button>
+    </div>
+  );
+}
+
+export function ChefManagement({ tickets, isLoading, error, onUpdateStatus, onUpdateStation, onUpdateName }) {
+  const chefs = buildChefsFromTickets(tickets);
+
+  return (
+    <div className="flex flex-col gap-4 mt-8">
+      <h3 className="text-[20px] font-bold text-[#1a1a1a] m-0 px-2 flex items-center gap-2">
+        <FiUsers size={20} className="text-orange-500" />
+        Chef Management
+      </h3>
+
+      {/* Only show empty state after the query has finished successfully */}
+      {!isLoading && !error && chefs.length === 0 ? (
+        <div className="bg-white rounded-3xl shadow-sm">
+          <EmptyState icon={FiUsers} title="No chefs found"
+            description="Chef data will appear here once tickets with assigned chefs are loaded." />
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {chefs.map((chef) => (
+            <div key={chef.id} className="bg-white rounded-3xl p-5 shadow-sm border border-gray-50 flex flex-col gap-4 hover:shadow-md transition-shadow">
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex flex-col gap-1 min-w-0">
+                  <EditableChefName chefId={chef.id} currentName={chef.displayName} onSave={onUpdateName} />
+                  <span className="text-[11px] text-gray-400 font-medium">ID: {chef.id}</span>
+                </div>
+                <StatusBadge status={chef.status} />
+              </div>
+
+              <div className="flex flex-col gap-1.5">
+                <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Station</label>
+                <select value={chef.station} onChange={(e) => onUpdateStation({ chefId: chef.id, station: e.target.value })}
+                  className="text-[13px] font-medium text-[#1a1a1a] border border-gray-200 rounded-xl px-3 py-2 outline-none focus:border-orange-400 bg-white cursor-pointer transition-colors hover:border-gray-300">
+                  {STATIONS.map((s) => <option key={s} value={s}>{s}</option>)}
+                </select>
+              </div>
+
+              <div className="flex items-center justify-between mt-auto pt-2 border-t border-gray-100">
+                <span className="text-[11px] text-gray-400 font-medium">
+                  {chef.ticketCount} active ticket{chef.ticketCount !== 1 ? "s" : ""}
+                </span>
+                <button type="button"
+                  onClick={() => onUpdateStatus({ chefId: chef.id, status: chef.status === "ACTIVE" ? "INACTIVE" : "ACTIVE" })}
+                  className={`px-3 py-1.5 rounded-xl text-[11px] font-bold transition-all cursor-pointer border-none shadow-sm ${chef.status === "ACTIVE" ? "bg-red-50 text-red-500 hover:bg-red-100" : "bg-green-50 text-green-600 hover:bg-green-100"
+                    }`}>
+                  {chef.status === "ACTIVE" ? "Deactivate" : "Activate"}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Dashboard/LiveKitchen/KitchenTicketsTable.jsx

@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { FiRefreshCw } from "react-icons/fi";
+import { TICKET_TABS, TICKET_HEADERS, STATUS_FLOW, formatTicketTime, getTicketActionStyle } from "./constants";
+import EmptyState from "../shared/EmptyState";
+import StatusBadge from "../shared/StatusBadge";
+import { DashboardPageSkeleton } from "../shared/DashboardSkeleton";
+import ErrorState from "../shared/ErrorState";
+
+export function KitchenTicketsTable({ tickets, isLoading, error, isFetching, onRetry, onAction }) {
+  const [activeTab, setActiveTab] = useState("All");
+
+  if (error) return <ErrorState message="Failed to load kitchen tickets." onRetry={onRetry} />;
+  if (isLoading) return <DashboardPageSkeleton />;
+
+  const allTickets = Array.isArray(tickets) ? tickets : [];
+  const tabFiltered = activeTab === "All" ? [...allTickets] : allTickets.filter((t) => t.status === activeTab);
+  const totalCount = allTickets.length;
+  const countsByStatus = allTickets.reduce((acc, t) => { acc[t.status] = (acc[t.status] || 0) + 1; return acc; }, {});
+
+  return (
+    <div className="flex flex-col gap-4 mt-10">
+      <div className="flex items-center justify-between px-2">
+        <h3 className="text-[20px] font-bold text-[#1a1a1a] m-0">Kitchen Tickets</h3>
+        <button type="button" onClick={onRetry}
+          className="flex items-center gap-1.5 text-[13px] font-semibold text-orange-500 hover:text-orange-600 cursor-pointer transition-colors bg-transparent border-none">
+          <FiRefreshCw size={14} className={isFetching ? "animate-spin" : ""} />
+          Refresh
+        </button>
+      </div>
+
+      <div className="bg-white rounded-3xl shadow-sm py-4 px-2">
+        {/* Tab bar */}
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 pb-4 border-b border-gray-100 gap-4 sm:gap-0">
+          <div className="flex items-center gap-6 overflow-x-auto w-full">
+            {TICKET_TABS.map((tab) => {
+              const count = tab === "All" ? totalCount : (countsByStatus[tab] || 0);
+              const isActive = activeTab === tab;
+              const label = tab === "All" ? "All Tickets" : tab;
+              return (
+                <button type="button" key={tab} onClick={() => setActiveTab(tab)}
+                  className={`px-4 py-1.5 rounded-full cursor-pointer text-[13px] font-semibold transition-all duration-200 whitespace-nowrap border ${
+                    isActive ? "border-orange-500 text-[#1a1a1a] bg-white" : "border-transparent text-gray-500 hover:text-gray-700 bg-transparent"
+                  }`}>
+                  {label} <span className={isActive ? "text-orange-500" : "text-orange-400"}>({count})</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse min-w-[700px]">
+            <thead>
+              <tr className="border-b border-gray-100">
+                {TICKET_HEADERS.map((h) => (
+                  <th key={h} className="px-5 pt-4 pb-3 text-left text-[12px] font-bold text-gray-500 tracking-wide">{h}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {tabFiltered.length === 0 && (
+                <tr><td colSpan={6}>
+                  <EmptyState title="No tickets found" description={`No tickets match "${activeTab}".`} />
+                </td></tr>
+              )}
+              {tabFiltered.map((ticket) => {
+                const flow = STATUS_FLOW[ticket.status];
+                return (
+                  <tr key={ticket.id} className="group transition-colors border-b border-gray-100 last:border-none hover:bg-orange-50/30">
+                    <td className="px-5 py-4 text-[13px] font-mono font-medium text-gray-500">#{ticket.id}</td>
+                    <td className="px-5 py-4 text-[13px] font-mono font-medium text-[#1a1a1a]">#{ticket.orderId}</td>
+                    <td className="px-5 py-4"><StatusBadge status={ticket.status} /></td>
+                    <td className="px-5 py-4 text-[13px] font-medium text-[#1a1a1a]">
+                      {ticket.chefDisplayName || (ticket.assignedChefId != null ? `Chef #${ticket.assignedChefId}` : "Unassigned")}
+                    </td>
+                    <td className="px-5 py-4 text-[13px] text-gray-500 font-medium">{formatTicketTime(ticket.createdAt)}</td>
+                    <td className="px-5 py-4">
+                      {flow ? (
+                        <button type="button" onClick={() => onAction(ticket.id, flow.next, flow.label)}
+                          className={`px-4 py-1.5 rounded-xl text-[12px] font-bold transition-all shadow-sm cursor-pointer border-none ${getTicketActionStyle(ticket.status)}`}>
+                          {flow.label}
+                        </button>
+                      ) : (
+                        <span className="text-[12px] font-semibold text-gray-400 italic">Completed</span>
+                      )}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Dashboard/LiveKitchen/LiveIndicator.jsx

@@ -0,0 +1,22 @@
+import { FiRefreshCw } from "react-icons/fi";
+
+export function LiveIndicator({ title = "Live Kitchen", isFetching, onRefresh }) {
+  return (
+    <div className="bg-[#F5F6F8] rounded-xl px-6 py-3 shadow-sm relative flex items-center justify-center min-h-[48px]">
+      <div className="flex items-center gap-3">
+        <span className="w-3 h-3 rounded-full bg-red-700 animate-pulse shadow-sm shadow-red-700/60" />
+        <span className="text-[16px] font-medium text-[#1a1a1a] uppercase tracking-wider">{title}</span>
+      </div>
+      <div className="absolute right-6">
+        <button
+          type="button"
+          onClick={onRefresh}
+          className="flex items-center gap-1.5 text-[13px] font-semibold text-orange-500 hover:text-orange-600 cursor-pointer transition-colors border-none bg-transparent"
+        >
+          <FiRefreshCw size={14} className={isFetching ? "animate-spin" : ""} />
+          Refresh
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/Dashboard/LiveKitchen/OrderCards.jsx

@@ -0,0 +1,111 @@
+import { FiInbox } from "react-icons/fi";
+import { COLUMNS, getActionButtonStyle } from "./constants";
+
+export function OrderInfoGrid({ order }) {
+  const displayName = order.name ||
+    (Array.isArray(order.items) ? order.items.join(", ") : order.items);
+
+  return (
+    <div className="grid grid-cols-[44px_1fr] gap-x-2 gap-y-1 text-[11px] sm:text-[12px]">
+      <span className="text-gray-500 font-medium pt-0.5">Order</span>
+      <span className="text-[#1a1a1a] font-semibold text-right pt-0.5">{order.id}</span>
+
+      <span className="text-gray-500 font-medium">Time</span>
+      <span className="text-[#1a1a1a] font-semibold text-right">{order.time}</span>
+
+      <span className="text-gray-500 font-medium">Name</span>
+      <span className="text-[#1a1a1a] font-semibold truncate text-right" title={displayName}>
+        {displayName}
+      </span>
+
+      <span className="text-gray-500 font-medium pt-1">Notes</span>
+      <div className="flex justify-end pt-1">
+        {order.notes ? (
+          <span className="bg-[#FFF4D2] text-[#B48400] px-2.5 py-0.5 rounded-full text-[10px] font-bold">
+            {order.notes}
+          </span>
+        ) : (
+          <span className="text-gray-400 text-[10px] font-medium italic">None</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ViewDetailsHint() {
+  return (
+    <div className="flex items-center justify-center gap-1 opacity-0 group-hover:opacity-100 transition-all duration-200 -mt-1 translate-y-1 group-hover:translate-y-0">
+      <span className="text-[10px] font-semibold text-orange-400 tracking-wide">Click to view details</span>
+      <span className="text-orange-400 text-[10px]">→</span>
+    </div>
+  );
+}
+
+export function OrderCard({ order, columnKey, onAction, onViewOrder }) {
+  const col = COLUMNS.find((c) => c.key === columnKey);
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className="group bg-white rounded-2xl p-4 shadow-md flex flex-col gap-3 cursor-pointer hover:shadow-lg transition-all duration-200 border border-transparent hover:border-orange-200"
+      onClick={onViewOrder}
+      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onViewOrder(); } }}
+    >
+      <OrderInfoGrid order={order} />
+      <ViewDetailsHint />
+
+      {/* Action buttons */}
+      <div className="flex justify-center mt-1 gap-2">
+        {col.prevStatus && (
+          <button
+            onClick={(e) => { e.stopPropagation(); onAction(order.id, col.prevStatus); }}
+            className={`flex-1 py-2 rounded-xl text-[12px] font-bold transition-all shadow-sm ${getActionButtonStyle("Start Preparing")}`}
+          >
+            Undo
+          </button>
+        )}
+        <button
+          onClick={(e) => { e.stopPropagation(); onAction(order.id, col.nextStatus); }}
+          className={`flex-2 py-2 rounded-xl text-[12px] font-bold transition-all shadow-sm ${getActionButtonStyle(col.action)}`}
+        >
+          {col.action}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function DoneCard({ order, onViewOrder, onRevert }) {
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className="group bg-white rounded-2xl p-4 border border-gray-100 shadow-md hover:shadow-lg transition-all duration-200 flex flex-col gap-3 min-w-[280px] shrink-0 cursor-pointer hover:border-orange-200"
+      onClick={onViewOrder}
+      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onViewOrder(); } }}
+    >
+      <OrderInfoGrid order={order} />
+      <ViewDetailsHint />
+      <div className="flex justify-center mt-1">
+        <button
+          onClick={(e) => { e.stopPropagation(); if (onRevert) onRevert(); }}
+          className="w-full py-2 rounded-xl text-[12px] font-bold transition-all shadow-sm bg-gray-100 hover:bg-orange-50 text-gray-400 hover:text-orange-500 border border-gray-100 hover:border-orange-200 cursor-pointer"
+        >
+          Not Done
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function EmptyColumn({ label }) {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center gap-3 py-16">
+      <div className="w-16 h-16 rounded-2xl bg-[#F5F6F8] flex items-center justify-center shadow-inner">
+        <FiInbox size={26} className="text-gray-300" />
+      </div>
+      <span className="text-[14px] font-medium text-gray-400 tracking-wide">{label}</span>
+    </div>
+  );
+}