feat: Enhance contact cards with dynamic type filtering and hover effects

This commit is contained in:
2026-01-26 22:46:24 +01:00
parent 7335d17900
commit cb815177a1

View File

@@ -207,7 +207,10 @@ export default function ContactsPage() {
{/* Stats */}
{stats && (
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
<Card>
<Card
className={`cursor-pointer transition-all hover:shadow-lg ${typeFilter === 'all' ? 'ring-2 ring-gray-900' : ''}`}
onClick={() => setTypeFilter('all')}
>
<CardContent className="p-4">
<div className="text-2xl font-bold text-gray-900">
{stats.total_contacts}
@@ -215,7 +218,10 @@ export default function ContactsPage() {
<div className="text-sm text-gray-600">Wszystkie</div>
</CardContent>
</Card>
<Card>
<Card
className={`cursor-pointer transition-all hover:shadow-lg ${typeFilter === 'project' ? 'ring-2 ring-blue-600' : ''}`}
onClick={() => setTypeFilter('project')}
>
<CardContent className="p-4">
<div className="text-2xl font-bold text-blue-600">
{stats.project_contacts}
@@ -223,7 +229,10 @@ export default function ContactsPage() {
<div className="text-sm text-gray-600">Projekty</div>
</CardContent>
</Card>
<Card>
<Card
className={`cursor-pointer transition-all hover:shadow-lg ${typeFilter === 'contractor' ? 'ring-2 ring-orange-600' : ''}`}
onClick={() => setTypeFilter('contractor')}
>
<CardContent className="p-4">
<div className="text-2xl font-bold text-orange-600">
{stats.contractor_contacts}
@@ -231,7 +240,10 @@ export default function ContactsPage() {
<div className="text-sm text-gray-600">Wykonawcy</div>
</CardContent>
</Card>
<Card>
<Card
className={`cursor-pointer transition-all hover:shadow-lg ${typeFilter === 'office' ? 'ring-2 ring-purple-600' : ''}`}
onClick={() => setTypeFilter('office')}
>
<CardContent className="p-4">
<div className="text-2xl font-bold text-purple-600">
{stats.office_contacts}
@@ -239,7 +251,10 @@ export default function ContactsPage() {
<div className="text-sm text-gray-600">Urzędy</div>
</CardContent>
</Card>
<Card>
<Card
className={`cursor-pointer transition-all hover:shadow-lg ${typeFilter === 'supplier' ? 'ring-2 ring-green-600' : ''}`}
onClick={() => setTypeFilter('supplier')}
>
<CardContent className="p-4">
<div className="text-2xl font-bold text-green-600">
{stats.supplier_contacts}
@@ -247,7 +262,10 @@ export default function ContactsPage() {
<div className="text-sm text-gray-600">Dostawcy</div>
</CardContent>
</Card>
<Card>
<Card
className={`cursor-pointer transition-all hover:shadow-lg ${typeFilter === 'other' ? 'ring-2 ring-gray-600' : ''}`}
onClick={() => setTypeFilter('other')}
>
<CardContent className="p-4">
<div className="text-2xl font-bold text-gray-600">
{stats.other_contacts}