include the visualisation page of this data: 1/1/2024 P12345 S28576 TX Tech Traders 12345 Texas San Antonio 0.00 1,896.00 -1,896.00 Paid Pending

1/3/2024 P12346 S28576 TX Tech Traders 12346 Texas San Antonio 7,135.00 1,660.00 5,475.00 Partial Payment
1/7/2024 P12347 S28564 Silicon Beach Tech Distributors 12347 California Santa Monica 9,898.05 0.00 9,898.05 Pending
1/11/2024 P12348 S28568 Memory Masters Corp. 12348 Texas Austin 4,124.20 0.00 4,124.20 Pending
1/13/2024 P12349 S28577 Phoenix CPU & GPU Solutions 12349 Arizona Phoenix 3,951.00 908.00 3,043.00 Partial Payment
1/16/2024 P12350 S28574 FL Component Supply 12350 Florida Jacksonville 2,651.00 6,663.00 -4,012.00 Paid
1/18/2024 P12351 S28577 Phoenix CPU & GPU Solutions 12351 Arizona Phoenix 4,394.42 7,097.00 -2,702.58 Paid
1/21/2024 P12352 S28572 DDR Dynamo LLC 12352 California San Jose 2,227.80 3,511.00 -1,283.20 Paid
1/23/2024 P12353 S28568 Memory Masters Corp. 12353 Texas Austin 1,809.04 4,011.00 -2,201.96 Paid
1/25/2024 P12354 S28574 FL Component Supply 12354 Florida Jacksonville 2,894.90 4,800.00 -1,905.10 Paid
1/28/2024 P12355 S28565 Lone Star Gaming Hardware 12355 Texas Dallas 1,616.79 0.00 1,616.79 Pending
1/31/2024 P12356 S28573 AZ Tech Distributors 12356 Arizona Mesa 1,966.80 3,714.00 -1,747.20 Paid
2/2/2024 P12357 S28563 Suncoast CPU Solutions 12357 Florida Tampa 2,408.72 4,506.00 -2,097.28 Paid
2/5/2024 P12358 S28569 ROG Enthusiasts Outlet 12358 Arizona Tucson 3,311.44 622.00 2,689.44 Partial Payment
2/8/2024 P12359 S28576 TX Tech Traders 12359 Texas San Antonio 3,317.40 2,919.00 398.40 Partial Payment
2/12/2024 P12360 S28576 TX Tech Traders 12360 Texas San Antonio 2,339.80 2,986.00 -646.20 Paid
2/14/2024 P12361 S28574 FL Component Supply 12361 Florida Jacksonville 5,972.60 1,648.00 4,324.60 Partial Payment
2/18/2024 P12362 S28563 Suncoast CPU Solutions 12362 Florida Tampa 13,423.20 5,624.00 7,799.20 Partial Payment
2/21/2024 P12363 S28568 Memory Masters Corp. 12363 Texas Austin 4,903.00 1,604.00 3,299.00 Partial Payment
2/25/2024 P12364 S28575 West Coast PC Imports 12364 California Oakland 2,949.80 1,059.00 1,890.80 Partial Payment
2/27/2024 P12365 S28570 PrimeBoard Direct 12365 Florida Orlando 6,964.90 4,648.00 2,316.90 Partial Payment
3/2/2024 P12366 S28572 DDR Dynamo LLC 12366 California San Jose 4,692.60 1,513.00 3,179.60 Partial Payment
3/6/2024 P12367 S28576 TX Tech Traders 12367 Texas San Antonio 5,725.40 2,704.00 3,021.40 Partial Payment
3/8/2024 P12368 S28567 CoreTech Individual Sales 12368 California San Diego 5,525.80 3,272.00 2,253.80 Partial Payment
3/11/2024 P12369 S28567 CoreTech Individual Sales 12369 California San Diego 3,333.00 2,899.00 434.00 Partial Payment
3/13/2024 P12370 S28568 Memory Masters Corp. 12370 Texas Austin 5,765.82 3,868.00 1,897.82 Partial Payment
3/17/2024 P12371 S28564 Silicon Beach Tech Distributors 12371 California Santa Monica 9,497.20 7,855.00 1,642.20 Partial Payment
3/21/2024 P12372 S28565 Lone Star Gaming Hardware 12372 Texas Dallas 3,194.55 3,408.00 -213.45 Paid
3/24/2024 P12373 S28570 PrimeBoard Direct 12373 Florida Orlando 4,457.60 2,056.00 2,401.60 Partial Payment
3/28/2024 P12374 S28574 FL Component Supply 12374 Florida Jacksonville 6,699.25 1,145.00 5,554.25 Partial Payment
4/1/2024 P12375 S28572 DDR Dynamo LLC 12375 California San Jose 3,441.46 3,926.00 -484.54 Paid
4/5/2024 P12376 S28575 West Coast PC Imports 12376 California Oakland 3,041.65 0.00 3,041.65 Pending
4/8/2024 P12377 S28573 AZ Tech Distributors 12377 Arizona Mesa 5,513.10 4,744.00 769.10 Partial Payment
4/10/2024 P12378 S28568 Memory Masters Corp. 12378 Texas Austin 1,158.20 4,129.00 -2,970.80 Paid
4/12/2024 P12379 S28577 Phoenix CPU & GPU Solutions 12379 Arizona Phoenix 6,721.00 3,858.00 2,863.00 Partial Payment
4/14/2024 P12380 S28577 Phoenix CPU & GPU Solutions 12380 Arizona Phoenix 1,562.90 0.00 1,562.90 Pending
4/17/2024 P12381 S28564 Silicon Beach Tech Distributors 12381 California Santa Monica 5,934.00 4,949.00 985.00 Partial Payment
4/21/2024 P12382 S28573 AZ Tech Distributors 12382 Arizona Mesa 2,143.00 8,132.00 -5,989.00 Paid
4/23/2024 P12383 S28570 PrimeBoard Direct 12383 Florida Orlando 4,435.70 5,822.00 -1,386.30 Paid
4/26/2024 P12384 S28571 GPU Central USA 12384 Texas Houston 8,745.75 0.00 8,745.75 Pending
4/29/2024 P12385 S28564 Silicon Beach Tech Distributors 12385 California Santa Monica 8,077.16 7,995.00 82.16 Partial Payment
5/3/2024 P12386 S28577 Phoenix CPU & GPU Solutions 12386 Arizona Phoenix 820.40 1,782.00 -961.60 Paid
5/5/2024 P12387 S28566 Desert Valley Parts 12387 Arizona Phoenix 4,735.50 0.00 4,735.50 Pending
5/8/2024 P12388 S28568 Memory Masters Corp. 12388 Texas Austin 4,582.76 1,967.00 2,615.76 Partial Payment
5/12/2024 P12389 S28571 GPU Central USA 12389 Texas Houston 3,032.80 1,587.00 1,445.80 Partial Payment
5/14/2024 P12390 S28563 Suncoast CPU Solutions 12390 Florida Tampa 3,200.50 6,695.00 -3,494.50 Paid
5/17/2024 P12391 S28575 West Coast PC Imports 12391 California Oakland 2,080.00 1,910.00 170.00 Partial Payment
5/19/2024 P12392 S28565 Lone Star Gaming Hardware 12392 Texas Dallas 4,230.10 0.00 4,230.10 Pending
5/22/2024 P12393 S28577 Phoenix CPU & GPU Solutions 12393 Arizona Phoenix 4,702.80 0.00 4,702.80 Pending
5/26/2024 P12394 S28577 Phoenix CPU & GPU Solutions 12394 Arizona Phoenix 1,929.10 4,011.00 -2,081.90 Paid
5/28/2024 P12395 S28565 Lone Star Gaming Hardware 12395 Texas Dallas 2,789.90 3,929.00 -1,139.10 Paid
5/31/2024 P12396 S28569 ROG Enthusiasts Outlet 12396 Arizona Tucson 6,522.40 0.00 6,522.40 Pending
6/2/2024 P12397 S28573 AZ Tech Distributors 12397 Arizona Mesa 6,736.20 1,851.00 4,885.20 Partial Payment
6/6/2024 P12398 S28575 West Coast PC Imports 12398 California Oakland 4,451.50 0.00 4,451.50 Pending
6/8/2024 P12399 S28573 AZ Tech Distributors 12399 Arizona Mesa 2,035.60 3,397.00 -1,361.40 Paid
6/10/2024 P12400 S28571 GPU Central USA 12400 Texas Houston 3,569.00 1,423.00 2,146.00 Partial Payment
6/14/2024 P12401 S28571 GPU Central USA 12401 Texas Houston 3,566.20 1,763.00 1,803.20 Partial Payment
6/18/2024 P12402 S28567 CoreTech Individual Sales 12402 California San Diego 3,862.00 2,974.00 888.00 Partial Payment
6/21/2024 P12403 S28570 PrimeBoard Direct 12403 Florida Orlando 4,764.18 3,885.00 879.18 Partial Payment
6/25/2024 P12404 S28574 FL Component Supply 12404 Florida Jacksonville 4,009.50 1,746.00 2,263.50 Partial Payment
6/27/2024 P12405 S28572 DDR Dynamo LLC 12405 California San Jose 2,002.40 994.00 1,008.40 Partial Payment
6/29/2024 P12406 S28567 CoreTech Individual Sales 12406 California San Diego 1,800.21 3,002.00 -1,201.79 Paid
7/2/2024 P12407 S28567 CoreTech Individual Sales 12407 California San Diego 2,029.00 4,580.00 -2,551.00 Paid
7/4/2024 P12408 S28572 DDR Dynamo LLC 12408 California San Jose 5,968.00 4,372.00 1,596.00 Partial Payment
7/8/2024 P12409 S28572 DDR Dynamo LLC 12409 California San Jose 5,228.10 1,931.00 3,297.10 Partial Payment
7/12/2024 P12410 S28577 Phoenix CPU & GPU Solutions 12410 Arizona Phoenix 4,925.76 1,307.00 3,618.76 Partial Payment
7/16/2024 P12411 S28571 GPU Central USA 12411 Texas Houston 2,819.40 2,213.00 606.40 Partial Payment
7/18/2024 P12412 S28572 DDR Dynamo LLC 12412 California San Jose 6,403.90 1,921.00 4,482.90 Partial Payment
7/21/2024 P12413 S28574 FL Component Supply 12413 Florida Jacksonville 7,269.20 1,636.00 5,633.20 Partial Payment
7/25/2024 P12414 S28572 DDR Dynamo LLC 12414 California San Jose 5,943.45 1,241.00 4,702.45 Partial Payment
7/28/2024 P12415 S28566 Desert Valley Parts 12415 Arizona Phoenix 5,516.60 3,076.00 2,440.60 Partial Payment
7/31/2024 P12416 S28571 GPU Central USA 12416 Texas Houston 4,109.80 2,187.00 1,922.80 Partial Payment
8/4/2024 P12417 S28563 Suncoast CPU Solutions 12417 Florida Tampa 2,227.00 1,786.00 441.00 Partial Payment
8/6/2024 P12418 S28569 ROG Enthusiasts Outlet 12418 Arizona Tucson 4,373.40 5,859.00 -1,485.60 Paid
8/8/2024 P12419 S28567 CoreTech Individual Sales 12419 California San Diego 3,391.40 0.00 3,391.40 Pending
8/10/2024 P12420 S28575 West Coast PC Imports 12420 California Oakland 3,507.40 0.00 3,507.40 Pending
8/13/2024 P12421 S28576 TX Tech Traders 12421 Texas San Antonio 4,605.55 2,394.00 2,211.55 Partial Payment
8/17/2024 P12422 S28572 DDR Dynamo LLC 12422 California San Jose 7,253.80 4,324.00 2,929.80 Partial Payment
8/20/2024 P12423 S28576 TX Tech Traders 12423 Texas San Antonio 676.00 1,656.00 -980.00 Paid
8/22/2024 P12424 S28571 GPU Central USA 12424 Texas Houston 773.92 5,339.00 -4,565.08 Paid
8/24/2024 P12425 S28566 Desert Valley Parts 12425 Arizona Phoenix 5,490.72 3,013.00 2,477.72 Partial Payment
8/28/2024 P12426 S28567 CoreTech Individual Sales 12426 California San Diego 2,649.24 1,155.00 1,494.24 Partial Payment
8/30/2024 P12427 S28568 Memory Masters Corp. 12427 Texas Austin 4,858.00 1,398.00 3,460.00 Partial Payment
9/2/2024 P12428 S28572 DDR Dynamo LLC 12428 California San Jose 5,422.40 1,436.00 3,986.40 Partial Payment
9/6/2024 P12429 S28573 AZ Tech Distributors 12429 Arizona Mesa 4,405.70 0.00 4,405.70 Pending
9/9/2024 P12430 S28575 West Coast PC Imports 12430 California Oakland 2,066.40 5,010.00 -2,943.60 Paid
9/11/2024 P12431 S28577 Phoenix CPU & GPU Solutions 12431 Arizona Phoenix 3,137.00 1,528.00 1,609.00 Partial Payment
9/13/2024 P12432 S28574 FL Component Supply 12432 Florida Jacksonville 975.60 1,971.00 -995.40 Paid
9/15/2024 P12433 S28574 FL Component Supply 12433 Florida Jacksonville 7,584.00 1,797.00 5,787.00 Partial Payment
9/18/2024 P12434 S28564 Silicon Beach Tech Distributors 12434 California Santa Monica 10,055.40 1,093.00 8,962.40 Partial Payment
9/22/2024 P12435 S28577 Phoenix CPU & GPU Solutions 12435 Arizona Phoenix 6,771.00 6,100.00 671.00 Partial Payment
9/24/2024 P12436 S28574 FL Component Supply 12436 Florida Jacksonville 7,831.00 2,444.00 5,387.00 Partial Payment
9/28/2024 P12437 S28575 West Coast PC Imports 12437 California Oakland 2,372.40 4,862.00 -2,489.60 Paid
10/2/2024 P12438 S28574 FL Component Supply 12438 Florida Jacksonville 928.44 5,496.00 -4,567.56 Paid
10/4/2024 P12439 S28573 AZ Tech Distributors 12439 Arizona Mesa 3,402.00 5,300.00 -1,898.00 Paid
10/6/2024 P124

README.md

@@ -1,10 +1,12 @@
 ---
-title: Inventory Asset App
-emoji: 📚
-colorFrom: purple
-colorTo: indigo
+title: inventory-asset-app
+emoji: 🐳
+colorFrom: gray
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

customers.html

@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Customers Data Visualization</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .chart-container {
+            position: relative;
+            height: 400px;
+            width: 100%;
+        }
+        .grid-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <header class="bg-indigo-600 text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <h1 class="text-3xl font-bold flex items-center">
+                    <i data-feather="users" class="mr-2"></i> Customers Dashboard
+                </h1>
+                <nav>
+                    <ul class="flex space-x-6">
+                        <li><a href="index.html" class="hover:text-indigo-200 transition">Components</a></li>
+                        <li><a href="sales.html" class="hover:text-indigo-200 transition">Sales</a></li>
+                        <li><a href="customers.html" class="hover:text-indigo-200 transition font-bold">Customers</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </header>
+
+    <main class="container mx-auto px-4 py-8">
+        <section class="mb-12" data-aos="fade-up">
+            <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Customer Distribution</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-white rounded-xl shadow-md p-6">
+                    <h3 class="text-lg font-medium mb-4 text-gray-700">By State/Region</h3>
+                    <div class="chart-container">
+                        <canvas id="stateChart"></canvas>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6">
+                    <h3 class="text-lg font-medium mb-4 text-gray-700">Revenue Distribution</h3>
+                    <div class="chart-container">
+                        <canvas id="revenueChart"></canvas>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="mb-12" data-aos="fade-up">
+            <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Key Metrics</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-white rounded-xl shadow-md p-6 text-center">
+                    <div class="text-indigo-500 mb-3">
+                        <i data-feather="trending-up" class="w-12 h-12 mx-auto"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Highest Revenue</h3>
+                    <p class="text-3xl font-bold text-gray-800">$901B</p>
+                    <p class="text-gray-500">QuantumTech Solutions</p>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6 text-center">
+                    <div class="text-green-500 mb-3">
+                        <i data-feather="users" class="w-12 h-12 mx-auto"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Most Customers</h3>
+                    <p class="text-3xl font-bold text-gray-800">7</p>
+                    <p class="text-gray-500">California</p>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6 text-center">
+                    <div class="text-blue-500 mb-3">
+                        <i data-feather="map-pin" class="w-12 h-12 mx-auto"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Popular City</h3>
+                    <p class="text-3xl font-bold text-gray-800">6</p>
+                    <p class="text-gray-500">Santa Monica</p>
+                </div>
+            </div>
+        </section>
+
+        <section data-aos="fade-up">
+            <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Customer Directory</h2>
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">State</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">City</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Revenue</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <!-- Data rows will be inserted here by JavaScript -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="bg-gray-800 text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <h2 class="text-xl font-bold flex items-center">
+                        <i data-feather="database" class="mr-2"></i> Customers Dashboard
+                    </h2>
+                    <p class="text-gray-400 mt-2">Visualizing customer relationship data</p>
+                </div>
+                <div class="flex space-x-4">
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i data-feather="github"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i data-feather="twitter"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i data-feather="linkedin"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
+                <p>© 2023 Customers Dashboard. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Initialize AOS and Feather Icons
+        AOS.init();
+        feather.replace();
+
+        // Customer data
+        const customers = [
+            {id: "C45487", company: "QuantumTech Solutions", phone: "(415) 555-0123", email: "laura.mitchell@quantumtech.com", state: "California", city: "San Francisco", revenue: 901052504038},
+            {id: "C45488", company: "Apex Digital Systems", phone: "(214) 555-0176", email: "johnathan.pierce@apexdigital.com", state: "Texas", city: "Dallas", revenue: 349463},
+            {id: "C45489", company: "BrightWave Innovations", phone: "(305) 555-0204", email: "carlos.diaz@brightwave.com", state: "Florida", city: "Miami", revenue: 107500},
+            {id: "C45490", company: "Summit IT Services", phone: "(480) 555-0335", email: "amanda.reyes@summitit.com", state: "Arizona", city: "Scottsdale", revenue: 82397},
+            {id: "C45491", company: "Vertex Software Group", phone: "(713) 555-0412", email: "mike.andrews@vertexsoftware.com", state: "Texas", city: "Houston", revenue: 93826},
+            {id: "C45492", company: "Nexus Cloud Solutions", phone: "(213) 555-0567", email: "jennifer.collins@nexuscloud.com", state: "California", city: "Los Angeles", revenue: 103758},
+            {id: "C45493", company: "HorizonTech Partners", phone: "(813) 555-0644", email: "david.thompson@horizontechnology.com", state: "Florida", city: "Tampa", revenue: 99378},
+            {id: "C45494", company: "Phoenix Digital Network", phone: "(480) 555-0701", email: "robert.johnson@phoenixdigital.com", state: "Arizona", city: "Mesa", revenue: 69633},
+            {id: "C45495", company: "Infinite Logic Systems", phone: "(602) 555-0820", email: "angela.simmons@infinitelogic.com", state: "Arizona", city: "Phoenix", revenue: 55322},
+            {id: "C45496", company: "LoneStar Data Solutions", phone: "(512) 555-0909", email: "kevin.white@lonestardata.com", state: "Texas", city: "Austin", revenue: 79361},
+            {id: "C45497", company: "BluePeak Technologies", phone: "(619) 555-1015", email: "olivia.parker@bluepeaktech.com", state: "California", city: "San Diego", revenue: 65206},
+            {id: "C45498", company: "Velocity IT Consulting", phone: "(407) 555-1107", email: "natalie.brooks@velocityit.com", state: "Florida", city: "Orlando", revenue: 69706},
+            {id: "C45499", company: "SilverEdge Marketing", phone: "(210) 555-1230", email: "brian.lee@silveredgemarketing.com", state: "Texas", city: "San Antonio", revenue: 120605},
+            {id: "C45500", company: "Evergreen Tech Solutions", phone: "(916) 555-1379", email: "david.martinez@evergreentech.com", state: "California", city: "Sacramento", revenue: 91455},
+            {id: "C45501", company: "Sunstate Digital Services", phone: "(904) 555-1488", email: "karen.evans@sunstatedigital.com", state: "Florida", city: "Jacksonville", revenue: 80118},
+            {id: "C30757", company: "Ernest Kuubagr", phone: "", email: "ernieleo2000@yahoo.com", state: "California", city: "Miami", revenue: 50},
+            {id: "C79793", company: "su titu", phone: "1772121852", email: "stuffc@gmail.com", state: "California", city: "Santa Monica", revenue: 100},
+            {id: "C57123", company: "jhow", phone: "11991263100", email: "falamacho2025@gmail.com", state: "SP", city: "SÃO PAULO", revenue: 500},
+            {id: "C33529", company: "Sarwar Foods", phone: "", email: "", state: "Pakistan", city: "Pakistan", revenue: 40000},
+            {id: "C22267", company: "aaa", phone: "", email: "", state: "india", city: "Hyderababd", revenue: 110}
+        ];
+
+        // Populate table
+        const tableBody = document.querySelector('tbody');
+        customers.forEach(customer => {
+            const row = document.createElement('tr');
+            row.className = 'hover:bg-gray-50 transition';
+            row.innerHTML = `
+                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${customer.id}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${customer.company}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${customer.phone}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${customer.email}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${customer.state}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${customer.city}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${customer.revenue.toLocaleString()}</td>
+            `;
+            tableBody.appendChild(row);
+        });
+
+        // State Distribution Chart
+        const stateCounts = customers.reduce((acc, customer) => {
+            acc[customer.state] = (acc[customer.state] || 0) + 1;
+            return acc;
+        }, {});
+
+        const stateCtx = document.getElementById('stateChart').getContext('2d');
+        new Chart(stateCtx, {
+            type: 'bar',
+            data: {
+                labels: Object.keys(stateCounts),
+                datasets: [{
+                    label: 'Customers by State',
+                    data: Object.values(stateCounts),
+                    backgroundColor: [
+                        '#6366F1', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6',
+                        '#EC4899', '#14B8A6', '#F97316', '#8B5CF6', '#EC4899'
+                    ],
+                    borderWidth: 0,
+                    borderRadius: 4
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            precision: 0
+                        }
+                    }
+                }
+            }
+        });
+
+        // Revenue Distribution Chart
+        const revenueCtx = document.getElementById('revenueChart').getContext('2d');
+        new Chart(revenueCtx, {
+            type: 'pie',
+            data: {
+                labels: customers.filter(c => c.revenue > 0).map(c => c.company),
+                datasets: [{
+                    data: customers.filter(c => c.revenue > 0).map(c => c.revenue),
+                    backgroundColor: [
+                        '#6366F1', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6',
+                        '#EC4899', '#14B8A6', '#F97316', '#8B5CF6', '#EC4899',
+                        '#14B8A6', '#F97316', '#8B5CF6', '#EC4899', '#14B8A6',
+                        '#F97316', '#8B5CF6', '#EC4899', '#14B8A6'
+                    ],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                return context.label + ': $' + context.raw.toLocaleString();
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    </script>
+</body>
+</html>

index.html

@@ -1,19 +1,254 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Computer Components Visualization</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .chart-container {
+            position: relative;
+            height: 400px;
+            width: 100%;
+        }
+        .grid-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <header class="bg-indigo-600 text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <h1 class="text-3xl font-bold flex items-center">
+                    <i data-feather="cpu" class="mr-2"></i> PC Components Dashboard
+                </h1>
+                <nav>
+                    <ul class="flex space-x-6">
+                        <li><a href="index.html" class="hover:text-indigo-200 transition font-bold">Components</a></li>
+                        <li><a href="sales.html" class="hover:text-indigo-200 transition">Sales</a></li>
+                        <li><a href="customers.html" class="hover:text-indigo-200 transition">Customers</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </header>
+
+    <main class="container mx-auto px-4 py-8">
+        <section class="mb-12" data-aos="fade-up">
+            <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Component Distribution</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-white rounded-xl shadow-md p-6">
+                    <h3 class="text-lg font-medium mb-4 text-gray-700">By Category</h3>
+                    <div class="chart-container">
+                        <canvas id="categoryChart"></canvas>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6">
+                    <h3 class="text-lg font-medium mb-4 text-gray-700">Stock Levels</h3>
+                    <div class="chart-container">
+                        <canvas id="stockChart"></canvas>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="mb-12" data-aos="fade-up">
+            <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Performance Metrics</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-white rounded-xl shadow-md p-6 text-center">
+                    <div class="text-indigo-500 mb-3">
+                        <i data-feather="trending-up" class="w-12 h-12 mx-auto"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Highest Margin</h3>
+                    <p class="text-3xl font-bold text-gray-800">$444</p>
+                    <p class="text-gray-500">AMD Radeon RX 580</p>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6 text-center">
+                    <div class="text-green-500 mb-3">
+                        <i data-feather="dollar-sign" class="w-12 h-12 mx-auto"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Highest Price</h3>
+                    <p class="text-3xl font-bold text-gray-800">$702</p>
+                    <p class="text-gray-500">Intel Core i5-9600K</p>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6 text-center">
+                    <div class="text-red-500 mb-3">
+                        <i data-feather="alert-circle" class="w-12 h-12 mx-auto"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Low Stock</h3>
+                    <p class="text-3xl font-bold text-gray-800">5</p>
+                    <p class="text-gray-500">NVIDIA GTX 16GB</p>
+                </div>
+            </div>
+        </section>
+
+        <section data-aos="fade-up">
+            <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Component Details</h2>
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Brand</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Specs</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cost</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Margin</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Warranty</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <!-- Data rows will be inserted here by JavaScript -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="bg-gray-800 text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <h2 class="text-xl font-bold flex items-center">
+                        <i data-feather="database" class="mr-2"></i> PC Components Dashboard
+                    </h2>
+                    <p class="text-gray-400 mt-2">Visualizing computer hardware data</p>
+                </div>
+                <div class="flex space-x-4">
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i data-feather="github"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i data-feather="twitter"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i data-feather="linkedin"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
+                <p>© 2023 PC Components Dashboard. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Initialize AOS and Feather Icons
+        AOS.init();
+        feather.replace();
+
+        // Data for visualization
+        const components = [
+            {id: "P56494", category: "Graphic Cards", brand: "NVIDIA GTX", specs: "16 GB", price: 555, cost: 208, margin: 347, stock: 5, warranty: "No"},
+            {id: "P56495", category: "Processors", brand: "Core i7", specs: "10th Gen", price: 702, cost: 261, margin: 441, stock: 52, warranty: "No"},
+            {id: "P56496", category: "Processors", brand: "Core i7", specs: "10th Gen", price: 507, cost: 274, margin: 233, stock: 50, warranty: "No"},
+            {id: "P56497", category: "Processors", brand: "Core i7", specs: "11th Gen", price: 525, cost: 338, margin: 187, stock: 50, warranty: "No"},
+            {id: "P56498", category: "Memory Chips", brand: "DDR4", specs: "4GB", price: 505, cost: 334, margin: 171, stock: 50, warranty: "No"},
+            {id: "P56499", category: "Processors", brand: "Core i7", specs: "10th Gen", price: 469, cost: 204, margin: 265, stock: 50, warranty: "No"},
+            {id: "P56500", category: "Memory Chips", brand: "DDR5", specs: "8GB", price: 382, cost: 302, margin: 80, stock: 50, warranty: "No"},
+            {id: "P56501", category: "Memory Chips", brand: "DDR5", specs: "16GB", price: 512, cost: 319, margin: 193, stock: 50, warranty: "No"},
+            {id: "P56502", category: "Graphic Cards", brand: "NVIDIA GTX", specs: "4GB", price: 333, cost: 270, margin: 63, stock: 50, warranty: "No"},
+            {id: "P56503", category: "Graphic Cards", brand: "NVIDIA GTX", specs: "8GB", price: 429, cost: 383, margin: 46, stock: 50, warranty: "Yes"},
+            {id: "P56504", category: "Graphic Cards", brand: "AMD RADEON RX", specs: "8GB", price: 705, cost: 261, margin: 444, stock: 50, warranty: "No"},
+            {id: "P56505", category: "Graphic Cards", brand: "Core i7", specs: "10th Gen", price: 368, cost: 319, margin: 49, stock: 50, warranty: "Yes"},
+            {id: "P56506", category: "Motherboards", brand: "ASUS ROG", specs: "ATX", price: 508, cost: 298, margin: 210, stock: 50, warranty: "No"},
+            {id: "P56507", category: "Motherboards", brand: "ASUS ROG", specs: "Micro ATX", price: 404, cost: 257, margin: 147, stock: 50, warranty: "No"},
+            {id: "P56508", category: "Motherboards", brand: "ASUS PRIME", specs: "ATX", price: 514, cost: 282, margin: 232, stock: 50, warranty: "No"},
+            {id: "P56509", category: "Motherboards", brand: "ASUS PRIME", specs: "Micro ATX", price: 456, cost: 288, margin: 168, stock: 50, warranty: "No"}
+        ];
+
+        // Populate table
+        const tableBody = document.querySelector('tbody');
+        components.forEach(comp => {
+            const row = document.createElement('tr');
+            row.className = 'hover:bg-gray-50 transition';
+            row.innerHTML = `
+                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${comp.id}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${comp.category}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${comp.brand}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${comp.specs}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${comp.price}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${comp.cost}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${comp.margin}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${comp.stock}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${comp.warranty}</td>
+            `;
+            tableBody.appendChild(row);
+        });
+
+        // Category Distribution Chart
+        const categoryCounts = components.reduce((acc, comp) => {
+            acc[comp.category] = (acc[comp.category] || 0) + 1;
+            return acc;
+        }, {});
+
+        const categoryCtx = document.getElementById('categoryChart').getContext('2d');
+        new Chart(categoryCtx, {
+            type: 'doughnut',
+            data: {
+                labels: Object.keys(categoryCounts),
+                datasets: [{
+                    data: Object.values(categoryCounts),
+                    backgroundColor: [
+                        '#6366F1',
+                        '#10B981',
+                        '#F59E0B',
+                        '#EF4444',
+                        '#8B5CF6'
+                    ],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'right',
+                    }
+                }
+            }
+        });
+
+        // Stock Levels Chart
+        const stockCtx = document.getElementById('stockChart').getContext('2d');
+        new Chart(stockCtx, {
+            type: 'bar',
+            data: {
+                labels: components.map(comp => comp.id),
+                datasets: [{
+                    label: 'Stock Levels',
+                    data: components.map(comp => comp.stock),
+                    backgroundColor: '#6366F1',
+                    borderWidth: 0,
+                    borderRadius: 4
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                }
+            }
+        });
+    </script>
+</body>
 </html>

sales.html

@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sales Data Visualization</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .chart-container {
+            position: relative;
+            height: 400px;
+            width: 100%;
+        }
+        .grid-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <header class="bg-indigo-600 text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <h1 class="text-3xl font-bold flex items-center">
+                    <i data-feather="dollar-sign" class="mr-2"></i> Sales Dashboard
+                </h1>
+                <nav>
+                    <ul class="flex space-x-6">
+                        <li><a href="index.html" class="hover:text-indigo-200 transition">Components</a></li>
+                        <li><a href="sales.html" class="hover:text-indigo-200 transition font-bold">Sales</a></li>
+                        <li><a href="customers.html" class="hover:text-indigo-200 transition">Customers</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </header>
+
+    <main class="container mx-auto px-4 py-8">
+        <section class="mb-12" data-aos="fade-up">
+            <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Sales Performance</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-white rounded-xl shadow-md p-6">
+                    <h3 class="text-lg font-medium mb-4 text-gray-700">Revenue by State</h3>
+                    <div class="chart-container">
+                        <canvas id="stateRevenueChart"></canvas>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6">
+                    <h3 class="text-lg font-medium mb-4 text-gray-700">Profit Distribution</h3>
+                    <div class="chart-container">
+                        <canvas id="profitChart"></canvas>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="mb-12" data-aos="fade-up">
+            <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Key Metrics</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-white rounded-xl shadow-md p-6 text-center">
+                    <div class="text-indigo-500 mb-3">
+                        <i data-feather="trending-up" class="w-12 h-12 mx-auto"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Highest Revenue</h3>
+                    <p class="text-3xl font-bold text-gray-800">$988,971</p>
+                    <p class="text-gray-500">Lone Star Gaming Hardware</p>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6 text-center">
+                    <div class="text-green-500 mb-3">
+                        <i data-feather="dollar-sign" class="w-12 h-12 mx-auto"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Highest Profit</h3>
+                    <p class="text-3xl font-bold text-gray-800">$961,487</p>
+                    <p class="text-gray-500">Lone Star Gaming Hardware</p>
+                </div>
+                <div class="bg-white rounded-xl shadow-md p-6 text-center">
+                    <div class="text-red-500 mb-3">
+                        <i data-feather="alert-circle" class="w-12 h-12 mx-auto"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">Lowest Profit</h3>
+                    <p class="text-3xl font-bold text-gray-800">-$2,894</p>
+                    <p class="text-gray-500">DDR Dynamo LLC</p>
+                </div>
+            </div>
+        </section>
+
+        <section data-aos="fade-up">
+            <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Sales Details</h2>
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="overflow-x-auto">
+                    <table class="min-w-full divide-y divide-gray-200">
+                        <thead class="bg-gray-50">
+                            <tr>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">State</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">City</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Revenue</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cost</th>
+                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profit</th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-white divide-y divide-gray-200">
+                            <!-- Data rows will be inserted here by JavaScript -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="bg-gray-800 text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <h2 class="text-xl font-bold flex items-center">
+                        <i data-feather="database" class="mr-2"></i> Sales Dashboard
+                    </h2>
+                    <p class="text-gray-400 mt-2">Visualizing sales performance data</p>
+                </div>
+                <div class="flex space-x-4">
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i data-feather="github"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i data-feather="twitter"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition">
+                        <i data-feather="linkedin"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
+                <p>© 2023 Sales Dashboard. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Initialize AOS and Feather Icons
+        AOS.init();
+        feather.replace();
+
+        // Sales data
+        const salesData = [
+            {id: "S28563", company: "Suncoast CPU Solutions", phone: "(813) 555-0143", email: "jessica@suncoastcpu.com", state: "Florida", city: "Tampa", revenue: 48537.30, cost: 29779.00, profit: 18758.30},
+            {id: "S28564", company: "Silicon Beach Tech Distributors", phone: "(310) 555-0189", email: "mike.chen@siliconbeachdist.com", state: "California", city: "Santa Monica", revenue: 371316.40, cost: 55280.00, profit: 316036.40},
+            {id: "S28565", company: "Lone Star Gaming Hardware", phone: "(214) 555-0211", email: "carlos@lonestargaming.com", state: "Texas", city: "Dallas", revenue: 988971.40, cost: 27484.01, profit: 961487.39},
+            {id: "S28566", company: "Desert Valley Parts", phone: "(602) 555-0083", email: "aisha@desertvalleyparts.com", state: "Arizona", city: "Phoenix", revenue: 64985.96, cost: 25597.00, profit: 39388.96},
+            {id: "S28568", company: "Memory Masters Corp.", phone: "(512) 555-0317", email: "emily@memorymasters.com", state: "Texas", city: "Austin", revenue: 85029.29, cost: 61902.00, profit: 23127.29},
+            {id: "S28569", company: "ROG Enthusiasts Outlet", phone: "(520) 555-0129", email: "victor@rogoutlet.com", state: "Arizona", city: "Tucson", revenue: 86354.36, cost: 27615.00, profit: 58739.36},
+            {id: "S28570", company: "PrimeBoard Direct", phone: "(407) 555-0456", email: "olivia.green@primeboard.com", state: "Florida", city: "Orlando", revenue: 55403.18, cost: 37028.00, profit: 18375.18},
+            {id: "S28571", company: "GPU Central USA", phone: "(713) 555-0633", email: "brandon.lee@gpucentralusa.com", state: "Texas", city: "Houston", revenue: 81320.09, cost: 44350.00, profit: 36970.09},
+            {id: "S28572", company: "DDR Dynamo LLC", phone: "(408) 555-0592", email: "samantha@ddrdynamo.com", state: "California", city: "San Jose", revenue: 45196.51, cost: 48091.00, profit: -2894.49},
+            {id: "S28573", company: "AZ Tech Distributors", phone: "(480) 555-0741", email: "rajiv@aztechdist.com", state: "Arizona", city: "Mesa", revenue: 65456.65, cost: 44707.11, profit: 20749.54},
+            {id: "S28574", company: "FL Component Supply", phone: "(904) 555-0902", email: "marisol@flcomponentsupply.com", state: "Florida", city: "Jacksonville", revenue: 66859.44, cost: 65507.00, profit: 1352.44},
+            {id: "S28575", company: "West Coast PC Imports", phone: "(510) 555-0811", email: "daniel@wcpcimports.com", state: "California", city: "Oakland", revenue: 71516.30, cost: 20299.00, profit: 51217.30},
+            {id: "S28576", company: "TX Tech Traders", phone: "(210) 555-0957", email: "andrea.j@txtechtraders.com", state: "Texas", city: "San Antonio", revenue: 67847.88, cost: 36613.00, profit: 31234.88},
+            {id: "S28577", company: "Phoenix CPU & GPU Solutions", phone: "(602) 555-0778", email: "chris.oneil@phxcpu-gpu.com", state: "Arizona", city: "Phoenix", revenue: 80530.95, cost: 33444.00, profit: 47086.95}
+        ];
+
+        // Populate table
+        const tableBody = document.querySelector('tbody');
+        salesData.forEach(sale => {
+            const row = document.createElement('tr');
+            row.className = 'hover:bg-gray-50 transition';
+            row.innerHTML = `
+                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${sale.id}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.company}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.phone}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.email}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.state}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.city}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${sale.revenue.toLocaleString()}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${sale.cost.toLocaleString()}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${sale.profit.toLocaleString()}</td>
+            `;
+            tableBody.appendChild(row);
+        });
+
+        // State Revenue Chart
+        const stateRevenue = salesData.reduce((acc, sale) => {
+            acc[sale.state] = (acc[sale.state] || 0) + sale.revenue;
+            return acc;
+        }, {});
+
+        const stateRevenueCtx = document.getElementById('stateRevenueChart').getContext('2d');
+        new Chart(stateRevenueCtx, {
+            type: 'bar',
+            data: {
+                labels: Object.keys(stateRevenue),
+                datasets: [{
+                    label: 'Revenue by State',
+                    data: Object.values(stateRevenue),
+                    backgroundColor: [
+                        '#6366F1',
+                        '#10B981',
+                        '#F59E0B',
+                        '#EF4444',
+                        '#8B5CF6'
+                    ],
+                    borderWidth: 0,
+                    borderRadius: 4
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            callback: function(value) {
+                                return '$' + (value / 1000).toFixed(0) + 'K';
+                            }
+                        }
+                    }
+                }
+            }
+        });
+
+        // Profit Distribution Chart
+        const profitCtx = document.getElementById('profitChart').getContext('2d');
+        new Chart(profitCtx, {
+            type: 'pie',
+            data: {
+                labels: salesData.map(sale => sale.company),
+                datasets: [{
+                    data: salesData.map(sale => sale.profit),
+                    backgroundColor: [
+                        '#6366F1', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6',
+                        '#EC4899', '#14B8A6', '#F97316', '#8B5CF6', '#EC4899',
+                        '#14B8A6', '#F97316', '#8B5CF6', '#EC4899'
+                    ],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                return context.label + ': $' + context.raw.toLocaleString();
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    </script>
+</body>
+</html>