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

80
frontend/src/app/(dashboard)/billing/page.tsx
View File

@@ -1,10 +1,11 @@
// src/app/(dashboard)/billing/page.tsx
'use client';
import { useState } from 'react';
import { Search } from 'lucide-react';
import { Pencil } from 'lucide-react';
import { Button } from '@/components/ui/common/Button';
import { Input } from '@/components/ui/common/Input';
import { Badge } from '@/components/ui/common/Badge';
import { Table } from '@/components/ui/common/Table';
import { SearchBar } from '@/components/ui/common/SearchBar';
import { useAuth } from '@/lib/hooks/useAuth';
import { hasPermission } from '@/shared/permissions';
// Mock data matching your design
@@ -78,17 +79,12 @@ export default function BillingPage() {
/>
</div>
{/* Filters */}
<div className="surface-card p-4">
<div className="flex gap-4 items-center">
<div className="flex-1">
<Input
placeholder="Search patients..."
value={search}
onChange={(e) => setSearch(e.target.value)}
icon={<Search className="h-4 w-4 icon-flat" />}
/>
</div>
<div className="flex gap-2">
<SearchBar
value={search}
onChange={setSearch}
placeholder="Search patients..."
actions={(
<>
{['all', 'paid', 'unpaid', 'overdue'].map((status) => (
<button
key={status}
@@ -101,14 +97,13 @@ export default function BillingPage() {
{status}
</button>
))}
</div>
</div>
</div>
</>
)}
/>
{/* Invoices Table - Matching your design */}
<div className="surface-card overflow-hidden">
<table className="w-full">
<thead className="bg-background-secondary/70 border-b border-border">
<tr>
<Table
headers={
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Invoice ID
</th>
@@ -134,29 +129,30 @@ export default function BillingPage() {
Action
</th>
</tr>
</thead>
<tbody className="divide-y divide-border/60">
}
body={
<>
{invoices.map((invoice) => (
<tr key={invoice.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-4 text-sm font-medium text-text-primary">
<tr key={invoice.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-1.5 text-sm font-medium text-text-primary">
{invoice.id}
</td>
<td className="px-6 py-4 text-sm text-text-primary">
<td className="px-6 py-1.5 text-sm text-text-primary">
{invoice.patient}
</td>
<td className="px-6 py-4 text-sm text-text-secondary">
<td className="px-6 py-1.5 text-sm text-text-secondary">
{invoice.date}
</td>
<td className="px-6 py-4 text-sm text-text-primary">
<td className="px-6 py-1.5 text-sm text-text-primary">
{invoice.service}
</td>
<td className="px-6 py-4 text-sm text-text-primary">
<td className="px-6 py-1.5 text-sm text-text-primary">
${invoice.amount}
</td>
<td className="px-6 py-4 text-sm text-text-primary">
<td className="px-6 py-1.5 text-sm text-text-primary">
${invoice.paid}
</td>
<td className="px-6 py-4 text-center align-middle">
<td className="px-6 py-1.5 text-center align-middle">
<Badge
variant={statusColors[invoice.status as keyof typeof statusColors]}
className="capitalize"
@@ -164,21 +160,24 @@ export default function BillingPage() {
{invoice.status}
</Badge>
</td>
<td className="px-6 py-4">
<td className="px-6 py-1.5">
<button
className={`text-sm ${canEditBilling ? 'text-primary hover:opacity-90' : 'text-text-muted cursor-not-allowed'}`}
className={`p-2 rounded-md ${canEditBilling
? 'text-text-secondary hover:bg-background-card/80 hover:text-text-primary'
: 'text-text-muted cursor-not-allowed opacity-50'}`}
disabled={!canEditBilling}
title={!canEditBilling ? 'Read-only access for this organization.' : undefined}
aria-label="Edit invoice"
>
Edit
<Pencil className="w-4 h-4" />
</button>
</td>
</tr>
</tr>
))}
</tbody>
</table>
{/* Pagination - Matching your design */}
<div className="px-6 py-4 border-t border-border/60 flex justify-between items-center bg-background-secondary/70">
</>
}
footer={(
<>
<button className="text-sm text-text-secondary hover:text-text-primary">
← Previous
</button>
@@ -188,8 +187,9 @@ export default function BillingPage() {
<button className="text-sm text-text-secondary hover:text-text-primary">
Next →
</button>
</div>
</div>
</>
)}
/>
</div>
);
}

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>

47
frontend/src/app/(dashboard)/staff/page.tsx
View File

@@ -23,6 +23,7 @@ import { Button } from '@/components/ui/common/Button';
import { Badge } from '@/components/ui/common/Badge';
import { Input } from '@/components/ui/common/Input';
import { Checkbox } from '@/components/ui/common/Checkbox';
import { Table } from '@/components/ui/common/Table';
import type { ApiError } from '@/types/api';
type StoredInviteLink = {
@@ -424,31 +425,31 @@ export default function StaffPage() {
{loading ? (
<p className="text-sm text-text-secondary">Loading team…</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">Name</th>
<th className="p-3 font-medium">Email</th>
<th className="p-3 font-medium">Role</th>
<th className="p-3 font-medium text-center">Status</th>
<th className="p-3 font-medium">Access</th>
<th className="p-3 font-medium w-28">Actions</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">Name</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">Email</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">Role</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-left text-xs font-medium text-text-muted uppercase tracking-wider">Access</th>
<th className="px-6 py-3 text-right text-xs font-medium text-text-muted uppercase tracking-wider w-28">Actions</th>
</tr>
}
body={
<>
{members.map((m) => (
<tr key={m.id} className="h-14 border-b border-border/40 last:border-0">
<td className="p-3 text-text-primary">{m.name}</td>
<td className="p-3 text-text-secondary">{m.email}</td>
<td className="p-3">
<tr key={m.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-1.5 text-sm text-text-primary">{m.name}</td>
<td className="px-6 py-1.5 text-sm text-text-secondary">{m.email}</td>
<td className="px-6 py-1.5 text-sm">
{m.isOwner ? (
<span className="text-primary font-medium">Owner</span>
) : (
<span className="text-text-secondary">Staff</span>
)}
</td>
<td className="p-3 align-middle text-center">
<td className="px-6 py-1.5 align-middle text-center">
{m.isOwner || m.invitationStatus === 'ACTIVE' ? (
<Badge variant="success">Active</Badge>
) : m.invitationStatus === 'PENDING' ? (
@@ -457,7 +458,7 @@ export default function StaffPage() {
<Badge variant="danger">Expired</Badge>
)}
</td>
<td className="p-3 text-text-secondary max-w-md">
<td className="px-6 py-1.5 text-sm text-text-secondary max-w-md">
{m.isOwner ? (
<span className="text-text-muted">All features</span>
) : (
@@ -466,7 +467,7 @@ export default function StaffPage() {
</span>
)}
</td>
<td className="p-3 align-middle">
<td className="px-6 py-1.5 align-middle">
{!m.isOwner && (
<div className="flex min-h-[36px] items-center justify-end gap-1">
{m.invitationStatus === 'PENDING' && pendingInviteLinks[m.id]?.invitationUrl && (
@@ -529,9 +530,9 @@ export default function StaffPage() {
</td>
</tr>
))}
</tbody>
</table>
</div>
</>
}
/>
)}
{inviteOpen && (

2
frontend/src/app/(public)/accept-invite/page.tsx
View File

@@ -78,7 +78,7 @@ function AcceptInviteContent() {
name: name.trim(),
password,
});
setSuccess('Invitation accepted. Redirecting to login...');
setSuccess('Invitation Accepted. Redirecting to login...');
setTimeout(() => {
router.replace('/login');
}, 1000);

2
frontend/src/app/(public)/accept-organization-invite/page.tsx
View File

@@ -72,7 +72,7 @@ function AcceptOrganizationInviteContent() {
organizationName: organizationName.trim(),
password,
});
setSuccess('Invitation accepted. Redirecting to login...');
setSuccess('Invitation Accepted. Redirecting to login...');
setTimeout(() => router.replace('/login'), 1000);
} catch (e: any) {
setError(e?.message || 'Could not accept invitation');

38
frontend/src/components/ui/common/SearchBar.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { Search } from 'lucide-react';
import type { ReactNode } from 'react';
import { Input } from './Input';
interface SearchBarProps {
value: string;
onChange: (value: string) => void;
placeholder: string;
onSubmit?: () => void;
actions?: ReactNode;
}
export function SearchBar({
value,
onChange,
placeholder,
onSubmit,
actions,
}: SearchBarProps) {
return (
<div className="surface-card p-4">
<div className="flex gap-4 items-center">
<div className="flex-1">
<Input
placeholder={placeholder}
value={value}
onChange={(e) => onChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') onSubmit?.();
}}
icon={<Search className="h-4 w-4 icon-flat" />}
/>
</div>
{actions && <div className="flex gap-2">{actions}</div>}
</div>
</div>
);
}

27
frontend/src/components/ui/common/Table.tsx Normal file
View File

@@ -0,0 +1,27 @@
import type { ReactNode } from 'react';
interface TableProps {
headers: ReactNode;
body: ReactNode;
footer?: ReactNode;
}
export function Table({ headers, body, footer }: TableProps) {
return (
<div className="surface-card overflow-hidden">
<table className="w-full">
<thead className="bg-background-secondary/70 border-b border-border">
{headers}
</thead>
<tbody className="divide-y divide-border/60">
{body}
</tbody>
</table>
{footer && (
<div className="px-6 py-3 border-t border-border/60 flex justify-between items-center bg-background-secondary/70">
{footer}
</div>
)}
</div>
);
}