From 7c513a90c76594baf54e46b9089e7eba64baf1c6 Mon Sep 17 00:00:00 2001
From: shzd-tridz <shahzad@tridz.com>
Date: Tue, 25 Nov 2025 08:57:52 +0000
Subject: [PATCH 1/3] feat: table display

---
 pos/src/App.tsx                             |   2 +
 pos/src/components/Footer.tsx               |  20 +-
 pos/src/components/TableSelectionDialog.tsx |  29 +-
 pos/src/components/TableShapeIcon.tsx       |  20 ++
 pos/src/lib/table-api.ts                    |   1 +
 pos/src/pages/Table.tsx                     | 298 ++++++++++++++++++++
 ury/ury_pos/api.py                          |   2 +-
 7 files changed, 333 insertions(+), 39 deletions(-)
 create mode 100644 pos/src/components/TableShapeIcon.tsx
 create mode 100644 pos/src/pages/Table.tsx

diff --git a/pos/src/App.tsx b/pos/src/App.tsx
index a39267b..e74b563 100644
--- a/pos/src/App.tsx
+++ b/pos/src/App.tsx
@@ -3,6 +3,7 @@ import Footer from './components/Footer';
 import Header from './components/Header';
 import Orders from './pages/Orders';
 import POS from './pages/POS';
+import Table from './pages/Table';
 import AuthGuard from './components/AuthGuard';
 import POSOpeningProvider from './components/POSOpeningProvider';
 import ScreenSizeProvider from './components/ScreenSizeProvider';
@@ -31,6 +32,7 @@ function App() {
                   <Routes>
                     <Route path="/" element={<POS/>} />
                     <Route path="/orders" element={<Orders />} />
+                    <Route path="/table" element={<Table />} />
                   </Routes>
                 </div>
                 <Footer />
diff --git a/pos/src/components/Footer.tsx b/pos/src/components/Footer.tsx
index e0ac95b..5e9ddc8 100644
--- a/pos/src/components/Footer.tsx
+++ b/pos/src/components/Footer.tsx
@@ -1,25 +1,16 @@
-import { useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import { 
   LayoutGrid, 
   ClipboardList, 
+  Table,
 } from 'lucide-react';
 import { cn } from '../lib/utils';
-import { usePOSStore } from '../store/pos-store';
-import PaymentDialog from './PaymentDialog';
 
 const Footer = () => {
-  const { activeOrders } = usePOSStore();
-  const [showPayment, setShowPayment] = useState(false);
-
-  const total = activeOrders.reduce((sum, item) => {
-    const basePrice = item.selectedVariant?.price || item.price;
-    const addonsTotal = item.selectedAddons?.reduce((sum, addon) => sum + addon.price, 0) || 0;
-    return sum + (basePrice + addonsTotal) * item.quantity;
-  }, 0);
 
   const navItems = [
     { icon: LayoutGrid, label: 'POS', path: '/' },
+    {icon: Table, label: 'Table', path: '/table'},
     { icon: ClipboardList, label: 'Orders', path: '/orders' },
   ];
 
@@ -44,13 +35,6 @@ const Footer = () => {
           ))}
         </div>
       </nav>
-      
-      {showPayment && (
-        <PaymentDialog
-          onClose={() => setShowPayment(false)}
-          totalAmount={total}
-        />
-      )}
     </div>
   );
 };
diff --git a/pos/src/components/TableSelectionDialog.tsx b/pos/src/components/TableSelectionDialog.tsx
index 342ef8a..a9acd69 100644
--- a/pos/src/components/TableSelectionDialog.tsx
+++ b/pos/src/components/TableSelectionDialog.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { X, Circle, Square, RectangleHorizontal, AlertTriangle } from 'lucide-react';
+import { X, Square, AlertTriangle } from 'lucide-react';
 import { usePOSStore } from '../store/pos-store';
 import { Dialog, DialogContent } from './ui/dialog';
 import { Button } from './ui/button';
@@ -7,24 +7,12 @@ import { cn } from '../lib/utils';
 import { getRooms, getTables, Room, Table } from '../lib/table-api';
 import { Badge } from './ui/badge';
 import { Spinner } from './ui/spinner';
+import { TableShapeIcon } from './TableShapeIcon';
 
 interface Props {
   onClose: () => void;
 }
 
-const TableIcon = ({ type, className }: { type: 'Circle' | 'Square' | 'Rectangle' | undefined; className?: string }) => {
-  switch (type) {
-    case 'Circle':
-      return <Circle className={className} />;
-    case 'Square':
-      return <Square className={className} />;
-    case 'Rectangle':
-      return <RectangleHorizontal className={className} />;
-    default:
-      return <Square className={className} />;
-  }
-};
-
 const TableSelectionDialog: React.FC<Props> = ({ onClose }) => {
   const { selectedTable, setSelectedTable, posProfile } = usePOSStore();
   const [rooms, setRooms] = useState<Room[]>([]);
@@ -186,12 +174,13 @@ const TableSelectionDialog: React.FC<Props> = ({ onClose }) => {
                     'focus-visible:ring-2 focus-visible:ring-primary-600',
                   )}
                 >
-                  <TableIcon
-                  type={table.table_shape || "Rectangle"}
-                  className={cn(
-                    'w-8 h-8',
-                    table.occupied === 1 ? 'text-amber-500' : 'text-gray-500'
-                  )} />
+                  <TableShapeIcon
+                    shape={table.table_shape}
+                    className={cn(
+                      'w-8 h-8',
+                      table.occupied === 1 ? 'text-amber-500' : 'text-gray-500'
+                    )}
+                  />
                   <div className="text-center">
                     <div className="font-medium">{table.name}</div>
                     <div className="mt-2 h-4"> {/* Height placeholder that matches Badge height */}
diff --git a/pos/src/components/TableShapeIcon.tsx b/pos/src/components/TableShapeIcon.tsx
new file mode 100644
index 0000000..f670168
--- /dev/null
+++ b/pos/src/components/TableShapeIcon.tsx
@@ -0,0 +1,20 @@
+import { Circle, RectangleHorizontal, Square } from 'lucide-react';
+import type { Table } from '../lib/table-api';
+
+interface TableShapeIconProps {
+  shape?: Table['table_shape'];
+  className?: string;
+}
+
+export const TableShapeIcon = ({ shape = 'Rectangle', className }: TableShapeIconProps) => {
+  switch (shape) {
+    case 'Circle':
+      return <Circle className={className} />;
+    case 'Square':
+      return <Square className={className} />;
+    case 'Rectangle':
+    default:
+      return <RectangleHorizontal className={className} />;
+  }
+};
+
diff --git a/pos/src/lib/table-api.ts b/pos/src/lib/table-api.ts
index 55eb5c0..a6dacda 100644
--- a/pos/src/lib/table-api.ts
+++ b/pos/src/lib/table-api.ts
@@ -13,6 +13,7 @@ export interface Table {
   is_take_away: number;
   restaurant_room: string;
   table_shape:'Circle' | 'Square' | 'Rectangle';
+  no_of_seats?: number;
 }
 
 export async function getRestaurantMenu(posProfile: string, room?: string | null) {
diff --git a/pos/src/pages/Table.tsx b/pos/src/pages/Table.tsx
new file mode 100644
index 0000000..a34607f
--- /dev/null
+++ b/pos/src/pages/Table.tsx
@@ -0,0 +1,298 @@
+import { useEffect, useMemo, useState, type MouseEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { AlertTriangle, Eye, Printer, Square, Users } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { usePOSStore } from '../store/pos-store';
+import { getRooms, getTables, type Room, type Table } from '../lib/table-api';
+import { Spinner } from '../components/ui/spinner';
+import { Button } from '../components/ui/button';
+import { Badge } from '../components/ui/badge';
+import { DINE_IN } from '../data/order-types';
+import { TableShapeIcon } from '../components/TableShapeIcon';
+
+const sortTables = (tables: Table[]) => [...tables].sort((a, b) => a.name.localeCompare(b.name));
+
+const TableView = () => {
+  const navigate = useNavigate();
+  const { posProfile, setSelectedTable, setSelectedOrderType } = usePOSStore();
+
+  const branch = posProfile?.branch ?? null;
+  const [rooms, setRooms] = useState<Room[]>([]);
+  const [selectedRoom, setSelectedRoom] = useState<string | null>(null);
+  const [tables, setTables] = useState<Table[]>([]);
+  const [tablesCache, setTablesCache] = useState<Record<string, Table[]>>({});
+  const [loadingRooms, setLoadingRooms] = useState(false);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchRooms() {
+      if (!branch) return;
+      setLoadingRooms(true);
+      setError(null);
+
+      try {
+        const sessionKey = `ury_rooms_${branch}`;
+        const cachedRooms = sessionStorage.getItem(sessionKey);
+
+        if (cachedRooms) {
+          const parsedRooms = JSON.parse(cachedRooms) as Room[];
+          setRooms(parsedRooms);
+          setSelectedRoom(prev => prev ?? (parsedRooms[0]?.name ?? null));
+        } else {
+          const fetchedRooms = await getRooms(branch);
+          setRooms(fetchedRooms);
+          setSelectedRoom(prev => prev ?? (fetchedRooms[0]?.name ?? null));
+          sessionStorage.setItem(sessionKey, JSON.stringify(fetchedRooms));
+        }
+      } catch (e) {
+        console.error(e);
+        setError('Failed to load rooms');
+      } finally {
+        setLoadingRooms(false);
+      }
+    }
+
+    fetchRooms();
+  }, [branch]);
+
+  useEffect(() => {
+    async function fetchTables() {
+      if (!selectedRoom) return;
+      setError(null);
+
+      if (tablesCache[selectedRoom]) {
+        console.log("herehere")
+        setTables(sortTables(tablesCache[selectedRoom]));
+        return;
+      }
+
+      setLoadingTables(true);
+      try {
+        const fetchedTables = await getTables(selectedRoom);
+        const sortedTables = sortTables(fetchedTables);
+        setTables(sortedTables);
+        setTablesCache(prev => ({ ...prev, [selectedRoom]: sortedTables }));
+      } catch (e) {
+        console.error(e);
+        setError('Failed to load tables');
+        setTables([]);
+      } finally {
+        setLoadingTables(false);
+      }
+    }
+
+    fetchTables();
+  }, [selectedRoom, tablesCache]);
+
+  const handleNavigateToPOS = (tableName: string) => {
+    if (!selectedRoom) return;
+    setSelectedOrderType(DINE_IN);
+    setSelectedTable(tableName, selectedRoom);
+    navigate('/');
+  };
+
+  const handlePreviewTable = (table: Table, event?: MouseEvent<HTMLButtonElement>) => {
+    event?.stopPropagation();
+    handleNavigateToPOS(table.name);
+  };
+
+  const handlePrintTable = (table: Table, event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    console.log('Print bill for table:', table.name);
+  };
+
+  const formatInvoiceTime = (timestamp: string | null) => {
+    if (!timestamp) return 'No bill activity yet';
+
+    const parsedDate = new Date(timestamp);
+    if (!Number.isNaN(parsedDate.getTime())) {
+      return parsedDate.toLocaleTimeString(undefined, { hour: 'numeric', minute: 'numeric' });
+    }
+
+    const timeOnlyMatch = timestamp.match(/^(\d{1,2}):(\d{2}):(\d{2})(?:\.(\d+))?$/);
+    if (timeOnlyMatch) {
+      const [, hours, minutes, seconds] = timeOnlyMatch;
+      const date = new Date();
+      date.setHours(Number(hours), Number(minutes), Number(seconds), 0);
+      return date.toLocaleTimeString(undefined, { hour: 'numeric', minute: 'numeric' });
+    }
+
+    return timestamp;
+  };
+
+  const tablesToDisplay = useMemo(() => sortTables(tables), [tables]);
+
+  const hasRooms = rooms.length > 0;
+  const showGridSkeleton = loadingTables || !selectedRoom;
+
+  const handleRoomChange = (roomName: string) => {
+    setSelectedRoom(roomName);
+
+    if (tablesCache[roomName]) {
+      setTables(sortTables(tablesCache[roomName]));
+      setLoadingTables(false);
+    } else {
+      setLoadingTables(true);
+      setTables([]);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-4 bg-white border-b border-gray-200">
+        <div className="max-w-screen-xl mx-auto">
+          <div className="flex flex-col gap-3">
+            <div className="flex flex-wrap gap-2">
+              {loadingRooms && (
+                <div className="flex-1 min-w-[160px]">
+                  <Spinner message="Loading rooms..." />
+                </div>
+              )}
+
+              {!loadingRooms && !hasRooms && (
+                <div className="flex items-center gap-2 text-gray-500 text-sm">
+                  <AlertTriangle className="w-4 h-4" />
+                  No rooms found for this branch
+                </div>
+              )}
+
+              {rooms.map(room => (
+                <Button
+                  key={room.name}
+                  variant="tab"
+                  data-selected={selectedRoom === room.name}
+                  onClick={() => handleRoomChange(room.name)}
+                  className="h-fit"
+                >
+                  {room.name}
+                  {tablesCache[room.name] && (
+                    <Badge variant="outline" className="ml-2 bg-white/60">
+                      {tablesCache[room.name].length}
+                    </Badge>
+                  )}
+                </Button>
+              ))}
+            </div>
+
+            {/* <div className="flex justify-end">
+              <Button
+                variant="ghost"
+                className="flex items-center gap-2 text-sm"
+                onClick={() => console.log('Layout view coming soon')}
+              >
+                <Layout className="w-4 h-4" />
+                Layout view
+              </Button>
+            </div> */}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto bg-gray-50 p-6">
+        <div className="max-w-screen-xl mx-auto h-full">
+          {error && !loadingTables ? (
+            <div className="h-full flex flex-col items-center justify-center gap-3 text-red-500">
+              <AlertTriangle className="w-10 h-10" />
+              <p>{error}</p>
+            </div>
+          ) : showGridSkeleton ? (
+            <Spinner message="Loading tables..." />
+          ) : tablesToDisplay.length === 0 ? (
+            <div className="h-full flex flex-col items-center justify-center gap-3 text-gray-500">
+              <Square className="w-10 h-10" />
+              <p>No tables found for this room</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+              {tablesToDisplay.map(table => {
+                const isOccupied = table.occupied === 1;
+
+                return (
+                  <div
+                    key={table.name}
+                    role={isOccupied ? 'group' : 'button'}
+                    tabIndex={isOccupied ? -1 : 0}
+                    onClick={() => {
+                      if (!isOccupied) {
+                        handleNavigateToPOS(table.name);
+                      }
+                    }}
+                    className={cn(
+                      'relative bg-white rounded-lg border-2 p-4 transition-all flex flex-col justify-between gap-y-4',
+                      isOccupied
+                        ? 'border-amber-400 bg-amber-50 text-amber-900'
+                        : 'border-emerald-300 bg-emerald-50 text-emerald-900 hover:border-emerald-400 hover:shadow-md cursor-pointer',
+                    )}
+                  >
+                    <div>
+                        <div className="flex items-center justify-between mb-3">
+                        <div className="flex items-center gap-2">
+                            <TableShapeIcon shape={table.table_shape || 'Rectangle'} />
+                            <span className="font-semibold text-lg text-gray-900">{table.name}</span>
+                        </div>
+                        <Badge variant={isOccupied ? 'warning' : 'success'}>
+                            {isOccupied ? 'Occupied' : 'Available'}
+                        </Badge>
+                        </div>
+
+                        <div className="space-y-2 text-sm text-gray-700">
+                        <div className="flex items-center justify-between">
+                            <span className="font-medium">Room</span>
+                            <span>{table.restaurant_room}</span>
+                        </div>
+                        {isOccupied && (
+                            <div className="flex items-center justify-between">
+                            <span className="font-medium">Started at</span>
+                            <span>{formatInvoiceTime(table.latest_invoice_time)}</span>
+                            </div>
+                        )}
+                        {typeof table.no_of_seats === 'number' && (
+                            <div className="flex items-center justify-between">
+                            <span className="font-medium">Seats</span>
+                            <span className="flex items-center gap-1">
+                                <Users className="w-3 h-3" />
+                                {table.no_of_seats}
+                            </span>
+                            </div>
+                        )}
+                        {table.is_take_away === 1 && (
+                            <Badge variant="pending" className="mt-2">
+                            Take away
+                            </Badge>
+                        )}
+                        </div>
+                    </div>
+
+                    {isOccupied ? (
+                      <div className="flex gap-2 pt-3 mt-3 border-t border-amber-200">
+                        <button
+                          onClick={(event) => handlePreviewTable(table, event)}
+                          className="flex-1 flex items-center justify-center gap-2 py-2 text-xs font-semibold rounded bg-white hover:bg-amber-100 transition"
+                        >
+                          <Eye className="w-3 h-3" />
+                          Preview
+                        </button>
+                        <button
+                          onClick={(event) => handlePrintTable(table, event)}
+                          className="flex-1 flex items-center justify-center gap-2 py-2 text-xs font-semibold rounded bg-white hover:bg-amber-100 transition"
+                        >
+                          <Printer className="w-3 h-3" />
+                          Print
+                        </button>
+                      </div>
+                    ) : (
+                      <p className="text-sm text-gray-500">Tap to start a new dine-in order</p>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TableView;
\ No newline at end of file
diff --git a/ury/ury_pos/api.py b/ury/ury_pos/api.py
index 64d48ec..0cbf4b7 100644
--- a/ury/ury_pos/api.py
+++ b/ury/ury_pos/api.py
@@ -9,7 +9,7 @@ def getTable(room):
     branch_name = getBranch()   
     tables = frappe.get_all(
         "URY Table",
-        fields=["name", "occupied", "latest_invoice_time", "is_take_away", "restaurant_room","table_shape"],
+        fields=["name", "occupied", "latest_invoice_time", "is_take_away", "restaurant_room","table_shape","no_of_seats"],
         filters={"branch": branch_name,"restaurant_room":room,}
     )    
     return tables

From 100d0862071af8df967f24471833da2e100df864 Mon Sep 17 00:00:00 2001
From: shzd-tridz <shahzad@tridz.com>
Date: Tue, 25 Nov 2025 11:44:42 +0000
Subject: [PATCH 2/3] feat: print from table

---
 pos/src/pages/Table.tsx | 93 ++++++++++++++++++++++++++++++++---------
 1 file changed, 74 insertions(+), 19 deletions(-)

diff --git a/pos/src/pages/Table.tsx b/pos/src/pages/Table.tsx
index a34607f..6fe5ab7 100644
--- a/pos/src/pages/Table.tsx
+++ b/pos/src/pages/Table.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useState, type MouseEvent } from 'react';
+import { useCallback, useEffect, useMemo, useState, type MouseEvent } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { AlertTriangle, Eye, Printer, Square, Users } from 'lucide-react';
+import { AlertTriangle, Eye, Loader2, Printer, Square, Users } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { usePOSStore } from '../store/pos-store';
 import { getRooms, getTables, type Room, type Table } from '../lib/table-api';
@@ -9,6 +9,9 @@ import { Button } from '../components/ui/button';
 import { Badge } from '../components/ui/badge';
 import { DINE_IN } from '../data/order-types';
 import { TableShapeIcon } from '../components/TableShapeIcon';
+import { getTableOrder } from '../lib/order-api';
+import { printOrder } from '../lib/print';
+import { showToast } from '../components/ui/toast';
 
 const sortTables = (tables: Table[]) => [...tables].sort((a, b) => a.name.localeCompare(b.name));
 
@@ -24,6 +27,7 @@ const TableView = () => {
   const [loadingRooms, setLoadingRooms] = useState(false);
   const [loadingTables, setLoadingTables] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [printingTable, setPrintingTable] = useState<string | null>(null);
 
   useEffect(() => {
     async function fetchRooms() {
@@ -56,23 +60,24 @@ const TableView = () => {
     fetchRooms();
   }, [branch]);
 
-  useEffect(() => {
-    async function fetchTables() {
-      if (!selectedRoom) return;
+  const loadTables = useCallback(
+    async (roomName: string, options?: { useCache?: boolean }) => {
+      if (!roomName) return;
       setError(null);
 
-      if (tablesCache[selectedRoom]) {
-        console.log("herehere")
-        setTables(sortTables(tablesCache[selectedRoom]));
+      const shouldUseCache = options?.useCache !== false;
+      if (shouldUseCache && tablesCache[roomName]) {
+        setTables(sortTables(tablesCache[roomName]));
+        setLoadingTables(false);
         return;
       }
 
       setLoadingTables(true);
       try {
-        const fetchedTables = await getTables(selectedRoom);
+        const fetchedTables = await getTables(roomName);
         const sortedTables = sortTables(fetchedTables);
         setTables(sortedTables);
-        setTablesCache(prev => ({ ...prev, [selectedRoom]: sortedTables }));
+        setTablesCache(prev => ({ ...prev, [roomName]: sortedTables }));
       } catch (e) {
         console.error(e);
         setError('Failed to load tables');
@@ -80,10 +85,14 @@ const TableView = () => {
       } finally {
         setLoadingTables(false);
       }
-    }
+    },
+    [tablesCache]
+  );
 
-    fetchTables();
-  }, [selectedRoom, tablesCache]);
+  useEffect(() => {
+    if (!selectedRoom) return;
+    loadTables(selectedRoom);
+  }, [selectedRoom, loadTables]);
 
   const handleNavigateToPOS = (tableName: string) => {
     if (!selectedRoom) return;
@@ -97,9 +106,32 @@ const TableView = () => {
     handleNavigateToPOS(table.name);
   };
 
-  const handlePrintTable = (table: Table, event: MouseEvent<HTMLButtonElement>) => {
+  const handlePrintTable = async (table: Table, event: MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
-    console.log('Print bill for table:', table.name);
+
+    if (!posProfile) {
+      showToast.error('POS profile not loaded yet');
+      return;
+    }
+
+    setPrintingTable(table.name);
+    try {
+      const orderResponse = await getTableOrder(table.name);
+      const invoiceId = orderResponse.message?.name;
+
+      if (!invoiceId) {
+        showToast.error('No active order found for this table');
+        return;
+      }
+
+      await printOrder({ orderId: invoiceId, posProfile });
+      showToast.success('Printed successfully');
+      await loadTables(table.restaurant_room, { useCache: false });
+    } catch (error) {
+      showToast.error(error instanceof Error ? error.message : 'Failed to print order');
+    } finally {
+      setPrintingTable(null);
+    }
   };
 
   const formatInvoiceTime = (timestamp: string | null) => {
@@ -115,7 +147,15 @@ const TableView = () => {
       const [, hours, minutes, seconds] = timeOnlyMatch;
       const date = new Date();
       date.setHours(Number(hours), Number(minutes), Number(seconds), 0);
-      return date.toLocaleTimeString(undefined, { hour: 'numeric', minute: 'numeric' });
+      const formatted = date.toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+      });
+      if (/^\d{1,2}:\d{2}$/.test(formatted)) {
+        return formatted;
+      }
+      return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
     }
 
     return timestamp;
@@ -127,6 +167,11 @@ const TableView = () => {
   const showGridSkeleton = loadingTables || !selectedRoom;
 
   const handleRoomChange = (roomName: string) => {
+    if (roomName === selectedRoom) {
+      loadTables(roomName, { useCache: false });
+      return;
+    }
+
     setSelectedRoom(roomName);
 
     if (tablesCache[roomName]) {
@@ -275,10 +320,20 @@ const TableView = () => {
                         </button>
                         <button
                           onClick={(event) => handlePrintTable(table, event)}
-                          className="flex-1 flex items-center justify-center gap-2 py-2 text-xs font-semibold rounded bg-white hover:bg-amber-100 transition"
+                          disabled={printingTable === table.name}
+                          className="flex-1 flex items-center justify-center gap-2 py-2 text-xs font-semibold rounded bg-white hover:bg-amber-100 transition disabled:opacity-60 disabled:cursor-not-allowed"
                         >
-                          <Printer className="w-3 h-3" />
-                          Print
+                          {printingTable === table.name ? (
+                            <>
+                              <Loader2 className="w-3 h-3 animate-spin" />
+                              Printing...
+                            </>
+                          ) : (
+                            <>
+                              <Printer className="w-3 h-3" />
+                              Print
+                            </>
+                          )}
                         </button>
                       </div>
                     ) : (

From 4bea461dafe6ccdcc4cd9b3d9c0763f077a3a46c Mon Sep 17 00:00:00 2001
From: shzd-tridz <shahzad@tridz.com>
Date: Tue, 25 Nov 2025 14:54:52 +0000
Subject: [PATCH 3/3] update: use count api to display counts of table in rooms

---
 pos/src/data/doctypes.ts |  1 +
 pos/src/lib/table-api.ts | 17 ++++++-
 pos/src/pages/Table.tsx  | 96 ++++++++++++++++++++++++++++++++++++++--
 3 files changed, 109 insertions(+), 5 deletions(-)

diff --git a/pos/src/data/doctypes.ts b/pos/src/data/doctypes.ts
index b9ccf74..6e61516 100644
--- a/pos/src/data/doctypes.ts
+++ b/pos/src/data/doctypes.ts
@@ -2,6 +2,7 @@ export const DOCTYPES={
     "POS_PROFILE": "POS Profile",
     "URY_MENU_COURSE": "URY Menu Course",
     "URY_ROOM": "URY Room",
+    "URY_TABLE": "URY Table",
     "CUSTOMER": "Customer",
     "CUSTOMER_GROUP": "Customer Group",
     "CUSTOMER_TERRITORY": "Territory",
diff --git a/pos/src/lib/table-api.ts b/pos/src/lib/table-api.ts
index a6dacda..6bb1bea 100644
--- a/pos/src/lib/table-api.ts
+++ b/pos/src/lib/table-api.ts
@@ -40,4 +40,19 @@ export async function getTables(room: string): Promise<Table[]> {
   const { call } = await import('./frappe-sdk');
   const res = await call.get('ury.ury_pos.api.getTable', { room });
   return res.message as Table[];
-} 
\ No newline at end of file
+} 
+
+export async function getTableCount(room: string, branch?: string): Promise<number> {
+  const filters = [
+    ['restaurant_room', '=', room],
+    ...(branch ? [['branch', '=', branch]] : []),
+  ];
+  const rows = await db.getDocList(DOCTYPES.URY_TABLE, {
+    fields: ['count(name) as count'],
+    filters: filters as any,
+    limit: 1,
+    asDict: true,
+  }) as Array<{ count?: number | string }>;
+  const countValue = rows[0]?.count ?? 0;
+  return typeof countValue === 'number' ? countValue : Number(countValue) || 0;
+}
\ No newline at end of file
diff --git a/pos/src/pages/Table.tsx b/pos/src/pages/Table.tsx
index 6fe5ab7..2c470e4 100644
--- a/pos/src/pages/Table.tsx
+++ b/pos/src/pages/Table.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { AlertTriangle, Eye, Loader2, Printer, Square, Users } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { usePOSStore } from '../store/pos-store';
-import { getRooms, getTables, type Room, type Table } from '../lib/table-api';
+import { getRooms, getTables, getTableCount, type Room, type Table } from '../lib/table-api';
 import { Spinner } from '../components/ui/spinner';
 import { Button } from '../components/ui/button';
 import { Badge } from '../components/ui/badge';
@@ -26,9 +26,16 @@ const TableView = () => {
   const [tablesCache, setTablesCache] = useState<Record<string, Table[]>>({});
   const [loadingRooms, setLoadingRooms] = useState(false);
   const [loadingTables, setLoadingTables] = useState(false);
+  const [roomCounts, setRoomCounts] = useState<Record<string, number>>({});
+  const [loadingRoomCounts, setLoadingRoomCounts] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [printingTable, setPrintingTable] = useState<string | null>(null);
 
+  const persistRoomCounts = useCallback((counts: Record<string, number>) => {
+    if (!branch) return;
+    sessionStorage.setItem(`ury_room_counts_${branch}`, JSON.stringify(counts));
+  }, [branch]);
+
   useEffect(() => {
     async function fetchRooms() {
       if (!branch) return;
@@ -60,6 +67,49 @@ const TableView = () => {
     fetchRooms();
   }, [branch]);
 
+  useEffect(() => {
+    if (!branch || rooms.length === 0) return;
+    const cacheKey = `ury_room_counts_${branch}`;
+    const cachedCounts = sessionStorage.getItem(cacheKey);
+    let shouldFetch = true;
+
+    if (cachedCounts) {
+      try {
+        const parsedCounts = JSON.parse(cachedCounts) as Record<string, number>;
+        setRoomCounts(parsedCounts);
+        const hasAllRooms = rooms.every(room => typeof parsedCounts[room.name] === 'number');
+        if (hasAllRooms) {
+          shouldFetch = false;
+        }
+      } catch {
+        sessionStorage.removeItem(cacheKey);
+      }
+    }
+
+    if (!shouldFetch) return;
+
+    async function fetchRoomCounts() {
+      setLoadingRoomCounts(true);
+      try {
+        const counts = await Promise.all(
+          rooms.map(room => getTableCount(room.name, room.branch))
+        );
+        const nextCounts = rooms.reduce((acc, room, index) => {
+          acc[room.name] = counts[index];
+          return acc;
+        }, {} as Record<string, number>);
+        setRoomCounts(nextCounts);
+        persistRoomCounts(nextCounts);
+      } catch (error) {
+        console.error('Failed to load room counts', error);
+      } finally {
+        setLoadingRoomCounts(false);
+      }
+    }
+
+    fetchRoomCounts();
+  }, [branch, rooms, persistRoomCounts]);
+
   const loadTables = useCallback(
     async (roomName: string, options?: { useCache?: boolean }) => {
       if (!roomName) return;
@@ -89,6 +139,23 @@ const TableView = () => {
     [tablesCache]
   );
 
+  const refreshRoomCount = useCallback(async (roomName: string) => {
+    const roomMeta = rooms.find(room => room.name === roomName);
+    const branchName = roomMeta?.branch ?? branch;
+    if (!roomName || !branchName) return;
+
+    try {
+      const count = await getTableCount(roomName, branchName);
+      setRoomCounts(prev => {
+        const next = { ...prev, [roomName]: count };
+        persistRoomCounts(next);
+        return next;
+      });
+    } catch (error) {
+      console.error(`Failed to refresh count for room ${roomName}`, error);
+    }
+  }, [rooms, branch, persistRoomCounts]);
+
   useEffect(() => {
     if (!selectedRoom) return;
     loadTables(selectedRoom);
@@ -127,6 +194,7 @@ const TableView = () => {
       await printOrder({ orderId: invoiceId, posProfile });
       showToast.success('Printed successfully');
       await loadTables(table.restaurant_room, { useCache: false });
+      await refreshRoomCount(table.restaurant_room);
     } catch (error) {
       showToast.error(error instanceof Error ? error.message : 'Failed to print order');
     } finally {
@@ -211,11 +279,15 @@ const TableView = () => {
                   className="h-fit"
                 >
                   {room.name}
-                  {tablesCache[room.name] && (
+                  {typeof roomCounts[room.name] === 'number' ? (
+                    <Badge variant="outline" className="ml-2 bg-white/60">
+                      {roomCounts[room.name]}
+                    </Badge>
+                  ) : loadingRoomCounts ? (
                     <Badge variant="outline" className="ml-2 bg-white/60">
-                      {tablesCache[room.name].length}
+                      --
                     </Badge>
-                  )}
+                  ) : null}
                 </Button>
               ))}
             </div>
@@ -346,6 +418,22 @@ const TableView = () => {
           )}
         </div>
       </div>
+
+      {/* Status Legend */}
+      <div className="fixed bottom-[4.5rem] w-full p-4 bg-white border-t border-gray-200">
+        <div className="max-w-screen-xl mx-auto">
+          <div className="flex items-center justify-center gap-6 text-sm">
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 bg-green-100 border border-green-300 rounded"></div>
+              <span>Available</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 bg-red-100 border border-red-300 rounded"></div>
+              <span>Occupied</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };