Table view

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 />

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>
   );
 };

pos/src/components/TableSelectionDialog.tsx

@@ -1,30 +1,18 @@
 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';
 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 */}

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} />;
+  }
+};
+

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",

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) {
@@ -39,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[];
-} 
+} 
+
+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;
+}