admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

feature: Organizations link and invitation flow implemented minimally.

Browse Source
This commit is contained in:
Admin
2026-05-06 19:25:01 +03:30
parent bb44270795
commit 2dca609ba1
7 changed files with 258 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
frontend/src/app/(dashboard)/organizations/page.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { useEffect, useState } from 'react';
import { Search } from 'lucide-react';
import { Check, Copy, Link2, Trash2, X } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import {
organizationApi,
@@ -12,6 +12,8 @@ import {
import { Button } from '@/components/ui/common/Button';
import { Badge, organizationLinkStatusVariant } from '@/components/ui/common/Badge';
import { Input } from '@/components/ui/common/Input';
import { SearchBar } from '@/components/ui/common/SearchBar';
import { Table } from '@/components/ui/common/Table';
import type { ApiError } from '@/types/api';
type StoredInviteLink = {
@@ -56,7 +58,7 @@ function formatLinkStatusLabel(status: CounterpartItemDto['status']): string {
function formatInvitationStatusLabel(status: OrganizationInvitationHistoryItemDto['status']): string {
if (status === 'PENDING') return 'Invitation pending';
if (status === 'ACTIVE') return 'Invitation accepted';
if (status === 'ACTIVE') return 'Invitation Accepted';
if (status === 'REJECTED') return 'Invitation rejected';
return formatOrganizationStatusLabel(status);
}
@@ -69,6 +71,12 @@ function formatApiMessage(err: unknown): string {
return 'Something went wrong';
}
function formatTableDate(value: string): string {
const d = new Date(value);
if (Number.isNaN(d.getTime())) return '—';
return d.toLocaleDateString();
}
type TableMode = 'existing' | 'search';
export default function OrganizationsPage() {
@@ -296,7 +304,7 @@ export default function OrganizationsPage() {
</p>
</div>
<Button type="button" size="sm" onClick={() => void openInvitationHistory()}>
Invitation history
Invitation History
</Button>
</div>
@@ -311,33 +319,36 @@ export default function OrganizationsPage() {
</div>
)}
<div className="surface-card p-4">
<div className="flex gap-4 items-center">
<div className="flex-1">
<Input
placeholder={`Search ${counterpartLabel.toLowerCase()} by name, email, or phone...`}
value={query}
onChange={(e) => setQuery(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') void runSearch();
}}
icon={<Search className="h-4 w-4 icon-flat" />}
/>
</div>
<Button type="button" isLoading={searching} onClick={() => void runSearch()}>
Search
</Button>
{mode === 'search' && (
<Button type="button" variant="outline" onClick={clearSearchView}>
Back to list
</Button>
)}
</div>
</div>
<SearchBar
value={query}
onChange={setQuery}
onSubmit={() => void runSearch()}
placeholder={`Search ${counterpartLabel.toLowerCase()} by name, email, or phone...`}
actions={
<>
<button
type="button"
onClick={() => void runSearch()}
disabled={searching}
className="px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium border bg-primary-soft text-primary border-primary/50 disabled:opacity-60"
>
Search
</button>
{mode === 'search' && (
<button
type="button"
onClick={clearSearchView}
className="px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium border text-text-secondary border-border/40 hover:bg-background-card/70 hover:border-border"
>
Back to list
</button>
)}
</>
}
/>
<div className="surface-card overflow-hidden">
<table className="w-full">
<thead className="bg-background-secondary/70 border-b border-border">
<Table
headers={
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Organization
@@ -346,7 +357,7 @@ export default function OrganizationsPage() {
Owner email
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Type
Date
</th>
<th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
Status
@@ -355,8 +366,9 @@ export default function OrganizationsPage() {
Action
</th>
</tr>
</thead>
<tbody className="divide-y divide-border/60">
}
body={
<>
{loading ? (
<tr>
<td colSpan={5} className="px-6 py-8 text-sm text-text-secondary">
@@ -379,52 +391,55 @@ export default function OrganizationsPage() {
return (
<tr key={row.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-4 text-sm font-medium text-text-primary">
<td className="px-6 py-1.5 text-sm font-medium text-text-primary">
{row.organizationName}
</td>
<td className="px-6 py-4 text-sm text-text-secondary">{row.ownerEmail}</td>
<td className="px-6 py-4 text-sm text-text-secondary">Link</td>
<td className="px-6 py-4 text-center align-middle">
<td className="px-6 py-1.5 text-sm text-text-secondary">{row.ownerEmail}</td>
<td className="px-6 py-1.5 text-sm text-text-secondary">
{formatTableDate(row.createdAt)}
</td>
<td className="px-6 py-1.5 text-center align-middle">
<Badge variant={organizationLinkStatusVariant(row.status)} fixedWidth={false}>
{formatLinkStatusLabel(row.status)}
</Badge>
</td>
<td className="px-6 py-4 text-right">
<td className="px-6 py-1.5 text-right">
<div className="inline-flex items-center gap-2">
{canRespond && (
<>
<Button
<button
type="button"
size="sm"
isLoading={requestLinkRowId === row.id}
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:text-text-muted disabled:opacity-50"
disabled={requestLinkRowId !== null && requestLinkRowId !== row.id}
onClick={() => void respondToPendingLink(row.id, 'ACCEPT')}
aria-label="Accept link request"
title="Accept link request"
>
Accept
</Button>
<Button
<Check className="w-4 h-4" />
</button>
<button
type="button"
size="sm"
variant="outline"
isLoading={requestLinkRowId === row.id}
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:text-text-muted disabled:opacity-50"
disabled={requestLinkRowId !== null && requestLinkRowId !== row.id}
onClick={() => void respondToPendingLink(row.id, 'REJECT')}
aria-label="Reject link request"
title="Reject link request"
>
Reject
</Button>
<X className="w-4 h-4" />
</button>
</>
)}
{row.status === 'ACTIVE' && (
<Button
<button
type="button"
size="sm"
variant="outline"
isLoading={deleteLinkRowId === row.id}
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:text-text-muted disabled:opacity-50"
disabled={deleteLinkRowId !== null && deleteLinkRowId !== row.id}
onClick={() => void deleteLinkedOrganization(row.id)}
aria-label="Delete link"
title="Delete link"
>
Delete link
</Button>
<Trash2 className="w-4 h-4" />
</button>
)}
</div>
</td>
@@ -435,22 +450,23 @@ export default function OrganizationsPage() {
) : searchResults.length > 0 ? (
searchResults.map((r) => (
<tr key={r.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-4 text-sm font-medium text-text-primary">{r.name}</td>
<td className="px-6 py-4 text-sm text-text-secondary">{r.owner.email}</td>
<td className="px-6 py-4 text-sm text-text-secondary">Directory match</td>
<td className="px-6 py-4 text-center align-middle">
<td className="px-6 py-1.5 text-sm font-medium text-text-primary">{r.name}</td>
<td className="px-6 py-1.5 text-sm text-text-secondary">{r.owner.email}</td>
<td className="px-6 py-1.5 text-sm text-text-secondary">Today</td>
<td className="px-6 py-1.5 text-center align-middle">
<Badge variant="default" fixedWidth={false}>Found</Badge>
</td>
<td className="px-6 py-4 text-right">
<Button
<td className="px-6 py-1.5 text-right">
<button
type="button"
size="sm"
isLoading={requestLinkRowId === r.id}
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:text-text-muted disabled:opacity-50"
disabled={requestLinkRowId !== null && requestLinkRowId !== r.id}
onClick={() => void submitRequestLink(r.id)}
aria-label="Send link request"
title="Send link request"
>
Send link request
</Button>
<Link2 className="w-4 h-4" />
</button>
</td>
</tr>
))
@@ -496,9 +512,9 @@ export default function OrganizationsPage() {
</td>
</tr>
)}
</tbody>
</table>
</div>
</>
}
/>
{historyOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
@@ -508,7 +524,7 @@ export default function OrganizationsPage() {
aria-modal="true"
>
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold text-text-primary">Invitation history</h2>
<h2 className="text-lg font-semibold text-text-primary">Invitation History</h2>
<Button type="button" size="sm" onClick={() => setHistoryOpen(false)}>
Close
</Button>
@@ -519,44 +535,64 @@ export default function OrganizationsPage() {
) : historyItems.length === 0 ? (
<p className="text-sm text-text-secondary">No invitations yet.</p>
) : (
<div className="overflow-x-auto rounded-[var(--radius-md)] border border-border/70">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border/70 text-left text-text-secondary">
<th className="p-3 font-medium">Organization</th>
<th className="p-3 font-medium">Owner email</th>
<th className="p-3 font-medium">Status</th>
<th className="p-3 font-medium">Action</th>
</tr>
</thead>
<tbody>
<Table
headers={
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Organization
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Owner email
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Date
</th>
<th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
Status
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-text-muted uppercase tracking-wider">
Action
</th>
</tr>
}
body={
<>
{historyItems.map((inv) => (
<tr key={inv.id} className="border-b border-border/40 last:border-0">
<td className="p-3 text-text-primary">{inv.organizationName}</td>
<td className="p-3 text-text-secondary">{inv.ownerEmail}</td>
<td className="p-3">
<tr key={inv.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-1.5 text-sm text-text-primary">{inv.organizationName}</td>
<td className="px-6 py-1.5 text-sm text-text-secondary">{inv.ownerEmail}</td>
<td className="px-6 py-1.5 text-sm text-text-secondary">
{formatTableDate(inv.createdAt)}
</td>
<td className="px-6 py-1.5 text-center align-middle">
<Badge variant={organizationLinkStatusVariant(inv.status)} fixedWidth={false}>
{formatInvitationStatusLabel(inv.status)}
</Badge>
</td>
<td className="p-3">
<td className="px-6 py-1.5 text-right">
{inv.status === 'PENDING' ? (
<Button
<button
type="button"
size="sm"
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary"
onClick={() => void copyInvitationLink(inv.id)}
aria-label="Copy invitation link"
title="Copy invitation link"
>
{copiedId === inv.id ? 'Copied' : 'Copy link'}
</Button>
{copiedId === inv.id ? (
<Check className="w-4 h-4" />
) : (
<Copy className="w-4 h-4" />
)}
</button>
) : (
<span className="text-xs text-text-muted">—</span>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
</>
}
/>
)}
</div>
</div>