feat: redesign contacts list to use a table layout for improved readability and organization
This commit is contained in:
@@ -293,170 +293,138 @@ export default function ContactsPage() {
|
|||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Contacts List */}
|
{/* Contacts List */}
|
||||||
<div className="space-y-3">
|
<div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
|
||||||
{filteredContacts.length === 0 ? (
|
<table className="w-full">
|
||||||
<Card>
|
<thead className="bg-gray-50 border-b border-gray-200">
|
||||||
<CardContent className="text-center py-12">
|
<tr>
|
||||||
<p className="text-gray-500">
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
{searchTerm || typeFilter !== "all"
|
Kontakt
|
||||||
? "Nie znaleziono kontaktów"
|
</th>
|
||||||
: "Brak kontaktów. Dodaj pierwszy kontakt."}
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
</p>
|
Firma / Stanowisko
|
||||||
</CardContent>
|
</th>
|
||||||
</Card>
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
) : (
|
Telefon
|
||||||
filteredContacts.map((contact) => {
|
</th>
|
||||||
const typeBadge = getContactTypeBadge(contact.contact_type);
|
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
return (
|
Email
|
||||||
<Card key={contact.contact_id} className="hover:shadow-md transition-shadow">
|
</th>
|
||||||
<CardContent className="p-4">
|
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
Akcje
|
||||||
<div className="flex-1 cursor-pointer" onClick={() => handleViewDetails(contact)}>
|
</th>
|
||||||
<div className="flex flex-wrap items-center gap-2 mb-2">
|
</tr>
|
||||||
<h3 className="font-semibold text-gray-900 text-lg hover:text-blue-600 transition-colors">
|
</thead>
|
||||||
{contact.name}
|
<tbody className="divide-y divide-gray-200">
|
||||||
</h3>
|
{filteredContacts.length === 0 ? (
|
||||||
<Badge variant={typeBadge.variant} size="sm">
|
<tr>
|
||||||
{typeBadge.label}
|
<td colSpan="5" className="px-4 py-12 text-center text-gray-500">
|
||||||
</Badge>
|
{searchTerm || typeFilter !== "all"
|
||||||
{contact.project_count > 0 && (
|
? "Nie znaleziono kontaktów"
|
||||||
<span className="inline-flex items-center gap-1 text-xs text-gray-500">
|
: "Brak kontaktów. Dodaj pierwszy kontakt."}
|
||||||
<svg
|
</td>
|
||||||
className="w-3 h-3"
|
</tr>
|
||||||
fill="none"
|
) : (
|
||||||
stroke="currentColor"
|
filteredContacts.map((contact) => {
|
||||||
viewBox="0 0 24 24"
|
const typeBadge = getContactTypeBadge(contact.contact_type);
|
||||||
>
|
return (
|
||||||
<path
|
<tr key={contact.contact_id} className="hover:bg-gray-50 transition-colors">
|
||||||
strokeLinecap="round"
|
<td className="px-4 py-3">
|
||||||
strokeLinejoin="round"
|
<div className="flex items-center gap-2 cursor-pointer" onClick={() => handleViewDetails(contact)}>
|
||||||
strokeWidth={2}
|
<div>
|
||||||
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
|
<div className="flex items-center gap-2">
|
||||||
/>
|
<h3 className="font-semibold text-gray-900 text-sm hover:text-blue-600 transition-colors">
|
||||||
</svg>
|
{contact.name}
|
||||||
{contact.project_count}{" "}
|
</h3>
|
||||||
{contact.project_count === 1 ? "projekt" : "projektów"}
|
<Badge variant={typeBadge.variant} size="sm" className="text-xs">
|
||||||
</span>
|
{typeBadge.label}
|
||||||
)}
|
</Badge>
|
||||||
|
</div>
|
||||||
|
{contact.project_count > 0 && (
|
||||||
|
<span className="inline-flex items-center gap-1 text-xs text-gray-500 mt-1">
|
||||||
|
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||||
|
</svg>
|
||||||
|
{contact.project_count} {contact.project_count === 1 ? "projekt" : "projektów"}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</td>
|
||||||
<div className="flex flex-wrap gap-4 text-sm">
|
<td className="px-4 py-3">
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
{contact.company && (
|
{contact.company && (
|
||||||
<div className="flex items-center gap-1 text-gray-600">
|
<div className="flex items-center gap-1">
|
||||||
<span className="font-medium">🏢</span>
|
|
||||||
<span>{contact.company}</span>
|
<span>{contact.company}</span>
|
||||||
{contact.position && (
|
{contact.position && <span className="text-gray-500 ml-1">• {contact.position}</span>}
|
||||||
<span className="text-gray-500">• {contact.position}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{!contact.company && contact.position && (
|
{!contact.company && contact.position && (
|
||||||
<div className="flex items-center gap-1 text-gray-600">
|
<div>{contact.position}</div>
|
||||||
<span>{contact.position}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</td>
|
||||||
<div className="flex flex-wrap gap-4 mt-2">
|
<td className="px-4 py-3">
|
||||||
{contact.phone && (
|
{contact.phone && (
|
||||||
<a
|
<a
|
||||||
href={`tel:${contact.phone}`}
|
href={`tel:${contact.phone}`}
|
||||||
className="flex items-center gap-1 text-sm text-blue-600 hover:underline"
|
className="flex items-center gap-1 text-sm text-blue-600 hover:underline"
|
||||||
>
|
>
|
||||||
<svg
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
className="w-4 h-4"
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||||
fill="none"
|
</svg>
|
||||||
stroke="currentColor"
|
{contact.phone}
|
||||||
viewBox="0 0 24 24"
|
</a>
|
||||||
>
|
)}
|
||||||
<path
|
</td>
|
||||||
strokeLinecap="round"
|
<td className="px-4 py-3">
|
||||||
strokeLinejoin="round"
|
{contact.email && (
|
||||||
strokeWidth={2}
|
<a
|
||||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
|
href={`mailto:${contact.email}`}
|
||||||
/>
|
className="flex items-center gap-1 text-sm text-blue-600 hover:underline"
|
||||||
</svg>
|
>
|
||||||
{contact.phone}
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
</a>
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||||
)}
|
</svg>
|
||||||
{contact.email && (
|
<span className="truncate max-w-[200px]">{contact.email}</span>
|
||||||
<a
|
</a>
|
||||||
href={`mailto:${contact.email}`}
|
)}
|
||||||
className="flex items-center gap-1 text-sm text-blue-600 hover:underline"
|
</td>
|
||||||
>
|
<td className="px-4 py-3 text-right">
|
||||||
<svg
|
<div className="flex justify-end gap-1">
|
||||||
className="w-4 h-4"
|
<Button
|
||||||
fill="none"
|
size="sm"
|
||||||
stroke="currentColor"
|
variant="secondary"
|
||||||
viewBox="0 0 24 24"
|
onClick={(e) => {
|
||||||
>
|
e.stopPropagation();
|
||||||
<path
|
handleEdit(contact);
|
||||||
strokeLinecap="round"
|
}}
|
||||||
strokeLinejoin="round"
|
className="px-2 py-1"
|
||||||
strokeWidth={2}
|
>
|
||||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
/>
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||||
</svg>
|
</svg>
|
||||||
{contact.email}
|
</Button>
|
||||||
</a>
|
<Button
|
||||||
)}
|
size="sm"
|
||||||
|
variant="danger"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
handleDelete(contact.contact_id);
|
||||||
|
}}
|
||||||
|
className="px-2 py-1"
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</td>
|
||||||
|
</tr>
|
||||||
<div className="flex sm:flex-col gap-2">
|
);
|
||||||
<Button
|
})
|
||||||
size="sm"
|
)}
|
||||||
variant="secondary"
|
</tbody>
|
||||||
onClick={(e) => {
|
</table>
|
||||||
e.stopPropagation();
|
|
||||||
handleEdit(contact);
|
|
||||||
}}
|
|
||||||
className="flex-1 sm:flex-none"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className="w-4 h-4 sm:mr-0 md:mr-2"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="hidden md:inline">Edytuj</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="danger"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
handleDelete(contact.contact_id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className="w-4 h-4"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Contact Details Modal */}
|
{/* Contact Details Modal */}
|
||||||
|
|||||||
Reference in New Issue
Block a user