Changes
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
co-authored by
renee-png
renee-png
parent
58b00b12ae
commit
1664d34b04
@@ -213,63 +213,63 @@ function ContactsIndex() {
|
||||
<div className="divide-y">
|
||||
{grouped.map(([letter, items]) => (
|
||||
<div key={letter}>
|
||||
<div className="px-4 py-1.5 bg-muted/50 text-xs font-semibold text-muted-foreground sticky top-0">
|
||||
<div className="px-4 py-1.5 bg-muted/50 text-xs font-semibold text-muted-foreground">
|
||||
{letter}
|
||||
</div>
|
||||
<ul className="divide-y">
|
||||
{items.map((c) => {
|
||||
const typeLabel = CONTACT_TYPES.find((t) => t.value === c.contact_type)?.label ?? c.contact_type;
|
||||
const canEdit = isAdmin || c.created_by === user?.id;
|
||||
return (
|
||||
<li key={c.id} className="px-4 py-3 hover:bg-muted/40 transition-colors">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
to="/contacts/$contactId"
|
||||
params={{ contactId: c.id }}
|
||||
className="flex-1 min-w-0 flex items-center gap-3"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium truncate">{c.name}</span>
|
||||
<Badge variant="outline" className="text-[10px]">{typeLabel}</Badge>
|
||||
{c.title && <span className="text-xs text-muted-foreground">{c.title}</span>}
|
||||
const typeLabel = CONTACT_TYPES.find((t) => t.value === c.contact_type)?.label ?? c.contact_type;
|
||||
const canEdit = isAdmin || c.created_by === user?.id;
|
||||
return (
|
||||
<li key={c.id} className="px-4 py-3 hover:bg-muted/40 transition-colors">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
to="/contacts/$contactId"
|
||||
params={{ contactId: c.id }}
|
||||
className="flex-1 min-w-0 flex items-center gap-3"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium truncate">{c.name}</span>
|
||||
<Badge variant="outline" className="text-[10px]">{typeLabel}</Badge>
|
||||
{c.title && <span className="text-xs text-muted-foreground">{c.title}</span>}
|
||||
</div>
|
||||
<div className="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-muted-foreground">
|
||||
{c.company && <span className="flex items-center gap-1.5"><Building2 className="h-3 w-3" />{c.company}</span>}
|
||||
{c.email && <span className="flex items-center gap-1.5"><Mail className="h-3 w-3" />{c.email}</span>}
|
||||
{c.phone && <span className="flex items-center gap-1.5"><Phone className="h-3 w-3" />{c.phone}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:flex flex-col items-end text-[11px] text-muted-foreground gap-0.5 mr-2">
|
||||
{c.case_links > 0 && <span className="flex items-center gap-1"><Briefcase className="h-3 w-3" />{c.case_links} case{c.case_links === 1 ? "" : "s"}</span>}
|
||||
{c.client_links > 0 && <span className="flex items-center gap-1"><Users className="h-3 w-3" />{c.client_links} client{c.client_links === 1 ? "" : "s"}</span>}
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
</Link>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title={c.archived_at ? "Restore" : "Archive"}
|
||||
onClick={() => onArchive(c.id, !c.archived_at)}
|
||||
>
|
||||
{c.archived_at ? <ArchiveRestore className="h-4 w-4" /> : <Archive className="h-4 w-4" />}
|
||||
</Button>
|
||||
{canEdit && (
|
||||
<>
|
||||
<Button variant="ghost" size="icon" onClick={() => startEdit(c)}>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => remove(c.id, c.name)}>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs text-muted-foreground">
|
||||
{c.company && <span className="flex items-center gap-1.5"><Building2 className="h-3 w-3" />{c.company}</span>}
|
||||
{c.email && <span className="flex items-center gap-1.5"><Mail className="h-3 w-3" />{c.email}</span>}
|
||||
{c.phone && <span className="flex items-center gap-1.5"><Phone className="h-3 w-3" />{c.phone}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:flex flex-col items-end text-[11px] text-muted-foreground gap-0.5 mr-2">
|
||||
{c.case_links > 0 && <span className="flex items-center gap-1"><Briefcase className="h-3 w-3" />{c.case_links} case{c.case_links === 1 ? "" : "s"}</span>}
|
||||
{c.client_links > 0 && <span className="flex items-center gap-1"><Users className="h-3 w-3" />{c.client_links} client{c.client_links === 1 ? "" : "s"}</span>}
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
</Link>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
title={c.archived_at ? "Restore" : "Archive"}
|
||||
onClick={() => onArchive(c.id, !c.archived_at)}
|
||||
>
|
||||
{c.archived_at ? <ArchiveRestore className="h-4 w-4" /> : <Archive className="h-4 w-4" />}
|
||||
</Button>
|
||||
{canEdit && (
|
||||
<>
|
||||
<Button variant="ghost" size="icon" onClick={() => startEdit(c)}>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" onClick={() => remove(c.id, c.name)}>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user