From cb815177a12c423399d3f7f055e0f94b38482817 Mon Sep 17 00:00:00 2001
From: chop <rkwojs@gmail.com>
Date: Mon, 26 Jan 2026 22:46:24 +0100
Subject: [PATCH] feat: Enhance contact cards with dynamic type filtering and
 hover effects

---
 src/app/contacts/page.js | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app/contacts/page.js b/src/app/contacts/page.js
index 6d2b5a1..c370e7b 100644
--- a/src/app/contacts/page.js
+++ b/src/app/contacts/page.js
@@ -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}