-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdashboard.html
More file actions
180 lines (170 loc) · 7.06 KB
/
Copy pathdashboard.html
File metadata and controls
180 lines (170 loc) · 7.06 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!-- Page Header -->
<app-page-header
title="Dashboard Executivo"
subtitle="Painel de controle central de catálogo, compatibilidade e autopeças Reccos Shop."
[breadcrumbs]="[{ label: 'Dashboard' }]"
>
<div actions class="flex items-center gap-2">
<app-button variant="outline" size="sm" iconStart="refresh-cw" (btnClick)="refreshStats()">
Atualizar Dados
</app-button>
<app-button
variant="primary"
size="sm"
iconStart="plus"
(btnClick)="navTo('/catalog/products')"
>
Novo Produto
</app-button>
</div>
</app-page-header>
<!-- Welcome Card -->
<div
class="p-6 bg-gradient-to-r from-[#4F8A6B] to-[#38624C] text-white rounded-[16px] shadow-sm mb-6 flex flex-col md:flex-row md:items-center justify-between gap-4"
>
<div>
<span
class="px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider bg-white/20 rounded-md backdrop-blur-xs"
>
Bem-vindo ao Reccos Shop
</span>
<h2 class="text-xl sm:text-2xl font-bold mt-2 leading-tight">
Plataforma de Autopeças e Gestão de Catálogo
</h2>
<p class="text-xs sm:text-sm text-white/80 mt-1 max-w-2xl leading-relaxed">
Centralize códigos OEM, compatibilidade veicular, gestão de fabricantes e estoque integrado em
uma única interface padronizada.
</p>
</div>
<div class="flex items-center gap-2 shrink-0">
<app-button
variant="secondary"
size="sm"
iconEnd="chevron-right"
(btnClick)="navTo('/catalog/products')"
>
Explorar Catálogo
</app-button>
</div>
</div>
<!-- Executive Quick Stats Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div
class="p-4 bg-white dark:bg-slate-800 rounded-[12px] border border-gray-100 dark:border-slate-700/80 shadow-xs flex items-center justify-between"
>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-slate-400">Total de Produtos</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-slate-100 mt-1">12.480</h3>
<span class="text-[10px] text-[#5BAE6A] font-semibold flex items-center gap-0.5 mt-0.5">
+142 cadastrados este mês
</span>
</div>
<div
class="p-3 bg-[#EAF4EE] dark:bg-[#4F8A6B]/20 text-[#4F8A6B] dark:text-[#5BAE6A] rounded-xl"
>
<app-icon name="box" size="w-6 h-6" />
</div>
</div>
<div
class="p-4 bg-white dark:bg-slate-800 rounded-[12px] border border-gray-100 dark:border-slate-700/80 shadow-xs flex items-center justify-between"
>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-slate-400">Aplicações Veiculares</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-slate-100 mt-1">48.920</h3>
<span class="text-[10px] text-gray-400 font-medium mt-0.5">Cruzamento por modelo/ano</span>
</div>
<div class="p-3 bg-blue-50 dark:bg-blue-950/50 text-[#5A8DEE] rounded-xl">
<app-icon name="car" size="w-6 h-6" />
</div>
</div>
<div
class="p-4 bg-white dark:bg-slate-800 rounded-[12px] border border-gray-100 dark:border-slate-700/80 shadow-xs flex items-center justify-between"
>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-slate-400">Mapeamentos OEM</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-slate-100 mt-1">32.110</h3>
<span class="text-[10px] text-[#5BAE6A] font-semibold mt-0.5">99.2% de precisão</span>
</div>
<div class="p-3 bg-emerald-50 dark:bg-emerald-950/50 text-[#5BAE6A] rounded-xl">
<app-icon name="layers" size="w-6 h-6" />
</div>
</div>
<div
class="p-4 bg-white dark:bg-slate-800 rounded-[12px] border border-gray-100 dark:border-slate-700/80 shadow-xs flex items-center justify-between"
>
<div>
<p class="text-xs font-medium text-gray-500 dark:text-slate-400">Alertas de Estoque</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-slate-100 mt-1">42</h3>
<span class="text-[10px] text-[#D66A6A] font-semibold mt-0.5">Depósito Central SP</span>
</div>
<div class="p-3 bg-rose-50 dark:bg-rose-950/50 text-[#D66A6A] rounded-xl">
<app-icon name="shopping-bag" size="w-6 h-6" />
</div>
</div>
</div>
<!-- Operational Modules Cards -->
<h3 class="text-sm font-semibold text-gray-900 dark:text-slate-100 mb-3">
Módulos Operacionais Principais
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<button
type="button"
(click)="navTo('/catalog/products')"
class="text-left p-5 bg-white dark:bg-slate-800 rounded-[12px] border border-gray-100 dark:border-slate-700/80 shadow-xs hover:border-[#4F8A6B] transition-all cursor-pointer group focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/30"
>
<div class="flex items-center justify-between mb-3">
<div class="p-2.5 bg-[#EAF4EE] dark:bg-[#4F8A6B]/20 text-[#4F8A6B] rounded-xl">
<app-icon name="box" size="w-6 h-6" />
</div>
<app-badge variant="primary">Catálogo</app-badge>
</div>
<h4
class="text-sm font-bold text-gray-900 dark:text-slate-100 group-hover:text-[#4F8A6B] transition-colors"
>
Catálogo de Peças
</h4>
<p class="text-xs text-gray-500 dark:text-slate-400 mt-1 leading-relaxed">
Categorias, fabricantes, tags de busca e cadastro mestre de produtos.
</p>
</button>
<button
type="button"
(click)="navTo('/compatibility/oem-codes')"
class="text-left p-5 bg-white dark:bg-slate-800 rounded-[12px] border border-gray-100 dark:border-slate-700/80 shadow-xs hover:border-[#4F8A6B] transition-all cursor-pointer group focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/30"
>
<div class="flex items-center justify-between mb-3">
<div class="p-2.5 bg-blue-50 dark:bg-blue-950/50 text-[#5A8DEE] rounded-xl">
<app-icon name="layers" size="w-6 h-6" />
</div>
<app-badge variant="info">Compatibilidade</app-badge>
</div>
<h4
class="text-sm font-bold text-gray-900 dark:text-slate-100 group-hover:text-[#4F8A6B] transition-colors"
>
OEM & Equivalência
</h4>
<p class="text-xs text-gray-500 dark:text-slate-400 mt-1 leading-relaxed">
Tabela cruzada de códigos equivalentes, montadoras e conversão de autopeças.
</p>
</button>
<button
type="button"
(click)="navTo('/commercial/inventory')"
class="text-left p-5 bg-white dark:bg-slate-800 rounded-[12px] border border-gray-100 dark:border-slate-700/80 shadow-xs hover:border-[#4F8A6B] transition-all cursor-pointer group focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/30"
>
<div class="flex items-center justify-between mb-3">
<div class="p-2.5 bg-amber-50 dark:bg-amber-950/50 text-[#E9B949] rounded-xl">
<app-icon name="shopping-bag" size="w-6 h-6" />
</div>
<app-badge variant="warning">Comercial</app-badge>
</div>
<h4
class="text-sm font-bold text-gray-900 dark:text-slate-100 group-hover:text-[#4F8A6B] transition-colors"
>
Estoque & Preços
</h4>
<p class="text-xs text-gray-500 dark:text-slate-400 mt-1 leading-relaxed">
Ajuste de saldo, depósitos distribuídos, tabelas de preço e fornecedores.
</p>
</button>
</div>