Admin/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign contacts list to use a table layout for improved readability and organization

Browse Source
This commit is contained in:
chop
2025-12-03 20:58:18 +01:00
parent 02f31cb444
commit 9dd208d168
1 changed files with 123 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/app/contacts/page.js
View File

@@ -293,117 +293,104 @@ export default function ContactsPage() {
</Card>
{/* Contacts List */}
<div className="space-y-3">
<div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
<table className="w-full">
<thead className="bg-gray-50 border-b border-gray-200">
<tr>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Kontakt
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Firma / Stanowisko
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Telefon
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Email
</th>
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
Akcje
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{filteredContacts.length === 0 ? (
<Card>
<CardContent className="text-center py-12">
<p className="text-gray-500">
<tr>
<td colSpan="5" className="px-4 py-12 text-center text-gray-500">
{searchTerm || typeFilter !== "all"
? "Nie znaleziono kontaktów"
: "Brak kontaktów. Dodaj pierwszy kontakt."}
</p>
</CardContent>
</Card>
</td>
</tr>
) : (
filteredContacts.map((contact) => {
const typeBadge = getContactTypeBadge(contact.contact_type);
return (
<Card key={contact.contact_id} className="hover:shadow-md transition-shadow">
<CardContent className="p-4">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div className="flex-1 cursor-pointer" onClick={() => handleViewDetails(contact)}>
<div className="flex flex-wrap items-center gap-2 mb-2">
<h3 className="font-semibold text-gray-900 text-lg hover:text-blue-600 transition-colors">
<tr key={contact.contact_id} className="hover:bg-gray-50 transition-colors">
<td className="px-4 py-3">
<div className="flex items-center gap-2 cursor-pointer" onClick={() => handleViewDetails(contact)}>
<div>
<div className="flex items-center gap-2">
<h3 className="font-semibold text-gray-900 text-sm hover:text-blue-600 transition-colors">
{contact.name}
</h3>
<Badge variant={typeBadge.variant} size="sm">
<Badge variant={typeBadge.variant} size="sm" className="text-xs">
{typeBadge.label}
</Badge>
</div>
{contact.project_count > 0 && (
<span className="inline-flex items-center gap-1 text-xs text-gray-500">
<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"
/>
<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"}
{contact.project_count} {contact.project_count === 1 ? "projekt" : "projektów"}
</span>
)}
</div>
<div className="flex flex-wrap gap-4 text-sm">
</div>
</td>
<td className="px-4 py-3">
<div className="text-sm text-gray-600">
{contact.company && (
<div className="flex items-center gap-1 text-gray-600">
<span className="font-medium">🏢</span>
<div className="flex items-center gap-1">
<span>{contact.company}</span>
{contact.position && (
<span className="text-gray-500">• {contact.position}</span>
)}
{contact.position && <span className="text-gray-500 ml-1">• {contact.position}</span>}
</div>
)}
{!contact.company && contact.position && (
<div className="flex items-center gap-1 text-gray-600">
<span>{contact.position}</span>
</div>
<div>{contact.position}</div>
)}
</div>
<div className="flex flex-wrap gap-4 mt-2">
</td>
<td className="px-4 py-3">
{contact.phone && (
<a
href={`tel:${contact.phone}`}
className="flex items-center gap-1 text-sm text-blue-600 hover:underline"
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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"
/>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
</svg>
{contact.phone}
</a>
)}
</td>
<td className="px-4 py-3">
{contact.email && (
<a
href={`mailto:${contact.email}`}
className="flex items-center gap-1 text-sm text-blue-600 hover:underline"
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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 className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
)}
</div>
</div>
<div className="flex sm:flex-col gap-2">
</td>
<td className="px-4 py-3 text-right">
<div className="flex justify-end gap-1">
<Button
size="sm"
variant="secondary"
@@ -411,22 +398,11 @@ export default function ContactsPage() {
e.stopPropagation();
handleEdit(contact);
}}
className="flex-1 sm:flex-none"
className="px-2 py-1"
>
<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 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>
<span className="hidden md:inline">Edytuj</span>
</Button>
<Button
size="sm"
@@ -435,28 +411,20 @@ export default function ContactsPage() {
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 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>
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
{/* Contact Details Modal */}