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

feature/clinic-lab-invitation #14

Merged
admin merged 4 commits from feature/clinic-lab-invitation into master 2026-05-06 19:28:13 +03:30
Conversation 0 Commits 4 Files Changed 33 +258 -156
7 changed files with 258 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2dca609ba1 - Show all commits

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

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

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

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

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

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

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

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