Upload folder using huggingface_hub

index.html

@@ -1028,6 +1028,36 @@
               </div>
             </div>
           </div>
+
+          <div class="stat-card">
+            <div class="stat-header">
+              <div>
+                <div class="stat-value" id="accountBalance">$45,230</div>
+                <div class="stat-label">Account Balance</div>
+                <span class="stat-change positive">
+                  <i class="fas fa-arrow-up"></i> 5.7%
+                </span>
+              </div>
+              <div class="stat-icon info">
+                <i class="fas fa-wallet"></i>
+              </div>
+            </div>
+          </div>
+
+          <div class="stat-card">
+            <div class="stat-header">
+              <div>
+                <div class="stat-value" id="profitMargin">23.5%</div>
+                <div class="stat-label">Profit Margin</div>
+                <span class="stat-change positive">
+                  <i class="fas fa-arrow-up"></i> 2.1%
+                </span>
+              </div>
+              <div class="stat-icon success">
+                <i class="fas fa-chart-pie"></i>
+              </div>
+            </div>
+          </div>
         </div>
 
         <!-- Charts Row -->
@@ -1209,4 +1239,216 @@
         </div>
         <div class="form-group">
           <label for="category">Category</label>
-          <select id="
+          <select id="category" name="category" required>
+            <option value="">Select Category</option>
+            <option value="Antibiotics">Antibiotics</option>
+            <option value="Pain Relief">Pain Relief</option>
+            <option value="GI Medications">GI Medications</option>
+            <option value="Diabetes">Diabetes</option>
+            <option value="Cardiovascular">Cardiovascular</option>
+            <option value="Vitamins">Vitamins</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label for="stock">Stock Quantity</label>
+          <input type="number" id="stock" name="stock" min="0" required>
+        </div>
+        <div class="form-group">
+          <label for="price">Price ($)</label>
+          <input type="number" id="price" name="price" min="0" step="0.01" required>
+        </div>
+        <div class="form-group">
+          <label for="expiryDate">Expiry Date</label>
+          <input type="date" id="expiryDate" name="expiryDate" required>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" onclick="closeMedicineModal()">Cancel</button>
+          <button type="submit" class="btn btn-primary">Save Medicine</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <script>
+    // Sidebar toggle
+    function toggleSidebar() {
+      const sidebar = document.getElementById('sidebar');
+      const mainContent = document.getElementById('mainContent');
+      sidebar.classList.toggle('collapsed');
+      mainContent.classList.toggle('expanded');
+    }
+
+    // Set active navigation
+    function setActiveNav(element) {
+      const navItems = document.querySelectorAll('.nav-item');
+      navItems.forEach(item => item.classList.remove('active'));
+      element.classList.add('active');
+    }
+
+    // Search functionality
+    function handleSearch(event) {
+      const searchTerm = event.target.value.toLowerCase();
+      console.log('Searching for:', searchTerm);
+      // Implement search logic here
+    }
+
+    // Show notifications
+    function showNotifications() {
+      console.log('Showing notifications');
+      // Implement notification logic here
+    }
+
+    // Close alert banner
+    function closeAlert() {
+      const alertBanner = document.getElementById('alertBanner');
+      alertBanner.style.display = 'none';
+    }
+
+    // Change chart view
+    function changeChartView(element, view) {
+      const buttons = document.querySelectorAll('.chart-option-btn');
+      buttons.forEach(btn => btn.classList.remove('active'));
+      element.classList.add('active');
+      console.log('Chart view changed to:', view);
+      // Implement chart view change logic here
+    }
+
+    // Filter inventory
+    function filterInventory() {
+      console.log('Filtering inventory');
+      // Implement filter logic here
+    }
+
+    // Open add medicine modal
+    function openAddMedicineModal() {
+      const modal = document.getElementById('medicineModal');
+      const modalTitle = document.getElementById('modalTitle');
+      modalTitle.textContent = 'Add New Medicine';
+      modal.classList.add('active');
+    }
+
+    // Edit medicine
+    function editMedicine(button) {
+      const modal = document.getElementById('medicineModal');
+      const modalTitle = document.getElementById('modalTitle');
+      modalTitle.textContent = 'Edit Medicine';
+      modal.classList.add('active');
+      // Populate form with existing data
+      console.log('Editing medicine');
+    }
+
+    // Close medicine modal
+    function closeMedicineModal() {
+      const modal = document.getElementById('medicineModal');
+      modal.classList.remove('active');
+    }
+
+    // Save medicine
+    function saveMedicine(event) {
+      event.preventDefault();
+      const formData = new FormData(event.target);
+      const medicineData = Object.fromEntries(formData);
+      console.log('Saving medicine:', medicineData);
+      // Implement save logic here
+      closeMedicineModal();
+    }
+
+    // Initialize chart
+    document.addEventListener('DOMContentLoaded', function () {
+      const ctx = document.getElementById('salesChart').getContext('2d');
+      const salesChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          datasets: [{
+            label: 'Sales ($)',
+            data: [1200, 1900, 1500, 2500, 2200, 3000, 2800],
+            backgroundColor: 'rgba(44, 122, 123, 0.2)',
+            borderColor: '#2c7a7b',
+            borderWidth: 2,
+            tension: 0.4,
+            fill: true
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false
+            }
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+              grid: {
+                color: 'rgba(0, 0, 0, 0.05)'
+              }
+            },
+            x: {
+              grid: {
+                display: false
+              }
+            }
+          }
+        }
+      });
+    });
+
+    // Chart.js
+    class Chart {
+      constructor(ctx, config) {
+        this.ctx = ctx;
+        this.config = config;
+        this.draw();
+      }
+
+      draw() {
+        const canvas = this.ctx.canvas;
+        const width = canvas.width = canvas.offsetWidth;
+        const height = canvas.height = canvas.offsetHeight;
+        
+        // Clear canvas
+        this.ctx.clearRect(0, 0, width, height);
+        
+        // Draw chart based on config
+        if (this.config.type === 'line') {
+          this.drawLineChart();
+        }
+      }
+
+      drawLineChart() {
+        const { data, options } = this.config;
+        const { labels, datasets } = data;
+        const { y: yAxis, x: xAxis } = options.scales;
+        
+        const padding = 40;
+        const chartWidth = this.ctx.canvas.width - padding * 2;
+        const chartHeight = this.ctx.canvas.height - padding * 2;
+        
+        // Draw axes
+        this.ctx.strokeStyle = '#e2e8f0';
+        this.ctx.lineWidth = 1;
+        this.ctx.beginPath();
+        this.ctx.moveTo(padding, padding);
+        this.ctx.lineTo(padding, this.ctx.canvas.height - padding);
+        this.ctx.lineTo(this.ctx.canvas.width - padding, this.ctx.canvas.height - padding);
+        this.ctx.stroke();
+        
+        // Draw data points and lines
+        const dataset = datasets[0];
+        const maxValue = Math.max(...dataset.data);
+        const minValue = 0;
+        const valueRange = maxValue - minValue;
+        
+        const xStep = chartWidth / (labels.length - 1);
+        const yStep = chartHeight / valueRange;
+        
+        // Draw line
+        this.ctx.strokeStyle = dataset.borderColor;
+        this.ctx.lineWidth = dataset.borderWidth;
+        this.ctx.beginPath();
+        
+        dataset.data.forEach((value, index) => {
+          const x = padding + index * xStep;
+          const y = this.ctx.canvas.height - padding - ((value - minValue) /