{"id":2754,"date":"2026-01-27T15:45:35","date_gmt":"2026-01-27T15:45:35","guid":{"rendered":"https:\/\/malikskitchen.in\/?page_id=2754"},"modified":"2026-06-21T16:21:06","modified_gmt":"2026-06-21T10:51:06","slug":"zomato-sales-analysis-tools","status":"publish","type":"page","link":"https:\/\/malikskitchen.in\/index.php\/zomato-sales-analysis-tools\/","title":{"rendered":"zomato sales analysis tools"},"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 Analytics Dashboard<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600;700;900&family=JetBrains+Mono:wght@400;600&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/PapaParse\/5.3.0\/papaparse.min.js\"><\/script>\r\n <style>\r\n :root {\r\n --primary: #E23744;\r\n --primary-dark: #CB2D3E;\r\n --secondary: #FF6B6B;\r\n --accent: #FFD93D;\r\n --bg-dark: #0F0F0F;\r\n --bg-card: #1A1A1A;\r\n --bg-hover: #252525;\r\n --text-primary: #FFFFFF;\r\n --text-secondary: #B8B8B8;\r\n --border: #2A2A2A;\r\n --success: #51CF66;\r\n --warning: #FFA94D;\r\n --danger: #FF6B6B;\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --bg-dark: #F5F5F5;\r\n --bg-card: #FFFFFF;\r\n --bg-hover: #F0F0F0;\r\n --text-primary: #1A1A1A;\r\n --text-secondary: #666666;\r\n --border: #E0E0E0;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Outfit', sans-serif;\r\n background: var(--bg-dark);\r\n color: var(--text-primary);\r\n min-height: 100vh;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Animated Background *\/\r\n .bg-gradient {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -1;\r\n background: \r\n radial-gradient(circle at 20% 30%, rgba(226, 55, 68, 0.15) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 70%, rgba(255, 217, 61, 0.1) 0%, transparent 50%),\r\n linear-gradient(135deg, var(--bg-dark) 0%, #1a0f0f 100%);\r\n animation: gradientShift 20s ease infinite;\r\n transition: background 0.5s ease;\r\n }\r\n\r\n [data-theme=\"light\"] .bg-gradient {\r\n background: \r\n radial-gradient(circle at 20% 30%, rgba(226, 55, 68, 0.08) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 70%, rgba(255, 217, 61, 0.08) 0%, transparent 50%),\r\n linear-gradient(135deg, #F5F5F5 0%, #FAFAFA 100%);\r\n }\r\n\r\n @keyframes gradientShift {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.8; }\r\n }\r\n\r\n \/* Header *\/\r\n header {\r\n background: rgba(26, 26, 26, 0.8);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid var(--border);\r\n padding: 1.5rem 2rem;\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n animation: slideDown 0.6s ease;\r\n }\r\n\r\n @keyframes slideDown {\r\n from {\r\n transform: translateY(-100%);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .header-content {\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n\r\n .logo-icon {\r\n width: 48px;\r\n height: 48px;\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n font-weight: 900;\r\n box-shadow: 0 8px 24px rgba(226, 55, 68, 0.3);\r\n }\r\n\r\n .logo h1 {\r\n font-size: 1.8rem;\r\n font-weight: 900;\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .theme-toggle {\r\n background: var(--bg-card);\r\n border: 2px solid var(--border);\r\n border-radius: 50%;\r\n width: 50px;\r\n height: 50px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-size: 1.5rem;\r\n }\r\n\r\n .theme-toggle:hover {\r\n transform: scale(1.1) rotate(15deg);\r\n border-color: var(--primary);\r\n box-shadow: 0 8px 24px rgba(226, 55, 68, 0.3);\r\n }\r\n\r\n \/* Upload Section *\/\r\n .upload-section {\r\n max-width: 1600px;\r\n margin: 2rem auto;\r\n padding: 0 2rem;\r\n animation: fadeInUp 0.8s ease 0.2s both;\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n transform: translateY(30px);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .upload-card {\r\n background: var(--bg-card);\r\n border: 2px dashed var(--border);\r\n border-radius: 20px;\r\n padding: 3rem;\r\n text-align: center;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .upload-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(226, 55, 68, 0.1), transparent);\r\n transition: left 0.5s ease;\r\n }\r\n\r\n .upload-card:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .upload-card:hover {\r\n border-color: var(--primary);\r\n transform: translateY(-5px);\r\n box-shadow: 0 20px 60px rgba(226, 55, 68, 0.2);\r\n }\r\n\r\n .upload-icon {\r\n font-size: 4rem;\r\n margin-bottom: 1rem;\r\n animation: bounce 2s ease infinite;\r\n }\r\n\r\n @keyframes bounce {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-10px); }\r\n }\r\n\r\n .upload-text h2 {\r\n font-size: 1.5rem;\r\n margin-bottom: 0.5rem;\r\n font-weight: 700;\r\n }\r\n\r\n .upload-text p {\r\n color: var(--text-secondary);\r\n font-size: 1rem;\r\n }\r\n\r\n input[type=\"file\"] {\r\n display: none;\r\n }\r\n\r\n .upload-btn {\r\n display: inline-block;\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\r\n color: white;\r\n padding: 1rem 2.5rem;\r\n border-radius: 50px;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n border: none;\r\n cursor: pointer;\r\n margin-top: 1.5rem;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 8px 24px rgba(226, 55, 68, 0.3);\r\n }\r\n\r\n .upload-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 32px rgba(226, 55, 68, 0.4);\r\n }\r\n\r\n \/* Tabs *\/\r\n .tabs {\r\n max-width: 1600px;\r\n margin: 2rem auto;\r\n padding: 0 2rem;\r\n display: none;\r\n animation: fadeInUp 0.8s ease 0.4s both;\r\n }\r\n\r\n .tabs.active {\r\n display: block;\r\n }\r\n\r\n .tab-buttons {\r\n display: flex;\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n border-bottom: 2px solid var(--border);\r\n }\r\n\r\n .tab-btn {\r\n padding: 1rem 2rem;\r\n background: none;\r\n border: none;\r\n color: var(--text-secondary);\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n position: relative;\r\n transition: all 0.3s ease;\r\n font-family: 'Outfit', sans-serif;\r\n }\r\n\r\n .tab-btn.active {\r\n color: var(--primary);\r\n }\r\n\r\n .tab-btn::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -2px;\r\n left: 0;\r\n width: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--primary), var(--accent));\r\n transition: width 0.3s ease;\r\n }\r\n\r\n .tab-btn.active::after {\r\n width: 100%;\r\n }\r\n\r\n .tab-btn:hover {\r\n color: var(--primary);\r\n }\r\n\r\n \/* Stats Cards *\/\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 1.5rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .stat-card {\r\n background: var(--bg-card);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: 1.5rem;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .stat-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 4px;\r\n height: 100%;\r\n background: linear-gradient(180deg, var(--primary), var(--accent));\r\n transform: scaleY(0);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .stat-card:hover::before {\r\n transform: scaleY(1);\r\n }\r\n\r\n .stat-card:hover {\r\n transform: translateY(-5px);\r\n border-color: var(--primary);\r\n box-shadow: 0 12px 32px rgba(226, 55, 68, 0.15);\r\n }\r\n\r\n .stat-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .stat-icon {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n }\r\n\r\n .stat-label {\r\n color: var(--text-secondary);\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .stat-value {\r\n font-size: 2.5rem;\r\n font-weight: 900;\r\n margin: 0.5rem 0;\r\n background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* Filters *\/\r\n .filters {\r\n background: var(--bg-card);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: 1.5rem;\r\n margin-bottom: 2rem;\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 1rem;\r\n align-items: center;\r\n }\r\n\r\n .filter-group {\r\n flex: 1;\r\n min-width: 200px;\r\n }\r\n\r\n .filter-label {\r\n display: block;\r\n color: var(--text-secondary);\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n margin-bottom: 0.5rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .filter-input, .filter-select {\r\n width: 100%;\r\n background: var(--bg-dark);\r\n border: 1px solid var(--border);\r\n border-radius: 10px;\r\n padding: 0.75rem 1rem;\r\n color: var(--text-primary);\r\n font-family: 'Outfit', sans-serif;\r\n font-size: 1rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .filter-input:focus, .filter-select:focus {\r\n outline: none;\r\n border-color: var(--primary);\r\n box-shadow: 0 0 0 3px rgba(226, 55, 68, 0.1);\r\n }\r\n\r\n .reset-btn {\r\n background: var(--bg-dark);\r\n border: 1px solid var(--border);\r\n color: var(--text-primary);\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 10px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-family: 'Outfit', sans-serif;\r\n }\r\n\r\n .reset-btn:hover {\r\n border-color: var(--primary);\r\n color: var(--primary);\r\n }\r\n\r\n \/* Charts *\/\r\n .charts-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));\r\n gap: 2rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .chart-card {\r\n background: var(--bg-card);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: 2rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .chart-card:hover {\r\n border-color: var(--primary);\r\n box-shadow: 0 12px 32px rgba(226, 55, 68, 0.1);\r\n }\r\n\r\n .chart-title {\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n margin-bottom: 1.5rem;\r\n color: var(--text-primary);\r\n }\r\n\r\n \/* Table *\/\r\n .table-container {\r\n background: var(--bg-card);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .table-header {\r\n padding: 1.5rem 2rem;\r\n border-bottom: 1px solid var(--border);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .table-title {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n }\r\n\r\n .search-box {\r\n position: relative;\r\n }\r\n\r\n .search-input {\r\n background: var(--bg-dark);\r\n border: 1px solid var(--border);\r\n border-radius: 10px;\r\n padding: 0.75rem 1rem;\r\n color: var(--text-primary);\r\n font-family: 'Outfit', sans-serif;\r\n width: 300px;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n }\r\n\r\n .search-input:focus {\r\n outline: none;\r\n border-color: var(--primary);\r\n box-shadow: 0 0 0 3px rgba(226, 55, 68, 0.1);\r\n }\r\n\r\n .search-input option {\r\n background: var(--bg-dark);\r\n color: var(--text-primary);\r\n padding: 0.5rem;\r\n }\r\n\r\n .table-wrapper {\r\n overflow-x: auto;\r\n max-height: 600px;\r\n }\r\n\r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n }\r\n\r\n thead {\r\n background: var(--bg-dark);\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n\r\n th {\r\n padding: 1rem 1.5rem;\r\n text-align: left;\r\n font-weight: 700;\r\n color: var(--text-primary);\r\n border-bottom: 2px solid var(--border);\r\n white-space: nowrap;\r\n font-size: 0.9rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n td {\r\n padding: 1rem 1.5rem;\r\n border-bottom: 1px solid var(--border);\r\n color: var(--text-secondary);\r\n }\r\n\r\n tbody tr {\r\n transition: all 0.2s ease;\r\n }\r\n\r\n tbody tr:hover {\r\n background: var(--bg-hover);\r\n }\r\n\r\n .badge {\r\n display: inline-block;\r\n padding: 0.4rem 0.8rem;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n font-family: 'JetBrains Mono', monospace;\r\n }\r\n\r\n .badge-success {\r\n background: rgba(81, 207, 102, 0.2);\r\n color: var(--success);\r\n }\r\n\r\n .badge-warning {\r\n background: rgba(255, 169, 77, 0.2);\r\n color: var(--warning);\r\n }\r\n\r\n .badge-danger {\r\n background: rgba(255, 107, 107, 0.2);\r\n color: var(--danger);\r\n }\r\n\r\n \/* Tab Content *\/\r\n .tab-content {\r\n display: none;\r\n animation: fadeIn 0.5s ease;\r\n }\r\n\r\n .tab-content.active {\r\n display: block;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n\r\n \/* Loading *\/\r\n .loading {\r\n text-align: center;\r\n padding: 3rem;\r\n color: var(--text-secondary);\r\n }\r\n\r\n .spinner {\r\n width: 50px;\r\n height: 50px;\r\n border: 4px solid var(--border);\r\n border-top-color: var(--primary);\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n margin: 0 auto 1rem;\r\n }\r\n\r\n @keyframes spin {\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 768px) {\r\n header {\r\n padding: 1rem;\r\n }\r\n\r\n .logo h1 {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .upload-card {\r\n padding: 2rem 1rem;\r\n }\r\n\r\n .tabs {\r\n padding: 0 1rem;\r\n }\r\n\r\n .charts-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .search-input {\r\n width: 200px;\r\n }\r\n\r\n th, td {\r\n padding: 0.75rem 1rem;\r\n font-size: 0.85rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"bg-gradient\"><\/div>\r\n\r\n <header>\r\n <div class=\"header-content\">\r\n <div class=\"logo\">\r\n <div class=\"logo-icon\">Z<\/div>\r\n <h1>Zomato Analytics<\/h1>\r\n <\/div>\r\n <button class=\"theme-toggle\" onclick=\"toggleTheme()\" id=\"themeToggle\">\r\n <span class=\"theme-icon\">\ud83c\udf19<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"upload-section\" id=\"uploadSection\">\r\n <div class=\"upload-card\" id=\"businessUploadCard\">\r\n <div class=\"upload-icon\">\ud83d\udcca<\/div>\r\n <div class=\"upload-text\">\r\n <h2>Upload Business Report<\/h2>\r\n <p>Drag & drop your Business Report CSV file or click to browse<\/p>\r\n <\/div>\r\n <input type=\"file\" id=\"businessFile\" accept=\".csv\" onchange=\"handleFileUpload('business', this)\" style=\"display: none;\">\r\n <button class=\"upload-btn\" onclick=\"document.getElementById('businessFile').click(); event.stopPropagation();\">Choose File<\/button>\r\n <\/div>\r\n \r\n <div class=\"upload-card\" id=\"itemUploadCard\" style=\"margin-top: 1.5rem;\">\r\n <div class=\"upload-icon\">\ud83c\udf54<\/div>\r\n <div class=\"upload-text\">\r\n <h2>Upload Item Sales Report<\/h2>\r\n <p>Drag & drop your Item Sales Report CSV file or click to browse<\/p>\r\n <\/div>\r\n <input type=\"file\" id=\"itemFile\" accept=\".csv\" onchange=\"handleFileUpload('item', this)\" style=\"display: none;\">\r\n <button class=\"upload-btn\" onclick=\"document.getElementById('itemFile').click(); event.stopPropagation();\">Choose File<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tabs\" id=\"tabsSection\">\r\n <div class=\"tab-buttons\">\r\n <button class=\"tab-btn active\" onclick=\"switchTab('business')\">\ud83d\udcca Business Overview<\/button>\r\n <button class=\"tab-btn\" onclick=\"switchTab('items')\">\ud83c\udf54 Item Sales<\/button>\r\n <button class=\"tab-btn\" onclick=\"switchTab('complaints')\">\u26a0\ufe0f Complaints<\/button>\r\n <\/div>\r\n\r\n <!-- Business Overview Tab -->\r\n <div id=\"businessTab\" class=\"tab-content active\">\r\n <div class=\"stats-grid\" id=\"businessStats\"><\/div>\r\n \r\n <div class=\"filters\">\r\n <div class=\"filter-group\">\r\n <label class=\"filter-label\">Restaurant<\/label>\r\n <select class=\"filter-select\" id=\"restaurantFilter\" onchange=\"applyFilters()\">\r\n <option value=\"\">All Restaurants<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"filter-group\">\r\n <label class=\"filter-label\">City<\/label>\r\n <select class=\"filter-select\" id=\"cityFilter\" onchange=\"applyFilters()\">\r\n <option value=\"\">All Cities<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"filter-group\">\r\n <label class=\"filter-label\">Overview<\/label>\r\n <select class=\"filter-select\" id=\"overviewFilter\" onchange=\"applyFilters()\">\r\n <option value=\"\">All Categories<\/option>\r\n <\/select>\r\n <\/div>\r\n <button class=\"reset-btn\" onclick=\"resetFilters()\">Reset<\/button>\r\n <\/div>\r\n\r\n <div class=\"charts-grid\">\r\n <div class=\"chart-card\">\r\n <h3 class=\"chart-title\">Selected Overview Metrics<\/h3>\r\n <canvas id=\"salesChart\"><\/canvas>\r\n <\/div>\r\n <div class=\"chart-card\">\r\n <h3 class=\"chart-title\">Metrics Comparison by Restaurant<\/h3>\r\n <canvas id=\"experienceChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"table-container\">\r\n <div class=\"table-header\">\r\n <h3 class=\"table-title\">Business Metrics<\/h3>\r\n <div class=\"search-box\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search...\" id=\"businessSearch\" oninput=\"searchTable('businessTable')\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"table-wrapper\">\r\n <table id=\"businessTable\"><\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Items Tab -->\r\n <div id=\"itemsTab\" class=\"tab-content\">\r\n <div class=\"stats-grid\" id=\"itemStats\"><\/div>\r\n\r\n <div class=\"filters\">\r\n <div class=\"filter-group\">\r\n <label class=\"filter-label\">Category<\/label>\r\n <select class=\"filter-select\" id=\"categoryFilter\" onchange=\"applyItemFilters()\">\r\n <option value=\"\">All Categories<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"filter-group\">\r\n <label class=\"filter-label\">Subcategory<\/label>\r\n <select class=\"filter-select\" id=\"subcategoryFilter\" onchange=\"applyItemFilters()\">\r\n <option value=\"\">All Subcategories<\/option>\r\n <\/select>\r\n <\/div>\r\n <button class=\"reset-btn\" onclick=\"resetItemFilters()\">Reset<\/button>\r\n <\/div>\r\n\r\n <div class=\"charts-grid\">\r\n <div class=\"chart-card\">\r\n <h3 class=\"chart-title\">Top 10 Selling Items<\/h3>\r\n <canvas id=\"topItemsChart\"><\/canvas>\r\n <\/div>\r\n <div class=\"chart-card\">\r\n <h3 class=\"chart-title\">Category Performance<\/h3>\r\n <canvas id=\"categoryChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"table-container\">\r\n <div class=\"table-header\">\r\n <h3 class=\"table-title\">Item Sales Details<\/h3>\r\n <div class=\"search-box\">\r\n <select class=\"search-input\" id=\"itemSearch\" onchange=\"filterItemTable()\">\r\n <option value=\"\">All Items<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"table-wrapper\">\r\n <table id=\"itemTable\"><\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Complaints Tab -->\r\n <div id=\"complaintsTab\" class=\"tab-content\">\r\n <div class=\"stats-grid\" id=\"complaintsStats\"><\/div>\r\n\r\n <div class=\"charts-grid\">\r\n <div class=\"chart-card\">\r\n <h3 class=\"chart-title\">Complaint Types Distribution<\/h3>\r\n <canvas id=\"complaintsTypeChart\"><\/canvas>\r\n <\/div>\r\n <div class=\"chart-card\">\r\n <h3 class=\"chart-title\">Complaints Trend<\/h3>\r\n <canvas id=\"complaintsTrendChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"table-container\">\r\n <div class=\"table-header\">\r\n <h3 class=\"table-title\">Detailed Complaints Analysis<\/h3>\r\n <\/div>\r\n <div class=\"table-wrapper\">\r\n <table id=\"complaintsTable\"><\/table>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n let businessData = [];\r\n let itemData = [];\r\n let filteredBusinessData = [];\r\n let filteredItemData = [];\r\n let charts = {};\r\n\r\n function handleFileUpload(type, input) {\r\n const file = input.files[0];\r\n if (!file) return;\r\n\r\n \/\/ Show loading state\r\n const uploadCard = input.closest('.upload-card');\r\n const originalHTML = uploadCard.innerHTML;\r\n uploadCard.innerHTML = `\r\n <div class=\"loading\">\r\n <div class=\"spinner\"><\/div>\r\n <p>Uploading ${file.name}...<\/p>\r\n <\/div>\r\n `;\r\n\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n Papa.parse(e.target.result, {\r\n header: true,\r\n complete: function(results) {\r\n if (type === 'business') {\r\n businessData = results.data.filter(row => row['Restaurant ID']);\r\n filteredBusinessData = [...businessData];\r\n filesUploaded.business = true;\r\n processBusinessData();\r\n \r\n \/\/ Show success message\r\n uploadCard.innerHTML = `\r\n <div class=\"upload-icon\">\u2705<\/div>\r\n <div class=\"upload-text\">\r\n <h2>Business Report Uploaded!<\/h2>\r\n <p>${file.name} - ${businessData.length} records loaded<\/p>\r\n <\/div>\r\n `;\r\n uploadCard.style.borderColor = 'var(--success)';\r\n uploadCard.style.background = 'rgba(81, 207, 102, 0.1)';\r\n } else {\r\n itemData = results.data.filter(row => row['Restaurant ID']);\r\n filteredItemData = [...itemData];\r\n filesUploaded.item = true;\r\n processItemData();\r\n \r\n \/\/ Show success message\r\n uploadCard.innerHTML = `\r\n <div class=\"upload-icon\">\u2705<\/div>\r\n <div class=\"upload-text\">\r\n <h2>Item Sales Report Uploaded!<\/h2>\r\n <p>${file.name} - ${itemData.length} records loaded<\/p>\r\n <\/div>\r\n `;\r\n uploadCard.style.borderColor = 'var(--success)';\r\n uploadCard.style.background = 'rgba(81, 207, 102, 0.1)';\r\n }\r\n \r\n updateUploadStatus();\r\n },\r\n error: function(error) {\r\n alert('Error parsing file: ' + error.message);\r\n uploadCard.innerHTML = originalHTML;\r\n }\r\n });\r\n };\r\n reader.readAsText(file);\r\n }\r\n\r\n function processBusinessData() {\r\n populateFilters();\r\n renderBusinessStats();\r\n renderBusinessTable();\r\n renderBusinessCharts();\r\n }\r\n\r\n function processItemData() {\r\n populateItemFilters();\r\n renderItemStats();\r\n renderItemTable();\r\n renderItemCharts();\r\n renderComplaintsData();\r\n }\r\n\r\n function populateFilters() {\r\n const restaurants = [...new Set(businessData.map(row => row['Restaurant name']))];\r\n const cities = [...new Set(businessData.map(row => row['City']))];\r\n const overviews = [...new Set(businessData.map(row => row['Overview']))];\r\n\r\n populateSelect('restaurantFilter', restaurants);\r\n populateSelect('cityFilter', cities);\r\n populateSelect('overviewFilter', overviews);\r\n }\r\n\r\n function populateItemFilters() {\r\n const categories = [...new Set(itemData.map(row => row['Item category']))];\r\n const subcategories = [...new Set(itemData.map(row => row['Item subcategory']))];\r\n\r\n populateSelect('categoryFilter', categories);\r\n populateSelect('subcategoryFilter', subcategories);\r\n }\r\n\r\n function populateSelect(id, options) {\r\n const select = document.getElementById(id);\r\n const currentValue = select.value;\r\n select.innerHTML = '<option value=\"\">All<\/option>';\r\n options.filter(opt => opt).forEach(opt => {\r\n const option = document.createElement('option');\r\n option.value = opt;\r\n option.textContent = opt;\r\n select.appendChild(option);\r\n });\r\n select.value = currentValue;\r\n }\r\n\r\n function applyFilters() {\r\n const restaurant = document.getElementById('restaurantFilter').value;\r\n const city = document.getElementById('cityFilter').value;\r\n const overview = document.getElementById('overviewFilter').value;\r\n\r\n filteredBusinessData = businessData.filter(row => {\r\n return (!restaurant || row['Restaurant name'] === restaurant) &&\r\n (!city || row['City'] === city) &&\r\n (!overview || row['Overview'] === overview);\r\n });\r\n\r\n renderBusinessStats();\r\n renderBusinessTable();\r\n renderBusinessCharts();\r\n }\r\n\r\n function applyItemFilters() {\r\n const category = document.getElementById('categoryFilter').value;\r\n const subcategory = document.getElementById('subcategoryFilter').value;\r\n\r\n filteredItemData = itemData.filter(row => {\r\n return (!category || row['Item category'] === category) &&\r\n (!subcategory || row['Item subcategory'] === subcategory);\r\n });\r\n\r\n renderItemStats();\r\n renderItemTable();\r\n renderItemCharts();\r\n populateItemSearchDropdown();\r\n }\r\n\r\n function populateItemSearchDropdown() {\r\n const quantityData = filteredItemData.filter(row => row['Metric'] === 'Item quantity sold');\r\n const uniqueItems = [...new Set(quantityData.map(row => row['Item name']))].sort();\r\n \r\n const select = document.getElementById('itemSearch');\r\n select.innerHTML = '<option value=\"\">All Items<\/option>';\r\n \r\n uniqueItems.forEach(item => {\r\n const option = document.createElement('option');\r\n option.value = item;\r\n option.textContent = item;\r\n select.appendChild(option);\r\n });\r\n }\r\n\r\n function filterItemTable() {\r\n const selectedItem = document.getElementById('itemSearch').value;\r\n const table = document.getElementById('itemTable');\r\n const rows = table.getElementsByTagName('tr');\r\n\r\n for (let i = 1; i < rows.length; i++) {\r\n const row = rows[i];\r\n const itemName = row.cells[0].textContent;\r\n \r\n if (!selectedItem || itemName === selectedItem) {\r\n row.style.display = '';\r\n } else {\r\n row.style.display = 'none';\r\n }\r\n }\r\n }\r\n\r\n function resetFilters() {\r\n document.getElementById('restaurantFilter').value = '';\r\n document.getElementById('cityFilter').value = '';\r\n document.getElementById('overviewFilter').value = '';\r\n applyFilters();\r\n }\r\n\r\n function resetItemFilters() {\r\n document.getElementById('categoryFilter').value = '';\r\n document.getElementById('subcategoryFilter').value = '';\r\n document.getElementById('itemSearch').value = '';\r\n applyItemFilters();\r\n }\r\n\r\n function renderBusinessStats() {\r\n const salesData = filteredBusinessData.filter(row => row['Metric'] === 'Sales (Rs)');\r\n const ordersData = filteredBusinessData.filter(row => row['Metric'] === 'Delivered orders');\r\n const ratingData = filteredBusinessData.filter(row => row['Metric'] === 'Average rating');\r\n const complaintsData = filteredBusinessData.filter(row => row['Metric'] === 'Total complaints');\r\n\r\n const totalSales = salesData.reduce((sum, row) => sum + parseFloat(row['Jan 2026'] || 0), 0);\r\n const totalOrders = ordersData.reduce((sum, row) => sum + parseInt(row['Jan 2026'] || 0), 0);\r\n const avgRating = ratingData.length > 0 ? \r\n ratingData.reduce((sum, row) => sum + parseFloat(row['Jan 2026'] || 0), 0) \/ ratingData.length : 0;\r\n const totalComplaints = complaintsData.reduce((sum, row) => sum + parseInt(row['Jan 2026'] || 0), 0);\r\n\r\n const statsHTML = `\r\n <div class=\"stat-card\">\r\n <div class=\"stat-header\">\r\n <div>\r\n <div class=\"stat-label\">Total Sales<\/div>\r\n <div class=\"stat-value\">\u20b9${totalSales.toLocaleString('en-IN', {maximumFractionDigits: 0})}<\/div>\r\n <\/div>\r\n <div class=\"stat-icon\" style=\"background: linear-gradient(135deg, #51CF66 0%, #37B24D 100%);\">\ud83d\udcb0<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-header\">\r\n <div>\r\n <div class=\"stat-label\">Total Orders<\/div>\r\n <div class=\"stat-value\">${totalOrders.toLocaleString()}<\/div>\r\n <\/div>\r\n <div class=\"stat-icon\" style=\"background: linear-gradient(135deg, #4DABF7 0%, #228BE6 100%);\">\ud83d\udce6<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-header\">\r\n <div>\r\n <div class=\"stat-label\">Avg Rating<\/div>\r\n <div class=\"stat-value\">${avgRating.toFixed(2)}<\/div>\r\n <\/div>\r\n <div class=\"stat-icon\" style=\"background: linear-gradient(135deg, #FFD93D 0%, #FFA500 100%);\">\u2b50<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-header\">\r\n <div>\r\n <div class=\"stat-label\">Complaints<\/div>\r\n <div class=\"stat-value\">${totalComplaints}<\/div>\r\n <\/div>\r\n <div class=\"stat-icon\" style=\"background: linear-gradient(135deg, #FF6B6B 0%, #E03131 100%);\">\u26a0\ufe0f<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n document.getElementById('businessStats').innerHTML = statsHTML;\r\n }\r\n\r\n function renderItemStats() {\r\n const quantityData = filteredItemData.filter(row => row['Metric'] === 'Item quantity sold');\r\n const ratingData = filteredItemData.filter(row => row['Metric'] === 'Item rating');\r\n\r\n const totalQuantity = quantityData.reduce((sum, row) => sum + parseInt(row['January'] || 0), 0);\r\n const uniqueItems = new Set(quantityData.map(row => row['Item name'])).size;\r\n const uniqueCategories = new Set(quantityData.map(row => row['Item category'])).size;\r\n const avgRating = ratingData.length > 0 ?\r\n ratingData.reduce((sum, row) => sum + parseFloat(row['January'] || 0), 0) \/ ratingData.length : 0;\r\n\r\n const topItems = quantityData\r\n .sort((a, b) => parseInt(b['January']) - parseInt(a['January']))\r\n .slice(0, 5);\r\n\r\n const statsHTML = `\r\n <div class=\"stat-card\">\r\n <div class=\"stat-header\">\r\n <div>\r\n <div class=\"stat-label\">Total Items Sold<\/div>\r\n <div class=\"stat-value\">${totalQuantity.toLocaleString()}<\/div>\r\n <\/div>\r\n <div class=\"stat-icon\" style=\"background: linear-gradient(135deg, #E23744 0%, #CB2D3E 100%);\">\ud83c\udf54<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-header\">\r\n <div>\r\n <div class=\"stat-label\">Categories<\/div>\r\n <div class=\"stat-value\">${uniqueCategories}<\/div>\r\n <\/div>\r\n <div class=\"stat-icon\" style=\"background: linear-gradient(135deg, #9775FA 0%, #7950F2 100%);\">\ud83d\udccb<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-header\">\r\n <div>\r\n <div class=\"stat-label\">Unique Items<\/div>\r\n <div class=\"stat-value\">${uniqueItems}<\/div>\r\n <\/div>\r\n <div class=\"stat-icon\" style=\"background: linear-gradient(135deg, #4DABF7 0%, #228BE6 100%);\">\ud83c\udfaf<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-header\">\r\n <div>\r\n <div class=\"stat-label\">Avg Item Rating<\/div>\r\n <div class=\"stat-value\">${avgRating.toFixed(2)}<\/div>\r\n <\/div>\r\n <div class=\"stat-icon\" style=\"background: linear-gradient(135deg, #FFD93D 0%, #FFA500 100%);\">\u2b50<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n document.getElementById('itemStats').innerHTML = statsHTML;\r\n }\r\n\r\n function renderBusinessTable() {\r\n const table = document.getElementById('businessTable');\r\n const headers = ['Restaurant', 'City', 'Overview', 'Metric', 'Value'];\r\n \r\n let html = '<thead><tr>';\r\n headers.forEach(h => html += `<th>${h}<\/th>`);\r\n html += '<\/tr><\/thead><tbody>';\r\n\r\n filteredBusinessData.forEach(row => {\r\n html += `<tr>\r\n <td><strong>${row['Restaurant name']}<\/strong><\/td>\r\n <td>${row['City']}<\/td>\r\n <td><span class=\"badge badge-success\">${row['Overview']}<\/span><\/td>\r\n <td>${row['Metric']}<\/td>\r\n <td><strong>${formatValue(row['Metric'], row['Jan 2026'])}<\/strong><\/td>\r\n <\/tr>`;\r\n });\r\n\r\n html += '<\/tbody>';\r\n table.innerHTML = html;\r\n }\r\n\r\n function renderItemTable() {\r\n const table = document.getElementById('itemTable');\r\n const headers = ['Item Name', 'Category', 'Subcategory', 'Metric', 'Value'];\r\n \r\n let html = '<thead><tr>';\r\n headers.forEach(h => html += `<th>${h}<\/th>`);\r\n html += '<\/tr><\/thead><tbody>';\r\n\r\n filteredItemData.forEach(row => {\r\n html += `<tr>\r\n <td><strong>${row['Item name']}<\/strong><\/td>\r\n <td>${row['Item category']}<\/td>\r\n <td><span class=\"badge badge-warning\">${row['Item subcategory']}<\/span><\/td>\r\n <td>${row['Metric']}<\/td>\r\n <td><strong>${formatValue(row['Metric'], row['January'])}<\/strong><\/td>\r\n <\/tr>`;\r\n });\r\n\r\n html += '<\/tbody>';\r\n table.innerHTML = html;\r\n \r\n \/\/ Populate item search dropdown after rendering table\r\n populateItemSearchDropdown();\r\n }\r\n\r\n function renderComplaintsData() {\r\n const complaintsData = businessData.filter(row => \r\n row['Metric'].includes('complaint') || \r\n row['Metric'].includes('Poor rated') ||\r\n row['Metric'].includes('Bad orders')\r\n );\r\n\r\n const totalComplaints = complaintsData.filter(row => row['Metric'] === 'Total complaints')\r\n .reduce((sum, row) => sum + parseInt(row['Jan 2026'] || 0), 0);\r\n\r\n const poorPackaging = complaintsData.filter(row => row['Metric'] === 'Total complaints - Poor packaging')\r\n .reduce((sum, row) => sum + parseInt(row['Jan 2026'] || 0), 0);\r\n\r\n const poorQuality = complaintsData.filter(row => row['Metric'] === 'Total complaints - Poor quality')\r\n .reduce((sum, row) => sum + parseInt(row['Jan 2026'] || 0), 0);\r\n\r\n const wrongOrder = complaintsData.filter(row => row['Metric'] === 'Total complaints - Wrong order')\r\n .reduce((sum, row) => sum + parseInt(row['Jan 2026'] || 0), 0);\r\n\r\n const missingItems = complaintsData.filter(row => row['Metric'] === 'Total complaints - Missing items')\r\n .reduce((sum, row) => sum + parseInt(row['Jan 2026'] || 0), 0);\r\n\r\n const badOrders = complaintsData.filter(row => row['Metric'] === 'Bad orders')\r\n .reduce((sum, row) => sum + parseInt(row['Jan 2026'] || 0), 0);\r\n\r\n const statsHTML = `\r\n <div class=\"stat-card\">\r\n <div class=\"stat-header\">\r\n <div>\r\n <div class=\"stat-label\">Total Complaints<\/div>\r\n <div class=\"stat-value\">${totalComplaints}<\/div>\r\n <\/div>\r\n <div class=\"stat-icon\" style=\"background: linear-gradient(135deg, #FF6B6B 0%, #E03131 100%);\">\u26a0\ufe0f<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-header\">\r\n <div>\r\n <div class=\"stat-label\">Poor Quality<\/div>\r\n <div class=\"stat-value\">${poorQuality}<\/div>\r\n <\/div>\r\n <div class=\"stat-icon\" style=\"background: linear-gradient(135deg, #FFA94D 0%, #FF8C00 100%);\">\ud83d\udce6<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-header\">\r\n <div>\r\n <div class=\"stat-label\">Wrong Orders<\/div>\r\n <div class=\"stat-value\">${wrongOrder}<\/div>\r\n <\/div>\r\n <div class=\"stat-icon\" style=\"background: linear-gradient(135deg, #FA5252 0%, #E03131 100%);\">\u274c<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-header\">\r\n <div>\r\n <div class=\"stat-label\">Missing Items<\/div>\r\n <div class=\"stat-value\">${missingItems}<\/div>\r\n <\/div>\r\n <div class=\"stat-icon\" style=\"background: linear-gradient(135deg, #FF922B 0%, #FD7E14 100%);\">\ud83d\udd0d<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n document.getElementById('complaintsStats').innerHTML = statsHTML;\r\n\r\n \/\/ Render complaints charts\r\n renderComplaintsCharts(poorPackaging, poorQuality, wrongOrder, missingItems);\r\n\r\n \/\/ Render complaints table\r\n const table = document.getElementById('complaintsTable');\r\n let html = '<thead><tr><th>Restaurant<\/th><th>City<\/th><th>Complaint Type<\/th><th>Count<\/th><\/tr><\/thead><tbody>';\r\n\r\n complaintsData.forEach(row => {\r\n if (parseInt(row['Jan 2026']) > 0) {\r\n html += `<tr>\r\n <td><strong>${row['Restaurant name']}<\/strong><\/td>\r\n <td>${row['City']}<\/td>\r\n <td>${row['Metric']}<\/td>\r\n <td><span class=\"badge badge-danger\">${row['Jan 2026']}<\/span><\/td>\r\n <\/tr>`;\r\n }\r\n });\r\n\r\n html += '<\/tbody>';\r\n table.innerHTML = html;\r\n }\r\n\r\n function renderBusinessCharts() {\r\n const overview = document.getElementById('overviewFilter').value;\r\n \r\n \/\/ If no overview selected, show a message\r\n if (!overview) {\r\n const ctx1 = document.getElementById('salesChart').getContext('2d');\r\n const ctx2 = document.getElementById('experienceChart').getContext('2d');\r\n \r\n if (charts.salesChart) charts.salesChart.destroy();\r\n if (charts.experienceChart) charts.experienceChart.destroy();\r\n \r\n \/\/ Show placeholder text\r\n ctx1.font = '16px Outfit';\r\n ctx1.fillStyle = '#B8B8B8';\r\n ctx1.textAlign = 'center';\r\n ctx1.fillText('Please select an Overview category from filters', ctx1.canvas.width\/2, ctx1.canvas.height\/2);\r\n \r\n ctx2.font = '16px Outfit';\r\n ctx2.fillStyle = '#B8B8B8';\r\n ctx2.textAlign = 'center';\r\n ctx2.fillText('Please select an Overview category from filters', ctx2.canvas.width\/2, ctx2.canvas.height\/2);\r\n return;\r\n }\r\n \r\n \/\/ Filter data by selected overview\r\n const overviewData = filteredBusinessData.filter(row => row['Overview'] === overview);\r\n \r\n \/\/ Get unique metrics for this overview\r\n const metrics = [...new Set(overviewData.map(row => row['Metric']))];\r\n const metricValues = metrics.map(metric => {\r\n const row = overviewData.find(r => r['Metric'] === metric);\r\n return parseFloat(row['Jan 2026'] || 0);\r\n });\r\n \r\n \/\/ Chart 1: Show all metrics for selected overview\r\n if (charts.salesChart) charts.salesChart.destroy();\r\n \r\n const ctx1 = document.getElementById('salesChart').getContext('2d');\r\n charts.salesChart = new Chart(ctx1, {\r\n type: 'bar',\r\n data: {\r\n labels: metrics,\r\n datasets: [{\r\n label: overview + ' Metrics',\r\n data: metricValues,\r\n backgroundColor: 'rgba(226, 55, 68, 0.8)',\r\n borderColor: 'rgba(226, 55, 68, 1)',\r\n borderWidth: 2\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: true,\r\n plugins: {\r\n legend: {\r\n labels: { \r\n color: getComputedStyle(document.documentElement).getPropertyValue('--text-primary').trim(),\r\n font: { size: 12, family: 'Outfit' } \r\n }\r\n }\r\n },\r\n scales: {\r\n y: {\r\n ticks: { color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim() },\r\n grid: { color: 'rgba(128, 128, 128, 0.1)' }\r\n },\r\n x: {\r\n ticks: { \r\n color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim(),\r\n maxRotation: 45,\r\n minRotation: 45\r\n },\r\n grid: { color: 'rgba(128, 128, 128, 0.1)' }\r\n }\r\n }\r\n }\r\n });\r\n\r\n \/\/ Chart 2: Compare restaurants for selected overview\r\n const restaurants = [...new Set(overviewData.map(row => row['Restaurant name']))];\r\n \r\n \/\/ Get top 3 metrics by value\r\n const topMetrics = metrics\r\n .map(metric => ({\r\n metric,\r\n total: overviewData.filter(r => r['Metric'] === metric)\r\n .reduce((sum, r) => sum + parseFloat(r['Jan 2026'] || 0), 0)\r\n }))\r\n .sort((a, b) => b.total - a.total)\r\n .slice(0, 3)\r\n .map(m => m.metric);\r\n \r\n const datasets = topMetrics.map((metric, index) => {\r\n const colors = [\r\n { bg: 'rgba(226, 55, 68, 0.8)', border: 'rgba(226, 55, 68, 1)' },\r\n { bg: 'rgba(77, 171, 247, 0.8)', border: 'rgba(77, 171, 247, 1)' },\r\n { bg: 'rgba(81, 207, 102, 0.8)', border: 'rgba(81, 207, 102, 1)' }\r\n ];\r\n \r\n const data = restaurants.map(restaurant => {\r\n const row = overviewData.find(r => \r\n r['Restaurant name'] === restaurant && r['Metric'] === metric\r\n );\r\n return parseFloat(row ? row['Jan 2026'] : 0);\r\n });\r\n \r\n return {\r\n label: metric,\r\n data: data,\r\n backgroundColor: colors[index].bg,\r\n borderColor: colors[index].border,\r\n borderWidth: 2\r\n };\r\n });\r\n\r\n if (charts.experienceChart) charts.experienceChart.destroy();\r\n \r\n const ctx2 = document.getElementById('experienceChart').getContext('2d');\r\n charts.experienceChart = new Chart(ctx2, {\r\n type: 'bar',\r\n data: {\r\n labels: restaurants,\r\n datasets: datasets\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: true,\r\n plugins: {\r\n legend: {\r\n labels: { \r\n color: getComputedStyle(document.documentElement).getPropertyValue('--text-primary').trim(),\r\n font: { size: 12, family: 'Outfit' } \r\n }\r\n }\r\n },\r\n scales: {\r\n y: {\r\n ticks: { color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim() },\r\n grid: { color: 'rgba(128, 128, 128, 0.1)' }\r\n },\r\n x: {\r\n ticks: { color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim() },\r\n grid: { color: 'rgba(128, 128, 128, 0.1)' }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n function toggleTheme() {\r\n const html = document.documentElement;\r\n const currentTheme = html.getAttribute('data-theme');\r\n const newTheme = currentTheme === 'light' ? 'dark' : 'light';\r\n \r\n html.setAttribute('data-theme', newTheme);\r\n localStorage.setItem('theme', newTheme);\r\n \r\n \/\/ Update theme icon\r\n const icon = document.querySelector('.theme-icon');\r\n icon.textContent = newTheme === 'light' ? '\ud83c\udf19' : '\u2600\ufe0f';\r\n \r\n \/\/ Update all charts with new theme colors\r\n updateAllCharts();\r\n }\r\n\r\n function updateAllCharts() {\r\n \/\/ Re-render all charts to update colors\r\n if (businessData.length > 0) {\r\n renderBusinessCharts();\r\n }\r\n if (itemData.length > 0) {\r\n renderItemCharts();\r\n }\r\n if (businessData.length > 0) {\r\n renderComplaintsData();\r\n }\r\n }\r\n\r\n \/\/ Load saved theme on page load\r\n window.addEventListener('load', function() {\r\n const savedTheme = localStorage.getItem('theme') || 'dark';\r\n document.documentElement.setAttribute('data-theme', savedTheme);\r\n const icon = document.querySelector('.theme-icon');\r\n if (icon) {\r\n icon.textContent = savedTheme === 'light' ? '\ud83c\udf19' : '\u2600\ufe0f';\r\n }\r\n });\r\n\r\n function renderItemCharts() {\r\n const quantityData = filteredItemData.filter(row => row['Metric'] === 'Item quantity sold');\r\n \r\n const topItems = quantityData\r\n .sort((a, b) => parseInt(b['January']) - parseInt(a['January']))\r\n .slice(0, 10);\r\n\r\n const itemNames = topItems.map(row => row['Item name']);\r\n const quantities = topItems.map(row => parseInt(row['January']));\r\n\r\n if (charts.topItemsChart) charts.topItemsChart.destroy();\r\n \r\n const ctx1 = document.getElementById('topItemsChart').getContext('2d');\r\n charts.topItemsChart = new Chart(ctx1, {\r\n type: 'bar',\r\n data: {\r\n labels: itemNames,\r\n datasets: [{\r\n label: 'Quantity Sold',\r\n data: quantities,\r\n backgroundColor: 'rgba(226, 55, 68, 0.8)',\r\n borderColor: 'rgba(226, 55, 68, 1)',\r\n borderWidth: 2\r\n }]\r\n },\r\n options: {\r\n indexAxis: 'y',\r\n responsive: true,\r\n maintainAspectRatio: true,\r\n plugins: {\r\n legend: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n x: {\r\n ticks: { color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim() },\r\n grid: { color: 'rgba(128, 128, 128, 0.1)' }\r\n },\r\n y: {\r\n ticks: { color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim() },\r\n grid: { color: 'rgba(128, 128, 128, 0.1)' }\r\n }\r\n }\r\n }\r\n });\r\n\r\n \/\/ Category Chart\r\n const categoryTotals = {};\r\n quantityData.forEach(row => {\r\n const category = row['Item category'];\r\n const quantity = parseInt(row['January'] || 0);\r\n categoryTotals[category] = (categoryTotals[category] || 0) + quantity;\r\n });\r\n\r\n const categories = Object.keys(categoryTotals);\r\n const categoryValues = Object.values(categoryTotals);\r\n\r\n if (charts.categoryChart) charts.categoryChart.destroy();\r\n \r\n const ctx2 = document.getElementById('categoryChart').getContext('2d');\r\n charts.categoryChart = new Chart(ctx2, {\r\n type: 'doughnut',\r\n data: {\r\n labels: categories,\r\n datasets: [{\r\n data: categoryValues,\r\n backgroundColor: [\r\n 'rgba(226, 55, 68, 0.8)',\r\n 'rgba(77, 171, 247, 0.8)',\r\n 'rgba(81, 207, 102, 0.8)',\r\n 'rgba(255, 217, 61, 0.8)',\r\n 'rgba(151, 117, 250, 0.8)',\r\n 'rgba(255, 169, 77, 0.8)'\r\n ],\r\n borderWidth: 2,\r\n borderColor: getComputedStyle(document.documentElement).getPropertyValue('--bg-card').trim()\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: true,\r\n plugins: {\r\n legend: {\r\n position: 'right',\r\n labels: { \r\n color: getComputedStyle(document.documentElement).getPropertyValue('--text-primary').trim(),\r\n font: { size: 12, family: 'Outfit' } \r\n }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n function renderComplaintsCharts(poorPackaging, poorQuality, wrongOrder, missingItems) {\r\n if (charts.complaintsTypeChart) charts.complaintsTypeChart.destroy();\r\n \r\n const ctx1 = document.getElementById('complaintsTypeChart').getContext('2d');\r\n charts.complaintsTypeChart = new Chart(ctx1, {\r\n type: 'pie',\r\n data: {\r\n labels: ['Poor Packaging', 'Poor Quality', 'Wrong Order', 'Missing Items'],\r\n datasets: [{\r\n data: [poorPackaging, poorQuality, wrongOrder, missingItems],\r\n backgroundColor: [\r\n 'rgba(255, 107, 107, 0.8)',\r\n 'rgba(255, 169, 77, 0.8)',\r\n 'rgba(250, 82, 82, 0.8)',\r\n 'rgba(255, 146, 43, 0.8)'\r\n ],\r\n borderWidth: 2,\r\n borderColor: getComputedStyle(document.documentElement).getPropertyValue('--bg-card').trim()\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: true,\r\n plugins: {\r\n legend: {\r\n position: 'bottom',\r\n labels: { \r\n color: getComputedStyle(document.documentElement).getPropertyValue('--text-primary').trim(),\r\n font: { size: 12, family: 'Outfit' } \r\n }\r\n }\r\n }\r\n }\r\n });\r\n\r\n \/\/ Trend Chart\r\n const complaintsData = businessData.filter(row => row['Metric'] === 'Total complaints');\r\n const restaurants = [...new Set(complaintsData.map(row => row['Restaurant name']))];\r\n const counts = restaurants.map(name => {\r\n const row = complaintsData.find(r => r['Restaurant name'] === name);\r\n return parseInt(row['Jan 2026'] || 0);\r\n });\r\n\r\n if (charts.complaintsTrendChart) charts.complaintsTrendChart.destroy();\r\n \r\n const ctx2 = document.getElementById('complaintsTrendChart').getContext('2d');\r\n charts.complaintsTrendChart = new Chart(ctx2, {\r\n type: 'bar',\r\n data: {\r\n labels: restaurants,\r\n datasets: [{\r\n label: 'Total Complaints',\r\n data: counts,\r\n backgroundColor: 'rgba(255, 107, 107, 0.8)',\r\n borderColor: 'rgba(255, 107, 107, 1)',\r\n borderWidth: 2\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: true,\r\n plugins: {\r\n legend: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n ticks: { color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim() },\r\n grid: { color: 'rgba(128, 128, 128, 0.1)' }\r\n },\r\n x: {\r\n ticks: { color: getComputedStyle(document.documentElement).getPropertyValue('--text-secondary').trim() },\r\n grid: { color: 'rgba(128, 128, 128, 0.1)' }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n function formatValue(metric, value) {\r\n if (!value) return '-';\r\n \r\n if (metric.includes('Rs') || metric.includes('Sales')) {\r\n return '\u20b9' + parseFloat(value).toLocaleString('en-IN', {maximumFractionDigits: 2});\r\n }\r\n if (metric.includes('%')) {\r\n return parseFloat(value).toFixed(2) + '%';\r\n }\r\n if (metric.includes('rating') || metric.includes('Rating')) {\r\n return parseFloat(value).toFixed(2) + ' \u2b50';\r\n }\r\n \r\n return value;\r\n }\r\n\r\n function switchTab(tab) {\r\n document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));\r\n document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));\r\n \r\n event.target.classList.add('active');\r\n \r\n if (tab === 'business') {\r\n document.getElementById('businessTab').classList.add('active');\r\n } else if (tab === 'items') {\r\n document.getElementById('itemsTab').classList.add('active');\r\n } else if (tab === 'complaints') {\r\n document.getElementById('complaintsTab').classList.add('active');\r\n }\r\n }\r\n\r\n function searchTable(tableId) {\r\n const input = document.getElementById(tableId === 'businessTable' ? 'businessSearch' : 'itemSearch');\r\n const filter = input.value.toLowerCase();\r\n const table = document.getElementById(tableId);\r\n const rows = table.getElementsByTagName('tr');\r\n\r\n for (let i = 1; i < rows.length; i++) {\r\n const row = rows[i];\r\n const text = row.textContent.toLowerCase();\r\n row.style.display = text.includes(filter) ? '' : 'none';\r\n }\r\n }\r\n\r\n \/\/ File upload status tracking\r\n let filesUploaded = { business: false, item: false };\r\n \r\n function updateUploadStatus() {\r\n if (filesUploaded.business && filesUploaded.item) {\r\n document.getElementById('uploadSection').style.display = 'none';\r\n document.getElementById('tabsSection').classList.add('active');\r\n }\r\n }\r\n\r\n \/\/ Drag and drop functionality\r\n function setupDragAndDrop() {\r\n const businessCard = document.getElementById('businessUploadCard');\r\n const itemCard = document.getElementById('itemUploadCard');\r\n\r\n [businessCard, itemCard].forEach((card, index) => {\r\n const type = index === 0 ? 'business' : 'item';\r\n const fileInput = document.getElementById(type + 'File');\r\n\r\n card.addEventListener('dragover', (e) => {\r\n e.preventDefault();\r\n card.style.borderColor = 'var(--primary)';\r\n card.style.transform = 'scale(1.02)';\r\n });\r\n\r\n card.addEventListener('dragleave', (e) => {\r\n e.preventDefault();\r\n card.style.borderColor = 'var(--border)';\r\n card.style.transform = 'scale(1)';\r\n });\r\n\r\n card.addEventListener('drop', (e) => {\r\n e.preventDefault();\r\n card.style.borderColor = 'var(--border)';\r\n card.style.transform = 'scale(1)';\r\n \r\n const files = e.dataTransfer.files;\r\n if (files.length > 0) {\r\n fileInput.files = files;\r\n handleFileUpload(type, fileInput);\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Initialize drag and drop on page load\r\n window.addEventListener('load', setupDragAndDrop);\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<div class=\"elementor-element elementor-element-af7d05b e-flex e-con-boxed e-con e-parent\" data-id=\"af7d05b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\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 Analytics Dashboard Z Zomato Analytics \ud83c\udf19 \ud83d\udcca Upload Business Report Drag & drop your Business Report CSV file or click to browse Choose File \ud83c\udf54 Upload Item Sales Report Drag & drop your Item Sales Report CSV file or click to browse Choose File \ud83d\udcca Business Overview \ud83c\udf54 Item Sales \u26a0\ufe0f Complaints Restaurant All […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","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":"unboxed","site-sidebar-style":"unboxed","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-2754","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2754","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=2754"}],"version-history":[{"count":19,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2754\/revisions"}],"predecessor-version":[{"id":3127,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2754\/revisions\/3127"}],"wp:attachment":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/media?parent=2754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}