Skip to content

Commit c9b2000

Browse files
author
Wilondja243
committed
Reposist initialization
1 parent 6d58a6f commit c9b2000

File tree

11 files changed

+1195
-0
lines changed

11 files changed

+1195
-0
lines changed

‎dashboard/dash/index.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Liste des Transactions</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
9+
</head>
10+
<body class="bg-gray-50">
11+
<div class="container mx-auto p-6">
12+
<!-- Titre -->
13+
<h1 class="text-2xl font-semibold text-gray-800 mb-6">Liste des Transactions</h1>
14+
15+
<!-- Barre de Recherche et Filtres -->
16+
<div class="mb-6">
17+
<!-- Barre de Recherche -->
18+
<div class="flex items-center gap-4 mb-4">
19+
<div class="relative flex-grow">
20+
<input type="text" placeholder="Rechercher une transaction..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
21+
<i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
22+
</div>
23+
<!-- Filtres -->
24+
<div class="flex flex-wrap gap-4">
25+
<select class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
26+
<option value="">Jour</option>
27+
<option value="01">01</option>
28+
<option value="02">02</option>
29+
<!-- Ajouter les autres mois -->
30+
</select>
31+
<select class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
32+
<option value="">Mois</option>
33+
<option value="01">Janvier</option>
34+
<option value="02">Février</option>
35+
<!-- Ajouter les autres mois -->
36+
</select>
37+
</div>
38+
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center gap-2">
39+
<i class="fas fa-plus"></i> Ajouter
40+
</button>
41+
</div>
42+
</div>
43+
44+
<!-- Tableau des Transactions -->
45+
<div class="bg-white rounded-lg shadow overflow-hidden">
46+
<table class="min-w-full">
47+
<thead class="bg-gray-100">
48+
<tr>
49+
<th class="p-3 text-left text-sm font-medium text-gray-600">Date</th>
50+
<th class="p-3 text-left text-sm font-medium text-gray-600">Description</th>
51+
<th class="p-3 text-left text-sm font-medium text-gray-600">Montant</th>
52+
<th class="p-3 text-left text-sm font-medium text-gray-600">Statut</th>
53+
<th class="p-3 text-left text-sm font-medium text-gray-600">Actions</th>
54+
</tr>
55+
</thead>
56+
<tbody class="divide-y divide-gray-200">
57+
<tr class="hover:bg-gray-50 transition-colors">
58+
<td class="p-3 text-sm text-gray-700">2023-10-01</td>
59+
<td class="p-3 text-sm text-gray-700">Transfert à John Doe</td>
60+
<td class="p-3 text-sm text-gray-700">-$200.00</td>
61+
<td class="p-3 text-sm text-gray-700">
62+
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">Complété</span>
63+
</td>
64+
<td class="p-3 text-sm text-gray-700 flex gap-2">
65+
<button class="p-1.5 text-blue-500 hover:bg-blue-50 rounded-lg">
66+
<i class="fas fa-eye"></i>
67+
</button>
68+
<button class="p-1.5 text-green-500 hover:bg-green-50 rounded-lg">
69+
<i class="fas fa-edit"></i>
70+
</button>
71+
<button class="p-1.5 text-red-500 hover:bg-red-50 rounded-lg">
72+
<i class="fas fa-trash"></i>
73+
</button>
74+
</td>
75+
</tr>
76+
<tr class="hover:bg-gray-50 transition-colors">
77+
<td class="p-3 text-sm text-gray-700">2023-10-01</td>
78+
<td class="p-3 text-sm text-gray-700">Transfert à John Doe</td>
79+
<td class="p-3 text-sm text-gray-700">-$200.00</td>
80+
<td class="p-3 text-sm text-gray-700">
81+
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">Complété</span>
82+
</td>
83+
<td class="p-3 text-sm text-gray-700 flex gap-2">
84+
<button class="p-1.5 text-blue-500 hover:bg-blue-50 rounded-lg">
85+
<i class="fas fa-eye"></i>
86+
</button>
87+
<button class="p-1.5 text-green-500 hover:bg-green-50 rounded-lg">
88+
<i class="fas fa-edit"></i>
89+
</button>
90+
<button class="p-1.5 text-red-500 hover:bg-red-50 rounded-lg">
91+
<i class="fas fa-trash"></i>
92+
</button>
93+
</td>
94+
</tr>
95+
<tr class="hover:bg-gray-50 transition-colors">
96+
<td class="p-3 text-sm text-gray-700">2023-10-01</td>
97+
<td class="p-3 text-sm text-gray-700">Transfert à John Doe</td>
98+
<td class="p-3 text-sm text-gray-700">-$200.00</td>
99+
<td class="p-3 text-sm text-gray-700">
100+
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs">Complété</span>
101+
</td>
102+
<td class="p-3 text-sm text-gray-700 flex gap-2">
103+
<button class="p-1.5 text-blue-500 hover:bg-blue-50 rounded-lg">
104+
<i class="fas fa-eye"></i>
105+
</button>
106+
<button class="p-1.5 text-green-500 hover:bg-green-50 rounded-lg">
107+
<i class="fas fa-edit"></i>
108+
</button>
109+
<button class="p-1.5 text-red-500 hover:bg-red-50 rounded-lg">
110+
<i class="fas fa-trash"></i>
111+
</button>
112+
</td>
113+
</tr>
114+
115+
</tbody>
116+
</table>
117+
</div>
118+
119+
<!-- Pagination -->
120+
<div class="flex justify-between items-center mt-6">
121+
<div class="text-sm text-gray-600">
122+
Affichage de 1 à 10 sur 50 transactions
123+
</div>
124+
<div class="flex gap-2">
125+
<button class="p-1 w-10 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
126+
<i class="fas fa-chevron-left"></i>
127+
</button>
128+
<button class="p-1 w-10 bg-blue-600 text-white rounded-lg hover:bg-blue-700">1</button>
129+
<button class="p-1 w-10 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">2</button>
130+
<button class="p-1 w-10 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">3</button>
131+
<button class="p-1 w-10 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
132+
<i class="fas fa-chevron-right"></i>
133+
</button>
134+
</div>
135+
</div>
136+
</div>
137+
</body>
138+
</html>

‎dashboard/dash/style.css‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
body {
2+
font-family: 'Arial', sans-serif;
3+
background-color: #f4f4f9;
4+
color: #333;
5+
margin: 0;
6+
padding: 20px;
7+
}
8+
9+
.dashboard-container {
10+
max-width: 1200px;
11+
margin: auto;
12+
background: white;
13+
padding: 20px;
14+
border-radius: 8px;
15+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
16+
}
17+
18+
.dashboard-header {
19+
display: flex;
20+
justify-content: space-between;
21+
align-items: center;
22+
margin-bottom: 20px;
23+
}
24+
25+
.dashboard-header h1 {
26+
color: #0056b3;
27+
}
28+
29+
.notification-icon {
30+
font-size: 1.5em;
31+
cursor: pointer;
32+
position: relative;
33+
}
34+
35+
.notification-count {
36+
background-color: #f44336;
37+
color: white;
38+
border-radius: 50%;
39+
padding: 2px 6px;
40+
font-size: 0.8em;
41+
position: absolute;
42+
top: -10px;
43+
right: -10px;
44+
}
45+
46+
.balance-stats {
47+
display: flex;
48+
justify-content: space-between;
49+
gap: 20px;
50+
margin-bottom: 20px;
51+
}
52+
53+
.balance-section {
54+
background: #e3f2fd;
55+
padding: 20px;
56+
border-radius: 8px;
57+
flex: 1;
58+
}
59+
60+
.balance-amount {
61+
font-size: 2.5em;
62+
color: #0056b3;
63+
font-weight: bold;
64+
}
65+
66+
.stats-section {
67+
display: flex;
68+
gap: 20px;
69+
flex: 2;
70+
}
71+
72+
.stat-card {
73+
background: #f8f9fa;
74+
padding: 20px;
75+
border-radius: 8px;
76+
flex: 1;
77+
text-align: center;
78+
}
79+
80+
.stat-card h3 {
81+
margin: 0;
82+
font-size: 1.2em;
83+
color: #555;
84+
}
85+
86+
.stat-card p {
87+
font-size: 1.5em;
88+
color: #0056b3;
89+
font-weight: bold;
90+
}
91+
92+
.actions-section {
93+
margin-bottom: 20px;
94+
}
95+
96+
.action-buttons {
97+
display: flex;
98+
gap: 10px;
99+
}
100+
101+
.btn {
102+
padding: 15px 25px;
103+
border: none;
104+
border-radius: 8px;
105+
cursor: pointer;
106+
font-size: 16px;
107+
transition: background-color 0.3s;
108+
display: flex;
109+
align-items: center;
110+
gap: 10px;
111+
}
112+
113+
.transfer { background-color: #4CAF50; color: white; }
114+
.deposit { background-color: #2196F3; color: white; }
115+
.withdraw { background-color: #f44336; color: white; }
116+
.invest { background-color: #ff9800; color: white; }
117+
118+
.btn:hover {
119+
opacity: 0.9;
120+
}
121+
122+
.chart-section {
123+
margin-bottom: 20px;
124+
}
125+
126+
.chart-placeholder {
127+
background: #f8f9fa;
128+
padding: 20px;
129+
border-radius: 8px;
130+
text-align: center;
131+
color: #777;
132+
}
133+
134+
.transactions-section {
135+
margin-bottom: 20px;
136+
}
137+
138+
.search-bar {
139+
margin-bottom: 10px;
140+
}
141+
142+
.search-bar input {
143+
width: 100%;
144+
padding: 10px;
145+
border: 1px solid #ddd;
146+
border-radius: 8px;
147+
font-size: 16px;
148+
}
149+
150+
.transactions-table {
151+
width: 100%;
152+
border-collapse: collapse;
153+
}
154+
155+
.transactions-table th, .transactions-table td {
156+
text-align: left;
157+
padding: 12px;
158+
border-bottom: 1px solid #ddd;
159+
}
160+
161+
.transactions-table th {
162+
background-color: #f8f9fa;
163+
}
164+
165+
.debit { color: #f44336; }
166+
.credit { color: #4CAF50; }
167+
.status.completed { color: #4CAF50; }
168+
.status.pending { color: #ff9800; }
169+
170+
.notifications-section {
171+
margin-bottom: 20px;
172+
}
173+
174+
.notifications-list {
175+
list-style-type: none;
176+
padding: 0;
177+
}
178+
179+
.notifications-list li {
180+
background: #f8f9fa;
181+
padding: 10px;
182+
border-radius: 8px;
183+
margin-bottom: 10px;
184+
}

‎dashboard/img/world.jpg‎

33.8 KB
Loading

0 commit comments

Comments
 (0)