Skip to content

Commit f2c26ce

Browse files
RabbitVisualRabbitVisual
committed
feat: Enhance subscription management with cancellation functionality, update UI components for better user experience, and improve account card display logic.
1 parent e5d98fa commit f2c26ce

12 files changed

Lines changed: 687 additions & 416 deletions

File tree

‎Modules/Core/resources/views/components/account-card-pro.blade.php‎

Lines changed: 50 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -6,91 +6,71 @@
66

77
@php
88
$displayNumber = '•••• •••• •••• ' . str_pad((string) ($account->id % 10000), 4, '0', STR_PAD_LEFT);
9+
$user = auth()->user();
10+
$profileName = $user && trim($user->full_name) !== '' ? $user->full_name : '';
911
@endphp
1012

11-
{{-- Proporção ~1.586 (cartão físico). Animação: 0.6s, curva suave sem overshoot --}}
12-
<div class="account-card-pro group relative w-full max-w-[352px] h-[222px] mx-auto" x-data="{ flipped: false }">
13-
<div class="relative w-full h-full cursor-pointer select-none" style="perspective: 2200px;" @click="flipped = !flipped" title="Clique para virar o cartão">
14-
{{-- Frente --}}
15-
<div class="absolute inset-0 rounded-[1rem] overflow-hidden bg-gradient-to-br {{ $gradient }} shadow-xl"
16-
style="transform-style: preserve-3d; backface-visibility: hidden; transition: transform 0.55s cubic-bezier(0.45, 0, 0.25, 1);"
17-
:style="flipped ? 'transform: rotateY(-180deg);' : 'transform: rotateY(0deg);'"
18-
x-ref="card">
19-
<div class="absolute inset-0 bg-[rgba(6,2,29,0.32)]"></div>
20-
<div class="relative z-10 h-full flex flex-col justify-between p-5 text-white">
21-
<div class="flex items-start justify-between gap-2">
22-
<div class="flex items-center gap-2 shrink-0">
23-
<img src="{{ asset('storage/logos/icon.svg') }}" alt="" class="w-6 h-6 shrink-0 drop-shadow-md" width="24" height="24" />
24-
<div class="w-11 h-9 rounded-md bg-gradient-to-br from-amber-200 via-amber-100 to-amber-300 shadow-inner flex items-center justify-center border border-amber-400/40">
25-
<div class="grid grid-cols-2 gap-0.5 w-7 h-5">
26-
@for ($i = 0; $i < 8; $i++)
27-
<div class="bg-amber-600/50 rounded-sm"></div>
28-
@endfor
29-
</div>
30-
</div>
31-
</div>
32-
<x-icon name="cc-visa" style="brands" class="w-9 h-9 opacity-95 shrink-0" />
33-
</div>
34-
<div>
35-
<p class="sensitive-value text-base font-mono font-semibold tracking-[0.22em] tabular-nums mb-3" style="text-shadow: 0 2px 8px rgba(0,0,0,0.3);">{{ $displayNumber }}</p>
36-
<div class="flex items-end justify-between gap-3">
37-
<div class="min-w-0 flex-1">
38-
<p class="text-[10px] text-white/75 uppercase tracking-widest mb-0.5">Nome no cartão</p>
39-
<p class="font-semibold text-sm uppercase truncate tracking-wide" style="text-shadow: 0 2px 6px rgba(0,0,0,0.4);">{{ Str::upper($account->name) }}</p>
40-
</div>
41-
<div class="text-right shrink-0">
42-
<p class="text-[9px] text-white/75 uppercase tracking-wider">Saldo</p>
43-
<p class="sensitive-value text-sm font-mono font-black tabular-nums leading-tight" style="text-shadow: 0 2px 6px rgba(0,0,0,0.4);">R$ {{ number_format($account->balance, 2, ',', '.') }}</p>
13+
{{-- Apenas frente do cartão — padrão Brasil Code, sem flip; logo Vertex em destaque --}}
14+
<div class="account-card-pro group relative w-full max-w-[352px] h-[222px] mx-auto">
15+
<div class="relative w-full h-full rounded-[1rem] overflow-hidden bg-gradient-to-br {{ $gradient }} shadow-xl">
16+
{{-- Overlay escuro --}}
17+
<div class="absolute inset-0 bg-[rgba(6,2,29,0.35)]"></div>
18+
19+
{{-- Logo Vertex em marca d'água (fundo, canto direito) --}}
20+
<div class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-6 w-28 h-28 opacity-20 pointer-events-none" aria-hidden="true">
21+
<img src="{{ asset('storage/logos/icon.svg') }}" alt="" class="w-full h-full object-contain" width="112" height="112" />
22+
</div>
23+
24+
<div class="relative z-10 h-full flex flex-col justify-between p-5 text-white" style="text-shadow: 0 2px 10px rgba(0,0,0,0.4);">
25+
{{-- Topo: chip, logo Vertex, Visa --}}
26+
<div class="flex items-start justify-between gap-2">
27+
<div class="flex items-center gap-2.5 shrink-0">
28+
<div class="w-11 h-9 rounded-md bg-gradient-to-br from-amber-200 via-amber-100 to-amber-300 shadow-inner flex items-center justify-center border border-amber-400/40">
29+
<div class="grid grid-cols-2 gap-0.5 w-7 h-5">
30+
@for ($i = 0; $i < 8; $i++)
31+
<div class="bg-amber-600/50 rounded-sm"></div>
32+
@endfor
4433
</div>
4534
</div>
35+
<img src="{{ asset('storage/logos/icon.svg') }}" alt="Vertex Contas" class="w-7 h-7 shrink-0 drop-shadow-md" width="28" height="28" />
4636
</div>
37+
<x-icon name="cc-visa" style="brands" class="w-9 h-9 opacity-95 shrink-0" />
4738
</div>
48-
</div>
4939

50-
{{-- Verso --}}
51-
<div class="absolute inset-0 rounded-[1rem] overflow-hidden bg-gradient-to-br {{ $gradient }} shadow-xl"
52-
style="transform-style: preserve-3d; backface-visibility: hidden; transform: rotateY(180deg); transition: transform 0.55s cubic-bezier(0.45, 0, 0.25, 1);"
53-
:style="flipped ? 'transform: rotateY(0deg);' : 'transform: rotateY(180deg);'">
54-
<div class="absolute inset-0 bg-[rgba(6,2,29,0.32)]"></div>
55-
<div class="relative z-10 h-full flex flex-col">
56-
<div class="w-full h-11 mt-5 bg-black/75 shrink-0" aria-hidden="true"></div>
57-
<div class="flex-1 px-4 py-3 flex flex-col justify-end items-end gap-2">
58-
<div class="w-full max-w-[92%] h-9 bg-white/95 rounded-md flex items-center justify-end gap-2 px-3 text-slate-800">
59-
<img src="{{ asset('storage/logos/icon.svg') }}" alt="" class="w-5 h-5 shrink-0" width="20" height="20" />
60-
<span class="text-xs font-bold text-emerald-700">Vertex Contas</span>
61-
<span class="text-slate-400">•</span>
62-
<span class="text-xs font-bold text-amber-600">Pro</span>
40+
{{-- Número + titular + saldo --}}
41+
<div>
42+
<p class="sensitive-value text-base font-mono font-semibold tracking-[0.22em] tabular-nums mb-4">{{ $displayNumber }}</p>
43+
<div class="flex items-end justify-between gap-4">
44+
<div class="min-w-0 flex-1">
45+
<p class="font-semibold text-sm uppercase truncate tracking-wide">{{ Str::upper($account->name) }}</p>
46+
@if($profileName !== '')
47+
<p class="text-[10px] text-white/80 truncate mt-0.5">{{ $profileName }}</p>
48+
@endif
6349
</div>
64-
<p class="text-[10px] text-white/60 uppercase tracking-wider">Assinante</p>
65-
<div class="flex justify-end">
66-
<x-icon name="cc-visa" style="brands" class="w-8 h-8 text-white/90" />
50+
<div class="text-right shrink-0">
51+
<p class="text-[9px] text-white/80 uppercase tracking-wider">Saldo</p>
52+
<p class="sensitive-value text-sm font-mono font-black tabular-nums leading-tight">R$ {{ number_format($account->balance, 2, ',', '.') }}</p>
6753
</div>
6854
</div>
6955
</div>
7056
</div>
7157
</div>
7258

7359
@if($showActions)
74-
<div class="absolute inset-0 rounded-[1rem] bg-black/50 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-3 z-20 pointer-events-none group-hover:pointer-events-auto">
75-
<span class="pointer-events-auto">
76-
<a href="{{ route('core.accounts.show', $account) }}" class="p-3 bg-white/25 hover:bg-white/35 rounded-xl text-white transition-colors inline-flex" title="Ver">
77-
<x-icon name="eye" style="solid" class="w-5 h-5" />
78-
</a>
79-
</span>
80-
<span class="pointer-events-auto">
81-
<a href="{{ route('core.accounts.edit', $account) }}" class="p-3 bg-white/25 hover:bg-white/35 rounded-xl text-white transition-colors inline-flex" title="Editar">
82-
<x-icon name="pencil" style="solid" class="w-5 h-5" />
83-
</a>
84-
</span>
85-
<span class="pointer-events-auto">
86-
<form action="{{ route('core.accounts.destroy', $account) }}" method="POST" class="inline" onsubmit="return confirm('Excluir esta conta? Ela não pode ter transações.');">
87-
@csrf
88-
@method('DELETE')
89-
<button type="submit" class="p-3 bg-red-500/40 hover:bg-red-500/60 rounded-xl text-white transition-colors inline-flex" title="Excluir">
90-
<x-icon name="trash-can" style="solid" class="w-5 h-5" />
91-
</button>
92-
</form>
93-
</span>
60+
<div class="absolute inset-0 rounded-[1rem] bg-black/50 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center gap-3 z-20 pointer-events-none">
61+
<a href="{{ route('core.accounts.show', $account) }}" class="pointer-events-auto p-3 bg-white/25 hover:bg-white/35 rounded-xl text-white transition-colors inline-flex" title="Ver">
62+
<x-icon name="eye" style="solid" class="w-5 h-5" />
63+
</a>
64+
<a href="{{ route('core.accounts.edit', $account) }}" class="pointer-events-auto p-3 bg-white/25 hover:bg-white/35 rounded-xl text-white transition-colors inline-flex" title="Editar">
65+
<x-icon name="pencil" style="solid" class="w-5 h-5" />
66+
</a>
67+
<form action="{{ route('core.accounts.destroy', $account) }}" method="POST" class="pointer-events-auto inline" onsubmit="return confirm('Excluir esta conta? Ela não pode ter transações.');">
68+
@csrf
69+
@method('DELETE')
70+
<button type="submit" class="p-3 bg-red-500/40 hover:bg-red-500/60 rounded-xl text-white transition-colors inline-flex" title="Excluir">
71+
<x-icon name="trash-can" style="solid" class="w-5 h-5" />
72+
</button>
73+
</form>
9474
</div>
9575
@endif
9676
</div>

0 commit comments

Comments
 (0)