feature: Organizations form UX flow now matches the needs.
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
import { IsIn } from 'class-validator';
|
||||
|
||||
export class RespondLinkRequestDto {
|
||||
@IsIn(['ACCEPT', 'REJECT'])
|
||||
action: 'ACCEPT' | 'REJECT';
|
||||
}
|
||||
@@ -1,7 +1,10 @@
|
||||
import {
|
||||
Body,
|
||||
Controller,
|
||||
Delete,
|
||||
Get,
|
||||
Param,
|
||||
Patch,
|
||||
Post,
|
||||
Query,
|
||||
Req,
|
||||
@@ -13,6 +16,7 @@ import { AcceptOrganizationInviteDto } from './dto/accept-organization-invite.dt
|
||||
import { CreateLinkRequestDto } from './dto/create-link-request.dto';
|
||||
import { InviteOrganizationDto } from './dto/invite-organization.dto';
|
||||
import { PreviewOrganizationInviteDto } from './dto/preview-organization-invite.dto';
|
||||
import { RespondLinkRequestDto } from './dto/respond-link-request.dto';
|
||||
import { OrganizationService } from './organization.service';
|
||||
|
||||
@ApiTags('organizations')
|
||||
@@ -27,6 +31,14 @@ export class OrganizationController {
|
||||
return this.organizationService.previewInvite(query.token);
|
||||
}
|
||||
|
||||
@Get('invitations')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@ApiOperation({ summary: 'List invitation history for current organization' })
|
||||
listInvitations(@Req() req: { user: { id: string; organizationId?: string } }) {
|
||||
const organizationId = this.organizationService.getOrganizationIdFromUser(req.user);
|
||||
return this.organizationService.listInvitationHistory(req.user.id, organizationId);
|
||||
}
|
||||
|
||||
@Post('invitations/accept')
|
||||
@ApiOperation({ summary: 'Accept organization invite and create/link counterpart org (public)' })
|
||||
acceptInvite(@Body() dto: AcceptOrganizationInviteDto) {
|
||||
@@ -65,6 +77,40 @@ export class OrganizationController {
|
||||
return this.organizationService.createLinkRequest(req.user.id, organizationId, dto);
|
||||
}
|
||||
|
||||
@Patch('links/:linkId/respond')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@ApiOperation({ summary: 'Accept or reject a pending link request for current organization' })
|
||||
respondToLinkRequest(
|
||||
@Req() req: { user: { id: string; organizationId?: string } },
|
||||
@Param('linkId') linkId: string,
|
||||
@Body() dto: RespondLinkRequestDto,
|
||||
) {
|
||||
const organizationId = this.organizationService.getOrganizationIdFromUser(req.user);
|
||||
return this.organizationService.respondToLinkRequest(req.user.id, organizationId, linkId, dto);
|
||||
}
|
||||
|
||||
@Delete('links/:linkId')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@ApiOperation({ summary: 'Delete linked organization record' })
|
||||
deleteLink(
|
||||
@Req() req: { user: { id: string; organizationId?: string } },
|
||||
@Param('linkId') linkId: string,
|
||||
) {
|
||||
const organizationId = this.organizationService.getOrganizationIdFromUser(req.user);
|
||||
return this.organizationService.deleteLink(req.user.id, organizationId, linkId);
|
||||
}
|
||||
|
||||
@Post('invitations/:invitationId/link')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@ApiOperation({ summary: 'Get a shareable invite link for a pending invitation' })
|
||||
getInvitationLink(
|
||||
@Req() req: { user: { id: string; organizationId?: string } },
|
||||
@Param('invitationId') invitationId: string,
|
||||
) {
|
||||
const organizationId = this.organizationService.getOrganizationIdFromUser(req.user);
|
||||
return this.organizationService.getInvitationLink(req.user.id, organizationId, invitationId);
|
||||
}
|
||||
|
||||
@Post('invite')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@ApiOperation({ summary: 'Create invite link for owner of not-yet-subscribed counterpart org' })
|
||||
|
||||
@@ -12,6 +12,7 @@ import { PrismaService } from '../../../prisma/prisma.service';
|
||||
import { AcceptOrganizationInviteDto } from './dto/accept-organization-invite.dto';
|
||||
import { CreateLinkRequestDto } from './dto/create-link-request.dto';
|
||||
import { InviteOrganizationDto } from './dto/invite-organization.dto';
|
||||
import { RespondLinkRequestDto } from './dto/respond-link-request.dto';
|
||||
|
||||
@Injectable()
|
||||
export class OrganizationService {
|
||||
@@ -67,7 +68,7 @@ export class OrganizationService {
|
||||
throw new ForbiddenException('You do not have permission to manage organizations');
|
||||
}
|
||||
|
||||
const [linksA, linksB, invitations] = await Promise.all([
|
||||
const [linksA, linksB] = await Promise.all([
|
||||
this.prisma.organizationLink.findMany({
|
||||
where: { organizationAId: organizationId },
|
||||
include: {
|
||||
@@ -82,61 +83,65 @@ export class OrganizationService {
|
||||
},
|
||||
orderBy: { createdAt: 'desc' },
|
||||
}),
|
||||
this.prisma.organizationInvitation.findMany({
|
||||
where: { inviterOrganizationId: organizationId },
|
||||
orderBy: { createdAt: 'desc' },
|
||||
}),
|
||||
]);
|
||||
|
||||
const linkItems = [
|
||||
...linksA.map((l) => ({
|
||||
requestedByOrganizationId: this.getRequesterOrganizationId(l.sharedDataTypes),
|
||||
id: l.id,
|
||||
kind: 'LINK' as const,
|
||||
counterpartOrganizationId: l.organizationB.id,
|
||||
organizationName: l.organizationB.name,
|
||||
ownerEmail: l.organizationB.email,
|
||||
phone: l.organizationB.phone,
|
||||
status: l.status,
|
||||
invitationUrl: null as string | null,
|
||||
createdAt: l.createdAt.toISOString(),
|
||||
acceptedAt: l.status === LinkStatus.ACTIVE ? l.updatedAt.toISOString() : null,
|
||||
})),
|
||||
...linksB.map((l) => ({
|
||||
requestedByOrganizationId: this.getRequesterOrganizationId(l.sharedDataTypes),
|
||||
id: l.id,
|
||||
kind: 'LINK' as const,
|
||||
counterpartOrganizationId: l.organizationA.id,
|
||||
organizationName: l.organizationA.name,
|
||||
ownerEmail: l.organizationA.email,
|
||||
phone: l.organizationA.phone,
|
||||
status: l.status,
|
||||
invitationUrl: null as string | null,
|
||||
createdAt: l.createdAt.toISOString(),
|
||||
acceptedAt: l.status === LinkStatus.ACTIVE ? l.updatedAt.toISOString() : null,
|
||||
})),
|
||||
];
|
||||
|
||||
const inviteItems = invitations.map((i) => ({
|
||||
id: i.id,
|
||||
kind: 'INVITATION' as const,
|
||||
counterpartOrganizationId: i.invitedOrganizationId,
|
||||
organizationName: i.invitedOrganizationName,
|
||||
ownerEmail: i.invitedOwnerEmail,
|
||||
phone: null as string | null,
|
||||
status: this.mapInvitationStatus(i.acceptedAt, i.revokedAt, i.expiresAt),
|
||||
invitationUrl:
|
||||
!i.acceptedAt && !i.revokedAt && i.expiresAt.getTime() > Date.now()
|
||||
? this.buildInviteUrlFromTokenHashPlaceholder()
|
||||
: null,
|
||||
createdAt: i.createdAt.toISOString(),
|
||||
acceptedAt: i.acceptedAt?.toISOString() ?? null,
|
||||
}));
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
items: linkItems.sort((a, b) =>
|
||||
a.createdAt < b.createdAt ? 1 : -1,
|
||||
),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async listInvitationHistory(userId: string, organizationId: string) {
|
||||
const actor = await this.getActorMembership(userId, organizationId);
|
||||
if (!actor || !this.canEditOrganizations(actor)) {
|
||||
throw new ForbiddenException('You do not have permission to manage organizations');
|
||||
}
|
||||
|
||||
const invitations = await this.prisma.organizationInvitation.findMany({
|
||||
where: { inviterOrganizationId: organizationId },
|
||||
orderBy: { createdAt: 'desc' },
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
items: [...linkItems, ...inviteItems].sort((a, b) =>
|
||||
a.createdAt < b.createdAt ? 1 : -1,
|
||||
),
|
||||
items: invitations.map((i) => ({
|
||||
id: i.id,
|
||||
organizationName: i.invitedOrganizationName,
|
||||
ownerEmail: i.invitedOwnerEmail,
|
||||
status: this.mapInvitationStatus(i.acceptedAt, i.revokedAt, i.expiresAt),
|
||||
createdAt: i.createdAt.toISOString(),
|
||||
acceptedAt: i.acceptedAt?.toISOString() ?? null,
|
||||
})),
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -183,7 +188,7 @@ export class OrganizationService {
|
||||
organizationAId: aId,
|
||||
organizationBId: bId,
|
||||
status: LinkStatus.PENDING,
|
||||
sharedDataTypes: [],
|
||||
sharedDataTypes: [`requested_by:${organizationId}`],
|
||||
},
|
||||
});
|
||||
|
||||
@@ -194,6 +199,118 @@ export class OrganizationService {
|
||||
};
|
||||
}
|
||||
|
||||
async respondToLinkRequest(
|
||||
userId: string,
|
||||
organizationId: string,
|
||||
linkId: string,
|
||||
dto: RespondLinkRequestDto,
|
||||
) {
|
||||
const actor = await this.getActorMembership(userId, organizationId);
|
||||
if (!actor || !this.canEditOrganizations(actor)) {
|
||||
throw new ForbiddenException('You do not have permission to manage organizations');
|
||||
}
|
||||
|
||||
const link = await this.prisma.organizationLink.findFirst({
|
||||
where: {
|
||||
id: linkId,
|
||||
OR: [{ organizationAId: organizationId }, { organizationBId: organizationId }],
|
||||
},
|
||||
});
|
||||
if (!link) {
|
||||
throw new NotFoundException('Link request not found');
|
||||
}
|
||||
if (link.status !== LinkStatus.PENDING) {
|
||||
throw new BadRequestException('Only pending link requests can be responded to');
|
||||
}
|
||||
|
||||
const requesterOrgId = this.getRequesterOrganizationId(link.sharedDataTypes);
|
||||
if (requesterOrgId && requesterOrgId === organizationId) {
|
||||
throw new ForbiddenException('You cannot respond to your own link request');
|
||||
}
|
||||
|
||||
const nextStatus = dto.action === 'ACCEPT' ? LinkStatus.ACTIVE : LinkStatus.REJECTED;
|
||||
const updated = await this.prisma.organizationLink.update({
|
||||
where: { id: link.id },
|
||||
data: { status: nextStatus },
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: { id: updated.id, status: updated.status },
|
||||
message: nextStatus === LinkStatus.ACTIVE ? 'Link request accepted' : 'Link request rejected',
|
||||
};
|
||||
}
|
||||
|
||||
async deleteLink(userId: string, organizationId: string, linkId: string) {
|
||||
const actor = await this.getActorMembership(userId, organizationId);
|
||||
if (!actor || !this.canEditOrganizations(actor)) {
|
||||
throw new ForbiddenException('You do not have permission to manage organizations');
|
||||
}
|
||||
|
||||
const link = await this.prisma.organizationLink.findFirst({
|
||||
where: {
|
||||
id: linkId,
|
||||
status: LinkStatus.ACTIVE,
|
||||
OR: [{ organizationAId: organizationId }, { organizationBId: organizationId }],
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
if (!link) {
|
||||
throw new NotFoundException('Linked organization not found');
|
||||
}
|
||||
|
||||
await this.prisma.organizationLink.delete({ where: { id: link.id } });
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: { id: link.id },
|
||||
message: 'Linked organization removed',
|
||||
};
|
||||
}
|
||||
|
||||
async getInvitationLink(userId: string, organizationId: string, invitationId: string) {
|
||||
const actor = await this.getActorMembership(userId, organizationId);
|
||||
if (!actor || !this.canEditOrganizations(actor)) {
|
||||
throw new ForbiddenException('You do not have permission to manage organizations');
|
||||
}
|
||||
|
||||
const invitation = await this.prisma.organizationInvitation.findFirst({
|
||||
where: {
|
||||
id: invitationId,
|
||||
inviterOrganizationId: organizationId,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
acceptedAt: true,
|
||||
revokedAt: true,
|
||||
},
|
||||
});
|
||||
if (!invitation) {
|
||||
throw new NotFoundException('Invitation not found');
|
||||
}
|
||||
if (invitation.acceptedAt || invitation.revokedAt) {
|
||||
throw new BadRequestException('Only pending invitations can provide a link');
|
||||
}
|
||||
|
||||
const plainToken = this.generateInviteToken();
|
||||
const tokenHash = this.hashInviteToken(plainToken);
|
||||
await this.prisma.organizationInvitation.update({
|
||||
where: { id: invitation.id },
|
||||
data: {
|
||||
tokenHash,
|
||||
expiresAt: this.getInviteExpiryDate(),
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
invitationId: invitation.id,
|
||||
invitationUrl: this.buildInviteUrl(plainToken),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
async inviteOrganization(userId: string, organizationId: string, dto: InviteOrganizationDto) {
|
||||
const actor = await this.getActorMembership(userId, organizationId);
|
||||
if (!actor || !this.canEditOrganizations(actor)) {
|
||||
@@ -219,20 +336,70 @@ export class OrganizationService {
|
||||
);
|
||||
}
|
||||
|
||||
const invitedOrg = await this.prisma.organization.findFirst({
|
||||
const invitation = await this.prisma.$transaction(async (tx) => {
|
||||
let owner = await tx.user.findUnique({ where: { email: ownerEmail } });
|
||||
if (!owner) {
|
||||
owner = await tx.user.create({
|
||||
data: {
|
||||
email: ownerEmail,
|
||||
name: dto.organizationName.trim(),
|
||||
passwordHash: null,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
let invitedOrg = await tx.organization.findFirst({
|
||||
where: {
|
||||
owner: { email: ownerEmail },
|
||||
ownerId: owner.id,
|
||||
type: { name: invitedType },
|
||||
},
|
||||
select: { id: true, name: true },
|
||||
select: { id: true },
|
||||
orderBy: { createdAt: 'desc' },
|
||||
});
|
||||
|
||||
const invitation = await this.prisma.organizationInvitation.create({
|
||||
if (!invitedOrg) {
|
||||
invitedOrg = await tx.organization.create({
|
||||
data: {
|
||||
name: dto.organizationName.trim(),
|
||||
email: `pending-${plainToken.slice(0, 12)}@dyolink.local`,
|
||||
owner: { connect: { id: owner.id } },
|
||||
type: { connect: { name: invitedType } },
|
||||
},
|
||||
select: { id: true },
|
||||
});
|
||||
}
|
||||
|
||||
const [aId, bId] =
|
||||
organizationId < invitedOrg.id
|
||||
? [organizationId, invitedOrg.id]
|
||||
: [invitedOrg.id, organizationId];
|
||||
|
||||
const existingLink = await tx.organizationLink.findUnique({
|
||||
where: { organizationAId_organizationBId: { organizationAId: aId, organizationBId: bId } },
|
||||
});
|
||||
if (existingLink?.status === LinkStatus.ACTIVE) {
|
||||
throw new ConflictException('These organizations are already linked');
|
||||
}
|
||||
|
||||
await tx.organizationLink.upsert({
|
||||
where: { organizationAId_organizationBId: { organizationAId: aId, organizationBId: bId } },
|
||||
update: {
|
||||
status: LinkStatus.PENDING,
|
||||
sharedDataTypes: [`requested_by:${organizationId}`],
|
||||
},
|
||||
create: {
|
||||
organizationAId: aId,
|
||||
organizationBId: bId,
|
||||
status: LinkStatus.PENDING,
|
||||
sharedDataTypes: [`requested_by:${organizationId}`],
|
||||
},
|
||||
});
|
||||
|
||||
return tx.organizationInvitation.create({
|
||||
data: {
|
||||
inviterOrganizationId: organizationId,
|
||||
inviterUserId: userId,
|
||||
invitedOrganizationId: invitedOrg?.id ?? null,
|
||||
invitedOrganizationId: invitedOrg.id,
|
||||
invitedOrganizationName: dto.organizationName.trim(),
|
||||
invitedOwnerEmail: ownerEmail,
|
||||
invitedOrganizationType: invitedType,
|
||||
@@ -240,6 +407,7 @@ export class OrganizationService {
|
||||
expiresAt: this.getInviteExpiryDate(),
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
@@ -430,6 +598,17 @@ export class OrganizationService {
|
||||
return null;
|
||||
}
|
||||
|
||||
private getRequesterOrganizationId(sharedDataTypes: unknown): string | null {
|
||||
if (!Array.isArray(sharedDataTypes)) return null;
|
||||
for (const v of sharedDataTypes) {
|
||||
if (typeof v !== 'string') continue;
|
||||
if (!v.startsWith('requested_by:')) continue;
|
||||
const id = v.slice('requested_by:'.length).trim();
|
||||
if (id) return id;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
private async findValidInvitation(token: string) {
|
||||
const invitation = await this.prisma.organizationInvitation.findUnique({
|
||||
where: { tokenHash: this.hashInviteToken(token) },
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Search } from 'lucide-react';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import {
|
||||
organizationApi,
|
||||
type CounterpartItemDto,
|
||||
type CounterpartSearchResultDto,
|
||||
type OrganizationInvitationHistoryItemDto,
|
||||
} from '@/lib/api/organization';
|
||||
import { Button } from '@/components/ui/common/Button';
|
||||
import { Badge, organizationLinkStatusVariant } from '@/components/ui/common/Badge';
|
||||
@@ -39,13 +41,26 @@ function writeStoredInviteLinks(orgId: string, links: Record<string, StoredInvit
|
||||
window.localStorage.setItem(inviteLinksStorageKey(orgId), JSON.stringify(links));
|
||||
}
|
||||
|
||||
/** First letter uppercase, rest lowercase (e.g. ACTIVE → Active). */
|
||||
function formatOrganizationStatusLabel(status: string): string {
|
||||
if (!status) return status;
|
||||
const lower = status.toLowerCase();
|
||||
return lower.charAt(0).toUpperCase() + lower.slice(1);
|
||||
}
|
||||
|
||||
function formatLinkStatusLabel(status: CounterpartItemDto['status']): string {
|
||||
if (status === 'PENDING') return 'Link request pending';
|
||||
if (status === 'ACTIVE') return 'Linked';
|
||||
if (status === 'REJECTED') return 'Link request rejected';
|
||||
return formatOrganizationStatusLabel(status);
|
||||
}
|
||||
|
||||
function formatInvitationStatusLabel(status: OrganizationInvitationHistoryItemDto['status']): string {
|
||||
if (status === 'PENDING') return 'Invitation pending';
|
||||
if (status === 'ACTIVE') return 'Invitation accepted';
|
||||
if (status === 'REJECTED') return 'Invitation rejected';
|
||||
return formatOrganizationStatusLabel(status);
|
||||
}
|
||||
|
||||
function formatApiMessage(err: unknown): string {
|
||||
if (!err || typeof err !== 'object') return 'Something went wrong';
|
||||
const m = (err as ApiError).message;
|
||||
@@ -54,33 +69,36 @@ function formatApiMessage(err: unknown): string {
|
||||
return 'Something went wrong';
|
||||
}
|
||||
|
||||
type TableMode = 'existing' | 'search';
|
||||
|
||||
export default function OrganizationsPage() {
|
||||
const { currentOrganization } = useAuth();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState('');
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [searchLoading, setSearchLoading] = useState(false);
|
||||
const [results, setResults] = useState<CounterpartSearchResultDto[]>([]);
|
||||
const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);
|
||||
const [linkLoading, setLinkLoading] = useState(false);
|
||||
const [query, setQuery] = useState('');
|
||||
const [mode, setMode] = useState<TableMode>('existing');
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [searchResults, setSearchResults] = useState<CounterpartSearchResultDto[]>([]);
|
||||
const [requestLinkRowId, setRequestLinkRowId] = useState<string | null>(null);
|
||||
const [deleteLinkRowId, setDeleteLinkRowId] = useState<string | null>(null);
|
||||
|
||||
const [items, setItems] = useState<CounterpartItemDto[]>([]);
|
||||
const [manualOrganizationName, setManualOrganizationName] = useState('');
|
||||
const [manualOwnerEmail, setManualOwnerEmail] = useState('');
|
||||
const [manualPhone, setManualPhone] = useState('');
|
||||
const [inviteLoading, setInviteLoading] = useState(false);
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||
const [pendingInviteLinks, setPendingInviteLinks] = useState<Record<string, StoredInviteLink>>({});
|
||||
const [showInviteForm, setShowInviteForm] = useState(false);
|
||||
const [historyOpen, setHistoryOpen] = useState(false);
|
||||
const [historyLoading, setHistoryLoading] = useState(false);
|
||||
const [historyItems, setHistoryItems] = useState<OrganizationInvitationHistoryItemDto[]>([]);
|
||||
|
||||
const counterpartLabel = currentOrganization?.type === 'LAB' ? 'Clinic' : 'Lab';
|
||||
const tabLabel = currentOrganization?.type === 'LAB' ? 'Clinics' : 'Labs';
|
||||
|
||||
const selectedResult = useMemo(
|
||||
() => results.find((r) => r.id === selectedOrgId) ?? null,
|
||||
[results, selectedOrgId],
|
||||
);
|
||||
const existingRows = items;
|
||||
|
||||
async function loadList() {
|
||||
setLoading(true);
|
||||
@@ -111,34 +129,43 @@ export default function OrganizationsPage() {
|
||||
}, [success]);
|
||||
|
||||
async function runSearch() {
|
||||
setSearchLoading(true);
|
||||
const q = query.trim();
|
||||
if (!q) {
|
||||
setMode('existing');
|
||||
setSearchResults([]);
|
||||
setShowInviteForm(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setSearching(true);
|
||||
setError('');
|
||||
setSelectedOrgId(null);
|
||||
setMode('search');
|
||||
setShowInviteForm(false);
|
||||
try {
|
||||
const res = await organizationApi.search(searchTerm.trim());
|
||||
setResults(res.data);
|
||||
const res = await organizationApi.search(q);
|
||||
setSearchResults(res.data);
|
||||
} catch (e) {
|
||||
setError(formatApiMessage(e));
|
||||
setSearchResults([]);
|
||||
} finally {
|
||||
setSearchLoading(false);
|
||||
setSearching(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function createLink() {
|
||||
if (!selectedOrgId) return;
|
||||
setLinkLoading(true);
|
||||
async function submitRequestLink(targetOrganizationId: string) {
|
||||
setRequestLinkRowId(targetOrganizationId);
|
||||
setError('');
|
||||
try {
|
||||
await organizationApi.createLink(selectedOrgId);
|
||||
setSuccess(`${counterpartLabel} link request created`);
|
||||
setResults([]);
|
||||
setSelectedOrgId(null);
|
||||
setSearchTerm('');
|
||||
await organizationApi.createLink(targetOrganizationId);
|
||||
setSuccess(`${counterpartLabel} link request sent`);
|
||||
setSearchResults([]);
|
||||
setQuery('');
|
||||
setMode('existing');
|
||||
await loadList();
|
||||
} catch (e) {
|
||||
setError(formatApiMessage(e));
|
||||
} finally {
|
||||
setLinkLoading(false);
|
||||
setRequestLinkRowId(null);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -149,7 +176,6 @@ export default function OrganizationsPage() {
|
||||
const res = await organizationApi.invite({
|
||||
organizationName: manualOrganizationName.trim(),
|
||||
ownerEmail: manualOwnerEmail.trim(),
|
||||
phone: manualPhone.trim() || undefined,
|
||||
});
|
||||
if (currentOrganization?.id) {
|
||||
const nextLinks = {
|
||||
@@ -166,7 +192,10 @@ export default function OrganizationsPage() {
|
||||
setSuccess(`Invitation link created for ${manualOwnerEmail.trim()}`);
|
||||
setManualOrganizationName('');
|
||||
setManualOwnerEmail('');
|
||||
setManualPhone('');
|
||||
setShowInviteForm(false);
|
||||
setMode('existing');
|
||||
setQuery('');
|
||||
setSearchResults([]);
|
||||
await loadList();
|
||||
} catch (e) {
|
||||
setError(formatApiMessage(e));
|
||||
@@ -175,19 +204,101 @@ export default function OrganizationsPage() {
|
||||
}
|
||||
}
|
||||
|
||||
async function openInvitationHistory() {
|
||||
setHistoryOpen(true);
|
||||
setHistoryLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const res = await organizationApi.listInvitations();
|
||||
setHistoryItems(res.data.items);
|
||||
} catch (e) {
|
||||
setError(formatApiMessage(e));
|
||||
} finally {
|
||||
setHistoryLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function respondToPendingLink(linkId: string, action: 'ACCEPT' | 'REJECT') {
|
||||
setRequestLinkRowId(linkId);
|
||||
setError('');
|
||||
try {
|
||||
await organizationApi.respondLink(linkId, action);
|
||||
setSuccess(action === 'ACCEPT' ? 'Link request accepted' : 'Link request rejected');
|
||||
await loadList();
|
||||
} catch (e) {
|
||||
setError(formatApiMessage(e));
|
||||
} finally {
|
||||
setRequestLinkRowId(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteLinkedOrganization(linkId: string) {
|
||||
setDeleteLinkRowId(linkId);
|
||||
setError('');
|
||||
try {
|
||||
await organizationApi.deleteLink(linkId);
|
||||
setSuccess('Linked organization removed');
|
||||
await loadList();
|
||||
} catch (e) {
|
||||
setError(formatApiMessage(e));
|
||||
} finally {
|
||||
setDeleteLinkRowId(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function copyInvitationLink(invitationId: string) {
|
||||
setError('');
|
||||
try {
|
||||
let invitationUrl = pendingInviteLinks[invitationId]?.invitationUrl;
|
||||
if (!invitationUrl) {
|
||||
const res = await organizationApi.getInvitationLink(invitationId);
|
||||
invitationUrl = res.data.invitationUrl;
|
||||
if (currentOrganization?.id) {
|
||||
const nextLinks = {
|
||||
...pendingInviteLinks,
|
||||
[invitationId]: {
|
||||
invitationId,
|
||||
ownerEmail:
|
||||
historyItems.find((item) => item.id === invitationId)?.ownerEmail?.toLowerCase() ?? '',
|
||||
invitationUrl,
|
||||
},
|
||||
};
|
||||
setPendingInviteLinks(nextLinks);
|
||||
writeStoredInviteLinks(currentOrganization.id, nextLinks);
|
||||
}
|
||||
}
|
||||
await navigator.clipboard.writeText(invitationUrl);
|
||||
setCopiedId(invitationId);
|
||||
setTimeout(() => setCopiedId(null), 1500);
|
||||
} catch {
|
||||
setError('Could not copy invitation link');
|
||||
}
|
||||
}
|
||||
|
||||
function clearSearchView() {
|
||||
setMode('existing');
|
||||
setQuery('');
|
||||
setSearchResults([]);
|
||||
setShowInviteForm(false);
|
||||
}
|
||||
|
||||
if (!currentOrganization) {
|
||||
return <p className="text-sm text-text-secondary">Loading organization...</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-text-primary">{tabLabel}</h1>
|
||||
<p className="text-sm text-text-secondary mt-1">
|
||||
Search subscribed {tabLabel.toLowerCase()}, request link access, or invite a new{' '}
|
||||
{counterpartLabel.toLowerCase()} owner.
|
||||
Search organizations and send link requests or invitation links in one place.
|
||||
</p>
|
||||
</div>
|
||||
<Button type="button" size="sm" onClick={() => void openInvitationHistory()}>
|
||||
Invitation history
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-[var(--radius-md)] border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-700 dark:text-red-300">
|
||||
@@ -200,57 +311,163 @@ export default function OrganizationsPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded-[var(--radius-md)] border border-border/70 p-4 space-y-3">
|
||||
<h2 className="text-base font-semibold text-text-primary">Search existing {tabLabel}</h2>
|
||||
<div className="flex gap-2">
|
||||
<div className="surface-card p-4">
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder={`Search by ${counterpartLabel.toLowerCase()} name, email, or phone`}
|
||||
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" />}
|
||||
/>
|
||||
<Button type="button" isLoading={searchLoading} onClick={() => void runSearch()}>
|
||||
</div>
|
||||
<Button type="button" isLoading={searching} onClick={() => void runSearch()}>
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{results.length > 0 && (
|
||||
<div className="space-y-2 pt-1">
|
||||
{results.map((r) => (
|
||||
<button
|
||||
key={r.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedOrgId(r.id)}
|
||||
className={`w-full text-left rounded-[var(--radius-md)] border px-3 py-2 ${
|
||||
selectedOrgId === r.id
|
||||
? 'border-primary/70 bg-primary-soft/30'
|
||||
: 'border-border/60 hover:border-border-strong'
|
||||
}`}
|
||||
>
|
||||
<p className="text-sm font-medium text-text-primary">{r.name}</p>
|
||||
<p className="text-xs text-text-secondary mt-0.5">
|
||||
{r.email}
|
||||
{r.phone ? ` - ${r.phone}` : ''}
|
||||
</p>
|
||||
<p className="text-xs text-text-muted mt-0.5">Owner: {r.owner.email}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{mode === 'search' && (
|
||||
<Button type="button" variant="outline" onClick={clearSearchView}>
|
||||
Back to list
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<div className="surface-card overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-background-secondary/70 border-b border-border">
|
||||
<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">
|
||||
Type
|
||||
</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>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border/60">
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-6 py-8 text-sm text-text-secondary">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : mode === 'existing' ? (
|
||||
existingRows.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-6 py-8 text-sm text-text-secondary">
|
||||
No organizations linked or pending yet. Use search to find and connect.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
existingRows.map((row) => {
|
||||
const canRespond =
|
||||
row.status === 'PENDING' &&
|
||||
row.requestedByOrganizationId !== null &&
|
||||
row.requestedByOrganizationId !== currentOrganization.id;
|
||||
|
||||
return (
|
||||
<tr key={row.id} className="hover:bg-background-secondary/45">
|
||||
<td className="px-6 py-4 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">
|
||||
<Badge variant={organizationLinkStatusVariant(row.status)} fixedWidth={false}>
|
||||
{formatLinkStatusLabel(row.status)}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
{canRespond && (
|
||||
<>
|
||||
<Button
|
||||
type="button"
|
||||
isLoading={linkLoading}
|
||||
disabled={!selectedResult}
|
||||
onClick={() => void createLink()}
|
||||
size="sm"
|
||||
isLoading={requestLinkRowId === row.id}
|
||||
disabled={requestLinkRowId !== null && requestLinkRowId !== row.id}
|
||||
onClick={() => void respondToPendingLink(row.id, 'ACCEPT')}
|
||||
>
|
||||
Request link
|
||||
Accept
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
isLoading={requestLinkRowId === row.id}
|
||||
disabled={requestLinkRowId !== null && requestLinkRowId !== row.id}
|
||||
onClick={() => void respondToPendingLink(row.id, 'REJECT')}
|
||||
>
|
||||
Reject
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{row.status === 'ACTIVE' && (
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
isLoading={deleteLinkRowId === row.id}
|
||||
disabled={deleteLinkRowId !== null && deleteLinkRowId !== row.id}
|
||||
onClick={() => void deleteLinkedOrganization(row.id)}
|
||||
>
|
||||
Delete link
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)
|
||||
) : 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">
|
||||
<Badge variant="default" fixedWidth={false}>Found</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
isLoading={requestLinkRowId === r.id}
|
||||
disabled={requestLinkRowId !== null && requestLinkRowId !== r.id}
|
||||
onClick={() => void submitRequestLink(r.id)}
|
||||
>
|
||||
Send link request
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-6 py-6">
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-sm text-text-secondary">
|
||||
No organization found in directory search.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button type="button" onClick={() => setShowInviteForm((v) => !v)}>
|
||||
{showInviteForm ? 'Hide invitation fields' : 'Send invitation link'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[var(--radius-md)] border border-border/70 p-4 space-y-3">
|
||||
<h2 className="text-base font-semibold text-text-primary">Invite owner (not yet subscribed)</h2>
|
||||
{showInviteForm && (
|
||||
<div className="grid gap-3 sm:grid-cols-3 mt-1">
|
||||
<Input
|
||||
label={`${counterpartLabel} name`}
|
||||
value={manualOrganizationName}
|
||||
@@ -262,37 +479,50 @@ export default function OrganizationsPage() {
|
||||
value={manualOwnerEmail}
|
||||
onChange={(e) => setManualOwnerEmail(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label="Mobile number (optional)"
|
||||
value={manualPhone}
|
||||
onChange={(e) => setManualPhone(e.target.value)}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<div className="flex items-end">
|
||||
<Button
|
||||
type="button"
|
||||
isLoading={inviteLoading}
|
||||
disabled={!manualOrganizationName.trim() || !manualOwnerEmail.trim()}
|
||||
onClick={() => void sendInvite()}
|
||||
className="w-full"
|
||||
>
|
||||
Send invite link
|
||||
Send invitation
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[var(--radius-md)] border border-border/70">
|
||||
<div className="border-b border-border/70 px-4 py-3">
|
||||
<h2 className="text-base font-semibold text-text-primary">Requests and invitations</h2>
|
||||
)}
|
||||
</div>
|
||||
{loading ? (
|
||||
<p className="px-4 py-4 text-sm text-text-secondary">Loading list...</p>
|
||||
) : items.length === 0 ? (
|
||||
<p className="px-4 py-4 text-sm text-text-secondary">No records yet.</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{historyOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
|
||||
<div
|
||||
className="w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-text-primary">Invitation history</h2>
|
||||
<Button type="button" size="sm" onClick={() => setHistoryOpen(false)}>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{historyLoading ? (
|
||||
<p className="text-sm text-text-secondary">Loading invitation history...</p>
|
||||
) : historyItems.length === 0 ? (
|
||||
<p className="text-sm text-text-secondary">No invitations yet.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<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">Type</th>
|
||||
<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>
|
||||
@@ -300,43 +530,26 @@ export default function OrganizationsPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item) => (
|
||||
<tr key={item.id} className="border-b border-border/40 last:border-0">
|
||||
<td className="p-3 text-text-secondary">
|
||||
{item.kind === 'LINK' ? 'Link request' : 'Invitation'}
|
||||
</td>
|
||||
<td className="p-3 text-text-primary">{item.organizationName}</td>
|
||||
<td className="p-3 text-text-secondary">{item.ownerEmail}</td>
|
||||
{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">
|
||||
<Badge
|
||||
variant={organizationLinkStatusVariant(item.status)}
|
||||
fixedWidth
|
||||
>
|
||||
{formatOrganizationStatusLabel(item.status)}
|
||||
<Badge variant={organizationLinkStatusVariant(inv.status)} fixedWidth={false}>
|
||||
{formatInvitationStatusLabel(inv.status)}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="p-3">
|
||||
{item.kind === 'INVITATION' &&
|
||||
item.status === 'PENDING' &&
|
||||
pendingInviteLinks[item.id]?.invitationUrl && (
|
||||
{inv.status === 'PENDING' ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(
|
||||
pendingInviteLinks[item.id].invitationUrl,
|
||||
);
|
||||
setCopiedId(item.id);
|
||||
setTimeout(() => setCopiedId(null), 1500);
|
||||
} catch {
|
||||
setError('Could not copy invitation link');
|
||||
}
|
||||
}}
|
||||
onClick={() => void copyInvitationLink(inv.id)}
|
||||
>
|
||||
{copiedId === item.id ? 'Copied' : 'Copy link'}
|
||||
{copiedId === inv.id ? 'Copied' : 'Copy link'}
|
||||
</Button>
|
||||
) : (
|
||||
<span className="text-xs text-text-muted">—</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -347,5 +560,7 @@ export default function OrganizationsPage() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,13 +10,21 @@ export interface CounterpartSearchResultDto {
|
||||
|
||||
export interface CounterpartItemDto {
|
||||
id: string;
|
||||
kind: 'LINK' | 'INVITATION';
|
||||
requestedByOrganizationId: string | null;
|
||||
counterpartOrganizationId: string | null;
|
||||
organizationName: string;
|
||||
ownerEmail: string;
|
||||
phone: string | null;
|
||||
status: 'PENDING' | 'ACTIVE' | 'REJECTED' | 'EXPIRED';
|
||||
invitationUrl: string | null;
|
||||
createdAt: string;
|
||||
acceptedAt: string | null;
|
||||
}
|
||||
|
||||
export interface OrganizationInvitationHistoryItemDto {
|
||||
id: string;
|
||||
organizationName: string;
|
||||
ownerEmail: string;
|
||||
status: 'PENDING' | 'ACTIVE' | 'REJECTED' | 'EXPIRED';
|
||||
createdAt: string;
|
||||
acceptedAt: string | null;
|
||||
}
|
||||
@@ -32,6 +40,14 @@ export const organizationApi = {
|
||||
return response.data;
|
||||
},
|
||||
|
||||
listInvitations: async (): Promise<{
|
||||
success: boolean;
|
||||
data: { items: OrganizationInvitationHistoryItemDto[] };
|
||||
}> => {
|
||||
const response = await apiClient.get('/organizations/invitations');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
createLink: async (
|
||||
targetOrganizationId: string,
|
||||
): Promise<{ success: boolean; data: { id: string; status: 'PENDING' | 'ACTIVE' | 'REJECTED' } }> => {
|
||||
@@ -39,6 +55,19 @@ export const organizationApi = {
|
||||
return response.data;
|
||||
},
|
||||
|
||||
respondLink: async (
|
||||
linkId: string,
|
||||
action: 'ACCEPT' | 'REJECT',
|
||||
): Promise<{ success: boolean; data: { id: string; status: 'PENDING' | 'ACTIVE' | 'REJECTED' } }> => {
|
||||
const response = await apiClient.patch(`/organizations/links/${linkId}/respond`, { action });
|
||||
return response.data;
|
||||
},
|
||||
|
||||
deleteLink: async (linkId: string): Promise<{ success: boolean; data: { id: string }; message: string }> => {
|
||||
const response = await apiClient.delete(`/organizations/links/${linkId}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
invite: async (body: {
|
||||
organizationName: string;
|
||||
ownerEmail: string;
|
||||
@@ -48,6 +77,13 @@ export const organizationApi = {
|
||||
return response.data;
|
||||
},
|
||||
|
||||
getInvitationLink: async (
|
||||
invitationId: string,
|
||||
): Promise<{ success: boolean; data: { invitationId: string; invitationUrl: string } }> => {
|
||||
const response = await apiClient.post(`/organizations/invitations/${invitationId}/link`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
previewInvite: async (
|
||||
token: string,
|
||||
): Promise<{
|
||||
|
||||
Reference in New Issue
Block a user