Spaces:
Running
Running
сделай программу для учета сделок по продажам. на первой странице должны быть представлены общая сумма на затраты на закупки, общая сумма продаж, маржинальность сделок, информация по сделками краткий список последних сделок, график статистики по продажам, сделки должны иметь собственный номер которые начинаются с MT сделки должны иметь статусы активные, в ожидании, завершены, отменены. В системе должен быть реализован поиск по сделками клиентам и поставщикам. В системе должна быть возможность учитывать клиентов поставщиков и сделки продаж по ним. при создании сделок должно открываться новое окно в котором будет редактируемая табличная форма: порядковый номер, наименование товара, количество, цена за единицу с ндс 5%, общая стоимость с ндс 5%, накрутка в процентах, наименование товара закупки, цена закупки за шт., общая цена закупки за шт., поставщик товара. Столбец цена за единицу с ндс 5% должна зависеть от цена закупки за шт. и увеличиваться на процент указанный в столбике накрутка в процентах, при этом должна быть возможность менять цены в столбике цена за единицу с ндс 5% вручную если необходимо, должна быть возможность массовой работы с товарами на ппример все проставить накрутку 30%, должна быть возможность указать что товар доставлен поставив галочку, должна быть возможность массовой загрузки товаров в таблицу с помощью excel, должен быть доступен импорт товаров путем скачивания таблицы excel на компьютер, должна быть возможность указывать поставщиков для каждой сделки, должна быть возможность добавлять множество сделок клиенту, у каждого клиента должна быть карточка в которой будет указаны какие сделки с ним совершались и какие товары он покупал, должна быть взаимосвязь между сделками клиентами и поставщиками, должна быть возможность хранить и заполнять данные о клиенте и поставщике такие как контактные данные почта телефон лицо для связи, должно быть место куда можно записать какие то комментарии
Browse files- README.md +8 -5
- components/deal-modal.js +102 -0
- components/deal-table.js +152 -0
- components/navbar.js +40 -0
- components/quick-stats.js +71 -0
- components/recent-deals.js +79 -0
- components/sales-chart.js +17 -0
- components/sidebar.js +52 -0
- deals.html +91 -0
- index.html +61 -19
- script.js +92 -0
- style.css +74 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: DealFlow Tracker 💰
|
| 3 |
+
colorFrom: pink
|
| 4 |
+
colorTo: pink
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
components/deal-modal.js
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomDealModal extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
.modal-overlay {
|
| 7 |
+
@apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-50;
|
| 8 |
+
}
|
| 9 |
+
.modal-container {
|
| 10 |
+
@apply fixed inset-0 overflow-y-auto;
|
| 11 |
+
}
|
| 12 |
+
.modal-content {
|
| 13 |
+
@apply flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0;
|
| 14 |
+
}
|
| 15 |
+
.modal-panel {
|
| 16 |
+
@apply relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-6xl;
|
| 17 |
+
}
|
| 18 |
+
.modal-header {
|
| 19 |
+
@apply bg-gray-50 px-4 py-3 sm:px-6;
|
| 20 |
+
}
|
| 21 |
+
.modal-body {
|
| 22 |
+
@apply px-4 pt-5 pb-4 sm:p-6 sm:pb-4;
|
| 23 |
+
}
|
| 24 |
+
.modal-footer {
|
| 25 |
+
@apply bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse;
|
| 26 |
+
}
|
| 27 |
+
</style>
|
| 28 |
+
<div id="dealModal" class="hidden modal-overlay">
|
| 29 |
+
<div class="modal-container">
|
| 30 |
+
<div class="modal-content">
|
| 31 |
+
<div class="modal-panel">
|
| 32 |
+
<div class="modal-header">
|
| 33 |
+
<h3 class="text-lg font-medium leading-6 text-gray-900">Create New Deal</h3>
|
| 34 |
+
</div>
|
| 35 |
+
<div class="modal-body">
|
| 36 |
+
<div class="grid grid-cols-1 gap-4 mb-6">
|
| 37 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
| 38 |
+
<div>
|
| 39 |
+
<label for="client" class="block text-sm font-medium text-gray-700">Client</label>
|
| 40 |
+
<select id="client" class="form-input mt-1">
|
| 41 |
+
<option>Select a client</option>
|
| 42 |
+
<option>Acme Corporation</option>
|
| 43 |
+
<option>Globex Inc</option>
|
| 44 |
+
<option>Wayne Enterprises</option>
|
| 45 |
+
<option>Stark Industries</option>
|
| 46 |
+
</select>
|
| 47 |
+
</div>
|
| 48 |
+
<div>
|
| 49 |
+
<label for="dealDate" class="block text-sm font-medium text-gray-700">Deal Date</label>
|
| 50 |
+
<input type="date" id="dealDate" class="form-input mt-1">
|
| 51 |
+
</div>
|
| 52 |
+
</div>
|
| 53 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
| 54 |
+
<div>
|
| 55 |
+
<label for="supplier" class="block text-sm font-medium text-gray-700">Supplier</label>
|
| 56 |
+
<select id="supplier" class="form-input mt-1">
|
| 57 |
+
<option>Select a supplier</option>
|
| 58 |
+
<option>Global Suppliers</option>
|
| 59 |
+
<option>Tech Parts Inc</option>
|
| 60 |
+
<option>Hardware World</option>
|
| 61 |
+
<option>Component King</option>
|
| 62 |
+
</select>
|
| 63 |
+
</div>
|
| 64 |
+
<div>
|
| 65 |
+
<label for="status" class="block text-sm font-medium text-gray-700">Status</label>
|
| 66 |
+
<select id="status" class="form-input mt-1">
|
| 67 |
+
<option>Active</option>
|
| 68 |
+
<option>Pending</option>
|
| 69 |
+
<option>Completed</option>
|
| 70 |
+
<option>Cancelled</option>
|
| 71 |
+
</select>
|
| 72 |
+
</div>
|
| 73 |
+
</div>
|
| 74 |
+
<div>
|
| 75 |
+
<label for="notes" class="block text-sm font-medium text-gray-700">Notes</label>
|
| 76 |
+
<textarea id="notes" rows="3" class="form-input mt-1"></textarea>
|
| 77 |
+
</div>
|
| 78 |
+
</div>
|
| 79 |
+
|
| 80 |
+
<div class="border-t border-b border-gray-200 py-4 mb-4">
|
| 81 |
+
<div class="flex justify-between items-center">
|
| 82 |
+
<h4 class="text-lg font-medium text-gray-900">Items</h4>
|
| 83 |
+
<div class="flex space-x-2">
|
| 84 |
+
<button onclick="importExcel()" class="btn-secondary">
|
| 85 |
+
<i data-feather="upload" class="w-4 h-4 mr-2"></i> Import
|
| 86 |
+
</button>
|
| 87 |
+
<button onclick="exportExcel()" class="btn-secondary">
|
| 88 |
+
<i data-feather="download" class="w-4 h-4 mr-2"></i> Export
|
| 89 |
+
</button>
|
| 90 |
+
<button class="btn-primary">
|
| 91 |
+
<i data-feather="plus" class="w-4 h-4 mr-2"></i> Add Item
|
| 92 |
+
</button>
|
| 93 |
+
</div>
|
| 94 |
+
</div>
|
| 95 |
+
</div>
|
| 96 |
+
|
| 97 |
+
<div class="overflow-x-auto">
|
| 98 |
+
<table class="min-w-full divide-y divide-gray-200">
|
| 99 |
+
<thead class="bg-gray-50">
|
| 100 |
+
<tr>
|
| 101 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
|
| 102 |
+
<th scope="col" class="px-6 py-3 text
|
components/deal-table.js
ADDED
|
@@ -0,0 +1,152 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomDealTable extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
.table-container {
|
| 7 |
+
@apply overflow-x-auto;
|
| 8 |
+
}
|
| 9 |
+
.table {
|
| 10 |
+
@apply min-w-full divide-y divide-gray-200;
|
| 11 |
+
}
|
| 12 |
+
.table th {
|
| 13 |
+
@apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
|
| 14 |
+
}
|
| 15 |
+
.table td {
|
| 16 |
+
@apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
|
| 17 |
+
}
|
| 18 |
+
.table tr:hover {
|
| 19 |
+
@apply bg-gray-50;
|
| 20 |
+
}
|
| 21 |
+
</style>
|
| 22 |
+
<div class="table-container">
|
| 23 |
+
<table class="table">
|
| 24 |
+
<thead>
|
| 25 |
+
<tr>
|
| 26 |
+
<th>Deal ID</th>
|
| 27 |
+
<th>Client</th>
|
| 28 |
+
<th>Date</th>
|
| 29 |
+
<th>Total</th>
|
| 30 |
+
<th>Status</th>
|
| 31 |
+
<th>Actions</th>
|
| 32 |
+
</tr>
|
| 33 |
+
</thead>
|
| 34 |
+
<tbody class="bg-white divide-y divide-gray-200">
|
| 35 |
+
<tr>
|
| 36 |
+
<td class="px-6 py-4">
|
| 37 |
+
<div class="text-sm font-medium text-gray-900">MT-2023-0425</div>
|
| 38 |
+
</td>
|
| 39 |
+
<td class="px-6 py-4">
|
| 40 |
+
<div class="text-sm text-gray-900">Acme Corporation</div>
|
| 41 |
+
<div class="text-sm text-gray-500">John Doe</div>
|
| 42 |
+
</td>
|
| 43 |
+
<td class="px-6 py-4">
|
| 44 |
+
<div class="text-sm text-gray-900">2023-04-25</div>
|
| 45 |
+
</td>
|
| 46 |
+
<td class="px-6 py-4">
|
| 47 |
+
<div class="text-sm font-medium text-gray-900">€2,480</div>
|
| 48 |
+
</td>
|
| 49 |
+
<td class="px-6 py-4">
|
| 50 |
+
<span class="status-badge status-active">Active</span>
|
| 51 |
+
</td>
|
| 52 |
+
<td class="px-6 py-4 text-right text-sm font-medium">
|
| 53 |
+
<a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
|
| 54 |
+
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
|
| 55 |
+
</td>
|
| 56 |
+
</tr>
|
| 57 |
+
<tr>
|
| 58 |
+
<td class="px-6 py-4">
|
| 59 |
+
<div class="text-sm font-medium text-gray-900">MT-2023-0424</div>
|
| 60 |
+
</td>
|
| 61 |
+
<td class="px-6 py-4">
|
| 62 |
+
<div class="text-sm text-gray-900">Globex Inc</div>
|
| 63 |
+
<div class="text-sm text-gray-500">Jane Smith</div>
|
| 64 |
+
</td>
|
| 65 |
+
<td class="px-6 py-4">
|
| 66 |
+
<div class="text-sm text-gray-900">2023-04-24</div>
|
| 67 |
+
</td>
|
| 68 |
+
<td class="px-6 py-4">
|
| 69 |
+
<div class="text-sm font-medium text-gray-900">€3,750</div>
|
| 70 |
+
</td>
|
| 71 |
+
<td class="px-6 py-4">
|
| 72 |
+
<span class="status-badge status-completed">Completed</span>
|
| 73 |
+
</td>
|
| 74 |
+
<td class="px-6 py-4 text-right text-sm font-medium">
|
| 75 |
+
<a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
|
| 76 |
+
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
|
| 77 |
+
</td>
|
| 78 |
+
</tr>
|
| 79 |
+
<tr>
|
| 80 |
+
<td class="px-6 py-4">
|
| 81 |
+
<div class="text-sm font-medium text-gray-900">MT-2023-0423</div>
|
| 82 |
+
</td>
|
| 83 |
+
<td class="px-6 py-4">
|
| 84 |
+
<div class="text-sm text-gray-900">Wayne Enterprises</div>
|
| 85 |
+
<div class="text-sm text-gray-500">Bruce Wayne</div>
|
| 86 |
+
</td>
|
| 87 |
+
<td class="px-6 py-4">
|
| 88 |
+
<div class="text-sm text-gray-900">2023-04-23</div>
|
| 89 |
+
</td>
|
| 90 |
+
<td class="px-6 py-4">
|
| 91 |
+
<div class="text-sm font-medium text-gray-900">€1,920</div>
|
| 92 |
+
</td>
|
| 93 |
+
<td class="px-6 py-4">
|
| 94 |
+
<span class="status-badge status-pending">Pending</span>
|
| 95 |
+
</td>
|
| 96 |
+
<td class="px-6 py-4 text-right text-sm font-medium">
|
| 97 |
+
<a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
|
| 98 |
+
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
|
| 99 |
+
</td>
|
| 100 |
+
</tr>
|
| 101 |
+
<tr>
|
| 102 |
+
<td class="px-6 py-4">
|
| 103 |
+
<div class="text-sm font-medium text-gray-900">MT-2023-0422</div>
|
| 104 |
+
</td>
|
| 105 |
+
<td class="px-6 py-4">
|
| 106 |
+
<div class="text-sm text-gray-900">Stark Industries</div>
|
| 107 |
+
<div class="text-sm text-gray-500">Tony Stark</div>
|
| 108 |
+
</td>
|
| 109 |
+
<td class="px-6 py-4">
|
| 110 |
+
<div class="text-sm text-gray-900">2023-04-22</div>
|
| 111 |
+
</td>
|
| 112 |
+
<td class="px-6 py-4">
|
| 113 |
+
<div class="text-sm font-medium text-gray-900">€5,600</div>
|
| 114 |
+
</td>
|
| 115 |
+
<td class="px-6 py-4">
|
| 116 |
+
<span class="status-badge status-cancelled">Cancelled</span>
|
| 117 |
+
</td>
|
| 118 |
+
<td class="px-6 py-4 text-right text-sm font-medium">
|
| 119 |
+
<a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
|
| 120 |
+
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
|
| 121 |
+
</td>
|
| 122 |
+
</tr>
|
| 123 |
+
<tr>
|
| 124 |
+
<td class="px-6 py-4">
|
| 125 |
+
<div class="text-sm font-medium text-gray-900">MT-2023-0421</div>
|
| 126 |
+
</td>
|
| 127 |
+
<td class="px-6 py-4">
|
| 128 |
+
<div class="text-sm text-gray-900">Umbrella Corp</div>
|
| 129 |
+
<div class="text-sm text-gray-500">Albert Wesker</div>
|
| 130 |
+
</td>
|
| 131 |
+
<td class="px-6 py-4">
|
| 132 |
+
<div class="text-sm text-gray-900">2023-04-21</div>
|
| 133 |
+
</td>
|
| 134 |
+
<td class="px-6 py-4">
|
| 135 |
+
<div class="text-sm font-medium text-gray-900">€4,250</div>
|
| 136 |
+
</td>
|
| 137 |
+
<td class="px-6 py-4">
|
| 138 |
+
<span class="status-badge status-completed">Completed</span>
|
| 139 |
+
</td>
|
| 140 |
+
<td class="px-6 py-4 text-right text-sm font-medium">
|
| 141 |
+
<a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
|
| 142 |
+
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
|
| 143 |
+
</td>
|
| 144 |
+
</tr>
|
| 145 |
+
</tbody>
|
| 146 |
+
</table>
|
| 147 |
+
</div>
|
| 148 |
+
`;
|
| 149 |
+
}
|
| 150 |
+
}
|
| 151 |
+
|
| 152 |
+
customElements.define('custom-deal-table', CustomDealTable);
|
components/navbar.js
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomNavbar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
.navbar {
|
| 7 |
+
@apply bg-white border-b border-gray-200 fixed w-full z-10;
|
| 8 |
+
height: 60px;
|
| 9 |
+
}
|
| 10 |
+
.search-input {
|
| 11 |
+
@apply block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
|
| 12 |
+
}
|
| 13 |
+
</style>
|
| 14 |
+
<nav class="navbar px-4 flex items-center justify-between">
|
| 15 |
+
<div class="flex items-center">
|
| 16 |
+
<button id="sidebarToggle" class="mr-4 text-gray-500 hover:text-gray-600">
|
| 17 |
+
<i data-feather="menu"></i>
|
| 18 |
+
</button>
|
| 19 |
+
<div class="relative">
|
| 20 |
+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
| 21 |
+
<i data-feather="search" class="h-4 w-4 text-gray-400"></i>
|
| 22 |
+
</div>
|
| 23 |
+
<input type="text" class="search-input" placeholder="Search deals, clients, suppliers...">
|
| 24 |
+
</div>
|
| 25 |
+
</div>
|
| 26 |
+
<div class="flex items-center space-x-4">
|
| 27 |
+
<button class="p-1 text-gray-400 hover:text-gray-500">
|
| 28 |
+
<i data-feather="bell"></i>
|
| 29 |
+
</button>
|
| 30 |
+
<div class="flex items-center">
|
| 31 |
+
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/3" alt="User avatar">
|
| 32 |
+
<span class="ml-2 text-sm font-medium text-gray-700">Admin</span>
|
| 33 |
+
</div>
|
| 34 |
+
</div>
|
| 35 |
+
</nav>
|
| 36 |
+
`;
|
| 37 |
+
}
|
| 38 |
+
}
|
| 39 |
+
|
| 40 |
+
customElements.define('custom-navbar', CustomNavbar);
|
components/quick-stats.js
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomQuickStats extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
.stat-card {
|
| 7 |
+
@apply bg-white rounded-lg shadow p-6;
|
| 8 |
+
}
|
| 9 |
+
.stat-title {
|
| 10 |
+
@apply text-sm font-medium text-gray-500 truncate;
|
| 11 |
+
}
|
| 12 |
+
.stat-value {
|
| 13 |
+
@apply mt-1 text-3xl font-semibold text-gray-900;
|
| 14 |
+
}
|
| 15 |
+
.stat-change {
|
| 16 |
+
@apply inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium;
|
| 17 |
+
}
|
| 18 |
+
.positive {
|
| 19 |
+
@apply bg-green-100 text-green-800;
|
| 20 |
+
}
|
| 21 |
+
.negative {
|
| 22 |
+
@apply bg-red-100 text-red-800;
|
| 23 |
+
}
|
| 24 |
+
</style>
|
| 25 |
+
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
| 26 |
+
<div class="stat-card">
|
| 27 |
+
<h3 class="stat-title">Total Purchases</h3>
|
| 28 |
+
<p class="stat-value">€24,780</p>
|
| 29 |
+
<p class="mt-2 flex items-baseline">
|
| 30 |
+
<span class="stat-change negative">
|
| 31 |
+
<i data-feather="arrow-down" class="w-3 h-3 mr-1"></i> 2.5%
|
| 32 |
+
</span>
|
| 33 |
+
<span class="ml-2 text-sm text-gray-500">vs last month</span>
|
| 34 |
+
</p>
|
| 35 |
+
</div>
|
| 36 |
+
<div class="stat-card">
|
| 37 |
+
<h3 class="stat-title">Total Sales</h3>
|
| 38 |
+
<p class="stat-value">€38,450</p>
|
| 39 |
+
<p class="mt-2 flex items-baseline">
|
| 40 |
+
<span class="stat-change positive">
|
| 41 |
+
<i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 12.8%
|
| 42 |
+
</span>
|
| 43 |
+
<span class="ml-2 text-sm text-gray-500">vs last month</span>
|
| 44 |
+
</p>
|
| 45 |
+
</div>
|
| 46 |
+
<div class="stat-card">
|
| 47 |
+
<h3 class="stat-title">Gross Margin</h3>
|
| 48 |
+
<p class="stat-value">35.2%</p>
|
| 49 |
+
<p class="mt-2 flex items-baseline">
|
| 50 |
+
<span class="stat-change positive">
|
| 51 |
+
<i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 1.6%
|
| 52 |
+
</span>
|
| 53 |
+
<span class="ml-2 text-sm text-gray-500">vs last month</span>
|
| 54 |
+
</p>
|
| 55 |
+
</div>
|
| 56 |
+
<div class="stat-card">
|
| 57 |
+
<h3 class="stat-title">Active Deals</h3>
|
| 58 |
+
<p class="stat-value">18</p>
|
| 59 |
+
<p class="mt-2 flex items-baseline">
|
| 60 |
+
<span class="stat-change positive">
|
| 61 |
+
<i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 3
|
| 62 |
+
</span>
|
| 63 |
+
<span class="ml-2 text-sm text-gray-500">since last week</span>
|
| 64 |
+
</p>
|
| 65 |
+
</div>
|
| 66 |
+
</div>
|
| 67 |
+
`;
|
| 68 |
+
}
|
| 69 |
+
}
|
| 70 |
+
|
| 71 |
+
customElements.define('custom-quick-stats', CustomQuickStats);
|
components/recent-deals.js
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomRecentDeals extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
.deal-item {
|
| 7 |
+
@apply py-3 border-b border-gray-200 last:border-0;
|
| 8 |
+
}
|
| 9 |
+
.deal-item:hover {
|
| 10 |
+
@apply bg-gray-50;
|
| 11 |
+
}
|
| 12 |
+
</style>
|
| 13 |
+
<div class="divide-y divide-gray-200">
|
| 14 |
+
<div class="deal-item">
|
| 15 |
+
<div class="flex items-center justify-between">
|
| 16 |
+
<div>
|
| 17 |
+
<p class="text-sm font-medium text-gray-900">MT-2023-0425</p>
|
| 18 |
+
<p class="text-sm text-gray-500">Acme Corporation</p>
|
| 19 |
+
</div>
|
| 20 |
+
<div class="flex items-center">
|
| 21 |
+
<span class="status-badge status-active mr-4">Active</span>
|
| 22 |
+
<span class="text-sm font-medium text-gray-900">€2,480</span>
|
| 23 |
+
</div>
|
| 24 |
+
</div>
|
| 25 |
+
</div>
|
| 26 |
+
<div class="deal-item">
|
| 27 |
+
<div class="flex items-center justify-between">
|
| 28 |
+
<div>
|
| 29 |
+
<p class="text-sm font-medium text-gray-900">MT-2023-0424</p>
|
| 30 |
+
<p class="text-sm text-gray-500">Globex Inc</p>
|
| 31 |
+
</div>
|
| 32 |
+
<div class="flex items-center">
|
| 33 |
+
<span class="status-badge status-completed mr-4">Completed</span>
|
| 34 |
+
<span class="text-sm font-medium text-gray-900">€3,750</span>
|
| 35 |
+
</div>
|
| 36 |
+
</div>
|
| 37 |
+
</div>
|
| 38 |
+
<div class="deal-item">
|
| 39 |
+
<div class="flex items-center justify-between">
|
| 40 |
+
<div>
|
| 41 |
+
<p class="text-sm font-medium text-gray-900">MT-2023-0423</p>
|
| 42 |
+
<p class="text-sm text-gray-500">Wayne Enterprises</p>
|
| 43 |
+
</div>
|
| 44 |
+
<div class="flex items-center">
|
| 45 |
+
<span class="status-badge status-pending mr-4">Pending</span>
|
| 46 |
+
<span class="text-sm font-medium text-gray-900">€1,920</span>
|
| 47 |
+
</div>
|
| 48 |
+
</div>
|
| 49 |
+
</div>
|
| 50 |
+
<div class="deal-item">
|
| 51 |
+
<div class="flex items-center justify-between">
|
| 52 |
+
<div>
|
| 53 |
+
<p class="text-sm font-medium text-gray-900">MT-2023-0422</p>
|
| 54 |
+
<p class="text-sm text-gray-500">Stark Industries</p>
|
| 55 |
+
</div>
|
| 56 |
+
<div class="flex items-center">
|
| 57 |
+
<span class="status-badge status-cancelled mr-4">Cancelled</span>
|
| 58 |
+
<span class="text-sm font-medium text-gray-900">€5,600</span>
|
| 59 |
+
</div>
|
| 60 |
+
</div>
|
| 61 |
+
</div>
|
| 62 |
+
<div class="deal-item">
|
| 63 |
+
<div class="flex items-center justify-between">
|
| 64 |
+
<div>
|
| 65 |
+
<p class="text-sm font-medium text-gray-900">MT-2023-0421</p>
|
| 66 |
+
<p class="text-sm text-gray-500">Umbrella Corp</p>
|
| 67 |
+
</div>
|
| 68 |
+
<div class="flex items-center">
|
| 69 |
+
<span class="status-badge status-completed mr-4">Completed</span>
|
| 70 |
+
<span class="text-sm font-medium text-gray-900">€4,250</span>
|
| 71 |
+
</div>
|
| 72 |
+
</div>
|
| 73 |
+
</div>
|
| 74 |
+
</div>
|
| 75 |
+
`;
|
| 76 |
+
}
|
| 77 |
+
}
|
| 78 |
+
|
| 79 |
+
customElements.define('custom-recent-deals', CustomRecentDeals);
|
components/sales-chart.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomSalesChart extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
.chart-container {
|
| 7 |
+
@apply relative h-64;
|
| 8 |
+
}
|
| 9 |
+
</style>
|
| 10 |
+
<div class="chart-container">
|
| 11 |
+
<canvas id="salesChart"></canvas>
|
| 12 |
+
</div>
|
| 13 |
+
`;
|
| 14 |
+
}
|
| 15 |
+
}
|
| 16 |
+
|
| 17 |
+
customElements.define('custom-sales-chart', CustomSalesChart);
|
components/sidebar.js
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomSidebar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
.sidebar {
|
| 7 |
+
@apply bg-white border-r border-gray-200 fixed h-full z-20;
|
| 8 |
+
width: 240px;
|
| 9 |
+
top: 60px;
|
| 10 |
+
left: 0;
|
| 11 |
+
transition: transform 0.3s ease-in-out;
|
| 12 |
+
}
|
| 13 |
+
.nav-link {
|
| 14 |
+
@apply flex items-center px-4 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-md;
|
| 15 |
+
}
|
| 16 |
+
.nav-link.active {
|
| 17 |
+
@apply bg-blue-50 text-blue-600;
|
| 18 |
+
}
|
| 19 |
+
.nav-link i {
|
| 20 |
+
@apply mr-3;
|
| 21 |
+
}
|
| 22 |
+
</style>
|
| 23 |
+
<div class="sidebar" id="sidebar">
|
| 24 |
+
<nav class="px-2 py-4">
|
| 25 |
+
<a href="index.html" class="nav-link active">
|
| 26 |
+
<i data-feather="home"></i> Dashboard
|
| 27 |
+
</a>
|
| 28 |
+
<a href="deals.html" class="nav-link">
|
| 29 |
+
<i data-feather="dollar-sign"></i> Deals
|
| 30 |
+
</a>
|
| 31 |
+
<a href="clients.html" class="nav-link">
|
| 32 |
+
<i data-feather="users"></i> Clients
|
| 33 |
+
</a>
|
| 34 |
+
<a href="suppliers.html" class="nav-link">
|
| 35 |
+
<i data-feather="truck"></i> Suppliers
|
| 36 |
+
</a>
|
| 37 |
+
<a href="reports.html" class="nav-link">
|
| 38 |
+
<i data-feather="pie-chart"></i> Reports
|
| 39 |
+
</a>
|
| 40 |
+
<div class="px-4 py-2 mt-6">
|
| 41 |
+
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Settings</h3>
|
| 42 |
+
</div>
|
| 43 |
+
<a href="settings.html" class="nav-link">
|
| 44 |
+
<i data-feather="settings"></i> System Settings
|
| 45 |
+
</a>
|
| 46 |
+
</nav>
|
| 47 |
+
</div>
|
| 48 |
+
`;
|
| 49 |
+
}
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
customElements.define('custom-sidebar', CustomSidebar);
|
deals.html
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Deals - DealFlow Tracker</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
| 12 |
+
<script src="components/navbar.js"></script>
|
| 13 |
+
<script src="components/sidebar.js"></script>
|
| 14 |
+
<script src="components/deal-table.js"></script>
|
| 15 |
+
<script src="components/deal-modal.js"></script>
|
| 16 |
+
</head>
|
| 17 |
+
<body class="bg-gray-50">
|
| 18 |
+
<custom-navbar></custom-navbar>
|
| 19 |
+
<div class="flex">
|
| 20 |
+
<custom-sidebar></custom-sidebar>
|
| 21 |
+
|
| 22 |
+
<main class="flex-1 p-8" style="margin-top: 60px;">
|
| 23 |
+
<div class="flex justify-between items-center mb-6">
|
| 24 |
+
<h1 class="text-3xl font-bold text-gray-800">Deals</h1>
|
| 25 |
+
<button onclick="openDealModal()" class="btn-primary">
|
| 26 |
+
<i data-feather="plus" class="w-4 h-4 mr-2"></i> New Deal
|
| 27 |
+
</button>
|
| 28 |
+
</div>
|
| 29 |
+
|
| 30 |
+
<div class="bg-white rounded-lg shadow overflow-hidden mb-6">
|
| 31 |
+
<div class="px-6 py-4 border-b border-gray-200">
|
| 32 |
+
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
|
| 33 |
+
<div class="mb-4 md:mb-0">
|
| 34 |
+
<div class="relative">
|
| 35 |
+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
| 36 |
+
<i data-feather="search" class="h-4 w-4 text-gray-400"></i>
|
| 37 |
+
</div>
|
| 38 |
+
<input type="text" class="form-input pl-10" placeholder="Search deals...">
|
| 39 |
+
</div>
|
| 40 |
+
</div>
|
| 41 |
+
<div class="flex space-x-2">
|
| 42 |
+
<select class="form-input">
|
| 43 |
+
<option>All Status</option>
|
| 44 |
+
<option>Active</option>
|
| 45 |
+
<option>Pending</option>
|
| 46 |
+
<option>Completed</option>
|
| 47 |
+
<option>Cancelled</option>
|
| 48 |
+
</select>
|
| 49 |
+
<select class="form-input">
|
| 50 |
+
<option>All Clients</option>
|
| 51 |
+
<option>Acme Corporation</option>
|
| 52 |
+
<option>Globex Inc</option>
|
| 53 |
+
<option>Wayne Enterprises</option>
|
| 54 |
+
<option>Stark Industries</option>
|
| 55 |
+
</select>
|
| 56 |
+
<button class="btn-secondary">
|
| 57 |
+
<i data-feather="filter" class="w-4 h-4 mr-2"></i> Filter
|
| 58 |
+
</button>
|
| 59 |
+
</div>
|
| 60 |
+
</div>
|
| 61 |
+
</div>
|
| 62 |
+
|
| 63 |
+
<custom-deal-table></custom-deal-table>
|
| 64 |
+
|
| 65 |
+
<div class="px-6 py-4 border-t border-gray-200">
|
| 66 |
+
<div class="flex items-center justify-between">
|
| 67 |
+
<div class="text-sm text-gray-500">
|
| 68 |
+
Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">24</span> results
|
| 69 |
+
</div>
|
| 70 |
+
<div class="flex space-x-2">
|
| 71 |
+
<button class="btn-secondary">
|
| 72 |
+
Previous
|
| 73 |
+
</button>
|
| 74 |
+
<button class="btn-secondary">
|
| 75 |
+
Next
|
| 76 |
+
</button>
|
| 77 |
+
</div>
|
| 78 |
+
</div>
|
| 79 |
+
</div>
|
| 80 |
+
</div>
|
| 81 |
+
</main>
|
| 82 |
+
</div>
|
| 83 |
+
|
| 84 |
+
<custom-deal-modal></custom-deal-modal>
|
| 85 |
+
|
| 86 |
+
<script>
|
| 87 |
+
feather.replace();
|
| 88 |
+
</script>
|
| 89 |
+
<script src="script.js"></script>
|
| 90 |
+
</body>
|
| 91 |
+
</html>
|
index.html
CHANGED
|
@@ -1,19 +1,61 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
</
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>DealFlow Tracker - Sales Management</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
| 12 |
+
<script src="components/navbar.js"></script>
|
| 13 |
+
<script src="components/sidebar.js"></script>
|
| 14 |
+
<script src="components/quick-stats.js"></script>
|
| 15 |
+
<script src="components/recent-deals.js"></script>
|
| 16 |
+
<script src="components/sales-chart.js"></script>
|
| 17 |
+
</head>
|
| 18 |
+
<body class="bg-gray-50">
|
| 19 |
+
<custom-navbar></custom-navbar>
|
| 20 |
+
<div class="flex">
|
| 21 |
+
<custom-sidebar></custom-sidebar>
|
| 22 |
+
|
| 23 |
+
<main class="flex-1 p-8">
|
| 24 |
+
<h1 class="text-3xl font-bold text-gray-800 mb-6">Dashboard</h1>
|
| 25 |
+
|
| 26 |
+
<custom-quick-stats></custom-quick-stats>
|
| 27 |
+
|
| 28 |
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8">
|
| 29 |
+
<div class="bg-white rounded-lg shadow p-6">
|
| 30 |
+
<div class="flex justify-between items-center mb-4">
|
| 31 |
+
<h2 class="text-xl font-semibold text-gray-700">Sales Statistics</h2>
|
| 32 |
+
<select class="bg-gray-100 border border-gray-300 rounded px-3 py-1 text-sm">
|
| 33 |
+
<option>Last 7 days</option>
|
| 34 |
+
<option>Last 30 days</option>
|
| 35 |
+
<option>Last Quarter</option>
|
| 36 |
+
<option>This Year</option>
|
| 37 |
+
</select>
|
| 38 |
+
</div>
|
| 39 |
+
<custom-sales-chart></custom-sales-chart>
|
| 40 |
+
</div>
|
| 41 |
+
|
| 42 |
+
<div class="bg-white rounded-lg shadow p-6">
|
| 43 |
+
<div class="flex justify-between items-center mb-4">
|
| 44 |
+
<h2 class="text-xl font-semibold text-gray-700">Recent Deals</h2>
|
| 45 |
+
<a href="deals.html" class="text-blue-600 hover:text-blue-800 text-sm flex items-center">
|
| 46 |
+
View All <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
|
| 47 |
+
</a>
|
| 48 |
+
</div>
|
| 49 |
+
<custom-recent-deals></custom-recent-deals>
|
| 50 |
+
</div>
|
| 51 |
+
</div>
|
| 52 |
+
</main>
|
| 53 |
+
</div>
|
| 54 |
+
|
| 55 |
+
<script>
|
| 56 |
+
feather.replace();
|
| 57 |
+
</script>
|
| 58 |
+
<script src="script.js"></script>
|
| 59 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 60 |
+
</body>
|
| 61 |
+
</html>
|
script.js
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 2 |
+
// Initialize tooltips
|
| 3 |
+
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
| 4 |
+
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
| 5 |
+
return new bootstrap.Tooltip(tooltipTriggerEl);
|
| 6 |
+
});
|
| 7 |
+
|
| 8 |
+
// Sample data for charts
|
| 9 |
+
if (document.getElementById('salesChart')) {
|
| 10 |
+
const ctx = document.getElementById('salesChart').getContext('2d');
|
| 11 |
+
const salesChart = new Chart(ctx, {
|
| 12 |
+
type: 'line',
|
| 13 |
+
data: {
|
| 14 |
+
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
| 15 |
+
datasets: [{
|
| 16 |
+
label: 'Sales',
|
| 17 |
+
data: [12000, 19000, 15000, 20000, 25000, 22000, 30000],
|
| 18 |
+
backgroundColor: 'rgba(59, 130, 246, 0.05)',
|
| 19 |
+
borderColor: 'rgba(59, 130, 246, 1)',
|
| 20 |
+
borderWidth: 2,
|
| 21 |
+
tension: 0.1,
|
| 22 |
+
fill: true
|
| 23 |
+
}]
|
| 24 |
+
},
|
| 25 |
+
options: {
|
| 26 |
+
responsive: true,
|
| 27 |
+
plugins: {
|
| 28 |
+
legend: {
|
| 29 |
+
display: false
|
| 30 |
+
}
|
| 31 |
+
},
|
| 32 |
+
scales: {
|
| 33 |
+
y: {
|
| 34 |
+
beginAtZero: true,
|
| 35 |
+
ticks: {
|
| 36 |
+
callback: function(value) {
|
| 37 |
+
return '€' + value.toLocaleString();
|
| 38 |
+
}
|
| 39 |
+
}
|
| 40 |
+
}
|
| 41 |
+
}
|
| 42 |
+
}
|
| 43 |
+
});
|
| 44 |
+
}
|
| 45 |
+
|
| 46 |
+
// Toggle sidebar
|
| 47 |
+
document.getElementById('sidebarToggle')?.addEventListener('click', function() {
|
| 48 |
+
const sidebar = document.getElementById('sidebar');
|
| 49 |
+
sidebar.classList.toggle('-translate-x-full');
|
| 50 |
+
});
|
| 51 |
+
});
|
| 52 |
+
|
| 53 |
+
// Deal creation modal
|
| 54 |
+
function openDealModal() {
|
| 55 |
+
document.getElementById('dealModal').classList.remove('hidden');
|
| 56 |
+
document.body.classList.add('overflow-hidden');
|
| 57 |
+
}
|
| 58 |
+
|
| 59 |
+
function closeDealModal() {
|
| 60 |
+
document.getElementById('dealModal').classList.add('hidden');
|
| 61 |
+
document.body.classList.remove('overflow-hidden');
|
| 62 |
+
}
|
| 63 |
+
|
| 64 |
+
// Excel import/export functions
|
| 65 |
+
function importExcel() {
|
| 66 |
+
// TODO: Implement Excel import
|
| 67 |
+
alert('Excel import functionality will be implemented here');
|
| 68 |
+
}
|
| 69 |
+
|
| 70 |
+
function exportExcel() {
|
| 71 |
+
// TODO: Implement Excel export
|
| 72 |
+
alert('Excel export functionality will be implemented here');
|
| 73 |
+
}
|
| 74 |
+
|
| 75 |
+
// Calculate deal values
|
| 76 |
+
function calculateDealValues() {
|
| 77 |
+
// TODO: Implement deal calculation logic
|
| 78 |
+
}
|
| 79 |
+
|
| 80 |
+
// Initialize date pickers
|
| 81 |
+
function initDatePickers() {
|
| 82 |
+
flatpickr('.datepicker', {
|
| 83 |
+
dateFormat: 'Y-m-d',
|
| 84 |
+
allowInput: true
|
| 85 |
+
});
|
| 86 |
+
}
|
| 87 |
+
|
| 88 |
+
// Initialize when page loads
|
| 89 |
+
window.onload = function() {
|
| 90 |
+
initDatePickers();
|
| 91 |
+
feather.replace();
|
| 92 |
+
};
|
style.css
CHANGED
|
@@ -1,28 +1,84 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
margin-top: 0;
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
.
|
| 19 |
-
|
| 20 |
-
margin: 0 auto;
|
| 21 |
-
padding: 16px;
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
.
|
| 27 |
-
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| 2 |
+
|
| 3 |
+
* {
|
| 4 |
+
font-family: 'Inter', sans-serif;
|
| 5 |
+
}
|
| 6 |
+
|
| 7 |
body {
|
| 8 |
+
overflow-x: hidden;
|
| 9 |
+
}
|
| 10 |
+
|
| 11 |
+
::-webkit-scrollbar {
|
| 12 |
+
width: 6px;
|
| 13 |
+
height: 6px;
|
| 14 |
+
}
|
| 15 |
+
|
| 16 |
+
::-webkit-scrollbar-track {
|
| 17 |
+
background: #f1f1f1;
|
| 18 |
+
}
|
| 19 |
+
|
| 20 |
+
::-webkit-scrollbar-thumb {
|
| 21 |
+
background: #888;
|
| 22 |
+
border-radius: 3px;
|
| 23 |
+
}
|
| 24 |
+
|
| 25 |
+
::-webkit-scrollbar-thumb:hover {
|
| 26 |
+
background: #555;
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
+
/* Custom transition for sidebar */
|
| 30 |
+
.sidebar-transition {
|
| 31 |
+
transition: all 0.3s ease-in-out;
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
/* Deal status badges */
|
| 35 |
+
.status-badge {
|
| 36 |
+
@apply px-2 py-1 rounded-full text-xs font-medium;
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
.status-active {
|
| 40 |
+
@apply bg-green-100 text-green-800;
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
.status-pending {
|
| 44 |
+
@apply bg-yellow-100 text-yellow-800;
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
.status-completed {
|
| 48 |
+
@apply bg-blue-100 text-blue-800;
|
| 49 |
}
|
| 50 |
|
| 51 |
+
.status-cancelled {
|
| 52 |
+
@apply bg-red-100 text-red-800;
|
|
|
|
| 53 |
}
|
| 54 |
|
| 55 |
+
/* Table styles */
|
| 56 |
+
.table-container {
|
| 57 |
+
@apply overflow-x-auto;
|
|
|
|
|
|
|
| 58 |
}
|
| 59 |
|
| 60 |
+
.table {
|
| 61 |
+
@apply min-w-full divide-y divide-gray-200;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 62 |
}
|
| 63 |
|
| 64 |
+
.table th {
|
| 65 |
+
@apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
|
| 66 |
}
|
| 67 |
+
|
| 68 |
+
.table td {
|
| 69 |
+
@apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
|
| 70 |
+
}
|
| 71 |
+
|
| 72 |
+
/* Form input styles */
|
| 73 |
+
.form-input {
|
| 74 |
+
@apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
|
| 75 |
+
}
|
| 76 |
+
|
| 77 |
+
/* Button styles */
|
| 78 |
+
.btn-primary {
|
| 79 |
+
@apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
.btn-secondary {
|
| 83 |
+
@apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
|
| 84 |
+
}
|