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> </Card>
{/* Contacts List */} {/* 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 ? ( {filteredContacts.length === 0 ? (
<Card> <tr>
<CardContent className="text-center py-12"> <td colSpan="5" className="px-4 py-12 text-center text-gray-500">
<p className="text-gray-500">
{searchTerm || typeFilter !== "all" {searchTerm || typeFilter !== "all"
? "Nie znaleziono kontaktów" ? "Nie znaleziono kontaktów"
: "Brak kontaktów. Dodaj pierwszy kontakt."} : "Brak kontaktów. Dodaj pierwszy kontakt."}
</p> </td>
</CardContent> </tr>
</Card>
) : ( ) : (
filteredContacts.map((contact) => { filteredContacts.map((contact) => {
const typeBadge = getContactTypeBadge(contact.contact_type); const typeBadge = getContactTypeBadge(contact.contact_type);
return ( return (
<Card key={contact.contact_id} className="hover:shadow-md transition-shadow"> <tr key={contact.contact_id} className="hover:bg-gray-50 transition-colors">
<CardContent className="p-4"> <td className="px-4 py-3">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4"> <div className="flex items-center gap-2 cursor-pointer" onClick={() => handleViewDetails(contact)}>
<div className="flex-1 cursor-pointer" onClick={() => handleViewDetails(contact)}> <div>
<div className="flex flex-wrap items-center gap-2 mb-2"> <div className="flex items-center gap-2">
<h3 className="font-semibold text-gray-900 text-lg hover:text-blue-600 transition-colors"> <h3 className="font-semibold text-gray-900 text-sm hover:text-blue-600 transition-colors">
{contact.name} {contact.name}
</h3> </h3>
<Badge variant={typeBadge.variant} size="sm"> <Badge variant={typeBadge.variant} size="sm" className="text-xs">
{typeBadge.label} {typeBadge.label}
</Badge> </Badge>
</div>
{contact.project_count > 0 && ( {contact.project_count > 0 && (
<span className="inline-flex items-center gap-1 text-xs text-gray-500"> <span className="inline-flex items-center gap-1 text-xs text-gray-500 mt-1">
<svg <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
className="w-3 h-3" <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" />
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> </svg>
{contact.project_count}{" "} {contact.project_count} {contact.project_count === 1 ? "projekt" : "projektów"}
{contact.project_count === 1 ? "projekt" : "projektów"}
</span> </span>
)} )}
</div> </div>
</div>
<div className="flex flex-wrap gap-4 text-sm"> </td>
<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"
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> </svg>
{contact.phone} {contact.phone}
</a> </a>
)} )}
</td>
<td className="px-4 py-3">
{contact.email && ( {contact.email && (
<a <a
href={`mailto:${contact.email}`} href={`mailto:${contact.email}`}
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 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" />
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> </svg>
{contact.email} <span className="truncate max-w-[200px]">{contact.email}</span>
</a> </a>
)} )}
</div> </td>
</div> <td className="px-4 py-3 text-right">
<div className="flex justify-end gap-1">
<div className="flex sm:flex-col gap-2">
<Button <Button
size="sm" size="sm"
variant="secondary" variant="secondary"
@@ -411,22 +398,11 @@ export default function ContactsPage() {
e.stopPropagation(); e.stopPropagation();
handleEdit(contact); handleEdit(contact);
}} }}
className="flex-1 sm:flex-none" className="px-2 py-1"
> >
<svg <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
className="w-4 h-4 sm:mr-0 md:mr-2" <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" />
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>
<span className="hidden md:inline">Edytuj</span>
</Button> </Button>
<Button <Button
size="sm" size="sm"
@@ -435,28 +411,20 @@ export default function ContactsPage() {
e.stopPropagation(); e.stopPropagation();
handleDelete(contact.contact_id); handleDelete(contact.contact_id);
}} }}
className="px-2 py-1"
> >
<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="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" />
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> </svg>
</Button> </Button>
</div> </div>
</div> </td>
</CardContent> </tr>
</Card>
); );
}) })
)} )}
</tbody>
</table>
</div> </div>
{/* Contact Details Modal */} {/* Contact Details Modal */}