Hugging Face's logo

Spaces:
LIMATEC
/
limanet
Running

App Files Community
LIMATEC commited on
Commit
312d524
·
verified ·
1 Parent(s): ec89954

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +368 -212
  2. prompts.txt +14 -1
index.html CHANGED
@@ -3,255 +3,411 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>LIMANET - Sistema de Controle</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
9
  <style>
10
- .gradient-bg {
11
- background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
 
 
 
 
12
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  .card-hover:hover {
14
  transform: translateY(-5px);
15
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
16
- }
17
- .transition-all {
18
- transition: all 0.3s ease;
19
  }
 
20
  .status-active {
21
- background-color: #d1fae5;
22
- color: #065f46;
23
  }
 
24
  .status-overdue {
25
- background-color: #fee2e2;
26
- color: #b91c1c;
27
- }
28
- .status-blocked {
29
- background-color: #fef3c7;
30
- color: #92400e;
31
  }
 
32
  .status-inactive {
33
- background-color: #e5e7eb;
34
- color: #4b5563;
 
 
 
 
35
  }
36
  </style>
37
  </head>
38
- <body class="bg-gray-100 font-sans">
39
- <!-- Login Screen -->
40
- <div id="login-screen" class="min-h-screen flex items-center justify-center gradient-bg">
41
- <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-md">
42
- <div class="text-center mb-8">
43
- <div class="flex justify-center mb-4">
44
- <div class="bg-blue-600 text-white p-4 rounded-full w-24 h-24 flex items-center justify-center">
45
- <i class="fas fa-wifi text-4xl"></i>
 
 
46
  </div>
 
47
  </div>
48
- <h1 class="text-3xl font-bold text-gray-800">LIMANET</h1>
49
- <p class="text-blue-600 mt-2">Internet rápida, atendimento de verdade</p>
50
  </div>
51
- <form id="login-form" class="space-y-6">
52
- <div>
53
- <label for="username" class="block text-sm font-medium text-gray-700">Usuário</label>
54
- <input type="text" id="username" name="username" required
55
- class="mt-1 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">
56
- </div>
57
- <div>
58
- <label for="password" class="block text-sm font-medium text-gray-700">Senha</label>
59
- <input type="password" id="password" name="password" required
60
- class="mt-1 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">
61
- </div>
62
- <div>
63
- <button type="submit"
64
- class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all">
65
- Entrar
66
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  </div>
68
- </form>
69
  </div>
70
- </div>
71
-
72
- <!-- Dashboard Screen (hidden by default) -->
73
- <div id="dashboard-screen" class="hidden min-h-screen">
74
- <!-- Header -->
75
- <header class="bg-white shadow-sm">
76
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
77
- <div class="flex justify-between items-center py-4">
78
- <div class="flex items-center">
79
- <div class="bg-blue-600 text-white p-3 rounded-full mr-3">
80
- <i class="fas fa-wifi"></i>
81
- </div>
82
- <h1 class="text-xl font-bold text-gray-900">LIMANET</h1>
83
- <span class="ml-2 text-sm text-gray-600">Internet rápida, atendimento de verdade</span>
84
  </div>
85
- <div class="flex items-center space-x-4">
86
- <button id="add-client-btn" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition-all">
87
- <i class="fas fa-plus mr-1"></i> Novo Cliente
88
- </button>
89
- <span class="text-gray-600">Admin</span>
90
- <button id="logout-btn" class="text-blue-600 hover:text-blue-800">
91
- <i class="fas fa-sign-out-alt"></i>
92
- </button>
93
  </div>
94
  </div>
95
- </div>
96
- </header>
97
-
98
- <!-- Main Content -->
99
- <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
100
- <!-- Dashboard Stats -->
101
- <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
102
- <div class="bg-white rounded-lg shadow p-6 card-hover transition-all">
103
- <div class="flex items-center justify-between">
104
- <div>
105
- <p class="text-sm font-medium text-gray-500">Total de Clientes</p>
106
- <p id="total-clients-count" class="text-2xl font-semibold text-gray-900">0</p>
 
 
 
107
  </div>
108
- <div class="bg-blue-100 p-3 rounded-full">
109
- <i class="fas fa-users text-blue-600"></i>
 
 
 
110
  </div>
111
  </div>
112
- </div>
113
- <div class="bg-white rounded-lg shadow p-6 card-hover transition-all">
114
- <div class="flex items-center justify-between">
115
- <div>
116
- <p class="text-sm font-medium text-gray-500">Clientes Ativos</p>
117
- <p id="active-clients" class="text-2xl font-semibold text-gray-900">0</p>
 
 
 
 
118
  </div>
119
- <div class="bg-green-100 p-3 rounded-full">
120
- <i class="fas fa-user-check text-green-600"></i>
 
 
 
121
  </div>
122
  </div>
123
- </div>
124
- <div class="bg-white rounded-lg shadow p-6 card-hover transition-all">
125
- <div class="flex items-center justify-between">
126
- <div>
127
- <p class="text-sm font-medium text-gray-500">Inadimplentes</p>
128
- <p id="overdue-clients" class="text-2xl font-semibold text-gray-900">0</p>
 
 
 
 
129
  </div>
130
- <div class="bg-red-100 p-3 rounded-full">
131
- <i class="fas fa-exclamation-triangle text-red-600"></i>
 
 
 
132
  </div>
133
  </div>
134
- </div>
135
- <div class="bg-white rounded-lg shadow p-6 card-hover transition-all">
136
- <div class="flex items-center justify-between">
137
- <div>
138
- <p class="text-sm font-medium text-gray-500">Clientes Inativos</p>
139
- <p id="inactive-clients" class="text-2xl font-semibold text-gray-900">0</p>
 
 
 
 
140
  </div>
141
- <div class="bg-gray-100 p-3 rounded-full">
142
- <i class="fas fa-user-slash text-gray-600"></i>
 
 
 
143
  </div>
144
  </div>
145
  </div>
146
- </div>
147
-
148
- <!-- Blocks Overview -->
149
- <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
150
- <div class="bg-white rounded-lg shadow p-4 text-center card-hover transition-all">
151
- <p class="text-sm font-medium text-gray-500">Bloco 19</p>
152
- <p id="block-19-count" class="text-xl font-semibold">0</p>
153
- </div>
154
- <div class="bg-white rounded-lg shadow p-4 text-center card-hover transition-all">
155
- <p class="text-sm font-medium text-gray-500">Bloco 20</p>
156
- <p id="block-20-count" class="text-xl font-semibold">0</p>
157
- </div>
158
- <div class="bg-white rounded-lg shadow p-4 text-center card-hover transition-all">
159
- <p class="text-sm font-medium text-gray-500">Bloco 21</p>
160
- <p id="block-21-count" class="text-xl font-semibold">0</p>
161
- </div>
162
- <div class="bg-white rounded-lg shadow p-4 text-center card-hover transition-all">
163
- <p class="text-sm font-medium text-gray-500">Bloco 22</p>
164
- <p id="block-22-count" class="text-xl font-semibold">0</p>
165
- </div>
166
- <div class="bg-white rounded-lg shadow p-4 text-center card-hover transition-all">
167
- <p class="text-sm font-medium text-gray-500">Bloco 23</p>
168
- <p id="block-23-count" class="text-xl font-semibold">0</p>
169
- </div>
170
- <div class="bg-white rounded-lg shadow p-4 text-center card-hover transition-all">
171
- <p class="text-sm font-medium text-gray-500">Bloco 24</p>
172
- <p id="block-24-count" class="text-xl font-semibold">0</p>
173
- </div>
174
- </div>
175
-
176
- <!-- Clients Table -->
177
- <div class="bg-white shadow rounded-lg overflow-hidden">
178
- <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
179
- <h2 class="text-lg font-medium text-gray-900">Clientes - Condomínio Flores</h2>
180
- <div class="flex space-x-2">
181
- <select id="block-filter" class="border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
182
- <option value="">Todos os Blocos</option>
183
- <option value="BLOCO19">Bloco 19</option>
184
- <option value="BLOCO20">Bloco 20</option>
185
- <option value="BLOCO21">Bloco 21</option>
186
- <option value="BLOCO22">Bloco 22</option>
187
- <option value="BLOCO23">Bloco 23</option>
188
- <option value="BLOCO24">Bloco 24</option>
189
- </select>
190
- <select id="status-filter" class="border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
191
- <option value="">Todos os Status</option>
192
- <option value="active">Ativos</option>
193
- <option value="inactive">Inativos</option>
194
- <option value="overdue">Inadimplentes</option>
195
- </select>
196
- <select id="plan-filter" class="border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
197
- <option value="">Todos os Planos</option>
198
- <option value="100MB">100MB</option>
199
- <option value="200MB">200MB</option>
200
- <option value="300MB">300MB</option>
201
- </select>
202
- </div>
203
- </div>
204
- <div class="overflow-x-auto">
205
- <table class="min-w-full divide-y divide-gray-200">
206
- <thead class="bg-gray-50">
207
- <tr>
208
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</th>
209
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Endereço</th>
210
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Plano</th>
211
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pagamento</th>
212
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
213
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
214
- </tr>
215
- </thead>
216
- <tbody id="clients-table-body" class="bg-white divide-y divide-gray-200">
217
- <!-- Clients will be inserted here by JavaScript -->
218
- </tbody>
219
- </table>
220
- </div>
221
- <div class="px-6 py-4 border-t border-gray-200 flex justify-between items-center">
222
- <div class="text-sm text-gray-500">
223
- Mostrando <span id="showing-from">1</span> a <span id="showing-to">10</span> de <span id="total-clients">0</span> clientes
 
224
  </div>
225
- <div class="flex space-x-2">
226
- <button id="prev-page" class="px-3 py-1 border rounded-md text-sm font-medium disabled:opacity-50" disabled>Anterior</button>
227
- <button id="next-page" class="px-3 py-1 border rounded-md text-sm font-medium disabled:opacity-50" disabled>Próxima</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
228
  </div>
229
  </div>
230
- </div>
231
- </main>
232
- </div>
233
-
234
- <!-- Client Modal (hidden by default) -->
235
- <div id="client-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
236
- <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
237
- <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
238
- <h3 class="text-lg font-medium text-gray-900" id="modal-title">Adicionar Cliente</h3>
239
- <button id="close-modal" class="text-gray-500 hover:text-gray-700">
240
- <i class="fas fa-times"></i>
241
- </button>
242
- </div>
243
- <div class="px-6 py-4 space-y-4">
244
- <input type="hidden" id="edit-client-id">
245
- <div>
246
- <label for="edit-client-name" class="block text-sm font-medium text-gray-700">Nome Completo</label>
247
- <input type="text" id="edit-client-name" class="mt-1 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">
248
- </div>
249
- <div>
250
- <label for="edit-client-address" class="block text-sm font-medium text-gray-700">Endereço</label>
251
- <input type="text" id="edit-client-address" class="mt-1 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" placeholder="Rua, número, complemento">
252
- </div>
253
- <div class="grid grid-cols-2 gap-4">
254
- <div>
255
- <label for="edit-client-block" class="block text-sm font-medium text-gray-700">Bloco</label>
256
- <select id="edit-client-block" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue
257
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LIMANET - Controle de Assinantes</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
  <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap');
12
+
13
+ .logo-text {
14
+ font-family: 'Orbitron', sans-serif;
15
+ color: #FF7B25;
16
+ text-shadow: 0 0 10px rgba(255, 123, 37, 0.7);
17
  }
18
+
19
+ .neon-border {
20
+ position: relative;
21
+ }
22
+
23
+ .neon-border::after {
24
+ content: '';
25
+ position: absolute;
26
+ top: -2px;
27
+ left: -2px;
28
+ right: -2px;
29
+ bottom: -2px;
30
+ border: 2px solid transparent;
31
+ border-radius: 0.5rem;
32
+ background: linear-gradient(45deg, #FF7B25, #FF5100, #FF7B25);
33
+ background-size: 200% 200%;
34
+ animation: neonGlow 2s linear infinite;
35
+ z-index: -1;
36
+ }
37
+
38
+ @keyframes neonGlow {
39
+ 0% {
40
+ background-position: 0% 50%;
41
+ opacity: 0.7;
42
+ }
43
+ 50% {
44
+ background-position: 100% 50%;
45
+ opacity: 1;
46
+ }
47
+ 100% {
48
+ background-position: 0% 50%;
49
+ opacity: 0.7;
50
+ }
51
+ }
52
+
53
+ .sidebar-item:hover {
54
+ background-color: #2D3748;
55
+ border-left: 4px solid #FF7B25;
56
+ }
57
+
58
+ .sidebar-item.active {
59
+ background-color: #2D3748;
60
+ border-left: 4px solid #FF7B25;
61
+ }
62
+
63
  .card-hover:hover {
64
  transform: translateY(-5px);
65
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 
 
 
66
  }
67
+
68
  .status-active {
69
+ background-color: rgba(16, 185, 129, 0.1);
70
+ color: #10B981;
71
  }
72
+
73
  .status-overdue {
74
+ background-color: rgba(239, 68, 68, 0.1);
75
+ color: #EF4444;
 
 
 
 
76
  }
77
+
78
  .status-inactive {
79
+ background-color: rgba(156, 163, 175, 0.1);
80
+ color: #9CA3AF;
81
+ }
82
+
83
+ .transition-all {
84
+ transition: all 0.3s ease;
85
  }
86
  </style>
87
  </head>
88
+ <body class="bg-gray-900 text-gray-200">
89
+ <!-- Main Container -->
90
+ <div class="flex h-screen overflow-hidden">
91
+ <!-- Sidebar -->
92
+ <div class="w-64 bg-gray-800 flex flex-col">
93
+ <!-- Logo -->
94
+ <div class="p-4 flex items-center justify-center">
95
+ <div class="flex items-center neon-border p-3 rounded-lg">
96
+ <div class="w-10 h-10 flex items-center justify-center bg-gradient-to-br from-orange-500 to-orange-700 rounded-full mr-2">
97
+ <i class="fas fa-wifi text-white"></i>
98
  </div>
99
+ <span class="logo-text text-xl font-bold">LIMANET</span>
100
  </div>
 
 
101
  </div>
102
+
103
+ <!-- Navigation -->
104
+ <nav class="flex-1 px-4 py-6 space-y-2">
105
+ <a href="#" class="sidebar-item active flex items-center px-4 py-3 rounded-lg transition-all">
106
+ <i class="fas fa-tachometer-alt mr-3 text-orange-500"></i>
107
+ <span>Dashboard</span>
108
+ </a>
109
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg transition-all">
110
+ <i class="fas fa-users mr-3 text-blue-400"></i>
111
+ <span>Clientes</span>
112
+ </a>
113
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg transition-all">
114
+ <i class="fas fa-file-invoice-dollar mr-3 text-green-400"></i>
115
+ <span>Planos de Assinatura</span>
116
+ </a>
117
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg transition-all">
118
+ <i class="fas fa-money-bill-wave mr-3 text-yellow-400"></i>
119
+ <span>Pagamentos</span>
120
+ </a>
121
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg transition-all">
122
+ <i class="fas fa-chart-line mr-3 text-purple-400"></i>
123
+ <span>Financeiro</span>
124
+ </a>
125
+ <a href="#" class="sidebar-item flex items-center px-4 py-3 rounded-lg transition-all">
126
+ <i class="fas fa-cog mr-3 text-gray-400"></i>
127
+ <span>Configurações</span>
128
+ </a>
129
+ </nav>
130
+
131
+ <!-- User Profile -->
132
+ <div class="p-4 border-t border-gray-700">
133
+ <div class="flex items-center">
134
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
135
+ <div>
136
+ <p class="font-medium">Admin</p>
137
+ <p class="text-xs text-gray-400">Administrador</p>
138
+ </div>
139
  </div>
140
+ </div>
141
  </div>
142
+
143
+ <!-- Main Content -->
144
+ <div class="flex-1 flex flex-col overflow-hidden">
145
+ <!-- Top Bar -->
146
+ <header class="bg-gray-800 border-b border-gray-700 p-4 flex justify-between items-center">
147
+ <h1 class="text-xl font-semibold">Dashboard</h1>
148
+ <div class="flex items-center space-x-4">
149
+ <div class="relative">
150
+ <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
151
+ <input type="text" placeholder="Pesquisar..." class="bg-gray-700 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-orange-500">
 
 
 
 
152
  </div>
153
+ <button class="bg-orange-600 hover:bg-orange-700 px-4 py-2 rounded-lg transition-all">
154
+ <i class="fas fa-plus mr-2"></i> Novo Cliente
155
+ </button>
156
+ <div class="relative">
157
+ <i class="fas fa-bell text-gray-400 text-xl cursor-pointer"></i>
158
+ <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span>
 
 
159
  </div>
160
  </div>
161
+ </header>
162
+
163
+ <!-- Dashboard Content -->
164
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-900">
165
+ <!-- Stats Cards -->
166
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
167
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg card-hover transition-all">
168
+ <div class="flex items-center justify-between">
169
+ <div>
170
+ <p class="text-sm font-medium text-gray-400">Total de Clientes</p>
171
+ <p class="text-3xl font-bold mt-2">248</p>
172
+ </div>
173
+ <div class="bg-blue-900/30 p-3 rounded-full">
174
+ <i class="fas fa-users text-blue-400 text-xl"></i>
175
+ </div>
176
  </div>
177
+ <div class="mt-4">
178
+ <div class="flex items-center text-sm text-green-400">
179
+ <i class="fas fa-arrow-up mr-1"></i>
180
+ <span>12% desde o último mês</span>
181
+ </div>
182
  </div>
183
  </div>
184
+
185
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg card-hover transition-all">
186
+ <div class="flex items-center justify-between">
187
+ <div>
188
+ <p class="text-sm font-medium text-gray-400">Clientes Ativos</p>
189
+ <p class="text-3xl font-bold mt-2">198</p>
190
+ </div>
191
+ <div class="bg-green-900/30 p-3 rounded-full">
192
+ <i class="fas fa-user-check text-green-400 text-xl"></i>
193
+ </div>
194
  </div>
195
+ <div class="mt-4">
196
+ <div class="flex items-center text-sm text-green-400">
197
+ <i class="fas fa-arrow-up mr-1"></i>
198
+ <span>8% desde o último mês</span>
199
+ </div>
200
  </div>
201
  </div>
202
+
203
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg card-hover transition-all">
204
+ <div class="flex items-center justify-between">
205
+ <div>
206
+ <p class="text-sm font-medium text-gray-400">Inadimplentes</p>
207
+ <p class="text-3xl font-bold mt-2">32</p>
208
+ </div>
209
+ <div class="bg-red-900/30 p-3 rounded-full">
210
+ <i class="fas fa-exclamation-triangle text-red-400 text-xl"></i>
211
+ </div>
212
  </div>
213
+ <div class="mt-4">
214
+ <div class="flex items-center text-sm text-red-400">
215
+ <i class="fas fa-arrow-down mr-1"></i>
216
+ <span>5% desde o último mês</span>
217
+ </div>
218
  </div>
219
  </div>
220
+
221
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg card-hover transition-all">
222
+ <div class="flex items-center justify-between">
223
+ <div>
224
+ <p class="text-sm font-medium text-gray-400">Receita Mensal</p>
225
+ <p class="text-3xl font-bold mt-2">R$ 24,780</p>
226
+ </div>
227
+ <div class="bg-purple-900/30 p-3 rounded-full">
228
+ <i class="fas fa-dollar-sign text-purple-400 text-xl"></i>
229
+ </div>
230
  </div>
231
+ <div class="mt-4">
232
+ <div class="flex items-center text-sm text-green-400">
233
+ <i class="fas fa-arrow-up mr-1"></i>
234
+ <span>15% desde o último mês</span>
235
+ </div>
236
  </div>
237
  </div>
238
  </div>
239
+
240
+ <!-- Recent Payments and Overdue -->
241
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
242
+ <!-- Recent Payments -->
243
+ <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
244
+ <div class="px-6 py-4 border-b border-gray-700">
245
+ <h2 class="text-lg font-semibold flex items-center">
246
+ <i class="fas fa-money-bill-wave text-yellow-400 mr-2"></i>
247
+ Últimos Pagamentos
248
+ </h2>
249
+ </div>
250
+ <div class="divide-y divide-gray-700">
251
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all">
252
+ <div class="flex items-center">
253
+ <div class="bg-green-900/20 p-2 rounded-lg mr-4">
254
+ <i class="fas fa-check-circle text-green-400"></i>
255
+ </div>
256
+ <div>
257
+ <p class="font-medium">João Silva</p>
258
+ <p class="text-sm text-gray-400">100MB - Bloco 19</p>
259
+ </div>
260
+ </div>
261
+ <div class="text-right">
262
+ <p class="font-medium">R$ 89,90</p>
263
+ <p class="text-sm text-gray-400">10/05/2023</p>
264
+ </div>
265
+ </div>
266
+
267
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all">
268
+ <div class="flex items-center">
269
+ <div class="bg-green-900/20 p-2 rounded-lg mr-4">
270
+ <i class="fas fa-check-circle text-green-400"></i>
271
+ </div>
272
+ <div>
273
+ <p class="font-medium">Maria Oliveira</p>
274
+ <p class="text-sm text-gray-400">200MB - Bloco 20</p>
275
+ </div>
276
+ </div>
277
+ <div class="text-right">
278
+ <p class="font-medium">R$ 119,90</p>
279
+ <p class="text-sm text-gray-400">09/05/2023</p>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all">
284
+ <div class="flex items-center">
285
+ <div class="bg-green-900/20 p-2 rounded-lg mr-4">
286
+ <i class="fas fa-check-circle text-green-400"></i>
287
+ </div>
288
+ <div>
289
+ <p class="font-medium">Carlos Souza</p>
290
+ <p class="text-sm text-gray-400">300MB - Bloco 21</p>
291
+ </div>
292
+ </div>
293
+ <div class="text-right">
294
+ <p class="font-medium">R$ 149,90</p>
295
+ <p class="text-sm text-gray-400">08/05/2023</p>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all">
300
+ <div class="flex items-center">
301
+ <div class="bg-green-900/20 p-2 rounded-lg mr-4">
302
+ <i class="fas fa-check-circle text-green-400"></i>
303
+ </div>
304
+ <div>
305
+ <p class="font-medium">Ana Costa</p>
306
+ <p class="text-sm text-gray-400">100MB - Bloco 22</p>
307
+ </div>
308
+ </div>
309
+ <div class="text-right">
310
+ <p class="font-medium">R$ 89,90</p>
311
+ <p class="text-sm text-gray-400">07/05/2023</p>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ <div class="px-6 py-3 border-t border-gray-700 text-center">
316
+ <a href="#" class="text-orange-500 hover:text-orange-400 text-sm font-medium">Ver todos os pagamentos</a>
317
+ </div>
318
  </div>
319
+
320
+ <!-- Overdue Clients -->
321
+ <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
322
+ <div class="px-6 py-4 border-b border-gray-700">
323
+ <h2 class="text-lg font-semibold flex items-center">
324
+ <i class="fas fa-exclamation-triangle text-red-400 mr-2"></i>
325
+ Clientes Inadimplentes
326
+ </h2>
327
+ </div>
328
+ <div class="divide-y divide-gray-700">
329
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all">
330
+ <div class="flex items-center">
331
+ <div class="bg-red-900/20 p-2 rounded-lg mr-4">
332
+ <i class="fas fa-exclamation text-red-400"></i>
333
+ </div>
334
+ <div>
335
+ <p class="font-medium">Pedro Alves</p>
336
+ <p class="text-sm text-gray-400">200MB - Bloco 23</p>
337
+ </div>
338
+ </div>
339
+ <div class="text-right">
340
+ <p class="font-medium text-red-400">- R$ 119,90</p>
341
+ <p class="text-sm text-gray-400">Venceu em 05/05/2023</p>
342
+ </div>
343
+ </div>
344
+
345
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all">
346
+ <div class="flex items-center">
347
+ <div class="bg-red-900/20 p-2 rounded-lg mr-4">
348
+ <i class="fas fa-exclamation text-red-400"></i>
349
+ </div>
350
+ <div>
351
+ <p class="font-medium">Luiza Mendes</p>
352
+ <p class="text-sm text-gray-400">100MB - Bloco 19</p>
353
+ </div>
354
+ </div>
355
+ <div class="text-right">
356
+ <p class="font-medium text-red-400">- R$ 89,90</p>
357
+ <p class="text-sm text-gray-400">Venceu em 03/05/2023</p>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all">
362
+ <div class="flex items-center">
363
+ <div class="bg-red-900/20 p-2 rounded-lg mr-4">
364
+ <i class="fas fa-exclamation text-red-400"></i>
365
+ </div>
366
+ <div>
367
+ <p class="font-medium">Ricardo Lima</p>
368
+ <p class="text-sm text-gray-400">300MB - Bloco 24</p>
369
+ </div>
370
+ </div>
371
+ <div class="text-right">
372
+ <p class="font-medium text-red-400">- R$ 149,90</p>
373
+ <p class="text-sm text-gray-400">Venceu em 01/05/2023</p>
374
+ </div>
375
+ </div>
376
+
377
+ <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-700/50 transition-all">
378
+ <div class="flex items-center">
379
+ <div class="bg-red-900/20 p-2 rounded-lg mr-4">
380
+ <i class="fas fa-exclamation text-red-400"></i>
381
+ </div>
382
+ <div>
383
+ <p class="font-medium">Fernanda Rocha</p>
384
+ <p class="text-sm text-gray-400">200MB - Bloco 20</p>
385
+ </div>
386
+ </div>
387
+ <div class="text-right">
388
+ <p class="font-medium text-red-400">- R$ 119,90</p>
389
+ <p class="text-sm text-gray-400">Venceu em 30/04/2023</p>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ <div class="px-6 py-3 border-t border-gray-700 text-center">
394
+ <a href="#" class="text-orange-500 hover:text-orange-400 text-sm font-medium">Ver todos os inadimplentes</a>
395
+ </div>
396
  </div>
397
  </div>
398
+
399
+ <!-- Charts Section -->
400
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
401
+ <!-- Clients Status Chart -->
402
+ <div class="bg-gray-800 rounded-xl shadow-lg p-6">
403
+ <h2 class="text-lg font-semibold mb-4 flex items-center">
404
+ <i class="fas fa-chart-pie text-orange-400 mr-2"></i>
405
+ Status dos Clientes
406
+ </h2>
407
+ <div class="h-64">
408
+ <canvas id="clientsStatusChart"></canvas>
409
+ </div>
410
+ </div>
411
+
412
+
 
 
 
 
 
 
 
 
 
 
 
 
413
  </html>
prompts.txt CHANGED
@@ -1,4 +1,17 @@
1
  estou criando uma empresa de distribuição de internet pois o nome é LIMANET, quero um slogan profissional e chamativo o logo pode ser na construção do sistema que você vai criar pra mim, quero um sistema de controle de assinantes que tenho uma pagina principal com o logo da empresa no meio e embaixo um login e senha pra entrar no sistema quando colocar o login "admin" e a senha "1234" quando clickar uma uma nova tela com uma DASHBOARD completo com informações de clientes em dia com o pagamento e os clientes inadimplentes e bloco e apartamento o condomínio chama "FLORES" TEM 6 BLOCOS "BLOCO19","BLOCO20", "BLOCO21", "BLOCO22", "BLOCO23", "BLOCO24", configure os clientes com dados importantes como o endereço completo bloco e apto, quero também um botão na tela de informações de cliente um botão de cliente ativo ou não ativo e uma opção de qual o plano de internet o cliente possui, planos de internet como 100MB, 200MB, 300MB, pagamentos em boleto, pix, essas informações quero tudo na DASHBOARD, quero um script com todas essas informações sem código.
2
  ✅ Nome da Empresa LIMANET ✅ Slogan Profissional e Chamativo “Conectando você com qualidade e confiança.” ou “Internet rápida, atendimento de verdade.” ou “A sua conexão, do seu jeito — com a LIMANET.” Você pode escolher o que mais combina com o estilo da empresa. ✅ Estrutura do Sistema (sem código, apenas em roteiro) 1. Tela Inicial Tela centralizada com: Logo da LIMANET Campo para login Campo para senha Botão: Entrar Autenticação: Login: admin Senha: 1234 2. Tela Principal: Dashboard da LIMANET Após o login, o sistema redireciona para uma Dashboard Administrativa com as seguintes seções: 🧭 Seções da Dashboard A. Visão Geral Quantidade total de clientes Quantidade de clientes ativos Quantidade de clientes inativos Quantidade de clientes inadimplentes Blocos do condomínio: BLOCO19, BLOCO20, BLOCO21, BLOCO22, BLOCO23, BLOCO24 B. Lista de Clientes Tabela com: Nome completo Endereço completo Bloco e Apartamento Plano de Internet (100MB, 200MB, 300MB) Forma de pagamento (Boleto, Pix) Status do cliente: Ativo / Inativo (com botão de alternância) Situação financeira: Em dia / Inadimplente C. Filtros e Ações Filtro por Bloco Filtro por Status (Ativo/Inativo) Filtro por Plano Botão "Adicionar Cliente" Botão "Editar Cliente" Botão "Remover Cliente" 🧾 Dados por Cliente (detalhado ao clicar no nome do cliente) Nome completo Endereço: Rua, número, complemento, cidade Bloco: BLOCO19 a BLOCO24 Apartamento Plano contratado: 100MB, 200MB, 300MB Forma de pagamento: Pix ou Boleto Status do Cliente: Ativo / Inativo Situação do pagamento: Em dia / Inadimplente Histórico de pagamentos (opcional)
3
  ✅ Nome da Empresa LIMANET ✅ Slogan Profissional e Chamativo “Conectando você com qualidade e confiança.” ou “Internet rápida, atendimento de verdade.” ou “A sua conexão, do seu jeito — com a LIMANET.” Você pode escolher o que mais combina com o estilo da empresa. ✅ Estrutura do Sistema (sem código, apenas em roteiro) 1. Tela Inicial Tela centralizada com: Logo da LIMANET Campo para login Campo para senha Botão: Entrar Autenticação: Login: admin Senha: 1234 2. Tela Principal: Dashboard da LIMANET Após o login, o sistema redireciona para uma Dashboard Administrativa com as seguintes seções: 🧭 Seções da Dashboard A. Visão Geral Quantidade total de clientes Quantidade de clientes ativos Quantidade de clientes inativos Quantidade de clientes inadimplentes Blocos do condomínio: BLOCO19, BLOCO20, BLOCO21, BLOCO22, BLOCO23, BLOCO24 B. Lista de Clientes Tabela com: Nome completo Endereço completo Bloco e Apartamento Plano de Internet (100MB, 200MB, 300MB) Forma de pagamento (Boleto, Pix) Status do cliente: Ativo / Inativo (com botão de alternância) Situação financeira: Em dia / Inadimplente C. Filtros e Ações Filtro por Bloco Filtro por Status (Ativo/Inativo) Filtro por Plano Botão "Adicionar Cliente" Botão "Editar Cliente" Botão "Remover Cliente" 🧾 Dados por Cliente (detalhado ao clicar no nome do cliente) Nome completo Endereço: Rua, número, complemento, cidade Bloco: BLOCO19 a BLOCO24 Apartamento Plano contratado: 100MB, 200MB, 300MB Forma de pagamento: Pix ou Boleto Status do Cliente: Ativo / Inativo Situação do pagamento: Em dia / Inadimplente Histórico de pagamentos (opcional)
4
- ✅ Nome da Empresa LIMANET ✅ Slogan Profissional e Chamativo “Conectando você com qualidade e confiança.” ou “Internet rápida, atendimento de verdade.” ou “A sua conexão, do seu jeito — com a LIMANET.” Você pode escolher o que mais combina com o estilo da empresa. ✅ Estrutura do Sistema (sem código, apenas em roteiro) 1. Tela Inicial Tela centralizada com: Logo da LIMANET Campo para login Campo para senha Botão: Entrar Autenticação: Login: admin Senha: 1234 2. Tela Principal: Dashboard da LIMANET Após o login, o sistema redireciona para uma Dashboard Administrativa com as seguintes seções: 🧭 Seções da Dashboard A. Visão Geral Quantidade total de clientes Quantidade de clientes ativos Quantidade de clientes inativos Quantidade de clientes inadimplentes Blocos do condomínio: BLOCO19, BLOCO20, BLOCO21, BLOCO22, BLOCO23, BLOCO24 B. Lista de Clientes Tabela com: Nome completo Endereço completo Bloco e Apartamento Plano de Internet (100MB, 200MB, 300MB) Forma de pagamento (Boleto, Pix) Status do cliente: Ativo / Inativo (com botão de alternância) Situação financeira: Em dia / Inadimplente C. Filtros e Ações Filtro por Bloco Filtro por Status (Ativo/Inativo) Filtro por Plano Botão "Adicionar Cliente" Botão "Editar Cliente" Botão "Remover Cliente" 🧾 Dados por Cliente (detalhado ao clicar no nome do cliente) Nome completo Endereço: Rua, número, complemento, cidade Bloco: BLOCO19 a BLOCO24 Apartamento Plano contratado: 100MB, 200MB, 300MB Forma de pagamento: Pix ou Boleto Status do Cliente: Ativo / Inativo Situação do pagamento: Em dia / Inadimplente Histórico de pagamentos (opcional)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  estou criando uma empresa de distribuição de internet pois o nome é LIMANET, quero um slogan profissional e chamativo o logo pode ser na construção do sistema que você vai criar pra mim, quero um sistema de controle de assinantes que tenho uma pagina principal com o logo da empresa no meio e embaixo um login e senha pra entrar no sistema quando colocar o login "admin" e a senha "1234" quando clickar uma uma nova tela com uma DASHBOARD completo com informações de clientes em dia com o pagamento e os clientes inadimplentes e bloco e apartamento o condomínio chama "FLORES" TEM 6 BLOCOS "BLOCO19","BLOCO20", "BLOCO21", "BLOCO22", "BLOCO23", "BLOCO24", configure os clientes com dados importantes como o endereço completo bloco e apto, quero também um botão na tela de informações de cliente um botão de cliente ativo ou não ativo e uma opção de qual o plano de internet o cliente possui, planos de internet como 100MB, 200MB, 300MB, pagamentos em boleto, pix, essas informações quero tudo na DASHBOARD, quero um script com todas essas informações sem código.
2
  ✅ Nome da Empresa LIMANET ✅ Slogan Profissional e Chamativo “Conectando você com qualidade e confiança.” ou “Internet rápida, atendimento de verdade.” ou “A sua conexão, do seu jeito — com a LIMANET.” Você pode escolher o que mais combina com o estilo da empresa. ✅ Estrutura do Sistema (sem código, apenas em roteiro) 1. Tela Inicial Tela centralizada com: Logo da LIMANET Campo para login Campo para senha Botão: Entrar Autenticação: Login: admin Senha: 1234 2. Tela Principal: Dashboard da LIMANET Após o login, o sistema redireciona para uma Dashboard Administrativa com as seguintes seções: 🧭 Seções da Dashboard A. Visão Geral Quantidade total de clientes Quantidade de clientes ativos Quantidade de clientes inativos Quantidade de clientes inadimplentes Blocos do condomínio: BLOCO19, BLOCO20, BLOCO21, BLOCO22, BLOCO23, BLOCO24 B. Lista de Clientes Tabela com: Nome completo Endereço completo Bloco e Apartamento Plano de Internet (100MB, 200MB, 300MB) Forma de pagamento (Boleto, Pix) Status do cliente: Ativo / Inativo (com botão de alternância) Situação financeira: Em dia / Inadimplente C. Filtros e Ações Filtro por Bloco Filtro por Status (Ativo/Inativo) Filtro por Plano Botão "Adicionar Cliente" Botão "Editar Cliente" Botão "Remover Cliente" 🧾 Dados por Cliente (detalhado ao clicar no nome do cliente) Nome completo Endereço: Rua, número, complemento, cidade Bloco: BLOCO19 a BLOCO24 Apartamento Plano contratado: 100MB, 200MB, 300MB Forma de pagamento: Pix ou Boleto Status do Cliente: Ativo / Inativo Situação do pagamento: Em dia / Inadimplente Histórico de pagamentos (opcional)
3
  ✅ Nome da Empresa LIMANET ✅ Slogan Profissional e Chamativo “Conectando você com qualidade e confiança.” ou “Internet rápida, atendimento de verdade.” ou “A sua conexão, do seu jeito — com a LIMANET.” Você pode escolher o que mais combina com o estilo da empresa. ✅ Estrutura do Sistema (sem código, apenas em roteiro) 1. Tela Inicial Tela centralizada com: Logo da LIMANET Campo para login Campo para senha Botão: Entrar Autenticação: Login: admin Senha: 1234 2. Tela Principal: Dashboard da LIMANET Após o login, o sistema redireciona para uma Dashboard Administrativa com as seguintes seções: 🧭 Seções da Dashboard A. Visão Geral Quantidade total de clientes Quantidade de clientes ativos Quantidade de clientes inativos Quantidade de clientes inadimplentes Blocos do condomínio: BLOCO19, BLOCO20, BLOCO21, BLOCO22, BLOCO23, BLOCO24 B. Lista de Clientes Tabela com: Nome completo Endereço completo Bloco e Apartamento Plano de Internet (100MB, 200MB, 300MB) Forma de pagamento (Boleto, Pix) Status do cliente: Ativo / Inativo (com botão de alternância) Situação financeira: Em dia / Inadimplente C. Filtros e Ações Filtro por Bloco Filtro por Status (Ativo/Inativo) Filtro por Plano Botão "Adicionar Cliente" Botão "Editar Cliente" Botão "Remover Cliente" 🧾 Dados por Cliente (detalhado ao clicar no nome do cliente) Nome completo Endereço: Rua, número, complemento, cidade Bloco: BLOCO19 a BLOCO24 Apartamento Plano contratado: 100MB, 200MB, 300MB Forma de pagamento: Pix ou Boleto Status do Cliente: Ativo / Inativo Situação do pagamento: Em dia / Inadimplente Histórico de pagamentos (opcional)
4
+ ✅ Nome da Empresa LIMANET ✅ Slogan Profissional e Chamativo “Conectando você com qualidade e confiança.” ou “Internet rápida, atendimento de verdade.” ou “A sua conexão, do seu jeito — com a LIMANET.” Você pode escolher o que mais combina com o estilo da empresa. ✅ Estrutura do Sistema (sem código, apenas em roteiro) 1. Tela Inicial Tela centralizada com: Logo da LIMANET Campo para login Campo para senha Botão: Entrar Autenticação: Login: admin Senha: 1234 2. Tela Principal: Dashboard da LIMANET Após o login, o sistema redireciona para uma Dashboard Administrativa com as seguintes seções: 🧭 Seções da Dashboard A. Visão Geral Quantidade total de clientes Quantidade de clientes ativos Quantidade de clientes inativos Quantidade de clientes inadimplentes Blocos do condomínio: BLOCO19, BLOCO20, BLOCO21, BLOCO22, BLOCO23, BLOCO24 B. Lista de Clientes Tabela com: Nome completo Endereço completo Bloco e Apartamento Plano de Internet (100MB, 200MB, 300MB) Forma de pagamento (Boleto, Pix) Status do cliente: Ativo / Inativo (com botão de alternância) Situação financeira: Em dia / Inadimplente C. Filtros e Ações Filtro por Bloco Filtro por Status (Ativo/Inativo) Filtro por Plano Botão "Adicionar Cliente" Botão "Editar Cliente" Botão "Remover Cliente" 🧾 Dados por Cliente (detalhado ao clicar no nome do cliente) Nome completo Endereço: Rua, número, complemento, cidade Bloco: BLOCO19 a BLOCO24 Apartamento Plano contratado: 100MB, 200MB, 300MB Forma de pagamento: Pix ou Boleto Status do Cliente: Ativo / Inativo Situação do pagamento: Em dia / Inadimplente Histórico de pagamentos (opcional)
5
+ quando cloickar em "ENTRAR" abra uma outra janela com as informações da DASHBOARD
6
+ quando cloickar em "ENTRAR" abra uma outra janela com as informações da DASHBOARD
7
+ quando cloickar em "ENTRAR" abra uma outra janela com as informações da DASHBOARD
8
+ quando cloickar em "ENTRAR" abra uma outra janela com as informações da DASHBOARD
9
+ quando cloickar em "ENTRAR" abra uma outra janela com as informações da DASHBOARD
10
+ Ótimo! Vamos começar com as partes principais do seu projeto: ✅ Nome da Empresa LIMANET ✅ Slogan Profissional e Chamativo “Conectando você com qualidade e confiança.” ou “Internet rápida, atendimento de verdade.” ou “A sua conexão, do seu jeito — com a LIMANET.” Você pode escolher o que mais combina com o estilo da empresa. ✅ Estrutura do Sistema (sem código, apenas em roteiro) 1. Tela Inicial Tela centralizada com: Logo da LIMANET Campo para login Campo para senha Botão: Entrar Autenticação: Login: admin Senha: 1234 2. Tela Principal: Dashboard da LIMANET Após o login, o sistema redireciona para uma Dashboard Administrativa com as seguintes seções: 🧭 Seções da Dashboard A. Visão Geral Quantidade total de clientes Quantidade de clientes ativos Quantidade de clientes inativos Quantidade de clientes inadimplentes Blocos do condomínio: BLOCO19, BLOCO20, BLOCO21, BLOCO22, BLOCO23, BLOCO24 B. Lista de Clientes Tabela com: Nome completo Endereço completo Bloco e Apartamento Plano de Internet (100MB, 200MB, 300MB) Forma de pagamento (Boleto, Pix) Status do cliente: Ativo / Inativo (com botão de alternância) Situação financeira: Em dia / Inadimplente C. Filtros e Ações Filtro por Bloco Filtro por Status (Ativo/Inativo) Filtro por Plano Botão "Adicionar Cliente" Botão "Editar Cliente" Botão "Remover Cliente" 🧾 Dados por Cliente (detalhado ao clicar no nome do cliente) Nome completo Endereço: Rua, número, complemento, cidade Bloco: BLOCO19 a BLOCO24 Apartamento Plano contratado: 100MB, 200MB, 300MB Forma de pagamento: Pix ou Boleto Status do Cliente: Ativo / Inativo Situação do pagamento: Em dia / Inadimplente Histórico de pagamentos (opcional)
11
+ estou criando uma empresa de distribuição de internet pois o nome é LIMANET, quero um slogan profissional e chamativo o logo pode ser na construção do sistema que você vai criar pra mim, quero um sistema de controle de assinantes que tenho uma pagina principal com o logo da empresa no meio e embaixo um login e senha pra entrar no sistema quando colocar o login "admin" e a senha "1234" quando clickar uma uma nova tela com uma DASHBOARD completo com informações de clientes em dia com o pagamento e os clientes inadimplentes e bloco e apartamento o condomínio chama "FLORES" TEM 6 BLOCOS "BLOCO19","BLOCO20", "BLOCO21", "BLOCO22", "BLOCO23", "BLOCO24", configure os clientes com dados importantes como o endereço completo bloco e apto, quero também um botão na tela de informações de cliente um botão de cliente ativo ou não ativo e uma opção de qual o plano de internet o cliente possui, planos de internet como 100MB, 200MB, 300MB, pagamentos em boleto, pix, essas informações quero tudo na DASHBOARD, quero um script com todas essas informações
12
+ estou criando uma empresa de distribuição de internet pois o nome é LIMANET, quero um slogan profissional e chamativo o logo pode ser na construção do sistema que você vai criar pra mim, quero um sistema de controle de assinantes que tenho uma pagina principal com o logo da empresa no meio e embaixo um login e senha pra entrar no sistema quando colocar o login "admin" e a senha "1234" quando clickar uma uma nova tela com uma DASHBOARD completo com informações de clientes em dia com o pagamento e os clientes inadimplentes e bloco e apartamento o condomínio chama "FLORES" TEM 6 BLOCOS "BLOCO19","BLOCO20", "BLOCO21", "BLOCO22", "BLOCO23", "BLOCO24", configure os clientes com dados importantes como o endereço completo bloco e apto, quero também um botão na tela de informações de cliente um botão de cliente ativo ou não ativo e uma opção de qual o plano de internet o cliente possui, planos de internet como 100MB, 200MB, 300MB, pagamentos em boleto, pix, essas informações quero tudo na DASHBOARD, quero um script com todas essas informações
13
+ estou criando uma empresa de distribuição de internet pois o nome é LIMANET, quero um slogan profissional e chamativo o logo pode ser na construção do sistema que você vai criar pra mim, quero um sistema de controle de assinantes que tenho uma pagina principal com o logo da empresa no meio e embaixo um login e senha pra entrar no sistema quando colocar o login "admin" e a senha "1234" quando clickar uma uma nova tela com uma DASHBOARD completo com informações de clientes em dia com o pagamento e os clientes inadimplentes e bloco e apartamento o condomínio chama "FLORES" TEM 6 BLOCOS "BLOCO19","BLOCO20", "BLOCO21", "BLOCO22", "BLOCO23", "BLOCO24", configure os clientes com dados importantes como o endereço completo bloco e apto, quero também um botão na tela de informações de cliente um botão de cliente ativo ou não ativo e uma opção de qual o plano de internet o cliente possui, planos de internet como 100MB, 200MB, 300MB, pagamentos em boleto, pix, essas informações quero tudo na DASHBOARD, quero um script com todas essas informações sem código. Ótimo! Vamos começar com as partes principais do seu projeto: ✅ Nome da Empresa LIMANET ✅ Slogan Profissional e Chamativo “Conectando você com qualidade e confiança.” ou “Internet rápida, atendimento de verdade.” ou “A sua conexão, do seu jeito — com a LIMANET.” Você pode escolher o que mais combina com o estilo da empresa. ✅ Estrutura do Sistema (sem código, apenas em roteiro) 1. Tela Inicial Tela centralizada com: Logo da LIMANET Campo para login Campo para senha Botão: Entrar Autenticação: Login: admin Senha: 1234 2. Tela Principal: Dashboard da LIMANET Após o login, o sistema redireciona para uma Dashboard Administrativa com as seguintes seções: 🧭 Seções da Dashboard A. Visão Geral Quantidade total de clientes Quantidade de clientes ativos Quantidade de clientes inativos Quantidade de clientes inadimplentes Blocos do condomínio: BLOCO19, BLOCO20, BLOCO21, BLOCO22, BLOCO23, BLOCO24 B. Lista de Clientes Tabela com: Nome completo Endereço completo Bloco e Apartamento Plano de Internet (100MB, 200MB, 300MB) Forma de pagamento (Boleto, Pix) Status do cliente: Ativo / Inativo (com botão de alternância) Situação financeira: Em dia / Inadimplente C. Filtros e Ações Filtro por Bloco Filtro por Status (Ativo/Inativo) Filtro por Plano Botão "Adicionar Cliente" Botão "Editar Cliente" Botão "Remover Cliente" 🧾 Dados por Cliente (detalhado ao clicar no nome do cliente) Nome completo Endereço: Rua, número, complemento, cidade Bloco: BLOCO19 a BLOCO24 Apartamento Plano contratado: 100MB, 200MB, 300MB Forma de pagamento: Pix ou Boleto Status do Cliente: Ativo / Inativo Situação do pagamento: Em dia / Inadimplente Histórico de pagamentos (opcional)
14
+ estou criando uma empresa de distribuição de internet pois o nome é LIMANET, quero um slogan profissional e chamativo o logo pode ser na construção do sistema que você vai criar pra mim, quero um sistema de controle de assinantes que tenho uma pagina principal com o logo da empresa no meio e embaixo um login e senha pra entrar no sistema quando colocar o login "admin" e a senha "1234" quando clickar uma uma nova tela com uma DASHBOARD completo com informações de clientes em dia com o pagamento e os clientes inadimplentes e bloco e apartamento o condomínio chama "FLORES" TEM 6 BLOCOS "BLOCO19","BLOCO20", "BLOCO21", "BLOCO22", "BLOCO23", "BLOCO24", configure os clientes com dados importantes como o endereço completo bloco e apto, quero também um botão na tela de informações de cliente um botão de cliente ativo ou não ativo e uma opção de qual o plano de internet o cliente possui, planos de internet como 100MB, 200MB, 300MB, pagamentos em boleto, pix, essas informações quero tudo na DASHBOARD, quero um script com todas essas informações sem código. Ótimo! Vamos começar com as partes principais do seu projeto: ✅ Nome da Empresa LIMANET ✅ Slogan Profissional e Chamativo “Conectando você com qualidade e confiança.” ou “Internet rápida, atendimento de verdade.” ou “A sua conexão, do seu jeito — com a LIMANET.” Você pode escolher o que mais combina com o estilo da empresa. ✅ Estrutura do Sistema (sem código, apenas em roteiro) 1. Tela Inicial Tela centralizada com: Logo da LIMANET Campo para login Campo para senha Botão: Entrar Autenticação: Login: admin Senha: 1234 2. Tela Principal: Dashboard da LIMANET Após o login, o sistema redireciona para uma Dashboard Administrativa com as seguintes seções: 🧭 Seções da Dashboard A. Visão Geral Quantidade total de clientes Quantidade de clientes ativos Quantidade de clientes inativos Quantidade de clientes inadimplentes Blocos do condomínio: BLOCO19, BLOCO20, BLOCO21, BLOCO22, BLOCO23, BLOCO24 B. Lista de Clientes Tabela com: Nome completo Endereço completo Bloco e Apartamento Plano de Internet (100MB, 200MB, 300MB) Forma de pagamento (Boleto, Pix) Status do cliente: Ativo / Inativo (com botão de alternância) Situação financeira: Em dia / Inadimplente C. Filtros e Ações Filtro por Bloco Filtro por Status (Ativo/Inativo) Filtro por Plano Botão "Adicionar Cliente" Botão "Editar Cliente" Botão "Remover Cliente" 🧾 Dados por Cliente (detalhado ao clicar no nome do cliente) Nome completo Endereço: Rua, número, complemento, cidade Bloco: BLOCO19 a BLOCO24 Apartamento Plano contratado: 100MB, 200MB, 300MB Forma de pagamento: Pix ou Boleto Status do Cliente: Ativo / Inativo Situação do pagamento: Em dia / Inadimplente Histórico de pagamentos (opcional)
15
+ estou criando uma empresa de distribuição de internet pois o nome é LIMANET, quero um slogan profissional e chamativo o logo pode ser na construção do sistema que você vai criar pra mim, quero um sistema de controle de assinantes que tenho uma pagina principal com o logo da empresa no meio e embaixo um login e senha pra entrar no sistema quando colocar o login "admin" e a senha "1234" quando clickar uma uma nova tela com uma DASHBOARD completo com informações de clientes em dia com o pagamento e os clientes inadimplentes e bloco e apartamento o condomínio chama "FLORES" TEM 6 BLOCOS "BLOCO19","BLOCO20", "BLOCO21", "BLOCO22", "BLOCO23", "BLOCO24", configure os clientes com dados importantes como o endereço completo bloco e apto, quero também um botão na tela de informações de cliente um botão de cliente ativo ou não ativo e uma opção de qual o plano de internet o cliente possui, planos de internet como 100MB, 200MB, 300MB, pagamentos em boleto, pix, essas informações quero tudo na DASHBOARD, quero um script com todas essas informações sem código. Ótimo! Vamos começar com as partes principais do seu projeto: ✅ Nome da Empresa LIMANET ✅ Slogan Profissional e Chamativo “Conectando você com qualidade e confiança.” ou “Internet rápida, atendimento de verdade.” ou “A sua conexão, do seu jeito — com a LIMANET.” Você pode escolher o que mais combina com o estilo da empresa. ✅ Estrutura do Sistema (sem código, apenas em roteiro) 1. Tela Inicial Tela centralizada com: Logo da LIMANET Campo para login Campo para senha Botão: Entrar Autenticação: Login: admin Senha: 1234 2. Tela Principal: Dashboard da LIMANET Após o login, o sistema redireciona para uma Dashboard Administrativa com as seguintes seções: 🧭 Seções da Dashboard A. Visão Geral Quantidade total de clientes Quantidade de clientes ativos Quantidade de clientes inativos Quantidade de clientes inadimplentes Blocos do condomínio: BLOCO19, BLOCO20, BLOCO21, BLOCO22, BLOCO23, BLOCO24 B. Lista de Clientes Tabela com: Nome completo Endereço completo Bloco e Apartamento Plano de Internet (100MB, 200MB, 300MB) Forma de pagamento (Boleto, Pix) Status do cliente: Ativo / Inativo (com botão de alternância) Situação financeira: Em dia / Inadimplente C. Filtros e Ações Filtro por Bloco Filtro por Status (Ativo/Inativo) Filtro por Plano Botão "Adicionar Cliente" Botão "Editar Cliente" Botão "Remover Cliente" 🧾 Dados por Cliente (detalhado ao clicar no nome do cliente) Nome completo Endereço: Rua, número, complemento, cidade Bloco: BLOCO19 a BLOCO24 Apartamento Plano contratado: 100MB, 200MB, 300MB Forma de pagamento: Pix ou Boleto Status do Cliente: Ativo / Inativo Situação do pagamento: Em dia / Inadimplente Histórico de pagamentos (opcional)
16
+ estou criando uma empresa de distribuição de internet pois o nome é LIMANET, quero um slogan profissional e chamativo o logo pode ser na construção do sistema que você vai criar pra mim, quero um sistema de controle de assinantes que tenho uma pagina principal com o logo da empresa no meio e embaixo um login e senha pra entrar no sistema quando colocar o login "admin" e a senha "1234" quando clickar uma uma nova tela com uma DASHBOARD completo com informações de clientes em dia com o pagamento e os clientes inadimplentes e bloco e apartamento o condomínio chama "FLORES" TEM 6 BLOCOS "BLOCO19","BLOCO20", "BLOCO21", "BLOCO22", "BLOCO23", "BLOCO24", configure os clientes com dados importantes como o endereço completo bloco e apto, quero também um botão na tela de informações de cliente um botão de cliente ativo ou não ativo e uma opção de qual o plano de internet o cliente possui, planos de internet como 100MB, 200MB, 300MB, pagamentos em boleto, pix, essas informações quero tudo na DASHBOARD, quero um script com todas essas informações sem código. Ótimo! Vamos começar com as partes principais do seu projeto: ✅ Nome da Empresa LIMANET ✅ Slogan Profissional e Chamativo “Conectando você com qualidade e confiança.” ou “Internet rápida, atendimento de verdade.” ou “A sua conexão, do seu jeito — com a LIMANET.” Você pode escolher o que mais combina com o estilo da empresa. ✅ Estrutura do Sistema (sem código, apenas em roteiro) 1. Tela Inicial Tela centralizada com: Logo da LIMANET Campo para login Campo para senha Botão: Entrar Autenticação: Login: admin Senha: 1234 2. Tela Principal: Dashboard da LIMANET Após o login, o sistema redireciona para uma Dashboard Administrativa com as seguintes seções: 🧭 Seções da Dashboard A. Visão Geral Quantidade total de clientes Quantidade de clientes ativos Quantidade de clientes inativos Quantidade de clientes inadimplentes Blocos do condomínio: BLOCO19, BLOCO20, BLOCO21, BLOCO22, BLOCO23, BLOCO24 B. Lista de Clientes Tabela com: Nome completo Endereço completo Bloco e Apartamento Plano de Internet (100MB, 200MB, 300MB) Forma de pagamento (Boleto, Pix) Status do cliente: Ativo / Inativo (com botão de alternância) Situação financeira: Em dia / Inadimplente C. Filtros e Ações Filtro por Bloco Filtro por Status (Ativo/Inativo) Filtro por Plano Botão "Adicionar Cliente" Botão "Editar Cliente" Botão "Remover Cliente" 🧾 Dados por Cliente (detalhado ao clicar no nome do cliente) Nome completo Endereço: Rua, número, complemento, cidade Bloco: BLOCO19 a BLOCO24 Apartamento Plano contratado: 100MB, 200MB, 300MB Forma de pagamento: Pix ou Boleto Status do Cliente: Ativo / Inativo Situação do pagamento: Em dia / Inadimplente Histórico de pagamentos (opcional)
17
+ Crie pra mim um sistema de "controle de assinante" no canto superior esquerdo um logo com o nome LIMANET o logo com um desenho que representa o sinal de internet a escrita LIMANET na cor laranja e na borda da esdrita um neon a escrita tem que ser uma fonte tecnológica e com aparência profissional, o sistema tem que ser na cor escuro que tenha as opções "CLIENTES, PLANOS DE ASSINATURA, PAGAMENTOS, FINANCEIRO, CONFIGURAÇÕES" que tenha uma Dashboard com as informações em tópicos na tela referente as opções "CLIENTES, PLANOS DE ASSINATURA, PAGAMENTOS, FINANCEIRO, CONFIGURAÇÕES" e embaixo relatórios simples quem pagou e esta inadiplence os assinantes e a situação mais embaixo com gráficos em formato pizza dando também essas informações, opções da DASHBOARD do lado esquerdo quero as opções "CLIENTES, PLANOS DE ASSINATURA, PAGAMENTOS, FINANCEIRO, CONFIGURAÇÕES",