S. No. Software Date of Invoice Cost (Including Tax) Year

1 CSI [Etabs, SAFE, SAP2000] July 9, 2020 SGD 12,176.60 July 9, 2020
2 Plaxis September 1, 2020 SGD 5,361.00 September 1, 2020
3 Tekla December 1, 2020 SGD 13,503.40 December 1, 2020
4 CSI [Etabs, SAFE, SAP2000] July 9, 2021 SGD 11,877.00 July 9, 2021
5 Plaxis September 1, 2021 SGD 5,391.00 September 1, 2021
6 Tekla December 1, 2021 SGD 6,868.60 December 1, 2021
7 CSI [Etabs, SAFE, SAP2000] August 10, 2022 SGD 13,482.00 August 10, 2022
8 Plaxis September 5, 2022 SGD 5,796.00 September 5, 2022
9 Tekla October 18, 2022 SGD 7,130.37 December 1, 2022
10 CSI [Etabs, SAFE, SAP2000] July 4, 2023 SGD 11,664.00 July 4, 2023
11 Plaxis September 21, 2023 SGD 6,201.00 September 5, 2023
12 Tekla October 18, 2023 SGD 7,792.20 December 1, 2023
13 CSI [Etabs, SAFE, SAP2000] July 4, 2024 SGD 11,336.00 July 4, 2024
14 Plaxis September 18, 2024 SGD 7,003.40 18/9/2024
15 Tekla October 10, 2024 SGD 8,316.00 10/10/2024
16 CSI [Etabs, SAFE, SAP2000] May 22, 2025 SGD 11,336.00 May 22, 2025
17 Unreal Engine 6-Sept-24 SGD 2,727.18 6-Sept-24
18 Plaxis September 18, 2025 SGD 7,752.84 18/9/2025

README.md

@@ -1,10 +1,13 @@
 ---
-title: Software Expense Tracker
-emoji: 💻
-colorFrom: blue
-colorTo: green
+title: Software Expense Tracker 📊
+colorFrom: red
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,34 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background-color: #1E293B;
+                }
+            </style>
+            <footer class="py-6">
+                <div class="container mx-auto px-4">
+                    <div class="flex flex-col md:flex-row justify-between items-center">
+                        <div class="text-white mb-4 md:mb-0">
+                            © ${new Date().getFullYear()} Software Expense Tracker
+                        </div>
+                        <div class="flex space-x-4">
+                            <a href="#" class="text-gray-300 hover:text-white">
+                                <i data-feather="github"></i>
+                            </a>
+                            <a href="#" class="text-gray-300 hover:text-white">
+                                <i data-feather="twitter"></i>
+                            </a>
+                            <a href="#" class="text-gray-300 hover:text-white">
+                                <i data-feather="linkedin"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/header.js

@@ -0,0 +1,37 @@
+class CustomHeader extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+                }
+                
+                .nav-link:hover {
+                    background-color: rgba(255, 255, 255, 0.1);
+                }
+            </style>
+            <nav class="shadow-lg">
+                <div class="container mx-auto px-4">
+                    <div class="flex items-center justify-between h-16">
+                        <div class="flex items-center">
+                            <span class="text-white font-bold text-xl flex items-center">
+                                <i data-feather="dollar-sign" class="mr-2"></i>
+                                Software Expense Tracker
+                            </span>
+                        </div>
+                        <div class="hidden md:block">
+                            <div class="ml-10 flex items-baseline space-x-4">
+                                <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-white bg-white bg-opacity-10">Dashboard</a>
+                                <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-white hover:bg-opacity-10">Reports</a>
+                                <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-white hover:bg-opacity-10">Settings</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+
+customElements.define('custom-header', CustomHeader);

index.html

@@ -1,19 +1,82 @@
-<!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>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Software Expense Tracker</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                        secondary: '#10B981',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50">
+    <div class="min-h-screen">
+        <custom-header></custom-header>
+        
+        <main class="container mx-auto px-4 py-8">
+            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
+                <div class="p-6">
+                    <h1 class="text-3xl font-bold text-primary mb-4">Software Expense Tracker</h1>
+                    <p class="text-gray-600 mb-6">Track your software license costs and renewal dates</p>
+                    
+                    <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">No.</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Software</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date of Invoice</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cost (SGD)</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Renewal Date</th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white divide-y divide-gray-200" id="expenseTable">
+                                <!-- Data will be populated by JavaScript -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                    <div class="p-6">
+                        <h2 class="text-xl font-semibold text-primary mb-4">Annual Spending</h2>
+                        <canvas id="annualChart" height="300"></canvas>
+                    </div>
+                </div>
+                
+                <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                    <div class="p-6">
+                        <h2 class="text-xl font-semibold text-primary mb-4">Software Distribution</h2>
+                        <canvas id="softwareChart" height="300"></canvas>
+                    </div>
+                </div>
+            </div>
+        </main>
+        
+        <custom-footer></custom-footer>
+    </div>
+    
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,139 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Expense data
+    const expenses = [
+        { id: 1, software: 'CSI [Etabs, SAFE, SAP2000]', invoiceDate: 'July 9, 2020', cost: 12176.60, renewalDate: 'July 9, 2020' },
+        { id: 2, software: 'Plaxis', invoiceDate: 'September 1, 2020', cost: 5361.00, renewalDate: 'September 1, 2020' },
+        { id: 3, software: 'Tekla', invoiceDate: 'December 1, 2020', cost: 13503.40, renewalDate: 'December 1, 2020' },
+        { id: 4, software: 'CSI [Etabs, SAFE, SAP2000]', invoiceDate: 'July 9, 2021', cost: 11877.00, renewalDate: 'July 9, 2021' },
+        { id: 5, software: 'Plaxis', invoiceDate: 'September 1, 2021', cost: 5391.00, renewalDate: 'September 1, 2021' },
+        { id: 6, software: 'Tekla', invoiceDate: 'December 1, 2021', cost: 6868.60, renewalDate: 'December 1, 2021' },
+        { id: 7, software: 'CSI [Etabs, SAFE, SAP2000]', invoiceDate: 'August 10, 2022', cost: 13482.00, renewalDate: 'August 10, 2022' },
+        { id: 8, software: 'Plaxis', invoiceDate: 'September 5, 2022', cost: 5796.00, renewalDate: 'September 5, 2022' },
+        { id: 9, software: 'Tekla', invoiceDate: 'October 18, 2022', cost: 7130.37, renewalDate: 'December 1, 2022' },
+        { id: 10, software: 'CSI [Etabs, SAFE, SAP2000]', invoiceDate: 'July 4, 2023', cost: 11664.00, renewalDate: 'July 4, 2023' },
+        { id: 11, software: 'Plaxis', invoiceDate: 'September 21, 2023', cost: 6201.00, renewalDate: 'September 5, 2023' },
+        { id: 12, software: 'Tekla', invoiceDate: 'October 18, 2023', cost: 7792.20, renewalDate: 'December 1, 2023' },
+        { id: 13, software: 'CSI [Etabs, SAFE, SAP2000]', invoiceDate: 'July 4, 2024', cost: 11336.00, renewalDate: 'July 4, 2024' },
+        { id: 14, software: 'Plaxis', invoiceDate: 'September 18, 2024', cost: 7003.40, renewalDate: '18/9/2024' },
+        { id: 15, software: 'Tekla', invoiceDate: 'October 10, 2024', cost: 8316.00, renewalDate: '10/10/2024' },
+        { id: 16, software: 'CSI [Etabs, SAFE, SAP2000]', invoiceDate: 'May 22, 2025', cost: 11336.00, renewalDate: 'May 22, 2025' },
+        { id: 17, software: 'Unreal Engine', invoiceDate: '6-Sept-24', cost: 2727.18, renewalDate: '6-Sept-24' },
+        { id: 18, software: 'Plaxis', invoiceDate: 'September 18, 2025', cost: 7752.84, renewalDate: '18/9/2025' }
+    ];
+
+    // Populate table
+    const tableBody = document.getElementById('expenseTable');
+    expenses.forEach(expense => {
+        const row = document.createElement('tr');
+        row.className = 'hover:bg-gray-50 fade-in';
+        row.innerHTML = `
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${expense.id}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${expense.software}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${expense.invoiceDate}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${expense.cost.toLocaleString('en-SG', {style: 'currency', currency: 'SGD'})}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${expense.renewalDate}</td>
+        `;
+        tableBody.appendChild(row);
+    });
+
+    // Prepare data for charts
+    const years = ['2020', '2021', '2022', '2023', '2024', '2025'];
+    const annualCosts = years.map(year => {
+        return expenses
+            .filter(expense => expense.renewalDate.includes(year))
+            .reduce((sum, expense) => sum + expense.cost, 0);
+    });
+
+    const softwareNames = [...new Set(expenses.map(expense => expense.software))];
+    const softwareCosts = softwareNames.map(software => {
+        return expenses
+            .filter(expense => expense.software === software)
+            .reduce((sum, expense) => sum + expense.cost, 0);
+    });
+
+    // Create charts
+    createAnnualChart(years, annualCosts);
+    createSoftwareChart(softwareNames, softwareCosts);
+});
+
+function createAnnualChart(years, costs) {
+    const ctx = document.getElementById('annualChart').getContext('2d');
+    new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: years,
+            datasets: [{
+                label: 'Annual Software Costs (SGD)',
+                data: costs,
+                backgroundColor: '#3B82F6',
+                borderColor: '#2563EB',
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            return context.parsed.y.toLocaleString('en-SG', {style: 'currency', currency: 'SGD'});
+                        }
+                    }
+                }
+            },
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        callback: function(value) {
+                            return value.toLocaleString('en-SG', {style: 'currency', currency: 'SGD'});
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+
+function createSoftwareChart(softwareNames, costs) {
+    const ctx = document.getElementById('softwareChart').getContext('2d');
+    new Chart(ctx, {
+        type: 'pie',
+        data: {
+            labels: softwareNames,
+            datasets: [{
+                data: costs,
+                backgroundColor: [
+                    '#3B82F6',
+                    '#10B981',
+                    '#F59E0B',
+                    '#EF4444',
+                    '#8B5CF6'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'right',
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            const label = context.label || '';
+                            const value = context.raw || 0;
+                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                            const percentage = Math.round((value / total) * 100);
+                            return `${label}: ${value.toLocaleString('en-SG', {style: 'currency', currency: 'SGD'})} (${percentage}%)`;
+                        }
+                    }
+                }
+            }
+        }
+    });
+}

style.css

@@ -1,28 +1,34 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Animation classes */
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
 }
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}