${table.name}

Table Number: ${table.number}

\n $\"QR$ \n

Scan to Order

College Canteen Management System

\n \n \n `);\n printWindow.document.close();\n printWindow.focus();\n setTimeout(() => {\n printWindow.print();\n printWindow.close();\n }, 500);\n }\n };\n\n if (loading) {\n return (\n

Loading tables...

\n );\n }\n\n return (\n

\n {/* Header */}\n

Table Management

\n {\n resetForm();\n setShowAddForm(true);\n }}\n className=\"bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors\"\n >\n ➕ Add Table\n \n

\n\n {/* Add Form */}\n {showAddForm && (\n

Add New Table

\n \n

\n \n Table Number *\n \n setFormData({ ...formData, number: e.target.value })}\n required\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"e.g., T01, T02\"\n />\n

\n\n

\n \n Table Name *\n \n setFormData({ ...formData, name: e.target.value })}\n required\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"e.g., Table 1, Window Table\"\n />\n

\n\n

\n \n Add Table\n \n {\n setShowAddForm(false);\n resetForm();\n }}\n className=\"bg-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-400 transition-colors\"\n >\n Cancel\n \n

\n \n

\n )}\n\n {/* Tables Grid */}\n

\n {tables.length === 0 ? (\n

🪑

No tables found

Start by adding your first table.

\n ) : (\n tables.map(table => (\n

{table.name}

Number: {table.number}

\n \n

QR Code:

\n {table.qr_code}\n

\n \n

\n showQRCode(table)}\n className=\"w-full bg-blue-600 text-white py-2 px-3 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors\"\n >\n 📱 View QR Code\n \n

\n downloadQRCode(table)}\n className=\"bg-green-600 text-white py-2 px-3 rounded-lg text-sm font-medium hover:bg-green-700 transition-colors\"\n >\n 💾 Download\n \n printQRCode(table)}\n className=\"bg-purple-600 text-white py-2 px-3 rounded-lg text-sm font-medium hover:bg-purple-700 transition-colors\"\n >\n 🖨️ Print\n \n

\n ))\n )}\n

\n\n {/* QR Code Modal */}\n {showQRModal && (\n

\n QR Code - {showQRModal.name}\n

\n setShowQRModal(null)}\n className=\"p-2 text-gray-600 hover:text-gray-800\"\n >\n \n \n

\n \n

\n Table: {showQRModal.name} ({showQRModal.number})\n

\n {`${window.location.origin}/order?table=${showQRModal.qr_code}`}\n

\n \n

\n downloadQRCode(showQRModal)}\n className=\"bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition-colors\"\n >\n 💾 Download\n \n printQRCode(showQRModal)}\n className=\"bg-purple-600 text-white py-2 px-4 rounded-lg hover:bg-purple-700 transition-colors\"\n >\n 🖨️ Print\n \n

\n )}\n

\n );\n};\n\nexport default TablesPanel;","deleted","label",[169,170,171,152],"frontend","components","Admin","permalink","https://www.val.town/x/Pratham211/canteen/code/frontend/components/Admin/TablesPanel.tsx","extension","actionData","errors"]