Hugging Face's logo

Spaces:
Ferdi25460
/
ferdi-com
Running

App Files Community
Ferdi25460 commited on
Commit
d5a7171
·
verified ·
1 Parent(s): 064cfaf

Create a mobile credit application for my grocery store, including functions such as buying, selling, total debt, total credit, adding a buyer, deleting a buyer, and editing. - Initial Deployment

Browse files
Files changed (4) hide show
  1. README.md +6 -4
  2. credit.html +321 -0
  3. index.html +1 -19
  4. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ferdi Com
3
- emoji: 🏢
4
  colorFrom: pink
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ferdi-com
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
credit.html ADDED
@@ -0,0 +1,321 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Grocery Store Credit System</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ </head>
13
+ <body class="bg-gray-100">
14
+ <div class="container mx-auto px-4 py-8">
15
+ <h1 class="text-3xl font-bold text-center mb-8">Grocery Store Credit System</h1>
16
+
17
+ <!-- Summary Cards -->
18
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
19
+ <div class="bg-white p-4 rounded-lg shadow">
20
+ <h3 class="text-lg font-semibold mb-2">Total Credit</h3>
21
+ <p class="text-2xl font-bold text-green-600" id="totalCredit">$0.00</p>
22
+ </div>
23
+ <div class="bg-white p-4 rounded-lg shadow">
24
+ <h3 class="text-lg font-semibold mb-2">Total Debt</h3>
25
+ <p class="text-2xl font-bold text-red-600" id="totalDebt">$0.00</p>
26
+ </div>
27
+ </div>
28
+
29
+ <!-- Buyer Management -->
30
+ <div class="bg-white p-4 rounded-lg shadow mb-8">
31
+ <div class="flex justify-between items-center mb-4">
32
+ <h2 class="text-xl font-semibold">Buyers</h2>
33
+ <button onclick="openAddBuyerModal()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
34
+ <i data-feather="plus"></i> Add Buyer
35
+ </button>
36
+ </div>
37
+
38
+ <div class="overflow-x-auto">
39
+ <table class="min-w-full bg-white">
40
+ <thead>
41
+ <tr>
42
+ <th class="py-2 px-4 border-b">Name</th>
43
+ <th class="py-2 px-4 border-b">Phone</th>
44
+ <th class="py-2 px-4 border-b">Balance</th>
45
+ <th class="py-2 px-4 border-b">Actions</th>
46
+ </tr>
47
+ </thead>
48
+ <tbody id="buyersTable">
49
+ <!-- Buyers will be populated here -->
50
+ </tbody>
51
+ </table>
52
+ </div>
53
+ </div>
54
+
55
+ <!-- Transaction Section -->
56
+ <div class="bg-white p-4 rounded-lg shadow">
57
+ <h2 class="text-xl font-semibold mb-4">Transactions</h2>
58
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
59
+ <div>
60
+ <label class="block mb-2">Select Buyer</label>
61
+ <select id="transactionBuyer" class="w-full p-2 border rounded">
62
+ <option value="">Select a buyer</option>
63
+ </select>
64
+ </div>
65
+ <div>
66
+ <label class="block mb-2">Amount</label>
67
+ <input type="number" id="transactionAmount" class="w-full p-2 border rounded" placeholder="0.00">
68
+ </div>
69
+ </div>
70
+ <div class="grid grid-cols-2 gap-4">
71
+ <button onclick="addCredit()" class="bg-green-500 text-white p-2 rounded hover:bg-green-600">
72
+ <i data-feather="plus-circle"></i> Add Credit
73
+ </button>
74
+ <button onclick="addDebt()" class="bg-red-500 text-white p-2 rounded hover:bg-red-600">
75
+ <i data-feather="minus-circle"></i> Add Debt
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- Add Buyer Modal -->
82
+ <div id="addBuyerModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center">
83
+ <div class="bg-white p-6 rounded-lg w-full max-w-md">
84
+ <h2 class="text-xl font-semibold mb-4">Add New Buyer</h2>
85
+ <div class="mb-4">
86
+ <label class="block mb-2">Full Name</label>
87
+ <input type="text" id="buyerName" class="w-full p-2 border rounded">
88
+ </div>
89
+ <div class="mb-4">
90
+ <label class="block mb-2">Phone Number</label>
91
+ <input type="tel" id="buyerPhone" class="w-full p-2 border rounded">
92
+ </div>
93
+ <div class="flex justify-end space-x-2">
94
+ <button onclick="closeAddBuyerModal()" class="px-4 py-2 border rounded">Cancel</button>
95
+ <button onclick="saveBuyer()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Save</button>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Edit Buyer Modal -->
101
+ <div id="editBuyerModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center">
102
+ <div class="bg-white p-6 rounded-lg w-full max-w-md">
103
+ <h2 class="text-xl font-semibold mb-4">Edit Buyer</h2>
104
+ <input type="hidden" id="editBuyerId">
105
+ <div class="mb-4">
106
+ <label class="block mb-2">Full Name</label>
107
+ <input type="text" id="editBuyerName" class="w-full p-2 border rounded">
108
+ </div>
109
+ <div class="mb-4">
110
+ <label class="block mb-2">Phone Number</label>
111
+ <input type="tel" id="editBuyerPhone" class="w-full p-2 border rounded">
112
+ </div>
113
+ <div class="flex justify-end space-x-2">
114
+ <button onclick="closeEditBuyerModal()" class="px-4 py-2 border rounded">Cancel</button>
115
+ <button onclick="updateBuyer()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Update</button>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <script>
121
+ // Sample data storage (in a real app, use a database)
122
+ let buyers = [];
123
+ let transactions = [];
124
+
125
+ // DOM elements
126
+ const buyersTable = document.getElementById('buyersTable');
127
+ const transactionBuyer = document.getElementById('transactionBuyer');
128
+ const totalCreditEl = document.getElementById('totalCredit');
129
+ const totalDebtEl = document.getElementById('totalDebt');
130
+
131
+ // Modal elements
132
+ const addBuyerModal = document.getElementById('addBuyerModal');
133
+ const editBuyerModal = document.getElementById('editBuyerModal');
134
+
135
+ // Initialize
136
+ function init() {
137
+ feather.replace();
138
+ AOS.init();
139
+ renderBuyers();
140
+ updateTotals();
141
+ }
142
+
143
+ // Render buyers table
144
+ function renderBuyers() {
145
+ buyersTable.innerHTML = '';
146
+ transactionBuyer.innerHTML = '<option value="">Select a buyer</option>';
147
+
148
+ buyers.forEach(buyer => {
149
+ // Calculate balance
150
+ const balance = calculateBalance(buyer.id);
151
+
152
+ // Add to table
153
+ const row = document.createElement('tr');
154
+ row.innerHTML = `
155
+ <td class="py-2 px-4 border-b">${buyer.name}</td>
156
+ <td class="py-2 px-4 border-b">${buyer.phone}</td>
157
+ <td class="py-2 px-4 border-b ${balance >= 0 ? 'text-green-600' : 'text-red-600'}">
158
+ $${Math.abs(balance).toFixed(2)} ${balance >= 0 ? '(CR)' : '(DR)'}
159
+ </td>
160
+ <td class="py-2 px-4 border-b">
161
+ <button onclick="openEditBuyerModal('${buyer.id}')" class="text-blue-500 mr-2">
162
+ <i data-feather="edit"></i>
163
+ </button>
164
+ <button onclick="deleteBuyer('${buyer.id}')" class="text-red-500">
165
+ <i data-feather="trash-2"></i>
166
+ </button>
167
+ </td>
168
+ `;
169
+ buyersTable.appendChild(row);
170
+
171
+ // Add to transaction dropdown
172
+ const option = document.createElement('option');
173
+ option.value = buyer.id;
174
+ option.textContent = buyer.name;
175
+ transactionBuyer.appendChild(option);
176
+ });
177
+
178
+ feather.replace();
179
+ }
180
+
181
+ // Calculate balance for a buyer
182
+ function calculateBalance(buyerId) {
183
+ const buyerTransactions = transactions.filter(t => t.buyerId === buyerId);
184
+ return buyerTransactions.reduce((total, t) => {
185
+ return total + (t.type === 'credit' ? t.amount : -t.amount);
186
+ }, 0);
187
+ }
188
+
189
+ // Update summary totals
190
+ function updateTotals() {
191
+ const allBalances = buyers.map(b => calculateBalance(b.id));
192
+ const totalCredit = allBalances.filter(b => b > 0).reduce((a, b) => a + b, 0);
193
+ const totalDebt = allBalances.filter(b => b < 0).reduce((a, b) => a + b, 0);
194
+
195
+ totalCreditEl.textContent = `$${totalCredit.toFixed(2)}`;
196
+ totalDebtEl.textContent = `$${Math.abs(totalDebt).toFixed(2)}`;
197
+ }
198
+
199
+ // Buyer management functions
200
+ function openAddBuyerModal() {
201
+ addBuyerModal.classList.remove('hidden');
202
+ }
203
+
204
+ function closeAddBuyerModal() {
205
+ addBuyerModal.classList.add('hidden');
206
+ document.getElementById('buyerName').value = '';
207
+ document.getElementById('buyerPhone').value = '';
208
+ }
209
+
210
+ function saveBuyer() {
211
+ const name = document.getElementById('buyerName').value.trim();
212
+ const phone = document.getElementById('buyerPhone').value.trim();
213
+
214
+ if (!name || !phone) {
215
+ alert('Please fill all fields');
216
+ return;
217
+ }
218
+
219
+ const newBuyer = {
220
+ id: Date.now().toString(),
221
+ name,
222
+ phone
223
+ };
224
+
225
+ buyers.push(newBuyer);
226
+ renderBuyers();
227
+ closeAddBuyerModal();
228
+ }
229
+
230
+ function openEditBuyerModal(id) {
231
+ const buyer = buyers.find(b => b.id === id);
232
+ if (!buyer) return;
233
+
234
+ document.getElementById('editBuyerId').value = buyer.id;
235
+ document.getElementById('editBuyerName').value = buyer.name;
236
+ document.getElementById('editBuyerPhone').value = buyer.phone;
237
+
238
+ editBuyerModal.classList.remove('hidden');
239
+ }
240
+
241
+ function closeEditBuyerModal() {
242
+ editBuyerModal.classList.add('hidden');
243
+ }
244
+
245
+ function updateBuyer() {
246
+ const id = document.getElementById('editBuyerId').value;
247
+ const name = document.getElementById('editBuyerName').value.trim();
248
+ const phone = document.getElementById('editBuyerPhone').value.trim();
249
+
250
+ if (!name || !phone) {
251
+ alert('Please fill all fields');
252
+ return;
253
+ }
254
+
255
+ const buyerIndex = buyers.findIndex(b => b.id === id);
256
+ if (buyerIndex !== -1) {
257
+ buyers[buyerIndex] = { ...buyers[buyerIndex], name, phone };
258
+ renderBuyers();
259
+ closeEditBuyerModal();
260
+ }
261
+ }
262
+
263
+ function deleteBuyer(id) {
264
+ if (confirm('Are you sure you want to delete this buyer?')) {
265
+ buyers = buyers.filter(b => b.id !== id);
266
+ transactions = transactions.filter(t => t.buyerId !== id);
267
+ renderBuyers();
268
+ updateTotals();
269
+ }
270
+ }
271
+
272
+ // Transaction functions
273
+ function addCredit() {
274
+ const buyerId = transactionBuyer.value;
275
+ const amount = parseFloat(document.getElementById('transactionAmount').value);
276
+
277
+ if (!buyerId || isNaN(amount) || amount <= 0) {
278
+ alert('Please select a buyer and enter a valid amount');
279
+ return;
280
+ }
281
+
282
+ transactions.push({
283
+ id: Date.now().toString(),
284
+ buyerId,
285
+ type: 'credit',
286
+ amount,
287
+ date: new Date().toISOString()
288
+ });
289
+
290
+ document.getElementById('transactionAmount').value = '';
291
+ renderBuyers();
292
+ updateTotals();
293
+ }
294
+
295
+ function addDebt() {
296
+ const buyerId = transactionBuyer.value;
297
+ const amount = parseFloat(document.getElementById('transactionAmount').value);
298
+
299
+ if (!buyerId || isNaN(amount) || amount <= 0) {
300
+ alert('Please select a buyer and enter a valid amount');
301
+ return;
302
+ }
303
+
304
+ transactions.push({
305
+ id: Date.now().toString(),
306
+ buyerId,
307
+ type: 'debt',
308
+ amount,
309
+ date: new Date().toISOString()
310
+ });
311
+
312
+ document.getElementById('transactionAmount').value = '';
313
+ renderBuyers();
314
+ updateTotals();
315
+ }
316
+
317
+ // Initialize on load
318
+ window.onload = init;
319
+ </script>
320
+ </body>
321
+ </html>
index.html CHANGED
@@ -1,19 +1 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
1
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a mobile credit application for my grocery store, including functions such as buying, selling, total debt, total credit, adding a buyer, deleting a buyer, and editing.