├── .github
    └── workflows
    │   └── static.yml
├── 1_Proposal.pdf
├── 2_Mid_Term.pdf
├── 3_Final_report.pdf
├── README.md
└── index.html


/.github/workflows/static.yml:
--------------------------------------------------------------------------------
 1 | # Simple workflow for deploying static content to GitHub Pages
 2 | name: Deploy static content to Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["main"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 |   group: "pages"
22 |   cancel-in-progress: false
23 | 
24 | jobs:
25 |   # Single deploy job since we're just deploying
26 |   deploy:
27 |     environment:
28 |       name: github-pages
29 |       url: ${{ steps.deployment.outputs.page_url }}
30 |     runs-on: ubuntu-latest
31 |     steps:
32 |       - name: Checkout
33 |         uses: actions/checkout@v4
34 |       - name: Setup Pages
35 |         uses: actions/configure-pages@v5
36 |       - name: Upload artifact
37 |         uses: actions/upload-pages-artifact@v3
38 |         with:
39 |           # Upload entire repository
40 |           path: '.'
41 |       - name: Deploy to GitHub Pages
42 |         id: deployment
43 |         uses: actions/deploy-pages@v4
44 | 


--------------------------------------------------------------------------------
/1_Proposal.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/repo-sumit/BDM_Project/eca376a0652cdc77f077a41c3238ca17cf063989/1_Proposal.pdf


--------------------------------------------------------------------------------
/2_Mid_Term.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/repo-sumit/BDM_Project/eca376a0652cdc77f077a41c3238ca17cf063989/2_Mid_Term.pdf


--------------------------------------------------------------------------------
/3_Final_report.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/repo-sumit/BDM_Project/eca376a0652cdc77f077a41c3238ca17cf063989/3_Final_report.pdf


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 📊 BDM Capstone Dashboard – Jai Maa Jhandewali Store
  2 | 
  3 | > _“Optimizing Inventory and Operations for Sustainable Growth”_
  4 | ---
  5 | 
  6 | 
  7 | | Project Website :    | https://repo-sumit.github.io/BDM_Project/    |
  8 | |-------------------|----------------------------------------------|
  9 | | Viva PPT Slides :     | https://rb.gy/vq3o72                         |
 10 | 
 11 | 
 12 | ## 🏪 Project Overview
 13 | 
 14 | | 🧾 Detail          | 📍 Information                              |
 15 | |-------------------|----------------------------------------------|
 16 | | **Store Name**     | Jai Maa Jhandewali Store                    |
 17 | | **Location**       | VP Block, Pitampura, Delhi                  |
 18 | | **Store Type**     | 🛒 Family-run B2C Grocery                   |
 19 | | **Owner**          | Mr. Satyam Prakash                          |
 20 | | **Time Period**    | 📅 Jan 2024 – Jan 2025                      |
 21 | | **Team Member**    | 👤 Sumit Kumar (`22f2000848@ds.study.iitm.ac.in`) |
 22 | 
 23 | ---
 24 | 
 25 | ## ❓ Problem Statement
 26 | 
 27 | ### 🔴 Key Challenges
 28 | 
 29 | - ❌ Overstocking and Stockouts (especially perishables)
 30 | - 📦 Severe Space Constraints
 31 | - 📉 Manual Operations = Limited Scalability
 32 | 
 33 | ---
 34 | 
 35 | ## 📁 Data Collection
 36 | 
 37 | - 📌 **Source**: Primary – Digitized Records & Interviews
 38 | - 📊 **Scope**: Daily SKU Sales (13 items), 398 days
 39 | - 🧹 **Format**: Cleaned Excel Data  
 40 | - 📈 [👉 View Dataset on Google Sheets](https://docs.google.com/spreadsheets/d/1hMAmaAbf4dJ4aiPyztVxLYa6_tDHUOJYUaob6Naxx18/edit?usp=sharing)
 41 | 
 42 | ---
 43 | 
 44 | ## 🔬 Analysis Techniques
 45 | 
 46 | | 🧠 Method              | 💡 Use Case                                                   |
 47 | |------------------------|---------------------------------------------------------------|
 48 | | 📉 Descriptive Stats   | Understand baseline sales metrics (mean, std, median)         |
 49 | | 📈 Trend Analysis      | Seasonal, weekly patterns using charts                        |
 50 | | ©️ ABC Segmentation | Categorize SKUs by volume share                               |
 51 | | 🔗 Correlation Matrix  | Relationship between product categories                       |
 52 | | 🤖 Linear Regression   | Basic sales forecasting (e.g., Milk prediction)               |
 53 | 
 54 | ---
 55 | 
 56 | ## 📊 Visual Insights
 57 | 
 58 | | 📌 Insight                         | 🖼️ Chart Example                                                  |
 59 | |-----------------------------------|-------------------------------------------------------------------|
 60 | | Monthly Sales Distribution        | ![Sales Bar](https://i.ibb.co/vvgmkBBK/Screenshot-2025-04-22-074654.png)|
 61 | | Category Trend Line Chart         | ![Trend Line](https://i.ibb.co/4ZFgPwMQ/Screenshot-2025-04-22-074936.png)  |
 62 | | ABC Volume Segmentation           | ![ABC Chart](https://i.ibb.co/vptmtvT/Screenshot-2025-04-22-075705.png)        |
 63 | | Product Correlations              | ![Correlation](https://i.ibb.co/VWT6kBq2/Screenshot-2025-04-22-075258.png)|
 64 | | Sales Forecast (Milk)             | ![Prediction](https://i.ibb.co/tTp4VPps/Screenshot-2025-04-22-075506.png)|
 65 | 
 66 | ---
 67 | 
 68 | ## 💡 Recommendations Summary
 69 | 
 70 | ### 📦 Inventory Management
 71 | - ✅ Use ABC Classification to adjust stocking
 72 | - 🧊 Apply JIT for perishable items (Milk, Butter)
 73 | - 📈 Begin with simple forecasts (Excel/Linear Models)
 74 | 
 75 | ### 🧱 Space Optimization
 76 | - 📐 Invest in vertical shelves
 77 | - 🧮 Allocate space to high-selling SKUs (Cat A & B)
 78 | - 🔄 Reconfigure layout based on correlations (FMCG + Dairy)
 79 | 
 80 | ### 🚀 Business Growth
 81 | - 💻 Adopt POS for sales tracking
 82 | - 🛵 Offer home delivery for nearby orders
 83 | - 🧠 Use promotions tied to seasonal demand
 84 | 
 85 | ---
 86 | 
 87 | ## 📈 Projected Impact
 88 | 
 89 | | 📊 Financial Gains     | ⚙️ Operational Gains       | 🧭 Strategic Benefits        |
 90 | |------------------------|----------------------------|------------------------------|
 91 | | 💵 Increased Revenue   | 📉 Reduced Stockouts       | 🚀 Improved Scalability     |
 92 | | 🧊 Lower Wastage Cost  | 📦 Optimized Space Usage   | 🤝 Customer Satisfaction    |
 93 | | 💰 Better Cash Flow    | ⏱️ Reduced Manual Overload | 🏁 Competitive Readiness    |
 94 | 
 95 | ---
 96 | 
 97 | ## 🛠️ Tech Stack
 98 | 
 99 | - 💻 **Frontend**: HTML5, Tailwind CSS
100 | - 📊 **Charts**: Chart.js
101 | - 🧠 **Analysis**: Excel, Python
102 | - 📋 **Data Source**: Google Sheets
103 | 
104 | ---
105 | 
106 | ## 🧠 Author
107 | 
108 | **Sumit Kumar**  
109 | 📧 `22f2000848@ds.study.iitm.ac.in`  
110 | 🎓 BDM Capstone Project – IIT Madras
111 | 
112 | ---
113 | 
114 | ## 🪪 License
115 | 
116 | MIT License – For educational and non-commercial use. Attribution encouraged 🙏
117 | 
118 | ---
119 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <!-- Meta tags for character set and responsive viewport -->
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Jai Maa Jhandewali Store - BDM Capstone Dashboard (Revised)</title>
  8 | 
  9 |   <!-- Bootstrap 5 CSS -->
 10 |   <!-- Fetches the Bootstrap stylesheet for layout, components, and utilities -->
 11 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 12 | 
 13 |   <!-- Chart.js CDN -->
 14 |   <!-- Core Chart.js library -->
 15 |   <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
 16 |   <!-- Date Adapter for Chart.js (required for time scales) -->
 17 |   <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
 18 | 
 19 |   <!-- Custom CSS Styles -->
 20 |   <style>
 21 |     /* Base body styling */
 22 |     body {
 23 |       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Consistent font stack */
 24 |       background-color: #f8f9fa; /* Bootstrap's light gray background */
 25 |       font-size: 1.05rem; /* REVISED base font size (slightly larger than default) */
 26 |       color: #212529; /* Default Bootstrap text color */
 27 |     }
 28 | 
 29 |     /* Custom Card Accent (Optional visual flair) */
 30 |     .card-accent-left {
 31 |       border-left: 4px solid var(--bs-primary); /* Standard thickness */
 32 |     }
 33 | 
 34 |     /* Image Gallery Container Styling */
 35 |     .store-image-container {
 36 |         position: relative;
 37 |         height: 22rem; /* REVISED height */
 38 |         background-color: #e9ecef;
 39 |         border-radius: 0.375rem;
 40 |         overflow: hidden;
 41 |         box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
 42 |     }
 43 |     /* Individual Store Image Styling */
 44 |     .store-image {
 45 |         position: absolute;
 46 |         top: 0; left: 0;
 47 |         width: 100%; height: 100%;
 48 |         opacity: 0;
 49 |         transition: opacity 0.7s ease-in-out;
 50 |         object-fit: contain;
 51 |     }
 52 |     /* Active (Visible) Store Image */
 53 |     .store-image.active {
 54 |         opacity: 1;
 55 |     }
 56 | 
 57 |     /* Custom List Bullet Styling */
 58 |      .metadata-list li::before, .insights-list li::before {
 59 |         content: '▹';
 60 |         color: var(--bs-primary);
 61 |         position: absolute;
 62 |         left: 0;
 63 |         font-weight: bold;
 64 |         font-size: 1.1em; /* Standard bullet size */
 65 |         line-height: 1.2;
 66 |      }
 67 |      /* List Item Padding for Custom Bullet */
 68 |      .metadata-list li, .insights-list li {
 69 |         padding-left: 1.3rem; /* REVISED space */
 70 |         position: relative;
 71 |         margin-bottom: 0.4rem; /* Standard spacing */
 72 |      }
 73 |      /* Remove Default List Styling */
 74 |      .metadata-list ul, .insights-list ul, .list-unstyled {
 75 |          list-style: none;
 76 |          padding-left: 0;
 77 |      }
 78 | 
 79 |     /* Chart Container Base Styling */
 80 |     .chart-container {
 81 |        width: 100%;
 82 |        position: relative;
 83 |        margin-bottom: 1.25rem; /* REVISED space below chart */
 84 |        padding: 0.6rem; /* REVISED padding */
 85 |        min-height: 340px; /* REVISED minimum height */
 86 |        height: 390px; /* REVISED default height */
 87 |     }
 88 |     /* Specific Height for Pie Chart (Now uses default chart container) */
 89 |     /* Removed .chart-container-abc */
 90 | 
 91 |     /* Specific Height for Correlation Chart */
 92 |      .chart-container-corr {
 93 |         min-height: 280px;
 94 |         height: 280px; /* REVISED height */
 95 |     }
 96 | 
 97 |     /* Sticky Table Header Styling */
 98 |     .table th {
 99 |         position: sticky;
100 |         top: 0;
101 |         z-index: 10;
102 |         background-color: #f8f9fa;
103 |         font-weight: 600;
104 |     }
105 |     /* Container for Scrollable Tables */
106 |     .table-responsive {
107 |         max-height: 370px; /* REVISED max height */
108 |         overflow-y: auto;
109 |     }
110 | 
111 |     /* Header social links styling */
112 |     .social-link {
113 |         text-decoration: none; /* Remove underline from links */
114 |         display: inline-flex; /* Align icon and text nicely */
115 |         align-items: center; /* Vertically center icon and text */
116 |     }
117 |     .social-link svg {
118 |         vertical-align: middle; /* Better alignment if display:inline-flex doesn't work */
119 |     }
120 | 
121 |   </style>
122 | </head>
123 | <body>
124 | 
125 |   <!-- Main Container - Using container-xxl for maximum width -->
126 |   <!-- REVISED padding: py-4 (all screens) -->
127 |   <div class="container-xxl py-4">
128 | 
129 |     <!-- Main Grid Row - INCREASED gutter to g-5 for more space -->
130 |     <div class="row g-5">
131 | 
132 |       <!-- Project Title Card - Spans full width (col-12) -->
133 |       <div class="col-12">
134 |         <div class="card text-white text-center shadow-lg" style="background: linear-gradient(to bottom right, #0dcaf0, #0d6efd);">
135 |           <!-- REVISED padding (p-4 standard) -->
136 |           <div class="card-body p-4">
137 |             <!-- IITM Logo -->
138 |             <img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/69/IIT_Madras_Logo.svg/1200px-IIT_Madras_Logo.svg.png" alt="IIT Madras Logo" class="mb-4" style="height: 5rem; width: auto;"> <!-- REVISED logo size -->
139 |             <!-- Main Title - REVISED size to display-5 -->
140 |             <h1 class="card-title display-5 fw-bold mb-3">Optimizing Inventory and Operations for Sustainable Growth</h1>
141 |             <!-- Subtitle - REVISED size to h3 -->
142 |             <p class="card-subtitle h3 fw-light mb-4">Jai Maa Jhandewali Store - BDM Capstone Project</p>
143 |             <!-- Student Info Box - REVISED font size to fs-6 (slightly larger than default) -->
144 |             <div class="bg-dark bg-opacity-25 px-3 py-2 rounded d-inline-block fs-6"> <!-- REVISED padding & font size -->
145 |               <!-- Line 1: Name and Roll Number -->
146 |               <p class="mb-2">
147 |                 <span class="fw-semibold">Sumit Kumar</span> | Roll No: <span class="fw-semibold">22f2000848</span>
148 |               </p>
149 |               <!-- Line 2: Social/Repo Links -->
150 |               <div class="d-flex justify-content-center align-items-center gap-3"> <!-- Flexbox for alignment and gap -->
151 |                 <!-- GitHub Link with Icon and Text -->
152 |                 <a href="https://github.com/repo-sumit/BDM_Project" target="_blank" rel="noopener noreferrer" class="text-white social-link" aria-label="GitHub Repository">
153 |                   <!-- Bootstrap GitHub Icon SVG (Size 22x22) -->
154 |                   <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-github me-1" viewBox="0 0 16 16"> <!-- Added margin -->
155 |                     <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
156 |                   </svg>
157 |                   <span class="align-middle">GitHub repo</span> <!-- Added Text -->
158 |                 </a>
159 |                 <!-- LinkedIn Link with Icon and Text -->
160 |                 <a href="https://www.linkedin.com/in/in-sumit/" target="_blank" rel="noopener noreferrer" class="text-white social-link" aria-label="LinkedIn Profile">
161 |                    <!-- Bootstrap LinkedIn Icon SVG (Size 22x22) -->
162 |                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-linkedin me-1" viewBox="0 0 16 16"> <!-- Added margin -->
163 |                      <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
164 |                    </svg>
165 |                    <span class="align-middle">LinkedIn</span> <!-- Added Text -->
166 |                 </a>
167 |               </div>
168 |             </div>
169 |           </div>
170 |         </div>
171 |       </div>
172 |       <!-- End Project Title Card -->
173 | 
174 |       <!-- Store Information Card -->
175 |       <div class="col-lg-6">
176 |         <div class="card h-100 shadow-sm card-accent-left">
177 |           <div class="card-header bg-primary bg-opacity-10 border-primary">
178 |              <h2 class="h4 mb-0 text-primary fw-semibold">About Jai Maa Jhandewali Store</h2>
179 |           </div>
180 |           <div class="card-body p-4">
181 |             <div class="store-image-container mb-4">
182 |                <img src="https://i.ibb.co/T3rRXHf/Screenshot-2025-04-22-080742.png" alt="Store Front" class="store-image active" id="storeImage1">
183 |                <img src="https://i.ibb.co/35vY7zjV/Screenshot-2025-04-22-080939.png" alt="Store Interior" class="store-image" id="storeImage2">
184 |                <img src="https://i.ibb.co/ZzwVnsck/Screenshot-2025-04-22-081125.png" alt="Authorization Letter" class="store-image" id="storeImage3">
185 |             </div>
186 |             <div class="text-center mb-4">
187 |               <button onclick="changeStoreImage(-1)" class="btn btn-primary btn-sm me-2">Previous</button>
188 |               <button onclick="changeStoreImage(1)" class="btn btn-primary btn-sm">Next</button>
189 |             </div>
190 |             <div class="insights-list">
191 |               <h3 class="h5 fw-semibold text-dark mb-3">Store Overview:</h3>
192 |               <ul class="text-muted fs-6">
193 |                 <li><strong>Type:</strong> Family-run B2C grocery store</li>
194 |                 <li><strong>Location:</strong> VP Block, Pitampura, Delhi</li>
195 |                 <li><strong>Owner:</strong> Mr. Satyam Prakash (Student)</li>
196 |                 <li><strong>Established:</strong> ~2 years ago</li>
197 |                 <li><strong>Products:</strong> Daily essentials, dairy, groceries, FMCG</li>
198 |                 <li><strong>Operations:</strong> 9 AM - 9 PM, Family-run</li>
199 |               </ul>
200 |             </div>
201 |           </div>
202 |         </div>
203 |       </div>
204 |       <!-- End Store Information Card -->
205 | 
206 |       <!-- Problem Statement Card -->
207 |        <div class="col-lg-6">
208 |          <div class="card h-100 shadow-sm card-accent-left">
209 |            <div class="card-header bg-primary bg-opacity-10 border-primary">
210 |               <h2 class="h4 mb-0 text-primary fw-semibold">Problem Statement & Background</h2>
211 |            </div>
212 |            <div class="card-body p-4 insights-list">
213 |              <h3 class="h5 fw-semibold text-dark mb-3">Identified Objectives:</h3>
214 |              <ul class="text-muted mb-4 fs-6">
215 |                <li>
216 |                  <strong>Inventory Management Issues:</strong> Difficulty maintaining optimal stock, managing fluctuations for perishables/seasonal items, avoiding wastage/missed sales.
217 |                </li>
218 |                 <li>
219 |                  <strong>Space Constraints:</strong> Limited physical space restricts efficient storage, product range expansion, and managing slow-moving products.
220 |                </li>
221 |                <li>
222 |                  <strong>Limited Business Growth:</strong> Reliance on family-run operations & manual systems hinders scalability and operational efficiency.
223 |                </li>
224 |              </ul>
225 |              <h3 class="h5 fw-semibold text-dark mt-4 mb-3">Problem Background:</h3>
226 |               <p class="text-muted mb-3 fs-6">The store handles diverse SKUs with varying shelf lives. The owner's academic commitments limit time for detailed inventory management, leading to overstocking or stockouts, especially for high-demand/seasonal items. Lack of automated systems worsens this.</p>
227 |               <p class="text-muted mb-3 fs-6">Operating from a single room attached to home creates significant space limits. Excess inventory stored in the house is inefficient. This restricts product range expansion and complicates stock handling.</p>
228 |               <p class="text-muted mb-0 fs-6">The family-run model faces scalability challenges due to potential inconsistencies and lack of professional systems (sales/inventory tracking). Competition from quick-commerce platforms necessitates exploring options like home delivery.</p>
229 |            </div>
230 |          </div>
231 |        </div>
232 |       <!-- End Problem Statement Card -->
233 | 
234 |       <!-- Data Overview & Metadata Card -->
235 |        <div class="col-12">
236 |          <div class="card shadow-sm card-accent-left">
237 |             <div class="card-header bg-primary bg-opacity-10 border-primary">
238 |                 <h2 class="h4 mb-0 text-primary fw-semibold">Data Overview & Collection</h2>
239 |             </div>
240 |             <div class="card-body p-4">
241 |                 <div class="row g-4 metadata-list">
242 |                     <div class="col-lg-4 col-md-6">
243 |                         <div class="p-3 bg-light border rounded h-100">
244 |                             <h3 class="h5 fw-semibold text-primary-emphasis mb-3">Source & Scope</h3>
245 |                             <ul class="text-muted fs-6">
246 |                                 <li><strong>Type:</strong> Primary Data</li>
247 |                                 <li><strong>Source:</strong> Jai Maa Jhandewali Store</li>
248 |                                 <li><strong>Collection:</strong> Record Digitization, Interviews</li>
249 |                                 <li><strong>Period:</strong> Jan 2024 - Jan 2025 (13 Mo)</li>
250 |                             </ul>
251 |                         </div>
252 |                     </div>
253 |                     <div class="col-lg-4 col-md-6">
254 |                         <div class="p-3 bg-light border rounded h-100">
255 |                             <h3 class="h5 fw-semibold text-primary-emphasis mb-3">Dataset Details</h3>
256 |                             <ul class="text-muted fs-6">
257 |                                 <li><strong>Format:</strong> Cleaned, daily aggregated</li>
258 |                                 <li><strong>Records:</strong> 398 days</li>
259 |                                 <li><strong>Columns:</strong> 14 (Date + 13 SKUs)</li>
260 |                                 <li><a href="https://docs.google.com/spreadsheets/d/1hMAmaAbf4dJ4aiPyztVxLYa6_tDHUOJYUaob6Naxx18/edit?usp=sharing" target="_blank" class="text-primary fw-medium">View Dataset <small>(opens new tab)</small></a></li>
261 |                             </ul>
262 |                         </div>
263 |                     </div>
264 |                     <div class="col-lg-4 col-md-12">
265 |                         <div class="p-3 bg-light border rounded h-100">
266 |                             <h3 class="h5 fw-semibold text-primary-emphasis mb-3">Key Categories</h3>
267 |                             <ul class="text-muted fs-6">
268 |                                 <li><strong>Dairy:</strong> Milk, Butter</li>
269 |                                 <li><strong>Groceries:</strong> Rice, Wheat, Pulse...</li>
270 |                                 <li><strong>FMCG:</strong> Bread, Soft Drinks, Chips...</li>
271 |                                 <li><span class="fw-medium text-primary">13 Total SKUs Tracked</span></li>
272 |                             </ul>
273 |                         </div>
274 |                     </div>
275 |                 </div>
276 |            </div>
277 |          </div>
278 |        </div>
279 |       <!-- End Data Overview Card -->
280 | 
281 |       <!-- Analysis Methods Card -->
282 |        <div class="col-12">
283 |            <div class="card shadow-sm card-accent-left">
284 |              <div class="card-header bg-success bg-opacity-10 border-success">
285 |                 <h2 class="h4 mb-0 text-success fw-semibold">Analysis Methods Used</h2>
286 |              </div>
287 |              <div class="card-body p-4">
288 |                <div class="row g-4">
289 |                    <div class="col-lg col-md-6">
290 |                        <div class="analysis-method p-3 bg-success-subtle border border-success-subtle rounded h-100">
291 |                            <h3 class="h5 fw-semibold text-success-emphasis mb-2">1. Descriptive Stats</h3>
292 |                            <p class="text-muted mb-0 fs-6">Calculated stats (Mean, Median, StdDev) to understand SKU sales patterns.</p>
293 |                        </div>
294 |                    </div>
295 |                    <div class="col-lg col-md-6">
296 |                        <div class="analysis-method p-3 bg-success-subtle border border-success-subtle rounded h-100">
297 |                            <h3 class="h5 fw-semibold text-success-emphasis mb-2">2. Trend Analysis</h3>
298 |                            <p class="text-muted mb-0 fs-6">Identified seasonal/weekly patterns using Box Plots & Line Charts.</p>
299 |                        </div>
300 |                    </div>
301 |                    <div class="col-lg col-md-6">
302 |                        <div class="analysis-method p-3 bg-success-subtle border border-success-subtle rounded h-100">
303 |                            <h3 class="h5 fw-semibold text-success-emphasis mb-2">3. ABC Segmentation</h3>
304 |                            <p class="text-muted mb-0 fs-6">Classified products (A, B, C) by sales volume contribution.</p>
305 |                        </div>
306 |                    </div>
307 |                    <div class="col-lg col-md-6">
308 |                        <div class="analysis-method p-3 bg-success-subtle border border-success-subtle rounded h-100">
309 |                            <h3 class="h5 fw-semibold text-success-emphasis mb-2">4. Correlation Analysis</h3>
310 |                            <p class="text-muted mb-0 fs-6">Used Pearson Correlation & Heatmap for category relationships.</p>
311 |                        </div>
312 |                    </div>
313 |                     <div class="col-lg col-md-6">
314 |                        <div class="analysis-method p-3 bg-success-subtle border border-success-subtle rounded h-100">
315 |                            <h3 class="h5 fw-semibold text-success-emphasis mb-2">5. Sales Prediction (ML)</h3>
316 |                            <p class="text-muted mb-0 fs-6">Applied Linear Regression (Milk example) to show forecast feasibility.</p>
317 |                        </div>
318 |                    </div>
319 |                </div>
320 |              </div>
321 |            </div>
322 |        </div>
323 |        <!-- End Analysis Methods Card -->
324 | 
325 |       <!-- Results & Findings Section -->
326 |        <div class="col-12">
327 |            <div class="card shadow-sm">
328 |              <div class="card-header bg-info bg-opacity-10 border-info">
329 |                 <h2 class="h4 mb-0 text-info fw-semibold">Results & Findings</h2>
330 |              </div>
331 |              <div class="card-body p-4">
332 |                 <div class="row g-4">
333 | 
334 |                   <!-- Monthly Sales Bar Chart Card -->
335 |                    <div class="col-md-6">
336 |                      <div class="card h-100 shadow-sm">
337 |                         <div class="card-body d-flex flex-column p-4">
338 |                            <h3 class="h5 fw-semibold text-center text-dark mb-2">Average Monthly Sales Distribution</h3>
339 |                            <p class="text-center text-muted mb-3 fs-6">(Aggregated Daily Units - Placeholder Data)</p>
340 |                            <div class="chart-container flex-grow-1">
341 |                               <canvas id="monthlySalesChart"></canvas> <!-- This will be purple -->
342 |                            </div>
343 |                            <div class="insights-list mt-3">
344 |                              <ul class="list-unstyled mb-0 fs-6">
345 |                                <li>▸ Peak Average Sales: <span class="badge bg-danger-subtle text-danger-emphasis">Oct & Dec</span></li>
346 |                                <li>▸ Summer Peak: <span class="badge bg-warning-subtle text-warning-emphasis">May-July</span></li>
347 |                                <li>▸ Lowest Average Sales: <span class="badge bg-secondary-subtle text-secondary-emphasis">Jan & Feb</span></li>
348 |                                <li class="mt-2 fst-italic">(Note: Bar chart shows averages)</li>
349 |                              </ul>
350 |                            </div>
351 |                         </div>
352 |                      </div>
353 |                    </div>
354 |                    <!-- End Monthly Sales Bar Chart Card -->
355 | 
356 |                    <!-- Category Sales Trend Card -->
357 |                    <div class="col-md-6">
358 |                      <div class="card h-100 shadow-sm">
359 |                         <div class="card-body d-flex flex-column p-4">
360 |                            <h3 class="h5 fw-semibold text-center text-dark mb-2">Monthly Sales Trend by Category</h3>
361 |                            <p class="text-center text-muted mb-3 fs-6">(Placeholder Data)</p>
362 |                            <div class="chart-container flex-grow-1">
363 |                                <canvas id="categoryTrendChart"></canvas> <!-- This will have sharp edges -->
364 |                            </div>
365 |                            <div class="insights-list mt-3">
366 |                              <ul class="list-unstyled mb-0 fs-6">
367 |                                <li>▸ <span class="badge bg-danger-subtle text-danger-emphasis">FMCG</span> leads sales volume.</li>
368 |                                <li>▸ <span class="badge bg-primary-subtle text-primary-emphasis">Dairy</span> consistently second.</li>
369 |                                <li>▸ <span class="badge bg-success-subtle text-success-emphasis">Groceries</span> lowest volume.</li>
370 |                                <li>▸ Seasonal peak for FMCG in Summer (May-July).</li>
371 |                              </ul>
372 |                            </div>
373 |                         </div>
374 |                      </div>
375 |                    </div>
376 |                    <!-- End Category Sales Trend Card -->
377 | 
378 |                    <!-- ABC Analysis Card (Now Pie Chart) -->
379 |                    <div class="col-md-6">
380 |                      <div class="card h-100 shadow-sm">
381 |                         <div class="card-body d-flex flex-column p-4">
382 |                             <h3 class="h5 fw-semibold text-center text-dark mb-2">ABC Analysis (% Volume Contribution)</h3>
383 |                             <p class="text-center text-muted mb-3 fs-6">(Placeholder Data)</p>
384 |                             <div class="chart-container flex-grow-1"> <!-- Using default height -->
385 |                                <canvas id="abcChart"></canvas>
386 |                             </div>
387 |                             <div class="insights-list mt-3">
388 |                               <ul class="list-unstyled mb-0 fs-6">
389 |                                 <li><span style="color: #119256;">█</span> <strong>Category A (~76%):</strong> Prioritize (Milk, Bread, Chips...)</li>
390 |                                 <li><span style="color: #ffc107;">█</span> <strong>Category B (~17%):</strong> Monitor (Pulse, Sugar, Butter...)</li>
391 |                                 <li><span style="color: #dc3545;">█</span> <strong>Category C (~7%):</strong> Optimize (Rice, Spices, Salt...)</li>
392 |                               </ul>
393 |                             </div>
394 |                         </div>
395 |                      </div>
396 |                    </div>
397 |                    <!-- End ABC Analysis Card -->
398 | 
399 |                    <!-- Category Correlation Card -->
400 |                     <div class="col-md-6">
401 |                       <div class="card h-100 shadow-sm">
402 |                         <div class="card-body d-flex flex-column p-4">
403 |                            <h3 class="h5 fw-semibold text-center text-dark mb-2">Key Category Sales Correlations</h3>
404 |                            <p class="text-center text-muted mb-3 fs-6">(Placeholder Data - Replaced Heatmap)</p>
405 |                            <div class="chart-container-corr flex-grow-1">
406 |                                <canvas id="correlationChart"></canvas>
407 |                            </div>
408 |                            <div class="insights-list mt-3">
409 |                              <h4 class="h6 fw-medium mb-2">Key Correlations:</h4>
410 |                              <ul class="list-unstyled mb-2 fs-6">
411 |                                <li>FMCG & Groceries: <span class="fw-semibold text-success">~0.65</span></li>
412 |                                <li>FMCG & Dairy: <span class="fw-semibold text-primary">~0.61</span></li>
413 |                                <li>Dairy & Groceries: <span class="fw-semibold text-danger">~0.43</span></li>
414 |                              </ul>
415 |                              <p class="mb-0 fs-6">Suggests bundling/placement opportunities.</p>
416 |                            </div>
417 |                         </div>
418 |                       </div>
419 |                     </div>
420 |                    <!-- End Category Correlation Card -->
421 | 
422 |                     <!-- Milk Prediction Card -->
423 |                     <div class="col-12">
424 |                        <div class="card shadow-sm">
425 |                            <div class="card-body d-flex flex-column p-4">
426 |                                <h3 class="h5 fw-semibold text-center text-dark mb-2">Sales Prediction Example: Milk</h3>
427 |                                <p class="text-center text-muted mb-3 fs-6">(Linear Regression vs. Actual Monthly - Placeholder Data)</p>
428 |                                <div class="chart-container flex-grow-1">
429 |                                   <canvas id="milkPredictionChart"></canvas> <!-- Bars will be purple -->
430 |                                </div>
431 |                                <div class="insights-list mt-3">
432 |                                  <ul class="list-unstyled mb-0 fs-6">
433 |                                    <li>▸ Model captures general trend, useful for baseline planning.</li>
434 |                                    <li>▸ Misses volatility; advanced models (ARIMA) needed for accuracy.</li>
435 |                                    <li>▸ <span class="badge bg-danger-subtle text-danger-emphasis">Validation (RMSE) required before use.</span></li>
436 |                                  </ul>
437 |                                </div>
438 |                            </div>
439 |                        </div>
440 |                    </div>
441 |                    <!-- End Milk Prediction Card -->
442 |                 </div><!-- End nested row for charts -->
443 |              </div> <!-- End card-body for Results -->
444 |            </div> <!-- End card for Results -->
445 |        </div>
446 |        <!-- End Results & Findings Section -->
447 | 
448 |       <!-- Recommendations Section -->
449 |        <div class="col-12">
450 |          <div class="card shadow-sm card-accent-left">
451 |            <div class="card-header bg-warning bg-opacity-10 border-warning">
452 |              <h2 class="h4 mb-0 text-warning fw-semibold">Recommendations</h2>
453 |            </div>
454 |            <div class="card-body p-4">
455 |              <ul class="nav nav-tabs nav-fill mb-4" id="recommendationTabs" role="tablist">
456 |                <li class="nav-item" role="presentation">
457 |                  <button class="nav-link active fs-6" id="recInv-tab" data-bs-toggle="tab" data-bs-target="#recInv-pane" type="button" role="tab" aria-controls="recInv-pane" aria-selected="true">Inventory</button>
458 |                </li>
459 |                <li class="nav-item" role="presentation">
460 |                  <button class="nav-link fs-6" id="recSpace-tab" data-bs-toggle="tab" data-bs-target="#recSpace-pane" type="button" role="tab" aria-controls="recSpace-pane" aria-selected="false">Space/Layout</button>
461 |                </li>
462 |                <li class="nav-item" role="presentation">
463 |                  <button class="nav-link fs-6" id="recGrowth-tab" data-bs-toggle="tab" data-bs-target="#recGrowth-pane" type="button" role="tab" aria-controls="recGrowth-pane" aria-selected="false">Growth</button>
464 |                </li>
465 |                <li class="nav-item" role="presentation">
466 |                  <button class="nav-link fs-6" id="recImpact-tab" data-bs-toggle="tab" data-bs-target="#recImpact-pane" type="button" role="tab" aria-controls="recImpact-pane" aria-selected="false">Impact</button>
467 |                </li>
468 |              </ul>
469 |              <div class="tab-content" id="recommendationTabsContent">
470 | 
471 |                <!-- Inventory Tab Pane -->
472 |                <div class="tab-pane fade show active" id="recInv-pane" role="tabpanel" aria-labelledby="recInv-tab" tabindex="0">
473 |                  <h3 class="h5 fw-semibold text-dark mb-3">Optimizing Inventory:</h3>
474 |                  <div class="table-responsive">
475 |                    <table class="table table-striped table-hover table-bordered fs-6 align-middle">
476 |                       <thead class="table-light">
477 |                          <tr>
478 |                            <th scope="col">Recommendation</th>
479 |                            <th scope="col">Rationale</th>
480 |                            <th scope="col">Priority</th>
481 |                          </tr>
482 |                       </thead>
483 |                       <tbody>
484 |                           <tr><td>JIT/Lean for Cat A perishables</td><td>High volume, wastage risk</td><td class="text-danger fw-medium">High</td></tr>
485 |                           <tr><td>Adjust stock via ABC Analysis</td><td>Align stock with sales</td><td class="text-danger fw-medium">High</td></tr>
486 |                           <tr><td>Use Sales Forecasts (start simple)</td><td>Reduce guesswork</td><td class="text-warning fw-medium">Medium</td></tr>
487 |                           <tr><td>Improve supplier communication</td><td>Ensure peak availability</td><td class="text-warning fw-medium">Medium</td></tr>
488 |                           <tr><td>Discount near-expiry items</td><td>Reduce spoilage loss</td><td class="text-warning fw-medium">Medium</td></tr>
489 |                       </tbody>
490 |                    </table>
491 |                  </div>
492 |                </div>
493 |                <!-- End Inventory Tab Pane -->
494 | 
495 |                <!-- Space/Layout Tab Pane -->
496 |                <div class="tab-pane fade" id="recSpace-pane" role="tabpanel" aria-labelledby="recSpace-tab" tabindex="0">
497 |                  <h3 class="h5 fw-semibold text-dark mb-3">Addressing Space & Layout:</h3>
498 |                  <div class="table-responsive">
499 |                    <table class="table table-striped table-hover table-bordered fs-6 align-middle">
500 |                       <thead class="table-light">
501 |                          <tr>
502 |                            <th scope="col">Recommendation</th>
503 |                            <th scope="col">Rationale</th>
504 |                            <th scope="col">Priority</th>
505 |                          </tr>
506 |                       </thead>
507 |                       <tbody>
508 |                           <tr><td>Prioritize shelf space for Cat A & B</td><td>Maximize revenue/space</td><td class="text-danger fw-medium">High</td></tr>
509 |                           <tr><td>Optimize layout: Place correlated items nearby</td><td>Encourage cross-selling</td><td class="text-warning fw-medium">Medium</td></tr>
510 |                           <tr><td>Invest in vertical shelving</td><td>Maximize storage capacity</td><td class="text-warning fw-medium">Medium</td></tr>
511 |                           <tr><td>Reduce stock of Cat C items</td><td>Free up valuable space</td><td class="text-warning fw-medium">Medium</td></tr>
512 |                       </tbody>
513 |                    </table>
514 |                  </div>
515 |                </div>
516 |                <!-- End Space/Layout Tab Pane -->
517 | 
518 |                <!-- Growth Tab Pane -->
519 |                <div class="tab-pane fade" id="recGrowth-pane" role="tabpanel" aria-labelledby="recGrowth-tab" tabindex="0">
520 |                  <h3 class="h5 fw-semibold text-dark mb-3">Enhancing Business Growth:</h3>
521 |                  <div class="table-responsive">
522 |                    <table class="table table-striped table-hover table-bordered fs-6 align-middle">
523 |                      <thead class="table-light">
524 |                         <tr>
525 |                            <th scope="col">Recommendation</th>
526 |                            <th scope="col">Rationale</th>
527 |                            <th scope="col">Priority</th>
528 |                         </tr>
529 |                      </thead>
530 |                      <tbody>
531 |                          <tr><td>Automate Tracking (Excel -> POS)</td><td>Reduce manual effort, enable analysis</td><td class="text-danger fw-medium">High</td></tr>
532 |                          <tr><td>Hire Temporary Support (Peaks/Exams)</td><td>Manage bottlenecks, owner focus</td><td class="text-danger fw-medium">High</td></tr>
533 |                          <tr><td>Introduce Targeted Home Delivery</td><td>Compete, add convenience</td><td class="text-warning fw-medium">Medium</td></tr>
534 |                          <tr><td>Implement Seasonal/Bundled Promotions</td><td>Boost sales, use correlations</td><td class="text-warning fw-medium">Medium</td></tr>
535 |                          <tr><td>Establish Backup Operational Plan</td><td>Ensure business continuity</td><td class="text-warning fw-medium">Medium</td></tr>
536 |                      </tbody>
537 |                    </table>
538 |                  </div>
539 |                </div>
540 |                <!-- End Growth Tab Pane -->
541 | 
542 |                <!-- Impact Tab Pane -->
543 |                <div class="tab-pane fade" id="recImpact-pane" role="tabpanel" aria-labelledby="recImpact-tab" tabindex="0">
544 |                  <h3 class="h5 fw-semibold text-dark mb-4">Projected Benefits:</h3>
545 |                  <div class="row g-4">
546 |                    <div class="col-md-4">
547 |                      <div class="card h-100 bg-success-subtle border-success-subtle shadow-sm">
548 |                        <div class="card-body p-4">
549 |                          <h4 class="h5 fw-semibold text-success-emphasis mb-3 d-flex align-items-center">
550 |                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-check-circle-fill me-2" viewBox="0 0 16 16">
551 |                              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
552 |                            </svg> Financial
553 |                          </h4>
554 |                          <ul class="list-unstyled text-muted mb-0 ps-3 fs-6">
555 |                            <li>▸ Profit Margin Increase</li>
556 |                            <li>▸ Reduced Wastage Costs</li>
557 |                            <li>▸ Improved Cash Flow</li>
558 |                            <li>▸ Revenue Growth Potential</li>
559 |                          </ul>
560 |                        </div>
561 |                      </div>
562 |                    </div>
563 |                    <div class="col-md-4">
564 |                      <div class="card h-100 bg-info-subtle border-info-subtle shadow-sm">
565 |                        <div class="card-body p-4">
566 |                          <h4 class="h5 fw-semibold text-info-emphasis mb-3 d-flex align-items-center">
567 |                             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-check-circle-fill me-2" viewBox="0 0 16 16">
568 |                              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
569 |                            </svg> Operational
570 |                          </h4>
571 |                          <ul class="list-unstyled text-muted mb-0 ps-3 fs-6">
572 |                            <li>▸ Fewer Stockouts</li>
573 |                            <li>▸ Optimized Inventory/Space</li>
574 |                            <li>▸ Streamlined Processes</li>
575 |                            <li>▸ Better Demand Preparedness</li>
576 |                          </ul>
577 |                        </div>
578 |                      </div>
579 |                    </div>
580 |                    <div class="col-md-4">
581 |                      <div class="card h-100 bg-warning-subtle border-warning-subtle shadow-sm">
582 |                        <div class="card-body p-4">
583 |                           <h4 class="h5 fw-semibold text-warning-emphasis mb-3 d-flex align-items-center">
584 |                              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-check-circle-fill me-2" viewBox="0 0 16 16">
585 |                              <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
586 |                            </svg> Strategic
587 |                          </h4>
588 |                          <ul class="list-unstyled text-muted mb-0 ps-3 fs-6">
589 |                            <li>▸ Enhanced Customer Satisfaction</li>
590 |                            <li>▸ Improved Competitiveness</li>
591 |                            <li>▸ Sustainable Growth Path</li>
592 |                            <li>▸ Reduced Owner Burden</li>
593 |                          </ul>
594 |                        </div>
595 |                      </div>
596 |                    </div>
597 |                  </div>
598 |                </div>
599 |                <!-- End Impact Tab Pane -->
600 |              </div> <!-- End Tab Content -->
601 |            </div> <!-- End Recommendations Card Body -->
602 |          </div> <!-- End Recommendations Card -->
603 |        </div>
604 |        <!-- End Recommendations Section -->
605 | 
606 |     </div> <!-- End main grid row -->
607 |   </div> <!-- End main container -->
608 | 
609 |   <!-- Bootstrap 5 JS Bundle (includes Popper) -->
610 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
611 | 
612 |   <!-- Custom JavaScript -->
613 |   <script>
614 |     // --- JavaScript for Image Gallery and Charts ---
615 | 
616 |     // --- Image Gallery Logic ---
617 |     let currentStoreImage = 1;
618 |     const totalStoreImages = 3;
619 | 
620 |     function changeStoreImage(direction) {
621 |       const currentImgElement = document.getElementById(`storeImage${currentStoreImage}`);
622 |       if (currentImgElement) {
623 |           currentImgElement.classList.remove('active');
624 |       }
625 |       currentStoreImage += direction;
626 |       if (currentStoreImage > totalStoreImages) {
627 |           currentStoreImage = 1;
628 |       } else if (currentStoreImage < 1) {
629 |           currentStoreImage = totalStoreImages;
630 |       }
631 |       const nextImgElement = document.getElementById(`storeImage${currentStoreImage}`);
632 |       if (nextImgElement) {
633 |           nextImgElement.classList.add('active');
634 |       }
635 |     }
636 |     // --- End Image Gallery Logic ---
637 | 
638 |     // --- Chart.js Integration ---
639 |     function createChart(id, type, data, options) {
640 |       const ctx = document.getElementById(id)?.getContext('2d');
641 |        if (!ctx) {
642 |            console.error(`Canvas element with ID "${id}" not found.`);
643 |            return null;
644 |         }
645 | 
646 |       // --- Default Chart Options - REVISED FONT SIZES (Slightly Smaller) ---
647 |       const defaultOptions = {
648 |         responsive: true,
649 |         maintainAspectRatio: false,
650 |         plugins: {
651 |             legend: {
652 |                 position: 'top',
653 |                  labels: {
654 |                      font: { size: 12 }, // REVISED Legend font size
655 |                      boxWidth: 15,
656 |                      padding: 12,
657 |                      color: '#495057'
658 |                  }
659 |             },
660 |             tooltip: {
661 |                 mode: 'index',
662 |                 intersect: false,
663 |                 backgroundColor: 'rgba(0, 0, 0, 0.8)',
664 |                 titleFont: { size: 13 }, // REVISED Tooltip title font size
665 |                 bodyFont: { size: 12 }, // REVISED Tooltip body font size
666 |                 padding: 12
667 |             },
668 |             title: {
669 |                 display: false,
670 |                 font: { size: 16 }, // REVISED default title size
671 |                 color: '#212529'
672 |             }
673 |         },
674 |         scales: {
675 |             x: {
676 |                 ticks: {
677 |                     font: { size: 11 }, // REVISED X-axis label font size
678 |                     color: '#6c757d',
679 |                     autoSkip: true,
680 |                     maxRotation: 45,
681 |                     minRotation: 0
682 |                 },
683 |                 title: {
684 |                     display: true,
685 |                     font: { size: 12 }, // REVISED Axis title font size
686 |                     color: '#495057'
687 |                 },
688 |                 grid: { display: false }
689 |             },
690 |             y: {
691 |                 beginAtZero: true,
692 |                 ticks: { font: { size: 11 }, color: '#6c757d' }, // REVISED Y-axis label font size
693 |                 title: {
694 |                     display: true,
695 |                     font: { size: 12 }, // REVISED Axis title font size
696 |                     color: '#495057'
697 |                 },
698 |                 grid: { color: '#dee2e6' }
699 |             }
700 |         },
701 |         animation: { duration: 600 },
702 |         hover: { mode: 'nearest', intersect: true }
703 |       };
704 | 
705 |       // --- Merge Default Options with User-Provided Options ---
706 |       const mergedOptions = {
707 |           ...defaultOptions,
708 |           ...options,
709 |           plugins: { ...defaultOptions.plugins, ...options?.plugins, legend: {...defaultOptions.plugins.legend, ...options?.plugins?.legend}, title: {...defaultOptions.plugins.title, ...options?.plugins?.title} },
710 |           scales: {
711 |               x: { ...defaultOptions.scales.x, ...options?.scales?.x, title: {...defaultOptions.scales.x.title, ...options?.scales?.x?.title}, ticks: {...defaultOptions.scales.x.ticks, ...options?.scales?.x?.ticks}},
712 |               y: { ...defaultOptions.scales.y, ...options?.scales?.y, title: {...defaultOptions.scales.y.title, ...options?.scales?.y?.title}, ticks: {...defaultOptions.scales.y.ticks, ...options?.scales?.y?.ticks}},
713 |               ...(options?.scales?.y1 && { y1: { ...defaultOptions.scales.y, position: 'right', grid: { drawOnChartArea: false }, ...options.scales.y1, title: {...defaultOptions.scales.y.title, ...options?.scales?.y1?.title}, ticks: {...defaultOptions.scales.y.ticks, ...options?.scales?.y1?.ticks}}})
714 |             }
715 |        };
716 | 
717 |       return new Chart(ctx, {
718 |         type: type,
719 |         data: data,
720 |         options: mergedOptions
721 |       });
722 |     }
723 |     // --- End Chart.js Integration ---
724 | 
725 | 
726 |     // --- Chart Data Definitions (Same data as before) ---
727 |     const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan+1'];
728 |     const monthAvgSalesData = [100, 95, 110, 130, 180, 190, 195, 120, 125, 210, 140, 205, 90];
729 |     const fmcgSalesData = [2000, 1700, 2100, 2400, 3000, 3100, 3050, 2000, 1800, 2900, 2100, 2800, 1600];
730 |     const dairySalesData = [1200, 1100, 1300, 1500, 1900, 2000, 1950, 1400, 1500, 2100, 1500, 2000, 1100];
731 |     const groceriesSalesData = [800, 700, 900, 1000, 1200, 1300, 1250, 800, 850, 1100, 850, 1000, 700];
732 |     const abcCategories = ['A', 'B', 'C'];
733 |     const abcVolumePercent = [76, 17, 7];
734 |     const correlationPairs = ['FMCG & Groceries', 'FMCG & Dairy', 'Dairy & Groceries'];
735 |     const correlationValues = [0.65, 0.61, 0.43];
736 |     const milkActualSales = [1200, 1000, 1150, 1300, 1600, 1700, 1650, 1250, 1300, 1800, 1400, 1750, 950];
737 |     const milkPredictedSales = [1180, 1100, 1200, 1350, 1550, 1680, 1600, 1300, 1350, 1700, 1450, 1650, 1050];
738 |     // --- End Chart Data Definitions ---
739 | 
740 | 
741 |     // --- Initialize Charts and Gallery on DOM Load ---
742 |     document.addEventListener("DOMContentLoaded", () => {
743 | 
744 |         // --- Initialize Image Gallery ---
745 |          const firstStoreImage = document.getElementById('storeImage1');
746 |          if (firstStoreImage) {
747 |              firstStoreImage.classList.add('active');
748 |          } else {
749 |              console.warn("First store image (storeImage1) not found for gallery initialization.");
750 |          }
751 |          // --- End Image Gallery Initialization ---
752 | 
753 |         // --- Get Bootstrap Theme Colors ---
754 |         const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--bs-primary').trim() || '#0d6efd';
755 |         const successColor = getComputedStyle(document.documentElement).getPropertyValue('--bs-success').trim() || '#198754';
756 |         const warningColor = getComputedStyle(document.documentElement).getPropertyValue('--bs-warning').trim() || '#ffc107';
757 |         const dangerColor = getComputedStyle(document.documentElement).getPropertyValue('--bs-danger').trim() || '#dc3545';
758 |         const infoColor = getComputedStyle(document.documentElement).getPropertyValue('--bs-info').trim() || '#0dcaf0';
759 |         const purpleColor = '#6f42c1'; // Bootstrap purple variable
760 |         const purpleColorTransparent = 'rgba(111, 66, 193, 0.7)'; // Purple with transparency
761 |         // --- End Bootstrap Color Fetching ---
762 | 
763 | 
764 |         // --- Create Chart Instances (Using Revised Default Font Sizes) ---
765 | 
766 |         // Chart 1: Monthly Sales Distribution (Bar Chart) - PURPLE
767 |         createChart('monthlySalesChart', 'bar', {
768 |             labels: monthLabels,
769 |             datasets: [{
770 |                 label: 'Average Daily Units Sold',
771 |                 data: monthAvgSalesData,
772 |                 backgroundColor: purpleColorTransparent, // CHANGED color
773 |                 borderColor: purpleColor, // CHANGED color
774 |                 borderWidth: 1
775 |             }]
776 |         }, {
777 |             plugins: { legend: { display: true } },
778 |             scales: {
779 |                 x: { title: { text: 'Month' } },
780 |                 y: { title: { text: 'Avg. Daily Units' } }
781 |             }
782 |         });
783 | 
784 |         // Chart 2: Category Sales Trend (Line Chart) - SHARP EDGES
785 |         createChart('categoryTrendChart', 'line', {
786 |             labels: monthLabels,
787 |             datasets: [
788 |                 { label: 'FMCG', data: fmcgSalesData, borderColor: dangerColor, backgroundColor: 'rgba(220, 53, 69, 0.1)', fill: false, tension: 0 }, // CHANGED tension to 0
789 |                 { label: 'Dairy', data: dairySalesData, borderColor: primaryColor, backgroundColor: 'rgba(13, 110, 253, 0.1)', fill: false, tension: 0 }, // CHANGED tension to 0
790 |                 { label: 'Groceries', data: groceriesSalesData, borderColor: successColor, backgroundColor: 'rgba(25, 135, 84, 0.1)', fill: false, tension: 0 } // CHANGED tension to 0
791 |             ]
792 |         }, {
793 |             plugins: { legend: { display: true } },
794 |             scales: {
795 |                  x: { title: { text: 'Month' } },
796 |                  y: { title: { text: 'Total Monthly Units' } }
797 |             }
798 |         });
799 | 
800 |          // Chart 3: ABC Analysis (Pie Chart)
801 |         createChart('abcChart', 'pie', {
802 |             labels: abcCategories,
803 |             datasets: [{
804 |                 label: '% Volume Contribution',
805 |                 data: abcVolumePercent,
806 |                 backgroundColor: [ 'rgba(25, 135, 84, 0.8)', 'rgba(255, 193, 7, 0.8)', 'rgba(220, 53, 69, 0.8)' ],
807 |                 borderColor: [ successColor, warningColor, dangerColor ],
808 |                 borderWidth: 1,
809 |                 hoverOffset: 4
810 |             }]
811 |         }, {
812 |             plugins: {
813 |                  legend: { display: true, position: 'bottom', labels: { font: { size: 12 }, boxWidth: 15, padding: 15 } },
814 |                  tooltip: {
815 |                      callbacks: {
816 |                          label: function(context) {
817 |                              let label = context.label || '';
818 |                              if (label) { label += ': '; }
819 |                              if (context.parsed !== null) { label += context.parsed + '%'; }
820 |                              return label;
821 |                          }
822 |                      }
823 |                  }
824 |              },
825 |         });
826 | 
827 |         // Chart 4: Category Correlation (Horizontal Bar Chart)
828 |         createChart('correlationChart', 'bar', {
829 |             labels: correlationPairs,
830 |             datasets: [{
831 |                 label: 'Correlation Coefficient',
832 |                 data: correlationValues,
833 |                 backgroundColor: [ 'rgba(25, 135, 84, 0.7)', 'rgba(13, 110, 253, 0.7)', 'rgba(220, 53, 69, 0.7)' ],
834 |                 borderColor: [ successColor, primaryColor, dangerColor ],
835 |                 borderWidth: 1
836 |             }]
837 |         }, {
838 |              indexAxis: 'y',
839 |              plugins: { legend: { display: false } },
840 |              scales: {
841 |                  x: { title: { text: 'Correlation Coefficient' }, min: 0, max: 1 },
842 |                  y: { title: { display: false }, ticks: { font: { size: 11 }} }
843 |              }
844 |         });
845 | 
846 |         // Chart 5: Milk Sales Prediction (Combo Bar/Line Chart) - PURPLE BARS
847 |          createChart('milkPredictionChart', 'bar', {
848 |             labels: monthLabels,
849 |             datasets: [
850 |                 { // Actual Sales Dataset (Bar)
851 |                     label: 'Actual Milk Sales',
852 |                     data: milkActualSales,
853 |                     backgroundColor: purpleColorTransparent, // ****** CHANGED color ******
854 |                     borderColor: purpleColor, // ****** CHANGED color ******
855 |                     borderWidth: 1,
856 |                     order: 2
857 |                 },
858 |                 { // Predicted Sales Dataset (Line) - Remains Orange
859 |                     label: 'Predicted Milk Sales (LR)',
860 |                     data: milkPredictedSales,
861 |                     type: 'line',
862 |                     borderColor: warningColor,
863 |                     backgroundColor: 'rgba(255, 193, 7, 0.1)',
864 |                     fill: false,
865 |                     tension: 0.2, // Keep prediction smooth
866 |                     borderWidth: 2,
867 |                     order: 1
868 |                  }
869 |             ]
870 |          }, {
871 |              plugins: { legend: { display: true } },
872 |              scales: {
873 |                  x: { title: { text: 'Month' } },
874 |                  y: { title: { text: 'Monthly Units' } }
875 |             }
876 |          });
877 |         // --- End Chart Creation ---
878 | 
879 |     }); // End DOMContentLoaded event listener
880 | 
881 |   </script>
882 |   <!-- End Custom JavaScript -->
883 | </body>
884 | </html>
885 | 


--------------------------------------------------------------------------------