{"id":3141,"date":"2026-02-15T20:23:31","date_gmt":"2026-02-15T20:23:31","guid":{"rendered":"https:\/\/malikskitchen.in\/?page_id=3141"},"modified":"2026-02-15T20:53:00","modified_gmt":"2026-02-15T20:53:00","slug":"zomato-payment-reconciliation-2","status":"publish","type":"page","link":"https:\/\/malikskitchen.in\/index.php\/zomato-payment-reconciliation-2\/","title":{"rendered":"Zomato Payment Reconciliation"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Zomato Order Reconciliation System - Advanced<\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/18.2.0\/umd\/react.production.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react-dom\/18.2.0\/umd\/react-dom.production.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-standalone\/7.23.5\/babel.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/xlsx\/0.18.5\/xlsx.full.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/PapaParse\/5.4.1\/papaparse.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.0\/dist\/chart.umd.min.js\"><\/script>\r\n<\/head>\r\n<body class=\"bg-gray-50\">\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useEffect, useMemo, useRef } = React;\r\n\r\n \/\/ Storage wrapper\r\n const storage = {\r\n get(key) {\r\n try {\r\n const value = localStorage.getItem(key);\r\n return value ? JSON.parse(value) : null;\r\n } catch (error) {\r\n return null;\r\n }\r\n },\r\n set(key, value) {\r\n try {\r\n localStorage.setItem(key, JSON.stringify(value));\r\n return true;\r\n } catch (error) {\r\n return false;\r\n }\r\n },\r\n delete(key) {\r\n try {\r\n localStorage.removeItem(key);\r\n return true;\r\n } catch (error) {\r\n return false;\r\n }\r\n }\r\n };\r\n\r\n \/\/ Icons\r\n const Store = () => <svg className=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\" \/><\/svg>;\r\n const Package = () => <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\" \/><\/svg>;\r\n const FileSpreadsheet = () => <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/><\/svg>;\r\n const DollarSign = () => <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/><\/svg>;\r\n const Download = () => <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/><\/svg>;\r\n const Upload = () => <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" \/><\/svg>;\r\n const Trash2 = () => <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" \/><\/svg>;\r\n const AlertCircle = () => <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/><\/svg>;\r\n const CheckCircle = () => <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/><\/svg>;\r\n const BarChart3 = () => <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\" \/><\/svg>;\r\n const TrendingUp = () => <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\" \/><\/svg>;\r\n const PlusCircle = () => <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z\" \/><\/svg>;\r\n const MapPin = () => <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" \/><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" \/><\/svg>;\r\n const Hash = () => <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M7 20l4-16m2 16l4-16M6 9h14M4 15h14\" \/><\/svg>;\r\n const Calendar = () => <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" \/><\/svg>;\r\n const TrendingDown = () => <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\" \/><\/svg>;\r\n const Award = () => <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z\" \/><\/svg>;\r\n const Clock = () => <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\" \/><\/svg>;\r\n\r\n \/\/ Main App Component\r\n function ZomatoReconciliation() {\r\n const [currentRestaurant, setCurrentRestaurant] = useState(null);\r\n const [restaurants, setRestaurants] = useState([]);\r\n\r\n useEffect(() => {\r\n loadRestaurants();\r\n }, []);\r\n\r\n const loadRestaurants = () => {\r\n const restaurantsList = storage.get('restaurants_list') || [];\r\n setRestaurants(restaurantsList);\r\n };\r\n\r\n const saveRestaurants = (newRestaurants) => {\r\n storage.set('restaurants_list', newRestaurants);\r\n setRestaurants(newRestaurants);\r\n };\r\n\r\n const handleCreateRestaurant = (name, location, restaurantId) => {\r\n const newRestaurant = { \r\n name, \r\n location, \r\n restaurantId, \r\n createdAt: new Date().toISOString() \r\n };\r\n const newRestaurants = [...restaurants, newRestaurant];\r\n saveRestaurants(newRestaurants);\r\n setCurrentRestaurant(newRestaurant);\r\n return true;\r\n };\r\n\r\n const handleSelectRestaurant = (restaurant) => {\r\n setCurrentRestaurant(restaurant);\r\n };\r\n\r\n const handleBackToSelection = () => {\r\n setCurrentRestaurant(null);\r\n };\r\n\r\n const handleDeleteRestaurant = (restaurantId) => {\r\n if (!confirm('Are you sure you want to delete this restaurant and all its data?')) return;\r\n \r\n storage.delete(`${restaurantId}_settlements`);\r\n storage.delete(`${restaurantId}_order_history`);\r\n storage.delete(`${restaurantId}_item_costs`);\r\n \r\n const newRestaurants = restaurants.filter(r => r.restaurantId !== restaurantId);\r\n saveRestaurants(newRestaurants);\r\n \r\n if (currentRestaurant && currentRestaurant.restaurantId === restaurantId) {\r\n setCurrentRestaurant(null);\r\n }\r\n };\r\n\r\n if (!currentRestaurant) {\r\n return (\r\n <RestaurantSelection\r\n restaurants={restaurants}\r\n onCreateRestaurant={handleCreateRestaurant}\r\n onSelectRestaurant={handleSelectRestaurant}\r\n onDeleteRestaurant={handleDeleteRestaurant}\r\n \/>\r\n );\r\n }\r\n\r\n return (\r\n <Dashboard\r\n restaurant={currentRestaurant}\r\n onBack={handleBackToSelection}\r\n \/>\r\n );\r\n }\r\n\r\n \/\/ Restaurant Selection Screen\r\n function RestaurantSelection({ restaurants, onCreateRestaurant, onSelectRestaurant, onDeleteRestaurant }) {\r\n const [view, setView] = useState(restaurants.length === 0 ? 'create' : 'select');\r\n const [name, setName] = useState('');\r\n const [location, setLocation] = useState('');\r\n const [restaurantId, setRestaurantId] = useState('');\r\n const [error, setError] = useState('');\r\n const [success, setSuccess] = useState('');\r\n\r\n const handleSubmit = (e) => {\r\n e.preventDefault();\r\n setError('');\r\n setSuccess('');\r\n\r\n if (!name || !location || !restaurantId) {\r\n setError('Please fill all fields');\r\n return;\r\n }\r\n\r\n if (restaurants.find(r => r.restaurantId === restaurantId)) {\r\n setError('Restaurant ID already exists');\r\n return;\r\n }\r\n\r\n onCreateRestaurant(name, location, restaurantId);\r\n setSuccess('Restaurant created successfully!');\r\n };\r\n\r\n return (\r\n <div className=\"min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-orange-50 p-4\">\r\n <div className=\"bg-white p-8 rounded-2xl shadow-xl w-full max-w-2xl\">\r\n <div className=\"text-center mb-8\">\r\n <div className=\"inline-flex items-center justify-center w-20 h-20 bg-red-100 rounded-full mb-4\">\r\n <Store \/>\r\n <\/div>\r\n <h1 className=\"text-3xl font-bold text-gray-800\">Zomato Reconciliation System<\/h1>\r\n <p className=\"text-gray-600 mt-2\">Advanced Analytics & Profit Management<\/p>\r\n <\/div>\r\n\r\n {restaurants.length > 0 && (\r\n <div className=\"flex gap-2 mb-6\">\r\n <button\r\n onClick={() => setView('select')}\r\n className={`flex-1 py-2 rounded-lg font-medium transition ${view === 'select' ? 'bg-red-600 text-white' : 'bg-gray-100 text-gray-600'}`}\r\n >\r\n Choose Restaurant\r\n <\/button>\r\n <button\r\n onClick={() => setView('create')}\r\n className={`flex-1 py-2 rounded-lg font-medium transition ${view === 'create' ? 'bg-red-600 text-white' : 'bg-gray-100 text-gray-600'}`}\r\n >\r\n Create New\r\n <\/button>\r\n <\/div>\r\n )}\r\n\r\n {view === 'create' ? (\r\n <form onSubmit={handleSubmit} className=\"space-y-4\">\r\n <div>\r\n <label className=\"block text-sm font-medium text-gray-700 mb-2\">Restaurant Name *<\/label>\r\n <input\r\n type=\"text\"\r\n value={name}\r\n onChange={(e) => setName(e.target.value)}\r\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent\"\r\n placeholder=\"e.g., Al Beik Restaurant\"\r\n required\r\n \/>\r\n <\/div>\r\n <div>\r\n <label className=\"block text-sm font-medium text-gray-700 mb-2\">Location *<\/label>\r\n <div className=\"relative\">\r\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400\">\r\n <MapPin \/>\r\n <\/div>\r\n <input\r\n type=\"text\"\r\n value={location}\r\n onChange={(e) => setLocation(e.target.value)}\r\n className=\"w-full pl-11 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent\"\r\n placeholder=\"e.g., Jhangirabad, Bhopal\"\r\n required\r\n \/>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label className=\"block text-sm font-medium text-gray-700 mb-2\">Restaurant ID *<\/label>\r\n <div className=\"relative\">\r\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400\">\r\n <Hash \/>\r\n <\/div>\r\n <input\r\n type=\"text\"\r\n value={restaurantId}\r\n onChange={(e) => setRestaurantId(e.target.value)}\r\n className=\"w-full pl-11 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent\"\r\n placeholder=\"e.g., 20924436\"\r\n required\r\n \/>\r\n <\/div>\r\n <\/div>\r\n\r\n {error && (\r\n <div className=\"flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700\">\r\n <AlertCircle \/>\r\n <span className=\"text-sm\">{error}<\/span>\r\n <\/div>\r\n )}\r\n\r\n {success && (\r\n <div className=\"flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700\">\r\n <CheckCircle \/>\r\n <span className=\"text-sm\">{success}<\/span>\r\n <\/div>\r\n )}\r\n\r\n <button\r\n type=\"submit\"\r\n className=\"w-full bg-red-600 text-white py-3 rounded-lg font-medium hover:bg-red-700 transition flex items-center justify-center gap-2\"\r\n >\r\n <PlusCircle \/>\r\n Create Restaurant\r\n <\/button>\r\n <\/form>\r\n ) : (\r\n <div className=\"space-y-4\">\r\n <div>\r\n <label className=\"block text-sm font-medium text-gray-700 mb-3\">Select Your Restaurant<\/label>\r\n <div className=\"space-y-3\">\r\n {restaurants.map((restaurant, idx) => (\r\n <div\r\n key={idx}\r\n className=\"flex items-center justify-between p-4 border-2 border-gray-200 rounded-lg hover:border-red-400 transition cursor-pointer bg-white\"\r\n >\r\n <div\r\n className=\"flex-1\"\r\n onClick={() => onSelectRestaurant(restaurant)}\r\n >\r\n <div className=\"flex items-center gap-3\">\r\n <div className=\"p-3 bg-red-100 rounded-lg\">\r\n <Store \/>\r\n <\/div>\r\n <div>\r\n <h3 className=\"font-semibold text-gray-900\">{restaurant.name}<\/h3>\r\n <p className=\"text-sm text-gray-600 flex items-center gap-1 mt-1\">\r\n <MapPin className=\"w-4 h-4\" \/>\r\n {restaurant.location}\r\n <\/p>\r\n <p className=\"text-xs text-gray-500 flex items-center gap-1 mt-1\">\r\n <Hash className=\"w-4 h-4\" \/>\r\n ID: {restaurant.restaurantId}\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n onDeleteRestaurant(restaurant.restaurantId);\r\n }}\r\n className=\"ml-4 p-2 text-red-600 hover:bg-red-50 rounded-lg transition\"\r\n title=\"Delete Restaurant\"\r\n >\r\n <Trash2 \/>\r\n <\/button>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n )}\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ Dashboard Component\r\n function Dashboard({ restaurant, onBack }) {\r\n const [activeTab, setActiveTab] = useState('upload');\r\n const [settlements, setSettlements] = useState([]);\r\n const [orderHistory, setOrderHistory] = useState([]);\r\n const [itemCosts, setItemCosts] = useState({});\r\n const [reconciledData, setReconciledData] = useState([]);\r\n const [message, setMessage] = useState({ type: '', text: '' });\r\n \r\n \/\/ Date filter states\r\n const [startDate, setStartDate] = useState('');\r\n const [endDate, setEndDate] = useState('');\r\n const [dateFilterEnabled, setDateFilterEnabled] = useState(false);\r\n\r\n useEffect(() => {\r\n loadRestaurantData();\r\n }, [restaurant]);\r\n\r\n const loadRestaurantData = () => {\r\n const restaurantSettlements = storage.get(`${restaurant.restaurantId}_settlements`) || [];\r\n const restaurantOrderHistory = storage.get(`${restaurant.restaurantId}_order_history`) || [];\r\n const restaurantItemCosts = storage.get(`${restaurant.restaurantId}_item_costs`) || {};\r\n \r\n setSettlements(restaurantSettlements);\r\n setOrderHistory(restaurantOrderHistory);\r\n setItemCosts(restaurantItemCosts);\r\n };\r\n\r\n useEffect(() => {\r\n if (settlements.length > 0 && orderHistory.length > 0) {\r\n reconcileOrders();\r\n }\r\n }, [settlements, orderHistory, itemCosts]);\r\n\r\n const showMessage = (type, text) => {\r\n setMessage({ type, text });\r\n setTimeout(() => setMessage({ type: '', text: '' }), 5000);\r\n };\r\n\r\n const parseDate = (dateStr) => {\r\n if (!dateStr) return null;\r\n \/\/ Handle format: \"07-Feb-2026\" or \"01:07 AM, February 07 2026\"\r\n try {\r\n if (dateStr.includes(',')) {\r\n \/\/ Format: \"01:07 AM, February 07 2026\"\r\n const parts = dateStr.split(',');\r\n return new Date(parts[1].trim());\r\n } else if (dateStr.includes('-')) {\r\n \/\/ Format: \"07-Feb-2026\"\r\n return new Date(dateStr);\r\n }\r\n return new Date(dateStr);\r\n } catch {\r\n return null;\r\n }\r\n };\r\n\r\n const parseSettlementFile = (file) => {\r\n return new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n try {\r\n const data = new Uint8Array(e.target.result);\r\n const workbook = XLSX.read(data, { type: 'array' });\r\n const sheetName = 'Order Level';\r\n const worksheet = workbook.Sheets[sheetName];\r\n const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, range: 6 });\r\n \r\n const headers = jsonData[0];\r\n const rows = jsonData.slice(2);\r\n \r\n const orderIdIndex = headers.indexOf('Order ID');\r\n const orderValueIndex = headers.findIndex(h => h && h.includes('Net order value'));\r\n const payoutIndex = headers.findIndex(h => h && h.includes('Order level Payout'));\r\n const orderDateIndex = headers.indexOf('Order Date');\r\n const orderStatusIndex = headers.indexOf('Order status (Delivered\/ Cancelled\/ Rejected)');\r\n const netDeductionsIndex = headers.findIndex(h => h && h.includes('Net Deductions'));\r\n \r\n const parsed = rows.map(row => ({\r\n orderId: row[orderIdIndex]?.toString(),\r\n netOrderValue: parseFloat(row[orderValueIndex]) || 0,\r\n payout: parseFloat(row[payoutIndex]) || 0,\r\n orderDate: row[orderDateIndex],\r\n orderStatus: row[orderStatusIndex],\r\n netDeductions: parseFloat(row[netDeductionsIndex]) || 0\r\n })).filter(row => row.orderId && !isNaN(row.orderId));\r\n \r\n resolve(parsed);\r\n } catch (error) {\r\n reject(error);\r\n }\r\n };\r\n reader.onerror = reject;\r\n reader.readAsArrayBuffer(file);\r\n });\r\n };\r\n\r\n const parseOrderHistoryFile = (file) => {\r\n return new Promise((resolve, reject) => {\r\n Papa.parse(file, {\r\n header: true,\r\n skipEmptyLines: true,\r\n complete: (results) => {\r\n console.log('Raw CSV data:', results.data);\r\n const parsed = results.data.map(row => {\r\n const orderId = row['Order ID']?.toString().trim();\r\n const items = row['Items in order']?.trim() || '';\r\n const orderStatus = row['Order Status']?.trim() || '';\r\n const total = parseFloat(row['Total']) || 0;\r\n const orderDate = row['Order Placed At']?.trim() || '';\r\n \r\n return {\r\n orderId,\r\n items,\r\n orderStatus,\r\n total,\r\n orderDate\r\n };\r\n }).filter(row => row.orderId && row.orderId.length > 0);\r\n \r\n console.log('Parsed order history:', parsed);\r\n resolve(parsed);\r\n },\r\n error: reject\r\n });\r\n });\r\n };\r\n\r\n const handleSettlementUpload = async (e) => {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n\r\n try {\r\n const parsed = await parseSettlementFile(file);\r\n \r\n const existingIds = new Set(settlements.map(s => s.orderId));\r\n const newSettlements = parsed.filter(s => !existingIds.has(s.orderId));\r\n const updated = [...settlements, ...newSettlements];\r\n \r\n setSettlements(updated);\r\n storage.set(`${restaurant.restaurantId}_settlements`, updated);\r\n showMessage('success', `Added ${newSettlements.length} new settlement records (${parsed.length - newSettlements.length} duplicates skipped)`);\r\n } catch (error) {\r\n showMessage('error', 'Error parsing settlement file: ' + error.message);\r\n }\r\n e.target.value = '';\r\n };\r\n\r\n const handleOrderHistoryUpload = async (e) => {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n\r\n try {\r\n const parsed = await parseOrderHistoryFile(file);\r\n \r\n const existingIds = new Set(orderHistory.map(o => o.orderId));\r\n const newOrders = parsed.filter(o => !existingIds.has(o.orderId));\r\n const updated = [...orderHistory, ...newOrders];\r\n \r\n setOrderHistory(updated);\r\n storage.set(`${restaurant.restaurantId}_order_history`, updated);\r\n showMessage('success', `Added ${newOrders.length} new order records (${parsed.length - newOrders.length} duplicates skipped)`);\r\n } catch (error) {\r\n showMessage('error', 'Error parsing order history file: ' + error.message);\r\n }\r\n e.target.value = '';\r\n };\r\n\r\n \/\/ Bulk Cost Upload Handler\r\n const handleBulkCostUpload = async (e) => {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n\r\n try {\r\n const data = await new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n try {\r\n const data = new Uint8Array(e.target.result);\r\n const workbook = XLSX.read(data, { type: 'array' });\r\n const firstSheet = workbook.Sheets[workbook.SheetNames[0]];\r\n const jsonData = XLSX.utils.sheet_to_json(firstSheet);\r\n resolve(jsonData);\r\n } catch (error) {\r\n reject(error);\r\n }\r\n };\r\n reader.onerror = reject;\r\n reader.readAsArrayBuffer(file);\r\n });\r\n\r\n let updatedCosts = { ...itemCosts };\r\n let count = 0;\r\n\r\n data.forEach(row => {\r\n const itemName = row['Item Name'] || row['item_name'] || row['Item'] || row['item'];\r\n const cost = parseFloat(row['Cost'] || row['cost'] || row['Price'] || row['price']);\r\n \r\n if (itemName && !isNaN(cost)) {\r\n updatedCosts[itemName] = cost;\r\n count++;\r\n }\r\n });\r\n\r\n setItemCosts(updatedCosts);\r\n storage.set(`${restaurant.restaurantId}_item_costs`, updatedCosts);\r\n showMessage('success', `Successfully updated costs for ${count} items`);\r\n } catch (error) {\r\n showMessage('error', 'Error parsing bulk cost file: ' + error.message);\r\n }\r\n e.target.value = '';\r\n };\r\n\r\n const parseItems = (itemsString) => {\r\n if (!itemsString) return [];\r\n const items = itemsString.split(',').map(item => {\r\n const match = item.trim().match(\/^(\\d+)\\s*x\\s*(.+)$\/);\r\n if (match) {\r\n return { quantity: parseInt(match[1]), name: match[2].trim() };\r\n }\r\n return { quantity: 1, name: item.trim() };\r\n });\r\n return items;\r\n };\r\n\r\n const reconcileOrders = () => {\r\n console.log('=== RECONCILIATION START ===');\r\n console.log('Settlements count:', settlements.length);\r\n console.log('Order history count:', orderHistory.length);\r\n console.log('Item costs:', itemCosts);\r\n \r\n \/\/ Log all order IDs for debugging\r\n console.log('Settlement Order IDs:', settlements.map(s => s.orderId));\r\n console.log('Order History Order IDs:', orderHistory.map(o => o.orderId));\r\n \r\n const reconciled = settlements.map(settlement => {\r\n const orderDetails = orderHistory.find(o => o.orderId === settlement.orderId);\r\n \r\n console.log(`Processing Order ID: ${settlement.orderId}`);\r\n console.log(`Found in order history:`, orderDetails ? 'YES' : 'NO');\r\n \r\n if (!orderDetails) {\r\n console.log(`\u26a0\ufe0f Order ${settlement.orderId} NOT FOUND in order history`);\r\n return {\r\n ...settlement,\r\n items: [],\r\n totalCost: 0,\r\n profit: settlement.payout,\r\n profitMargin: 100,\r\n hasDetails: false\r\n };\r\n }\r\n\r\n console.log(`Order ${settlement.orderId} items string:`, orderDetails.items);\r\n const items = parseItems(orderDetails.items);\r\n console.log(`Parsed items for ${settlement.orderId}:`, items);\r\n \r\n let totalCost = 0;\r\n \r\n items.forEach(item => {\r\n const cost = itemCosts[item.name] || 0;\r\n console.log(` - ${item.name}: Qty=${item.quantity}, Cost=${cost}, Total=${cost * item.quantity}`);\r\n totalCost += cost * item.quantity;\r\n });\r\n\r\n const profit = settlement.payout - totalCost;\r\n const profitMargin = settlement.payout > 0 ? (profit \/ settlement.payout) * 100 : 0;\r\n \r\n console.log(`Order ${settlement.orderId} Summary: Payout=\u20b9${settlement.payout}, Cost=\u20b9${totalCost}, Profit=\u20b9${profit}`);\r\n\r\n return {\r\n ...settlement,\r\n items,\r\n totalCost,\r\n profit,\r\n profitMargin,\r\n hasDetails: true\r\n };\r\n });\r\n\r\n console.log('=== RECONCILIATION COMPLETE ===');\r\n console.log('Total reconciled orders:', reconciled.length);\r\n setReconciledData(reconciled);\r\n };\r\n\r\n const handleItemCostUpdate = (itemName, cost) => {\r\n const updated = { ...itemCosts, [itemName]: parseFloat(cost) || 0 };\r\n setItemCosts(updated);\r\n storage.set(`${restaurant.restaurantId}_item_costs`, updated);\r\n };\r\n\r\n const getAllUniqueItems = () => {\r\n const itemsSet = new Set();\r\n orderHistory.forEach(order => {\r\n const items = parseItems(order.items);\r\n items.forEach(item => itemsSet.add(item.name));\r\n });\r\n return Array.from(itemsSet).sort();\r\n };\r\n\r\n \/\/ Filter data by date range\r\n const filteredData = useMemo(() => {\r\n if (!dateFilterEnabled || !startDate || !endDate) {\r\n return reconciledData;\r\n }\r\n\r\n const start = new Date(startDate);\r\n const end = new Date(endDate);\r\n end.setHours(23, 59, 59, 999); \/\/ Include full end date\r\n\r\n return reconciledData.filter(order => {\r\n const orderDate = parseDate(order.orderDate);\r\n return orderDate && orderDate >= start && orderDate <= end;\r\n });\r\n }, [reconciledData, startDate, endDate, dateFilterEnabled]);\r\n\r\n const exportToExcel = () => {\r\n const dataToExport = dateFilterEnabled ? filteredData : reconciledData;\r\n const ws_data = [\r\n ['Order ID', 'Order Date', 'Net Order Value', 'Net Deductions', 'Payout', 'Items', 'Total Cost', 'Profit', 'Profit Margin %', 'Status']\r\n ];\r\n\r\n dataToExport.forEach(order => {\r\n ws_data.push([\r\n order.orderId,\r\n order.orderDate,\r\n order.netOrderValue.toFixed(2),\r\n order.netDeductions.toFixed(2),\r\n order.payout.toFixed(2),\r\n order.items.map(i => `${i.quantity}x ${i.name}`).join(', '),\r\n order.totalCost.toFixed(2),\r\n order.profit.toFixed(2),\r\n order.profitMargin.toFixed(2),\r\n order.orderStatus\r\n ]);\r\n });\r\n\r\n const ws = XLSX.utils.aoa_to_sheet(ws_data);\r\n const wb = XLSX.utils.book_new();\r\n XLSX.utils.book_append_sheet(wb, ws, 'Reconciled Orders');\r\n\r\n const costs_data = [['Item Name', 'Cost per Unit']];\r\n Object.entries(itemCosts).forEach(([item, cost]) => {\r\n costs_data.push([item, cost]);\r\n });\r\n const ws_costs = XLSX.utils.aoa_to_sheet(costs_data);\r\n XLSX.utils.book_append_sheet(wb, ws_costs, 'Item Costs');\r\n\r\n XLSX.writeFile(wb, `${restaurant.name}_Reconciliation_${new Date().toISOString().split('T')[0]}.xlsx`);\r\n };\r\n\r\n const clearAllData = () => {\r\n if (!confirm('Are you sure you want to clear all data? This cannot be undone.')) return;\r\n \r\n setSettlements([]);\r\n setOrderHistory([]);\r\n setItemCosts({});\r\n setReconciledData([]);\r\n \r\n storage.delete(`${restaurant.restaurantId}_settlements`);\r\n storage.delete(`${restaurant.restaurantId}_order_history`);\r\n storage.delete(`${restaurant.restaurantId}_item_costs`);\r\n \r\n showMessage('success', 'All data cleared successfully');\r\n };\r\n\r\n const stats = useMemo(() => {\r\n const data = dateFilterEnabled ? filteredData : reconciledData;\r\n const totalOrders = data.length;\r\n const totalRevenue = data.reduce((sum, o) => sum + o.payout, 0);\r\n const totalCost = data.reduce((sum, o) => sum + o.totalCost, 0);\r\n const totalProfit = totalRevenue - totalCost;\r\n const avgProfitMargin = totalOrders > 0 ? data.reduce((sum, o) => sum + o.profitMargin, 0) \/ totalOrders : 0;\r\n\r\n return { totalOrders, totalRevenue, totalCost, totalProfit, avgProfitMargin };\r\n }, [reconciledData, filteredData, dateFilterEnabled]);\r\n\r\n return (\r\n <div className=\"min-h-screen bg-gray-50\">\r\n {\/* Header *\/}\r\n <div className=\"bg-white shadow-sm border-b\">\r\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4\">\r\n <div className=\"flex justify-between items-center\">\r\n <div className=\"flex items-center gap-4\">\r\n <button\r\n onClick={onBack}\r\n className=\"p-2 hover:bg-gray-100 rounded-lg transition\"\r\n title=\"Back to Restaurant Selection\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M10 19l-7-7m0 0l7-7m-7 7h18\" \/>\r\n <\/svg>\r\n <\/button>\r\n <div>\r\n <h1 className=\"text-2xl font-bold text-gray-900\">{restaurant.name}<\/h1>\r\n <p className=\"text-sm text-gray-500 flex items-center gap-1\">\r\n <MapPin className=\"w-4 h-4\" \/>\r\n {restaurant.location} \u2022 ID: {restaurant.restaurantId}\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Message Bar *\/}\r\n {message.text && (\r\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4\">\r\n <div className={`flex items-center gap-2 p-4 rounded-lg ${message.type === 'success' ? 'bg-green-50 border border-green-200 text-green-800' : 'bg-red-50 border border-red-200 text-red-800'}`}>\r\n {message.type === 'success' ? <CheckCircle \/> : <AlertCircle \/>}\r\n <span>{message.text}<\/span>\r\n <\/div>\r\n <\/div>\r\n )}\r\n\r\n {\/* Date Range Filter *\/}\r\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6\">\r\n <div className=\"bg-white p-4 rounded-xl shadow-sm border\">\r\n <div className=\"flex flex-wrap items-center gap-4\">\r\n <div className=\"flex items-center gap-2\">\r\n <input\r\n type=\"checkbox\"\r\n id=\"dateFilter\"\r\n checked={dateFilterEnabled}\r\n onChange={(e) => setDateFilterEnabled(e.target.checked)}\r\n className=\"w-4 h-4 text-red-600 rounded focus:ring-red-500\"\r\n \/>\r\n <label htmlFor=\"dateFilter\" className=\"text-sm font-medium text-gray-700 flex items-center gap-1\">\r\n <Calendar \/>\r\n Enable Date Filter\r\n <\/label>\r\n <\/div>\r\n {dateFilterEnabled && (\r\n <>\r\n <div className=\"flex items-center gap-2\">\r\n <label className=\"text-sm text-gray-600\">From:<\/label>\r\n <input\r\n type=\"date\"\r\n value={startDate}\r\n onChange={(e) => setStartDate(e.target.value)}\r\n className=\"px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 text-sm\"\r\n \/>\r\n <\/div>\r\n <div className=\"flex items-center gap-2\">\r\n <label className=\"text-sm text-gray-600\">To:<\/label>\r\n <input\r\n type=\"date\"\r\n value={endDate}\r\n onChange={(e) => setEndDate(e.target.value)}\r\n className=\"px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 text-sm\"\r\n \/>\r\n <\/div>\r\n {startDate && endDate && (\r\n <span className=\"text-sm text-gray-600 bg-blue-50 px-3 py-2 rounded-lg\">\r\n Showing {filteredData.length} of {reconciledData.length} orders\r\n <\/span>\r\n )}\r\n <\/>\r\n )}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Stats Cards *\/}\r\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6\">\r\n <div className=\"grid grid-cols-1 md:grid-cols-5 gap-4\">\r\n <div className=\"bg-white p-6 rounded-xl shadow-sm border\">\r\n <div className=\"flex items-center justify-between\">\r\n <div>\r\n <p className=\"text-sm text-gray-600\">Total Orders<\/p>\r\n <p className=\"text-2xl font-bold text-gray-900 mt-1\">{stats.totalOrders}<\/p>\r\n <\/div>\r\n <div className=\"p-3 bg-blue-100 rounded-lg\">\r\n <FileSpreadsheet \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div className=\"bg-white p-6 rounded-xl shadow-sm border\">\r\n <div className=\"flex items-center justify-between\">\r\n <div>\r\n <p className=\"text-sm text-gray-600\">Total Revenue<\/p>\r\n <p className=\"text-2xl font-bold text-green-600 mt-1\">\u20b9{stats.totalRevenue.toFixed(0)}<\/p>\r\n <\/div>\r\n <div className=\"p-3 bg-green-100 rounded-lg\">\r\n <DollarSign \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div className=\"bg-white p-6 rounded-xl shadow-sm border\">\r\n <div className=\"flex items-center justify-between\">\r\n <div>\r\n <p className=\"text-sm text-gray-600\">Total Cost<\/p>\r\n <p className=\"text-2xl font-bold text-orange-600 mt-1\">\u20b9{stats.totalCost.toFixed(0)}<\/p>\r\n <\/div>\r\n <div className=\"p-3 bg-orange-100 rounded-lg\">\r\n <Package \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div className=\"bg-white p-6 rounded-xl shadow-sm border\">\r\n <div className=\"flex items-center justify-between\">\r\n <div>\r\n <p className=\"text-sm text-gray-600\">Total Profit<\/p>\r\n <p className={`text-2xl font-bold mt-1 ${stats.totalProfit >= 0 ? 'text-purple-600' : 'text-red-600'}`}>\r\n \u20b9{stats.totalProfit.toFixed(0)}\r\n <\/p>\r\n <\/div>\r\n <div className=\"p-3 bg-purple-100 rounded-lg\">\r\n <TrendingUp \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div className=\"bg-white p-6 rounded-xl shadow-sm border\">\r\n <div className=\"flex items-center justify-between\">\r\n <div>\r\n <p className=\"text-sm text-gray-600\">Avg Margin<\/p>\r\n <p className=\"text-2xl font-bold text-indigo-600 mt-1\">{stats.avgProfitMargin.toFixed(1)}%<\/p>\r\n <\/div>\r\n <div className=\"p-3 bg-indigo-100 rounded-lg\">\r\n <BarChart3 \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Main Content *\/}\r\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6 pb-8\">\r\n <div className=\"bg-white rounded-xl shadow-sm border\">\r\n {\/* Tabs *\/}\r\n <div className=\"border-b\">\r\n <div className=\"flex overflow-x-auto\">\r\n <button\r\n onClick={() => setActiveTab('upload')}\r\n className={`px-6 py-4 font-medium transition whitespace-nowrap ${activeTab === 'upload' ? 'text-red-600 border-b-2 border-red-600' : 'text-gray-600'}`}\r\n >\r\n Upload Files\r\n <\/button>\r\n <button\r\n onClick={() => setActiveTab('costs')}\r\n className={`px-6 py-4 font-medium transition whitespace-nowrap ${activeTab === 'costs' ? 'text-red-600 border-b-2 border-red-600' : 'text-gray-600'}`}\r\n >\r\n Item Costs\r\n <\/button>\r\n <button\r\n onClick={() => setActiveTab('reconciled')}\r\n className={`px-6 py-4 font-medium transition whitespace-nowrap ${activeTab === 'reconciled' ? 'text-red-600 border-b-2 border-red-600' : 'text-gray-600'}`}\r\n >\r\n Reconciled Data\r\n <\/button>\r\n <button\r\n onClick={() => setActiveTab('analytics')}\r\n className={`px-6 py-4 font-medium transition whitespace-nowrap ${activeTab === 'analytics' ? 'text-red-600 border-b-2 border-red-600' : 'text-gray-600'}`}\r\n >\r\n \ud83d\udcca Analytics\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Tab Content *\/}\r\n <div className=\"p-6\">\r\n {activeTab === 'upload' && (\r\n <UploadTab\r\n onSettlementUpload={handleSettlementUpload}\r\n onOrderHistoryUpload={handleOrderHistoryUpload}\r\n settlementsCount={settlements.length}\r\n orderHistoryCount={orderHistory.length}\r\n \/>\r\n )}\r\n {activeTab === 'costs' && (\r\n <ItemCostsTab\r\n items={getAllUniqueItems()}\r\n itemCosts={itemCosts}\r\n onUpdate={handleItemCostUpdate}\r\n onBulkUpload={handleBulkCostUpload}\r\n \/>\r\n )}\r\n {activeTab === 'reconciled' && (\r\n <ReconciledTab\r\n data={filteredData}\r\n onExport={exportToExcel}\r\n onClearData={clearAllData}\r\n \/>\r\n )}\r\n {activeTab === 'analytics' && (\r\n <AnalyticsTab\r\n data={filteredData}\r\n itemCosts={itemCosts}\r\n \/>\r\n )}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ Upload Tab Component (same as before)\r\n function UploadTab({ onSettlementUpload, onOrderHistoryUpload, settlementsCount, orderHistoryCount }) {\r\n return (\r\n <div className=\"space-y-6\">\r\n <div>\r\n <h3 className=\"text-lg font-semibold text-gray-900 mb-4\">Upload Data Files<\/h3>\r\n <p className=\"text-sm text-gray-600 mb-6\">Upload your Zomato settlement reports and order history files.<\/p>\r\n <\/div>\r\n\r\n <div className=\"grid md:grid-cols-2 gap-6\">\r\n <div className=\"border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-red-400 transition\">\r\n <div className=\"inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-4\">\r\n <FileSpreadsheet \/>\r\n <\/div>\r\n <h4 className=\"text-lg font-semibold text-gray-900 mb-2\">Settlement Report<\/h4>\r\n <p className=\"text-sm text-gray-600 mb-4\">Upload Zomato Settlement Excel file (.xlsx)<\/p>\r\n <p className=\"text-xs text-gray-500 mb-4\">Current records: {settlementsCount}<\/p>\r\n <label className=\"inline-block px-6 py-3 bg-red-600 text-white rounded-lg cursor-pointer hover:bg-red-700 transition\">\r\n Choose File\r\n <input\r\n type=\"file\"\r\n accept=\".xlsx,.xls\"\r\n onChange={onSettlementUpload}\r\n className=\"hidden\"\r\n \/>\r\n <\/label>\r\n <\/div>\r\n\r\n <div className=\"border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-orange-400 transition\">\r\n <div className=\"inline-flex items-center justify-center w-16 h-16 bg-orange-100 rounded-full mb-4\">\r\n <Package \/>\r\n <\/div>\r\n <h4 className=\"text-lg font-semibold text-gray-900 mb-2\">Order History<\/h4>\r\n <p className=\"text-sm text-gray-600 mb-4\">Upload Order History CSV file (.csv)<\/p>\r\n <p className=\"text-xs text-gray-500 mb-4\">Current records: {orderHistoryCount}<\/p>\r\n <label className=\"inline-block px-6 py-3 bg-orange-600 text-white rounded-lg cursor-pointer hover:bg-orange-700 transition\">\r\n Choose File\r\n <input\r\n type=\"file\"\r\n accept=\".csv\"\r\n onChange={onOrderHistoryUpload}\r\n className=\"hidden\"\r\n \/>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ Item Costs Tab with Bulk Upload\r\n function ItemCostsTab({ items, itemCosts, onUpdate, onBulkUpload }) {\r\n const [editingItem, setEditingItem] = useState('');\r\n const [editValue, setEditValue] = useState('');\r\n\r\n const handleSave = (itemName) => {\r\n onUpdate(itemName, editValue);\r\n setEditingItem('');\r\n setEditValue('');\r\n };\r\n\r\n const downloadTemplate = () => {\r\n const ws_data = [\r\n ['Item Name', 'Cost'],\r\n ['Chicken Burger', '45'],\r\n ['Fried Chicken Nuggets [9 Pieces]', '60'],\r\n ['Blue Lagoon Mojito', '25']\r\n ];\r\n\r\n const ws = XLSX.utils.aoa_to_sheet(ws_data);\r\n const wb = XLSX.utils.book_new();\r\n XLSX.utils.book_append_sheet(wb, ws, 'Item Costs Template');\r\n XLSX.writeFile(wb, 'Item_Costs_Template.xlsx');\r\n };\r\n\r\n return (\r\n <div className=\"space-y-6\">\r\n <div className=\"flex justify-between items-start\">\r\n <div>\r\n <h3 className=\"text-lg font-semibold text-gray-900 mb-2\">Item Cost Configuration<\/h3>\r\n <p className=\"text-sm text-gray-600\">Set the cost per unit for each menu item.<\/p>\r\n <\/div>\r\n <div className=\"flex gap-2\">\r\n <button\r\n onClick={downloadTemplate}\r\n className=\"flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition\"\r\n >\r\n <Download \/>\r\n Download Template\r\n <\/button>\r\n <label className=\"flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm rounded-lg cursor-pointer hover:bg-green-700 transition\">\r\n <Upload \/>\r\n Bulk Upload\r\n <input\r\n type=\"file\"\r\n accept=\".xlsx,.xls,.csv\"\r\n onChange={onBulkUpload}\r\n className=\"hidden\"\r\n \/>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <div className=\"bg-blue-50 border border-blue-200 rounded-lg p-4\">\r\n <h4 className=\"font-semibold text-blue-900 mb-2 flex items-center gap-2\">\r\n <AlertCircle \/>\r\n Bulk Upload Instructions\r\n <\/h4>\r\n <ul className=\"text-sm text-blue-800 space-y-1\">\r\n <li>\u2022 Download the template Excel file<\/li>\r\n <li>\u2022 Fill in Item Name and Cost columns<\/li>\r\n <li>\u2022 Upload the completed file<\/li>\r\n <li>\u2022 System will update all item costs automatically<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n {items.length === 0 ? (\r\n <div className=\"text-center py-12\">\r\n <div className=\"inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4\">\r\n <Package \/>\r\n <\/div>\r\n <p className=\"text-gray-500\">No items found. Upload order history first.<\/p>\r\n <\/div>\r\n ) : (\r\n <div className=\"overflow-x-auto\">\r\n <table className=\"w-full\">\r\n <thead className=\"bg-gray-50 border-b\">\r\n <tr>\r\n <th className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Item Name<\/th>\r\n <th className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Cost per Unit (\u20b9)<\/th>\r\n <th className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\">Action<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody className=\"bg-white divide-y divide-gray-200\">\r\n {items.map((item, idx) => (\r\n <tr key={idx} className=\"hover:bg-gray-50\">\r\n <td className=\"px-6 py-4 text-sm text-gray-900\">{item}<\/td>\r\n <td className=\"px-6 py-4 whitespace-nowrap\">\r\n {editingItem === item ? (\r\n <input\r\n type=\"number\"\r\n value={editValue}\r\n onChange={(e) => setEditValue(e.target.value)}\r\n className=\"w-32 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500\"\r\n placeholder=\"0.00\"\r\n step=\"0.01\"\r\n autoFocus\r\n \/>\r\n ) : (\r\n <span className={`text-sm ${itemCosts[item] ? 'text-gray-900 font-medium' : 'text-gray-400'}`}>\r\n {itemCosts[item] ? `\u20b9${itemCosts[item].toFixed(2)}` : 'Not set'}\r\n <\/span>\r\n )}\r\n <\/td>\r\n <td className=\"px-6 py-4 whitespace-nowrap\">\r\n {editingItem === item ? (\r\n <div className=\"flex gap-2\">\r\n <button\r\n onClick={() => handleSave(item)}\r\n className=\"px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700\"\r\n >\r\n Save\r\n <\/button>\r\n <button\r\n onClick={() => { setEditingItem(''); setEditValue(''); }}\r\n className=\"px-3 py-1 bg-gray-200 text-gray-700 text-sm rounded hover:bg-gray-300\"\r\n >\r\n Cancel\r\n <\/button>\r\n <\/div>\r\n ) : (\r\n <button\r\n onClick={() => {\r\n setEditingItem(item);\r\n setEditValue(itemCosts[item] || '');\r\n }}\r\n className=\"text-red-600 hover:text-red-800 text-sm font-medium\"\r\n >\r\n {itemCosts[item] ? 'Edit' : 'Set Cost'}\r\n <\/button>\r\n )}\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n )}\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ Reconciled Tab (same as before)\r\n function ReconciledTab({ data, onExport, onClearData }) {\r\n const [searchTerm, setSearchTerm] = useState('');\r\n const [statusFilter, setStatusFilter] = useState('all');\r\n const [showDebug, setShowDebug] = useState(false);\r\n\r\n const filteredData = data.filter(order => {\r\n const matchesSearch = order.orderId.toLowerCase().includes(searchTerm.toLowerCase());\r\n const matchesStatus = statusFilter === 'all' || order.orderStatus === statusFilter;\r\n return matchesSearch && matchesStatus;\r\n });\r\n\r\n const uniqueStatuses = [...new Set(data.map(o => o.orderStatus))];\r\n \r\n const ordersWithItems = data.filter(o => o.hasDetails).length;\r\n const ordersWithoutItems = data.filter(o => !o.hasDetails).length;\r\n\r\n return (\r\n <div className=\"space-y-6\">\r\n <div className=\"flex justify-between items-center\">\r\n <div>\r\n <h3 className=\"text-lg font-semibold text-gray-900\">Reconciled Orders<\/h3>\r\n <p className=\"text-sm text-gray-600\">View and export your reconciled order data<\/p>\r\n <div className=\"flex gap-4 mt-2\">\r\n <span className=\"text-xs bg-green-100 text-green-800 px-2 py-1 rounded\">\r\n \u2713 {ordersWithItems} orders with item details\r\n <\/span>\r\n <span className=\"text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded\">\r\n \u26a0 {ordersWithoutItems} orders without item details\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <div className=\"flex gap-3\">\r\n <button\r\n onClick={() => {\r\n setShowDebug(!showDebug);\r\n if (!showDebug) {\r\n console.log('=== DEBUG INFO ===');\r\n console.log('All reconciled data:', data);\r\n console.log('Orders without items:', data.filter(o => !o.hasDetails));\r\n }\r\n }}\r\n className=\"flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm\"\r\n >\r\n \ud83d\udd0d Debug Info\r\n <\/button>\r\n <button\r\n onClick={onExport}\r\n disabled={data.length === 0}\r\n className=\"flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition disabled:bg-gray-300 disabled:cursor-not-allowed\"\r\n >\r\n <Download \/>\r\n Export Excel\r\n <\/button>\r\n <button\r\n onClick={onClearData}\r\n disabled={data.length === 0}\r\n className=\"flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition disabled:bg-gray-300 disabled:cursor-not-allowed\"\r\n >\r\n <Trash2 \/>\r\n Clear Data\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n {showDebug && (\r\n <div className=\"bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-xs overflow-auto max-h-96\">\r\n <p className=\"text-white font-bold mb-2\">\ud83d\udcca Debug Console (Check browser console for more details)<\/p>\r\n <p>Total Orders: {data.length}<\/p>\r\n <p>Orders with Items: {ordersWithItems}<\/p>\r\n <p>Orders without Items: {ordersWithoutItems}<\/p>\r\n <p className=\"mt-2 text-yellow-400\">\u26a0\ufe0f If items are not showing:<\/p>\r\n <p className=\"ml-4\">1. Check browser console (F12) for detailed logs<\/p>\r\n <p className=\"ml-4\">2. Verify Order IDs match between settlement and order history<\/p>\r\n <p className=\"ml-4\">3. Ensure order history CSV is uploaded correctly<\/p>\r\n <p className=\"ml-4\">4. Check \"Items in order\" column format in CSV<\/p>\r\n <\/div>\r\n )}\r\n\r\n <div className=\"flex gap-4\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"Search by Order ID...\"\r\n value={searchTerm}\r\n onChange={(e) => setSearchTerm(e.target.value)}\r\n className=\"flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500\"\r\n \/>\r\n <select\r\n value={statusFilter}\r\n onChange={(e) => setStatusFilter(e.target.value)}\r\n className=\"px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500\"\r\n >\r\n <option value=\"all\">All Status<\/option>\r\n {uniqueStatuses.map(status => (\r\n <option key={status} value={status}>{status}<\/option>\r\n ))}\r\n <\/select>\r\n <\/div>\r\n\r\n {filteredData.length === 0 ? (\r\n <div className=\"text-center py-12\">\r\n <div className=\"inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4\">\r\n <BarChart3 \/>\r\n <\/div>\r\n <p className=\"text-gray-500\">No reconciled data found.<\/p>\r\n <\/div>\r\n ) : (\r\n <div className=\"overflow-x-auto\">\r\n <table className=\"w-full\">\r\n <thead className=\"bg-gray-50 border-b\">\r\n <tr>\r\n <th className=\"px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase\">Order ID<\/th>\r\n <th className=\"px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase\">Date<\/th>\r\n <th className=\"px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase\">Items<\/th>\r\n <th className=\"px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase\">Net Order Value<\/th>\r\n <th className=\"px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase\">Net Deductions<\/th>\r\n <th className=\"px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase\">Payout<\/th>\r\n <th className=\"px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase\">Cost<\/th>\r\n <th className=\"px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase\">Profit<\/th>\r\n <th className=\"px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase\">Margin %<\/th>\r\n <th className=\"px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase\">Status<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody className=\"bg-white divide-y divide-gray-200\">\r\n {filteredData.map((order, idx) => (\r\n <tr key={idx} className={`hover:bg-gray-50 ${!order.hasDetails ? 'bg-yellow-50' : ''}`}>\r\n <td className=\"px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900\">\r\n {order.orderId}\r\n {!order.hasDetails && (\r\n <span className=\"ml-2 text-xs bg-yellow-200 text-yellow-800 px-2 py-1 rounded\" title=\"Order details not found in order history\">\r\n \u26a0\ufe0f No Items\r\n <\/span>\r\n )}\r\n <\/td>\r\n <td className=\"px-4 py-3 whitespace-nowrap text-sm text-gray-600\">{order.orderDate}<\/td>\r\n <td className=\"px-4 py-3 text-sm text-gray-600\">\r\n <div className=\"max-w-xs\">\r\n {order.items.length > 0 ? (\r\n <span className=\"text-xs\">\r\n {order.items.map(i => `${i.quantity}x ${i.name}`).join(', ')}\r\n <\/span>\r\n ) : (\r\n <span className=\"text-yellow-600 italic font-medium\">\u26a0\ufe0f Not found in order history<\/span>\r\n )}\r\n <\/div>\r\n <\/td>\r\n <td className=\"px-4 py-3 whitespace-nowrap text-sm text-right font-medium text-blue-600\">\u20b9{order.netOrderValue.toFixed(2)}<\/td>\r\n <td className=\"px-4 py-3 whitespace-nowrap text-sm text-right text-red-600\">\u20b9{order.netDeductions.toFixed(2)}<\/td>\r\n <td className=\"px-4 py-3 whitespace-nowrap text-sm text-right font-medium text-green-600\">\u20b9{order.payout.toFixed(2)}<\/td>\r\n <td className=\"px-4 py-3 whitespace-nowrap text-sm text-right text-orange-600\">\u20b9{order.totalCost.toFixed(2)}<\/td>\r\n <td className={`px-4 py-3 whitespace-nowrap text-sm text-right font-medium ${order.profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>\r\n \u20b9{order.profit.toFixed(2)}\r\n <\/td>\r\n <td className={`px-4 py-3 whitespace-nowrap text-sm text-right font-medium ${order.profitMargin >= 20 ? 'text-green-600' : order.profitMargin >= 10 ? 'text-yellow-600' : 'text-red-600'}`}>\r\n {order.profitMargin.toFixed(1)}%\r\n <\/td>\r\n <td className=\"px-4 py-3 whitespace-nowrap\">\r\n <span className={`px-2 py-1 text-xs rounded-full ${\r\n order.orderStatus === 'Delivered' ? 'bg-green-100 text-green-800' :\r\n order.orderStatus === 'Cancelled' ? 'bg-red-100 text-red-800' :\r\n 'bg-gray-100 text-gray-800'\r\n }`}>\r\n {order.orderStatus}\r\n <\/span>\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n )}\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ Advanced Analytics Tab\r\n function AnalyticsTab({ data, itemCosts }) {\r\n \/\/ Calculate item-wise analytics\r\n const itemAnalytics = useMemo(() => {\r\n const itemStats = {};\r\n\r\n data.forEach(order => {\r\n order.items.forEach(item => {\r\n if (!itemStats[item.name]) {\r\n itemStats[item.name] = {\r\n name: item.name,\r\n totalQuantity: 0,\r\n totalRevenue: 0,\r\n totalCost: 0,\r\n totalProfit: 0,\r\n orderCount: 0\r\n };\r\n }\r\n\r\n const cost = itemCosts[item.name] || 0;\r\n const itemRevenue = (order.payout \/ order.items.reduce((sum, i) => sum + i.quantity, 0)) * item.quantity;\r\n const itemCost = cost * item.quantity;\r\n\r\n itemStats[item.name].totalQuantity += item.quantity;\r\n itemStats[item.name].totalRevenue += itemRevenue;\r\n itemStats[item.name].totalCost += itemCost;\r\n itemStats[item.name].totalProfit += (itemRevenue - itemCost);\r\n itemStats[item.name].orderCount += 1;\r\n });\r\n });\r\n\r\n return Object.values(itemStats)\r\n .map(item => ({\r\n ...item,\r\n avgProfit: item.totalProfit \/ item.totalQuantity,\r\n profitMargin: item.totalRevenue > 0 ? (item.totalProfit \/ item.totalRevenue) * 100 : 0\r\n }))\r\n .sort((a, b) => b.totalProfit - a.totalProfit);\r\n }, [data, itemCosts]);\r\n\r\n \/\/ Top 5 best and worst items\r\n const topItems = itemAnalytics.slice(0, 5);\r\n const worstItems = itemAnalytics.filter(item => item.profitMargin < 20).slice(0, 5);\r\n\r\n \/\/ Status breakdown\r\n const statusBreakdown = useMemo(() => {\r\n const breakdown = {};\r\n data.forEach(order => {\r\n const status = order.orderStatus || 'Unknown';\r\n if (!breakdown[status]) {\r\n breakdown[status] = { count: 0, revenue: 0, profit: 0 };\r\n }\r\n breakdown[status].count += 1;\r\n breakdown[status].revenue += order.payout;\r\n breakdown[status].profit += order.profit;\r\n });\r\n return breakdown;\r\n }, [data]);\r\n\r\n return (\r\n <div className=\"space-y-6\">\r\n <div>\r\n <h3 className=\"text-2xl font-bold text-gray-900 mb-2\">\ud83d\udcca Advanced Analytics<\/h3>\r\n <p className=\"text-gray-600\">Deep insights into your restaurant performance<\/p>\r\n <\/div>\r\n\r\n {\/* Best Selling Items *\/}\r\n <div className=\"bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6 border border-green-200\">\r\n <div className=\"flex items-center gap-3 mb-4\">\r\n <div className=\"p-3 bg-green-100 rounded-lg\">\r\n <Award \/>\r\n <\/div>\r\n <div>\r\n <h4 className=\"text-lg font-bold text-gray-900\">\ud83c\udfc6 Top 5 Most Profitable Items<\/h4>\r\n <p className=\"text-sm text-gray-600\">Best performers by total profit<\/p>\r\n <\/div>\r\n <\/div>\r\n <div className=\"space-y-3\">\r\n {topItems.map((item, idx) => (\r\n <div key={idx} className=\"bg-white rounded-lg p-4 shadow-sm\">\r\n <div className=\"flex justify-between items-start mb-2\">\r\n <div className=\"flex items-center gap-2\">\r\n <span className=\"text-2xl font-bold text-green-600\">#{idx + 1}<\/span>\r\n <div>\r\n <h5 className=\"font-semibold text-gray-900\">{item.name}<\/h5>\r\n <p className=\"text-xs text-gray-500\">Sold {item.totalQuantity} times in {item.orderCount} orders<\/p>\r\n <\/div>\r\n <\/div>\r\n <div className=\"text-right\">\r\n <p className=\"text-lg font-bold text-green-600\">\u20b9{item.totalProfit.toFixed(0)}<\/p>\r\n <p className=\"text-xs text-gray-500\">Total Profit<\/p>\r\n <\/div>\r\n <\/div>\r\n <div className=\"grid grid-cols-3 gap-4 mt-3 pt-3 border-t\">\r\n <div>\r\n <p className=\"text-xs text-gray-500\">Revenue<\/p>\r\n <p className=\"font-medium text-gray-900\">\u20b9{item.totalRevenue.toFixed(0)}<\/p>\r\n <\/div>\r\n <div>\r\n <p className=\"text-xs text-gray-500\">Avg Profit\/Unit<\/p>\r\n <p className=\"font-medium text-gray-900\">\u20b9{item.avgProfit.toFixed(2)}<\/p>\r\n <\/div>\r\n <div>\r\n <p className=\"text-xs text-gray-500\">Margin<\/p>\r\n <p className={`font-medium ${item.profitMargin >= 20 ? 'text-green-600' : item.profitMargin >= 10 ? 'text-yellow-600' : 'text-red-600'}`}>\r\n {item.profitMargin.toFixed(1)}%\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Low Margin Items *\/}\r\n {worstItems.length > 0 && (\r\n <div className=\"bg-gradient-to-br from-red-50 to-orange-50 rounded-xl p-6 border border-red-200\">\r\n <div className=\"flex items-center gap-3 mb-4\">\r\n <div className=\"p-3 bg-red-100 rounded-lg\">\r\n <TrendingDown \/>\r\n <\/div>\r\n <div>\r\n <h4 className=\"text-lg font-bold text-gray-900\">\u26a0\ufe0f Low Profit Margin Items<\/h4>\r\n <p className=\"text-sm text-gray-600\">Items with profit margin below 20% - Consider repricing<\/p>\r\n <\/div>\r\n <\/div>\r\n <div className=\"space-y-3\">\r\n {worstItems.map((item, idx) => (\r\n <div key={idx} className=\"bg-white rounded-lg p-4 shadow-sm\">\r\n <div className=\"flex justify-between items-center\">\r\n <div>\r\n <h5 className=\"font-semibold text-gray-900\">{item.name}<\/h5>\r\n <p className=\"text-xs text-gray-500\">Sold {item.totalQuantity} times<\/p>\r\n <\/div>\r\n <div className=\"text-right\">\r\n <p className={`text-lg font-bold ${item.profitMargin < 10 ? 'text-red-600' : 'text-yellow-600'}`}>\r\n {item.profitMargin.toFixed(1)}%\r\n <\/p>\r\n <p className=\"text-xs text-gray-500\">Margin<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n )}\r\n\r\n {\/* Order Status Breakdown *\/}\r\n <div className=\"bg-white rounded-xl p-6 border\">\r\n <div className=\"flex items-center gap-3 mb-4\">\r\n <div className=\"p-3 bg-blue-100 rounded-lg\">\r\n <BarChart3 \/>\r\n <\/div>\r\n <div>\r\n <h4 className=\"text-lg font-bold text-gray-900\">\ud83d\udce6 Order Status Breakdown<\/h4>\r\n <p className=\"text-sm text-gray-600\">Performance by order status<\/p>\r\n <\/div>\r\n <\/div>\r\n <div className=\"grid md:grid-cols-3 gap-4\">\r\n {Object.entries(statusBreakdown).map(([status, stats]) => (\r\n <div key={status} className=\"bg-gray-50 rounded-lg p-4\">\r\n <div className=\"flex items-center justify-between mb-3\">\r\n <span className={`px-3 py-1 text-sm rounded-full ${\r\n status === 'Delivered' ? 'bg-green-100 text-green-800' :\r\n status === 'Cancelled' ? 'bg-red-100 text-red-800' :\r\n 'bg-gray-100 text-gray-800'\r\n }`}>\r\n {status}\r\n <\/span>\r\n <span className=\"text-2xl font-bold text-gray-900\">{stats.count}<\/span>\r\n <\/div>\r\n <div className=\"space-y-2\">\r\n <div className=\"flex justify-between text-sm\">\r\n <span className=\"text-gray-600\">Revenue:<\/span>\r\n <span className=\"font-medium\">\u20b9{stats.revenue.toFixed(0)}<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between text-sm\">\r\n <span className=\"text-gray-600\">Profit:<\/span>\r\n <span className={`font-medium ${stats.profit >= 0 ? 'text-green-600' : 'text-red-600'}`}>\r\n \u20b9{stats.profit.toFixed(0)}\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* All Items Performance Table *\/}\r\n <div className=\"bg-white rounded-xl p-6 border\">\r\n <h4 className=\"text-lg font-bold text-gray-900 mb-4\">\ud83d\udccb Complete Item Performance<\/h4>\r\n <div className=\"overflow-x-auto\">\r\n <table className=\"w-full\">\r\n <thead className=\"bg-gray-50 border-b\">\r\n <tr>\r\n <th className=\"px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase\">Item Name<\/th>\r\n <th className=\"px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase\">Qty Sold<\/th>\r\n <th className=\"px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase\">Revenue<\/th>\r\n <th className=\"px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase\">Cost<\/th>\r\n <th className=\"px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase\">Profit<\/th>\r\n <th className=\"px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase\">Margin %<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody className=\"divide-y divide-gray-200\">\r\n {itemAnalytics.map((item, idx) => (\r\n <tr key={idx} className=\"hover:bg-gray-50\">\r\n <td className=\"px-4 py-3 text-sm text-gray-900\">{item.name}<\/td>\r\n <td className=\"px-4 py-3 text-sm text-right font-medium\">{item.totalQuantity}<\/td>\r\n <td className=\"px-4 py-3 text-sm text-right text-green-600\">\u20b9{item.totalRevenue.toFixed(0)}<\/td>\r\n <td className=\"px-4 py-3 text-sm text-right text-orange-600\">\u20b9{item.totalCost.toFixed(0)}<\/td>\r\n <td className={`px-4 py-3 text-sm text-right font-medium ${item.totalProfit >= 0 ? 'text-green-600' : 'text-red-600'}`}>\r\n \u20b9{item.totalProfit.toFixed(0)}\r\n <\/td>\r\n <td className={`px-4 py-3 text-sm text-right font-medium ${item.profitMargin >= 20 ? 'text-green-600' : item.profitMargin >= 10 ? 'text-yellow-600' : 'text-red-600'}`}>\r\n {item.profitMargin.toFixed(1)}%\r\n <\/td>\r\n <\/tr>\r\n ))}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n ReactDOM.render(<ZomatoReconciliation \/>, document.getElementById('root'));\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Zomato Order Reconciliation System – Advanced<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3141","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/3141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/comments?post=3141"}],"version-history":[{"count":7,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/3141\/revisions"}],"predecessor-version":[{"id":3152,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/3141\/revisions\/3152"}],"wp:attachment":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/media?parent=3141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}