billing_UI/view-customer.html at main · Naveenv26/billing_UI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!-- view-customer.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Customer Details</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="icon" href="https://angular.io/assets/images/logos/angular/angular.svg">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="bg-[#e6f0fa] min-h-screen font-sans flex flex-col">

  <!-- Navbar -->
  <nav class="bg-white shadow p-4 flex justify-between items-center">
    <div class="flex items-center space-x-3">
      <img src="https://angular.io/assets/images/logos/angular/angular.svg" class="w-8 h-8" alt="Logo">
      <span class="font-bold text-gray-800">Customer Details</span>
    </div>
    <a href="owner-dashboard.html" class="text-blue-500 font-medium hover:underline">Back</a>
  </nav>

  <!-- Main -->
  <main class="flex-1 p-6 space-y-6">

    <!-- Customer Info -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="text-xl font-bold text-gray-800">ABC Traders</h2>
      <p class="text-gray-600">Subscription: <span class="text-green-600 font-medium">Active</span></p>
      <p class="text-gray-600">Renewal Date: <span class="font-medium">2025-09-15</span></p>
    </div>

    <!-- Earnings and Most Sold Product -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold text-gray-800 mb-3">Total Earnings</h3>
        <p class="text-3xl font-bold text-green-600">₹ 12,500</p>
      </div>
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold text-gray-800 mb-3">Most Sold Product</h3>
        <p class="text-lg font-medium text-gray-800">Wireless Mouse</p>
        <p class="text-gray-600">Sold: 120 units</p>
      </div>
    </div>

    <!-- Stock Battery -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold text-gray-800 mb-3">Stock Level</h3>
      <div class="w-40 h-16 border-4 border-gray-500 rounded-lg relative flex items-center p-1">
        <div id="batteryFill" class="bg-green-500 h-full rounded-md" style="width: 80%;"></div>
        <div class="absolute right-[-8px] top-5 w-2 h-6 bg-gray-500 rounded-sm"></div>
      </div>
      <p class="mt-2 text-gray-600">80% stock remaining</p>
    </div>

    <!-- Weekly Sales Chart -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold text-gray-800 mb-4">Weekly Sales</h3>
      <canvas id="weeklySalesChart"></canvas>
    </div>

    <!-- Monthly Sales Chart -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold text-gray-800 mb-4">Monthly Sales</h3>
      <canvas id="monthlySalesChart"></canvas>
    </div>

  </main>

  <script>
    // Stock battery color logic
    const stockPercent = 80;
    const batteryFill = document.getElementById("batteryFill");
    if (stockPercent < 30) {
      batteryFill.classList.remove("bg-green-500");
      batteryFill.classList.add("bg-red-500");
    } else if (stockPercent < 60) {
      batteryFill.classList.remove("bg-green-500");
      batteryFill.classList.add("bg-yellow-500");
    }

    // Weekly Sales Chart
    const weeklyCtx = document.getElementById('weeklySalesChart').getContext('2d');
    new Chart(weeklyCtx, {
      type: 'bar',
      data: {
        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datasets: [{
          label: 'Units Sold',
          data: [50, 70, 60, 90, 40, 30, 80],
          backgroundColor: '#3b82f6'
        }]
      },
      options: { responsive: true }
    });

    // Monthly Sales Chart
    const monthlyCtx = document.getElementById('monthlySalesChart').getContext('2d');
    new Chart(monthlyCtx, {
      type: 'line',
      data: {
        labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
        datasets: [{
          label: 'Units Sold',
          data: [600, 800, 700, 900],
          backgroundColor: '#8b5cf6',
          borderColor: '#8b5cf6',
          fill: true
        }]
      },
      options: { responsive: true }
    });
  </script>
</body>
</html>