Compare commits
5 Commits
improvemen
...
improvemen
| Author | SHA1 | Date | |
|---|---|---|---|
| 7a847d5326 | |||
| ca9e684ab4 | |||
| c154b6dabf | |||
| 207e7fed75 | |||
| 063a5faa56 |
@@ -0,0 +1,2 @@
|
||||
ALTER TABLE "users"
|
||||
ADD COLUMN "trialUsedAt" TIMESTAMP(3);
|
||||
@@ -15,6 +15,7 @@ model User {
|
||||
googleId String? @unique
|
||||
facebookId String? @unique
|
||||
name String
|
||||
trialUsedAt DateTime?
|
||||
|
||||
memberships Membership[]
|
||||
ownedOrganizations Organization[] @relation("OrganizationOwner")
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
// backend/prisma/seed.ts
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import * as bcrypt from 'bcrypt';
|
||||
import { config } from 'dotenv';
|
||||
import path from 'path';
|
||||
|
||||
@@ -29,14 +28,14 @@ async function main() {
|
||||
console.log('✅ Database connected successfully');
|
||||
|
||||
// Create organization types
|
||||
const clinicType = await prisma.organizationType.upsert({
|
||||
await prisma.organizationType.upsert({
|
||||
where: { name: 'CLINIC' },
|
||||
update: {},
|
||||
create: { name: 'CLINIC' },
|
||||
});
|
||||
console.log('✅ Created clinic type');
|
||||
|
||||
const labType = await prisma.organizationType.upsert({
|
||||
await prisma.organizationType.upsert({
|
||||
where: { name: 'LAB' },
|
||||
update: {},
|
||||
create: { name: 'LAB' },
|
||||
@@ -61,32 +60,39 @@ async function main() {
|
||||
}
|
||||
console.log('✅ Created plans');
|
||||
|
||||
// Create features and permissions
|
||||
// Minimal permission model (confirmed):
|
||||
// - Sidebar tabs use READ/EDIT
|
||||
// - EDIT implies READ in app logic
|
||||
// - Owners effectively get all permissions
|
||||
const features = [
|
||||
{
|
||||
name: 'Patient Management',
|
||||
permissions: ['VIEW_PATIENTS', 'CREATE_PATIENTS', 'EDIT_PATIENTS', 'DELETE_PATIENTS']
|
||||
name: 'Today',
|
||||
permissions: ['TAB_TODAY_READ', 'TAB_TODAY_EDIT'],
|
||||
},
|
||||
{
|
||||
name: 'Order Management',
|
||||
permissions: ['VIEW_ORDERS', 'CREATE_ORDERS', 'EDIT_ORDERS', 'DELETE_ORDERS', 'TRACK_ORDERS']
|
||||
name: 'Patients',
|
||||
permissions: ['TAB_PATIENTS_READ', 'TAB_PATIENTS_EDIT'],
|
||||
},
|
||||
{
|
||||
name: 'Case Management',
|
||||
permissions: ['VIEW_CASES', 'CREATE_CASES', 'EDIT_CASES', 'DELETE_CASES']
|
||||
name: 'Appointments',
|
||||
permissions: ['TAB_APPOINTMENTS_READ', 'TAB_APPOINTMENTS_EDIT'],
|
||||
},
|
||||
{
|
||||
name: 'Reports',
|
||||
permissions: ['VIEW_REPORTS', 'EXPORT_REPORTS']
|
||||
name: 'Staff Management',
|
||||
permissions: ['TAB_STAFF_READ', 'TAB_STAFF_EDIT'],
|
||||
},
|
||||
{
|
||||
name: 'Team Management',
|
||||
permissions: ['INVITE_USERS', 'REMOVE_USERS', 'MANAGE_PERMISSIONS']
|
||||
name: 'Lab Management',
|
||||
permissions: ['TAB_LAB_READ', 'TAB_LAB_EDIT'],
|
||||
},
|
||||
{
|
||||
name: 'Billing',
|
||||
permissions: ['VIEW_INVOICES', 'CREATE_INVOICES', 'MANAGE_PAYMENTS']
|
||||
}
|
||||
permissions: ['TAB_BILLING_READ', 'TAB_BILLING_EDIT'],
|
||||
},
|
||||
{
|
||||
name: 'Reports',
|
||||
permissions: ['TAB_REPORTS_READ', 'TAB_REPORTS_EDIT'],
|
||||
},
|
||||
];
|
||||
|
||||
for (const feature of features) {
|
||||
@@ -109,7 +115,7 @@ async function main() {
|
||||
}
|
||||
console.log('✅ Created features and permissions');
|
||||
|
||||
console.log('🌱 Seeding completed successfully!'); ``
|
||||
console.log('🌱 Seeding completed successfully!');
|
||||
}
|
||||
|
||||
main()
|
||||
|
||||
@@ -25,6 +25,7 @@ import {
|
||||
import { AuthService } from './auth.service';
|
||||
import { LoginDto } from './dto/login.dto';
|
||||
import { RegisterDto } from './dto/register.dto';
|
||||
import { CreateOrganizationDto } from './dto/create-organization.dto';
|
||||
import { JwtAuthGuard } from './guards/jwt-auth.guard';
|
||||
import { LocalAuthGuard } from './guards/local-auth.guard';
|
||||
|
||||
@@ -120,6 +121,14 @@ export class AuthController {
|
||||
};
|
||||
}
|
||||
|
||||
@Post('organizations')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@ApiBearerAuth('JWT-auth')
|
||||
@ApiOperation({ summary: 'Create organization for current user' })
|
||||
async createOrganization(@Req() req, @Body() dto: CreateOrganizationDto) {
|
||||
return this.authService.createOrganization(req.user.id, dto);
|
||||
}
|
||||
|
||||
// =========================
|
||||
// PROFILE
|
||||
// =========================
|
||||
@@ -136,6 +145,42 @@ export class AuthController {
|
||||
return this.authService.getProfile(req.user.id);
|
||||
}
|
||||
|
||||
@Get('subscription-alert')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@ApiBearerAuth('JWT-auth')
|
||||
@ApiOperation({
|
||||
summary:
|
||||
'Owner-only: seat / trial status for warning indicator (current org from JWT)',
|
||||
})
|
||||
async getSubscriptionAlert(@Req() req) {
|
||||
return this.authService.getOwnerSubscriptionAlert(
|
||||
req.user.id,
|
||||
req.user.organizationId,
|
||||
);
|
||||
}
|
||||
|
||||
// =========================
|
||||
// LOGOUT
|
||||
// =========================
|
||||
@Post('logout')
|
||||
@HttpCode(HttpStatus.OK)
|
||||
@ApiOperation({ summary: 'Logout current user' })
|
||||
@ApiResponse({ status: 200, description: 'Logout successful' })
|
||||
async logout(@Req() req, @Res({ passthrough: true }) res: Response) {
|
||||
const accessToken = req?.cookies?.accessToken;
|
||||
|
||||
if (accessToken) {
|
||||
await this.authService.logout(accessToken);
|
||||
}
|
||||
|
||||
this.clearAuthCookies(res);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Logged out successfully',
|
||||
};
|
||||
}
|
||||
|
||||
// =========================
|
||||
// TEST
|
||||
// =========================
|
||||
@@ -174,4 +219,19 @@ export class AuthController {
|
||||
path: '/',
|
||||
});
|
||||
}
|
||||
|
||||
private clearAuthCookies(res: Response) {
|
||||
res.clearCookie('accessToken', {
|
||||
httpOnly: true,
|
||||
secure: false,
|
||||
sameSite: 'lax',
|
||||
path: '/',
|
||||
});
|
||||
res.clearCookie('refreshToken', {
|
||||
httpOnly: true,
|
||||
secure: false,
|
||||
sameSite: 'lax',
|
||||
path: '/',
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -12,30 +12,24 @@ import * as bcrypt from 'bcrypt';
|
||||
import { PrismaService } from '../../../prisma/prisma.service';
|
||||
import { LoginDto } from './dto/login.dto';
|
||||
import { RegisterDto } from './dto/register.dto';
|
||||
import { CreateOrganizationDto } from './dto/create-organization.dto';
|
||||
import { JwtPayload } from './interfaces/jwt-payload.interface';
|
||||
|
||||
const ALL_PERMISSIONS = [
|
||||
'VIEW_PATIENTS',
|
||||
'CREATE_PATIENTS',
|
||||
'EDIT_PATIENTS',
|
||||
'DELETE_PATIENTS',
|
||||
'VIEW_ORDERS',
|
||||
'CREATE_ORDERS',
|
||||
'EDIT_ORDERS',
|
||||
'DELETE_ORDERS',
|
||||
'TRACK_ORDERS',
|
||||
'VIEW_CASES',
|
||||
'CREATE_CASES',
|
||||
'EDIT_CASES',
|
||||
'DELETE_CASES',
|
||||
'VIEW_REPORTS',
|
||||
'EXPORT_REPORTS',
|
||||
'INVITE_USERS',
|
||||
'REMOVE_USERS',
|
||||
'MANAGE_PERMISSIONS',
|
||||
'VIEW_INVOICES',
|
||||
'CREATE_INVOICES',
|
||||
'MANAGE_PAYMENTS',
|
||||
'TAB_TODAY_READ',
|
||||
'TAB_TODAY_EDIT',
|
||||
'TAB_PATIENTS_READ',
|
||||
'TAB_PATIENTS_EDIT',
|
||||
'TAB_APPOINTMENTS_READ',
|
||||
'TAB_APPOINTMENTS_EDIT',
|
||||
'TAB_STAFF_READ',
|
||||
'TAB_STAFF_EDIT',
|
||||
'TAB_LAB_READ',
|
||||
'TAB_LAB_EDIT',
|
||||
'TAB_BILLING_READ',
|
||||
'TAB_BILLING_EDIT',
|
||||
'TAB_REPORTS_READ',
|
||||
'TAB_REPORTS_EDIT',
|
||||
];
|
||||
|
||||
@Injectable()
|
||||
@@ -62,6 +56,7 @@ export class AuthService {
|
||||
organization: {
|
||||
include: {
|
||||
type: true, // Include organization type (CLINIC/LAB)
|
||||
plan: true,
|
||||
}
|
||||
},
|
||||
permissions: {
|
||||
@@ -148,6 +143,12 @@ export class AuthService {
|
||||
permissions: membership.isOwner
|
||||
? ALL_PERMISSIONS
|
||||
: membership.permissions?.map(p => p.permission.name) || [],
|
||||
plan: membership.organization.plan
|
||||
? {
|
||||
name: membership.organization.plan.name,
|
||||
maxUsers: membership.organization.plan.maxUsers,
|
||||
}
|
||||
: undefined,
|
||||
})) || [];
|
||||
|
||||
return {
|
||||
@@ -176,7 +177,7 @@ export class AuthService {
|
||||
* @returns Created user info without password
|
||||
*/
|
||||
async register(registerDto: RegisterDto) {
|
||||
const { email, password, name, organizationName, organizationType } = registerDto;
|
||||
const { email, password, name, organizationName, organizationEmail, organizationType } = registerDto;
|
||||
|
||||
// 1. Check existing user
|
||||
const existingUser = await this.prisma.user.findUnique({
|
||||
@@ -184,7 +185,7 @@ export class AuthService {
|
||||
});
|
||||
|
||||
if (existingUser) {
|
||||
throw new ConflictException('User already exists');
|
||||
throw new ConflictException('User already exists. Please login and create a new organization from your account.');
|
||||
}
|
||||
|
||||
// 2. Hash password
|
||||
@@ -198,16 +199,15 @@ export class AuthService {
|
||||
email,
|
||||
passwordHash: hashedPassword,
|
||||
name,
|
||||
trialUsedAt: new Date(),
|
||||
},
|
||||
});
|
||||
|
||||
// Create organization
|
||||
const organization = await tx.organization.create({
|
||||
data: {
|
||||
name: registerDto.organizationName,
|
||||
|
||||
// REQUIRED FIELDS 👇
|
||||
email: registerDto.email, // or separate org email if you have one
|
||||
name: organizationName,
|
||||
email: organizationEmail,
|
||||
|
||||
owner: {
|
||||
connect: { id: user.id },
|
||||
@@ -219,7 +219,7 @@ export class AuthService {
|
||||
|
||||
type: {
|
||||
connect: {
|
||||
name: registerDto.organizationType, // 'CLINIC' | 'LAB'
|
||||
name: organizationType, // 'CLINIC' | 'LAB'
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -247,6 +247,66 @@ export class AuthService {
|
||||
return this.login({ email, password } as any, validatedUser);
|
||||
}
|
||||
|
||||
async createOrganization(userId: string, dto: CreateOrganizationDto) {
|
||||
const owner = await this.prisma.user.findUnique({
|
||||
where: { id: userId },
|
||||
select: { id: true, trialUsedAt: true },
|
||||
});
|
||||
|
||||
if (!owner) {
|
||||
throw new UnauthorizedException('User not found');
|
||||
}
|
||||
|
||||
const planName = dto.planName?.trim() || 'Small';
|
||||
const effectivePlanName = owner.trialUsedAt ? planName : 'trial';
|
||||
|
||||
const organization = await this.prisma.$transaction(async (tx) => {
|
||||
const createdOrganization = await tx.organization.create({
|
||||
data: {
|
||||
name: dto.organizationName,
|
||||
email: dto.organizationEmail,
|
||||
owner: {
|
||||
connect: { id: userId },
|
||||
},
|
||||
plan: {
|
||||
connect: { name: effectivePlanName },
|
||||
},
|
||||
type: {
|
||||
connect: { name: dto.organizationType },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
await tx.membership.create({
|
||||
data: {
|
||||
userId,
|
||||
organizationId: createdOrganization.id,
|
||||
isOwner: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!owner.trialUsedAt) {
|
||||
await tx.user.update({
|
||||
where: { id: userId },
|
||||
data: { trialUsedAt: new Date() },
|
||||
});
|
||||
}
|
||||
|
||||
return createdOrganization;
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
organization: {
|
||||
id: organization.id,
|
||||
name: organization.name,
|
||||
email: organization.email,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get user profile with all memberships and permissions
|
||||
* @param userId - User ID from JWT token
|
||||
@@ -262,6 +322,7 @@ export class AuthService {
|
||||
organization: {
|
||||
include: {
|
||||
type: true,
|
||||
plan: true,
|
||||
},
|
||||
},
|
||||
permissions: {
|
||||
@@ -286,7 +347,15 @@ export class AuthService {
|
||||
name: membership.organization.name,
|
||||
type: membership.organization.type.name,
|
||||
isOwner: membership.isOwner,
|
||||
permissions: membership.permissions?.map(p => p.permission.name) || [],
|
||||
permissions: membership.isOwner
|
||||
? ALL_PERMISSIONS
|
||||
: membership.permissions?.map(p => p.permission.name) || [],
|
||||
plan: membership.organization.plan
|
||||
? {
|
||||
name: membership.organization.plan.name,
|
||||
maxUsers: membership.organization.plan.maxUsers,
|
||||
}
|
||||
: undefined,
|
||||
})) || [];
|
||||
|
||||
return {
|
||||
@@ -352,6 +421,7 @@ export class AuthService {
|
||||
organization: {
|
||||
include: {
|
||||
type: true,
|
||||
plan: true,
|
||||
},
|
||||
},
|
||||
permissions: {
|
||||
@@ -397,7 +467,15 @@ export class AuthService {
|
||||
name: membership.organization.name,
|
||||
type: membership.organization.type.name,
|
||||
isOwner: membership.isOwner,
|
||||
permissions: membership.permissions?.map(p => p.permission.name) || [],
|
||||
permissions: membership.isOwner
|
||||
? ALL_PERMISSIONS
|
||||
: membership.permissions?.map(p => p.permission.name) || [],
|
||||
plan: membership.organization.plan
|
||||
? {
|
||||
name: membership.organization.plan.name,
|
||||
maxUsers: membership.organization.plan.maxUsers,
|
||||
}
|
||||
: undefined,
|
||||
})) || [];
|
||||
|
||||
return {
|
||||
@@ -569,6 +647,7 @@ export class AuthService {
|
||||
organization: {
|
||||
include: {
|
||||
type: true,
|
||||
plan: true,
|
||||
},
|
||||
},
|
||||
permissions: {
|
||||
@@ -594,7 +673,15 @@ export class AuthService {
|
||||
name: membership.organization.name,
|
||||
type: membership.organization.type.name,
|
||||
isOwner: membership.isOwner,
|
||||
permissions: membership.permissions?.map(p => p.permission.name) || [],
|
||||
permissions: membership.isOwner
|
||||
? ALL_PERMISSIONS
|
||||
: membership.permissions?.map(p => p.permission.name) || [],
|
||||
plan: membership.organization.plan
|
||||
? {
|
||||
name: membership.organization.plan.name,
|
||||
maxUsers: membership.organization.plan.maxUsers,
|
||||
}
|
||||
: undefined,
|
||||
})) || [];
|
||||
|
||||
return {
|
||||
@@ -617,6 +704,7 @@ export class AuthService {
|
||||
organizationId,
|
||||
},
|
||||
include: {
|
||||
user: true,
|
||||
organization: {
|
||||
include: {
|
||||
type: true,
|
||||
@@ -638,7 +726,7 @@ export class AuthService {
|
||||
// 2. Build payload WITH org context
|
||||
const payload = {
|
||||
sub: userId,
|
||||
email: membership.organization.email,
|
||||
email: membership.user.email,
|
||||
organizationId: membership.organizationId,
|
||||
type: 'access',
|
||||
};
|
||||
@@ -650,7 +738,9 @@ export class AuthService {
|
||||
});
|
||||
|
||||
// 4. Format permissions
|
||||
const permissions = membership.permissions.map(p => p.permission.name);
|
||||
const permissions = membership.isOwner
|
||||
? ALL_PERMISSIONS
|
||||
: membership.permissions.map(p => p.permission.name);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
@@ -660,9 +750,101 @@ export class AuthService {
|
||||
id: membership.organization.id,
|
||||
name: membership.organization.name,
|
||||
type: membership.organization.type.name,
|
||||
isOwner: membership.isOwner,
|
||||
plan: membership.organization.plan
|
||||
? {
|
||||
name: membership.organization.plan.name,
|
||||
maxUsers: membership.organization.plan.maxUsers,
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
permissions,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Owner-only subscription / seat alerts for the current org (from JWT).
|
||||
* Used for a subtle warning indicator in the app shell (not staff-facing banners).
|
||||
*/
|
||||
async getOwnerSubscriptionAlert(userId: string, organizationId: string | undefined) {
|
||||
if (!organizationId) {
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
showWarning: false,
|
||||
seatsLow: false,
|
||||
trialEndingSoon: false,
|
||||
trialExpired: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const membership = await this.prisma.membership.findFirst({
|
||||
where: { userId, organizationId },
|
||||
include: {
|
||||
organization: {
|
||||
include: { plan: true },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!membership || !membership.isOwner) {
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
showWarning: false,
|
||||
seatsLow: false,
|
||||
trialEndingSoon: false,
|
||||
trialExpired: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const org = membership.organization;
|
||||
const plan = org.plan;
|
||||
const maxUsers = plan.maxUsers;
|
||||
const seatsUsed = await this.prisma.membership.count({
|
||||
where: { organizationId: org.id },
|
||||
});
|
||||
|
||||
const unlimited = maxUsers >= 999999;
|
||||
const remaining = unlimited ? Infinity : maxUsers - seatsUsed;
|
||||
const seatsLow =
|
||||
!unlimited && remaining >= 0 && remaining <= 2 && maxUsers > 0;
|
||||
|
||||
let trialEndingSoon = false;
|
||||
let trialExpired = false;
|
||||
let daysUntilTrialEnd: number | null = null;
|
||||
let trialEndsAt: string | null = null;
|
||||
|
||||
if (plan.name === 'trial') {
|
||||
const end = new Date(org.createdAt);
|
||||
end.setDate(end.getDate() + 30);
|
||||
trialEndsAt = end.toISOString();
|
||||
const ms = end.getTime() - Date.now();
|
||||
daysUntilTrialEnd = Math.ceil(ms / (1000 * 60 * 60 * 24));
|
||||
if (daysUntilTrialEnd <= 0) {
|
||||
trialExpired = true;
|
||||
} else if (daysUntilTrialEnd <= 7) {
|
||||
trialEndingSoon = true;
|
||||
}
|
||||
}
|
||||
|
||||
const showWarning = seatsLow || trialEndingSoon || trialExpired;
|
||||
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
showWarning,
|
||||
seatsLow,
|
||||
trialEndingSoon,
|
||||
trialExpired,
|
||||
seatsUsed,
|
||||
seatsLimit: maxUsers,
|
||||
daysUntilTrialEnd,
|
||||
trialEndsAt,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
16
backend/src/modules/auth/dto/create-organization.dto.ts
Normal file
16
backend/src/modules/auth/dto/create-organization.dto.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { IsEmail, IsEnum, IsOptional, IsString } from 'class-validator';
|
||||
|
||||
export class CreateOrganizationDto {
|
||||
@IsString()
|
||||
organizationName: string;
|
||||
|
||||
@IsEmail()
|
||||
organizationEmail: string;
|
||||
|
||||
@IsEnum(['CLINIC', 'LAB'])
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
planName?: string;
|
||||
}
|
||||
@@ -14,6 +14,9 @@ export class RegisterDto {
|
||||
@IsString()
|
||||
organizationName: string;
|
||||
|
||||
@IsEmail()
|
||||
organizationEmail: string;
|
||||
|
||||
@IsEnum(['CLINIC', 'LAB'])
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
export interface JwtPayload {
|
||||
sub: string; // user id
|
||||
email: string;
|
||||
organizationId?: string;
|
||||
type?: 'access' | 'refresh';
|
||||
}
|
||||
|
||||
|
||||
@@ -1,18 +1,15 @@
|
||||
'use client';
|
||||
|
||||
import { memo, useCallback, useEffect } from 'react';
|
||||
import { memo, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import Sidebar from '@/components/ui/Sidebar';
|
||||
import { ThemeToggle } from '@/components/ui/ThemeToggle';
|
||||
import { LogOut } from 'lucide-react';
|
||||
import { DashboardAccountMenu } from '@/components/ui/DashboardAccountMenu';
|
||||
|
||||
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
|
||||
const { user, currentOrganization, isAuthReady, logout } = useAuth();
|
||||
const { user, currentOrganization, isAuthReady } = useAuth();
|
||||
const router = useRouter();
|
||||
const handleLogout = useCallback(() => {
|
||||
void logout();
|
||||
}, [logout]);
|
||||
|
||||
// ✅ AUTH GUARD (runs once per navigation group)
|
||||
useEffect(() => {
|
||||
@@ -51,11 +48,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
<Sidebar />
|
||||
|
||||
<div className="flex-1 flex flex-col">
|
||||
<DashboardHeader
|
||||
organizationName={currentOrganization.name}
|
||||
userName={user.name}
|
||||
onLogout={handleLogout}
|
||||
/>
|
||||
<DashboardHeader organizationName={currentOrganization.name} />
|
||||
|
||||
<main className="p-6 flex-1 overflow-y-auto">
|
||||
<div className="surface-panel p-6 min-h-full">
|
||||
@@ -69,27 +62,16 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
|
||||
|
||||
const DashboardHeader = memo(function DashboardHeader({
|
||||
organizationName,
|
||||
userName,
|
||||
onLogout,
|
||||
}: {
|
||||
organizationName: string;
|
||||
userName: string;
|
||||
onLogout: () => void;
|
||||
}) {
|
||||
return (
|
||||
<header className="flex justify-between px-6 py-4 border-b border-border/70 backdrop-blur-sm">
|
||||
<h2 className="text-lg font-medium">{organizationName}</h2>
|
||||
<header className="h-[71px] flex justify-between items-center gap-4 px-6 border-b border-border/70 backdrop-blur-sm">
|
||||
<h2 className="text-lg font-medium truncate min-w-0">{organizationName}</h2>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<ThemeToggle />
|
||||
<span className="text-sm text-text-secondary">{userName}</span>
|
||||
<button
|
||||
onClick={onLogout}
|
||||
className="inline-flex items-center gap-2 text-sm text-text-secondary hover:text-text-primary transition-colors"
|
||||
>
|
||||
<LogOut className="w-4 h-4 icon-flat" />
|
||||
Logout
|
||||
</button>
|
||||
<DashboardAccountMenu />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
29
frontend/src/app/(dashboard)/settings/account/page.tsx
Normal file
29
frontend/src/app/(dashboard)/settings/account/page.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function AccountSettingsPage() {
|
||||
return (
|
||||
<div className="max-w-xl space-y-6">
|
||||
<div>
|
||||
<Link
|
||||
href="/today"
|
||||
className="text-sm text-primary hover:opacity-90"
|
||||
>
|
||||
← Back to app
|
||||
</Link>
|
||||
<h1 className="text-2xl font-semibold text-text-primary mt-4">Account</h1>
|
||||
<p className="text-text-secondary text-sm mt-2">
|
||||
Profile and security settings for your login.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="surface-card p-6 space-y-3">
|
||||
<p className="text-sm text-text-secondary">
|
||||
Password change and profile editing will be wired here next (e.g. invite
|
||||
flow, reset password).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
103
frontend/src/app/(dashboard)/settings/subscriptions/page.tsx
Normal file
103
frontend/src/app/(dashboard)/settings/subscriptions/page.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { authApi } from '@/lib/api/auth';
|
||||
import type { SubscriptionAlertData } from '@/types';
|
||||
|
||||
export default function SubscriptionsSettingsPage() {
|
||||
const { currentOrganization } = useAuth();
|
||||
const router = useRouter();
|
||||
const [alert, setAlert] = useState<SubscriptionAlertData | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentOrganization && !currentOrganization.isOwner) {
|
||||
router.replace('/today');
|
||||
}
|
||||
}, [currentOrganization, router]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentOrganization?.isOwner) return;
|
||||
void authApi.getSubscriptionAlert().then((r) => {
|
||||
if (r.success) setAlert(r.data);
|
||||
});
|
||||
}, [currentOrganization?.id, currentOrganization?.isOwner]);
|
||||
|
||||
if (!currentOrganization) {
|
||||
return (
|
||||
<p className="text-text-secondary text-sm">Loading...</p>
|
||||
);
|
||||
}
|
||||
|
||||
if (!currentOrganization.isOwner) {
|
||||
return (
|
||||
<p className="text-text-secondary text-sm">Redirecting...</p>
|
||||
);
|
||||
}
|
||||
|
||||
const plan = currentOrganization.plan;
|
||||
const maxUsers = plan?.maxUsers;
|
||||
|
||||
return (
|
||||
<div className="max-w-xl space-y-6">
|
||||
<div>
|
||||
<Link
|
||||
href="/today"
|
||||
className="text-sm text-primary hover:opacity-90"
|
||||
>
|
||||
← Back to app
|
||||
</Link>
|
||||
<h1 className="text-2xl font-semibold text-text-primary mt-4">Subscriptions</h1>
|
||||
<p className="text-text-secondary text-sm mt-2">
|
||||
Your DyoLink workspace plan and seats for{' '}
|
||||
<span className="text-text-primary font-medium">{currentOrganization.name}</span>.
|
||||
Clinic and lab income tracking stays under the sidebar{' '}
|
||||
<span className="text-text-primary">Billing</span> tab.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="surface-card p-6 space-y-4">
|
||||
<div className="flex flex-wrap gap-4 justify-between">
|
||||
<div>
|
||||
<p className="text-xs text-text-muted uppercase tracking-wide">Current plan</p>
|
||||
<p className="text-lg font-medium text-text-primary capitalize">
|
||||
{plan?.name ?? '—'}
|
||||
</p>
|
||||
</div>
|
||||
{typeof maxUsers === 'number' && maxUsers < 999999 && (
|
||||
<div>
|
||||
<p className="text-xs text-text-muted uppercase tracking-wide">Seats (this org)</p>
|
||||
<p className="text-lg font-medium text-text-primary">
|
||||
{alert?.seatsUsed ?? '—'} / {maxUsers}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{alert?.showWarning && (
|
||||
<div className="text-sm text-text-secondary space-y-1">
|
||||
{alert.trialExpired && (
|
||||
<p>Trial period has ended. Choose a plan when checkout is available.</p>
|
||||
)}
|
||||
{!alert.trialExpired && alert.trialEndingSoon && (
|
||||
<p>
|
||||
Trial ends in {alert.daysUntilTrialEnd ?? '—'} day(s).
|
||||
</p>
|
||||
)}
|
||||
{!alert.trialExpired && !alert.trialEndingSoon && alert.seatsLow && (
|
||||
<p>Seat usage is high for this organization.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-sm text-text-secondary">
|
||||
Payment and plan upgrades will connect here. The warning on the settings
|
||||
icon is only shown to workspace owners when seats are low or the trial window
|
||||
is ending.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -18,6 +18,7 @@ const registerSchema = z.object({
|
||||
.regex(/[0-9]/, 'Password must contain at least one number'),
|
||||
confirmPassword: z.string(),
|
||||
organizationName: z.string().min(2, 'Organization name must be at least 2 characters'),
|
||||
organizationEmail: z.string().email('Please enter a valid organization email'),
|
||||
organizationType: z.enum(['CLINIC', 'LAB'], {
|
||||
message: 'Please select organization type',
|
||||
}),
|
||||
@@ -47,7 +48,7 @@ export default function RegisterPage() {
|
||||
const handleNext = async () => {
|
||||
const fieldsToValidate = step === 1
|
||||
? ['name', 'email', 'password', 'confirmPassword']
|
||||
: ['organizationName', 'organizationType'];
|
||||
: ['organizationName', 'organizationEmail', 'organizationType'];
|
||||
|
||||
const isValid = await trigger(fieldsToValidate as any);
|
||||
if (isValid) {
|
||||
@@ -62,6 +63,7 @@ export default function RegisterPage() {
|
||||
data.password,
|
||||
data.name,
|
||||
data.organizationName,
|
||||
data.organizationEmail,
|
||||
data.organizationType
|
||||
);
|
||||
// No need to redirect - auth context will handle it
|
||||
@@ -182,6 +184,14 @@ export default function RegisterPage() {
|
||||
error={errors.organizationName?.message}
|
||||
icon={<Building2 className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label="Organization email"
|
||||
{...register('organizationEmail')}
|
||||
type="email"
|
||||
placeholder="contact@sunshineclinic.com"
|
||||
error={errors.organizationEmail?.message}
|
||||
icon={<Mail className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-secondary mb-2">
|
||||
Organization type
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { Building2, Beaker } from 'lucide-react';
|
||||
import { Building2, Beaker, Mail, Plus } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
|
||||
export default function SelectOrganizationPage() {
|
||||
const { organizations, selectOrganization, isLoading } = useAuth();
|
||||
|
||||
// ✅ Auto-redirect if only one organization
|
||||
useEffect(() => {
|
||||
if (!isLoading && organizations.length === 1) {
|
||||
selectOrganization(organizations[0].id);
|
||||
}
|
||||
}, [organizations, isLoading]);
|
||||
const { organizations, selectOrganization, createOrganization, isLoading, error, clearError } = useAuth();
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
const [organizationName, setOrganizationName] = useState('');
|
||||
const [organizationEmail, setOrganizationEmail] = useState('');
|
||||
const [organizationType, setOrganizationType] = useState<'CLINIC' | 'LAB'>('CLINIC');
|
||||
|
||||
const getIcon = (type: string) => {
|
||||
return type === 'CLINIC'
|
||||
@@ -20,60 +19,152 @@ export default function SelectOrganizationPage() {
|
||||
: <Beaker className="h-8 w-8 icon-flat" />;
|
||||
};
|
||||
|
||||
const handleCreateOrganization = async () => {
|
||||
try {
|
||||
clearError();
|
||||
const createdId = await createOrganization(
|
||||
organizationName.trim(),
|
||||
organizationEmail.trim(),
|
||||
organizationType,
|
||||
);
|
||||
setOrganizationName('');
|
||||
setOrganizationEmail('');
|
||||
setOrganizationType('CLINIC');
|
||||
setIsCreateOpen(false);
|
||||
await selectOrganization(createdId);
|
||||
} catch {
|
||||
// Error is already handled in auth context.
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen app-web-bg flex items-center justify-center">
|
||||
<p className="text-text-secondary">Loading organizations...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!organizations.length) {
|
||||
return (
|
||||
<div className="min-h-screen app-web-bg flex items-center justify-center">
|
||||
<p className="text-text-secondary">No organizations found.</p>
|
||||
<p className="text-text-secondary">Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen app-web-bg flex items-center justify-center p-4">
|
||||
<div className="max-w-2xl w-full">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-semibold text-text-primary">
|
||||
Choose Organization
|
||||
</h1>
|
||||
<p className="text-text-secondary mt-2">
|
||||
You have access to multiple organizations. Select one to continue.
|
||||
</p>
|
||||
<div className="min-h-screen app-web-bg p-4 sm:p-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-semibold text-text-primary">Organizations</h1>
|
||||
<p className="text-text-secondary mt-2">
|
||||
Select an organization to continue, or create a new one.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant={isCreateOpen ? 'outline' : 'primary'}
|
||||
onClick={() => {
|
||||
clearError();
|
||||
setIsCreateOpen(prev => !prev);
|
||||
}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2 icon-flat" />
|
||||
{isCreateOpen ? 'Cancel' : 'Create Organization'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{organizations.map((org) => (
|
||||
<button
|
||||
key={org.id}
|
||||
onClick={() => selectOrganization(org.id)}
|
||||
className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
|
||||
>
|
||||
<div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
|
||||
{getIcon(org.type)}
|
||||
{isCreateOpen && (
|
||||
<div className="surface-card p-6 mb-6 space-y-4">
|
||||
<Input
|
||||
label="Organization name"
|
||||
value={organizationName}
|
||||
onChange={(event) => setOrganizationName(event.target.value)}
|
||||
placeholder="Sunshine Dental Clinic"
|
||||
icon={<Building2 className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<Input
|
||||
label="Organization email"
|
||||
value={organizationEmail}
|
||||
onChange={(event) => setOrganizationEmail(event.target.value)}
|
||||
placeholder="contact@sunshineclinic.com"
|
||||
type="email"
|
||||
icon={<Mail className="h-5 w-5 icon-flat" />}
|
||||
/>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-secondary mb-2">
|
||||
Organization type
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOrganizationType('CLINIC')}
|
||||
className={`p-3 border rounded-[var(--radius-md)] text-sm ${
|
||||
organizationType === 'CLINIC'
|
||||
? 'border-primary/60 bg-primary-soft text-text-primary'
|
||||
: 'border-border text-text-secondary hover:border-border-strong'
|
||||
}`}
|
||||
>
|
||||
Dental Clinic
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOrganizationType('LAB')}
|
||||
className={`p-3 border rounded-[var(--radius-md)] text-sm ${
|
||||
organizationType === 'LAB'
|
||||
? 'border-primary/60 bg-primary-soft text-text-primary'
|
||||
: 'border-border text-text-secondary hover:border-border-strong'
|
||||
}`}
|
||||
>
|
||||
Dental Lab
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
onClick={handleCreateOrganization}
|
||||
isLoading={isLoading}
|
||||
disabled={!organizationName.trim() || !organizationEmail.trim()}
|
||||
>
|
||||
Create and Continue
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-text-primary">
|
||||
{org.name}
|
||||
</h3>
|
||||
<p className="text-sm text-text-secondary">
|
||||
{org.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab'}
|
||||
</p>
|
||||
</div>
|
||||
{!organizations.length ? (
|
||||
<div className="surface-card p-8 text-center">
|
||||
<p className="text-text-secondary">No organizations found. Create your first one to continue.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4">
|
||||
{organizations.map((org) => (
|
||||
<button
|
||||
key={org.id}
|
||||
onClick={() => selectOrganization(org.id)}
|
||||
className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
|
||||
>
|
||||
<div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
|
||||
{getIcon(org.type)}
|
||||
</div>
|
||||
|
||||
<div className="text-primary text-sm">
|
||||
Continue →
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-text-primary">
|
||||
{org.name}
|
||||
</h3>
|
||||
<p className="text-sm text-text-secondary">
|
||||
{org.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-primary text-sm">
|
||||
Continue →
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
156
frontend/src/components/ui/DashboardAccountMenu.tsx
Normal file
156
frontend/src/components/ui/DashboardAccountMenu.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Settings,
|
||||
AlertTriangle,
|
||||
Building2,
|
||||
CreditCard,
|
||||
User,
|
||||
LogOut,
|
||||
ChevronDown,
|
||||
} from 'lucide-react';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { authApi } from '@/lib/api/auth';
|
||||
import type { SubscriptionAlertData } from '@/types';
|
||||
|
||||
function warningTooltip(data: SubscriptionAlertData | null): string {
|
||||
if (!data?.showWarning) return '';
|
||||
if (data.trialExpired) return 'Trial ended — review Subscriptions';
|
||||
if (data.trialEndingSoon) return 'Trial ending soon — review Subscriptions';
|
||||
if (data.seatsLow) return 'Seats running low — review Subscriptions';
|
||||
return 'Review Subscriptions';
|
||||
}
|
||||
|
||||
export function DashboardAccountMenu() {
|
||||
const { user, currentOrganization, logout } = useAuth();
|
||||
const [open, setOpen] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
const [alert, setAlert] = useState<SubscriptionAlertData | null>(null);
|
||||
const isOwner = currentOrganization?.isOwner ?? false;
|
||||
|
||||
useEffect(() => {
|
||||
const onDocClick = (e: MouseEvent) => {
|
||||
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', onDocClick);
|
||||
return () => document.removeEventListener('mousedown', onDocClick);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOwner || !currentOrganization) {
|
||||
setAlert(null);
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
void (async () => {
|
||||
try {
|
||||
const res = await authApi.getSubscriptionAlert();
|
||||
if (!cancelled && res.success) setAlert(res.data);
|
||||
} catch {
|
||||
if (!cancelled) setAlert(null);
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [isOwner, currentOrganization?.id]);
|
||||
|
||||
const showWarning = Boolean(isOwner && alert?.showWarning);
|
||||
const tooltip = useMemo(() => warningTooltip(alert), [alert]);
|
||||
|
||||
const handleLogout = useCallback(() => {
|
||||
setOpen(false);
|
||||
void logout();
|
||||
}, [logout]);
|
||||
|
||||
return (
|
||||
<div className="relative" ref={menuRef}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="inline-flex items-center gap-2 rounded-[var(--radius-md)] border border-border/70 px-3 py-2 text-sm text-text-primary hover:bg-background-card/80 transition-colors"
|
||||
aria-expanded={open}
|
||||
aria-haspopup="menu"
|
||||
>
|
||||
<span className="relative inline-flex shrink-0" title={showWarning ? tooltip : undefined}>
|
||||
<Settings className="h-5 w-5 icon-flat" aria-hidden />
|
||||
{showWarning && (
|
||||
<span
|
||||
className="absolute -right-1 -top-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-amber-500 ring-2 ring-background-secondary"
|
||||
aria-label={tooltip}
|
||||
>
|
||||
<AlertTriangle className="h-2.5 w-2.5 text-amber-950" strokeWidth={2.5} />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="hidden sm:inline max-w-[160px] truncate">{user?.name}</span>
|
||||
<ChevronDown className="h-4 w-4 text-text-muted shrink-0" aria-hidden />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
role="menu"
|
||||
className="absolute right-0 mt-2 w-72 rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-2 shadow-lg z-50 backdrop-blur-sm"
|
||||
>
|
||||
<div className="px-3 py-2 border-b border-border/60">
|
||||
<p className="text-xs text-text-muted">Signed in</p>
|
||||
<p className="text-sm font-medium truncate">{user?.email}</p>
|
||||
<p className="text-xs text-text-secondary mt-1 truncate">
|
||||
{currentOrganization?.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="py-1">
|
||||
<Link
|
||||
href="/select-organization"
|
||||
role="menuitem"
|
||||
className="flex items-center gap-3 px-3 py-2.5 text-sm text-text-primary hover:bg-background-card/70"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<Building2 className="h-4 w-4 icon-flat shrink-0" />
|
||||
Switch organization
|
||||
</Link>
|
||||
|
||||
{isOwner && (
|
||||
<Link
|
||||
href="/settings/subscriptions"
|
||||
role="menuitem"
|
||||
className="flex items-center gap-3 px-3 py-2.5 text-sm text-text-primary hover:bg-background-card/70"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<CreditCard className="h-4 w-4 icon-flat shrink-0" />
|
||||
Subscriptions
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<Link
|
||||
href="/settings/account"
|
||||
role="menuitem"
|
||||
className="flex items-center gap-3 px-3 py-2.5 text-sm text-text-primary hover:bg-background-card/70"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<User className="h-4 w-4 icon-flat shrink-0" />
|
||||
Account
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border/60 pt-1">
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
className="flex w-full items-center gap-3 px-3 py-2.5 text-sm text-text-secondary hover:bg-background-card/70 hover:text-text-primary"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut className="h-4 w-4 icon-flat shrink-0" />
|
||||
Log out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
UserCog,
|
||||
FlaskConical,
|
||||
FileText,
|
||||
CreditCard
|
||||
CreditCard,
|
||||
} from 'lucide-react';
|
||||
|
||||
const menu = [
|
||||
@@ -27,12 +27,13 @@ function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<aside className="w-64 bg-background-secondary/90 border-r border-border text-text-primary flex flex-col p-4">
|
||||
<div className="mb-6 pb-4 border-b border-border">
|
||||
<h1 className="text-xl font-semibold tracking-tight">DyoLink</h1>
|
||||
<aside className="w-64 bg-background-secondary/90 border-r border-border text-text-primary flex flex-col">
|
||||
<div className="h-[71px] px-4 flex items-center">
|
||||
<h1 className="text-lg font-medium tracking-tight">DyoLink</h1>
|
||||
</div>
|
||||
<div className="mx-4 border-b border-border/70" />
|
||||
|
||||
<nav className="flex flex-col gap-2">
|
||||
<nav className="flex flex-col gap-2 p-4">
|
||||
{menu.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = pathname === item.path;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// src/lib/api/auth.ts
|
||||
import { apiClient } from './client';
|
||||
import { AuthResponse, TrialRegistrationData, LoginData } from '@/types';
|
||||
import { AuthResponse, TrialRegistrationData, LoginData, SubscriptionAlertData } from '@/types';
|
||||
|
||||
export const authApi = {
|
||||
// Register a new trial organization
|
||||
@@ -21,12 +21,32 @@ export const authApi = {
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/** Owner-only meaningful data; staff always gets showWarning: false */
|
||||
getSubscriptionAlert: async (): Promise<{
|
||||
success: boolean;
|
||||
data: SubscriptionAlertData;
|
||||
}> => {
|
||||
const response = await apiClient.get('/auth/subscription-alert');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Select organization
|
||||
selectOrganization: async (organizationId: string): Promise<any> => {
|
||||
const response = await apiClient.post('/auth/select-organization', { organizationId });
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Create organization for current user
|
||||
createOrganization: async (data: {
|
||||
organizationName: string;
|
||||
organizationEmail: string;
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
planName?: string;
|
||||
}): Promise<any> => {
|
||||
const response = await apiClient.post('/auth/organizations', data);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
// Logout
|
||||
logout: async (): Promise<void> => {
|
||||
await apiClient.post('/auth/logout');
|
||||
|
||||
@@ -17,11 +17,18 @@ interface AuthContextType {
|
||||
password: string,
|
||||
name: string,
|
||||
organizationName: string,
|
||||
organizationEmail: string,
|
||||
organizationType: 'CLINIC' | 'LAB'
|
||||
) => Promise<void>;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
logout: () => Promise<void>;
|
||||
selectOrganization: (orgId: string) => Promise<void>;
|
||||
createOrganization: (
|
||||
organizationName: string,
|
||||
organizationEmail: string,
|
||||
organizationType: 'CLINIC' | 'LAB',
|
||||
planName?: string,
|
||||
) => Promise<string>;
|
||||
clearError: () => void;
|
||||
}
|
||||
|
||||
@@ -111,6 +118,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
password: string,
|
||||
name: string,
|
||||
organizationName: string,
|
||||
organizationEmail: string,
|
||||
organizationType: 'CLINIC' | 'LAB'
|
||||
) => {
|
||||
try {
|
||||
@@ -122,6 +130,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
password,
|
||||
name,
|
||||
organizationName,
|
||||
organizationEmail,
|
||||
organizationType,
|
||||
});
|
||||
|
||||
@@ -181,11 +190,22 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
}, [router]);
|
||||
|
||||
const logout = useCallback(async () => {
|
||||
localStorage.clear();
|
||||
setUser(null);
|
||||
setOrganizations([]);
|
||||
setCurrentOrganization(null);
|
||||
router.push('/');
|
||||
try {
|
||||
// Important: clear auth cookies/session on the server first,
|
||||
// otherwise middleware may still treat the user as authenticated.
|
||||
await authApi.logout();
|
||||
} catch (err) {
|
||||
console.error('Logout API failed:', err);
|
||||
} finally {
|
||||
localStorage.clear();
|
||||
setUser(null);
|
||||
setOrganizations([]);
|
||||
setCurrentOrganization(null);
|
||||
setError(null);
|
||||
setIsAuthReady(true);
|
||||
router.replace('/');
|
||||
router.refresh();
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
const selectOrganization = useCallback(async (orgId: string) => {
|
||||
@@ -198,7 +218,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
|
||||
localStorage.setItem('currentOrganizationId', organization.id);
|
||||
|
||||
setCurrentOrganization(organization);
|
||||
setCurrentOrganization({
|
||||
id: organization.id,
|
||||
name: organization.name,
|
||||
type: organization.type as Organization['type'],
|
||||
isOwner: Boolean((organization as { isOwner?: boolean }).isOwner),
|
||||
plan: (organization as { plan?: Organization['plan'] }).plan,
|
||||
});
|
||||
|
||||
router.push('/today');
|
||||
|
||||
@@ -210,6 +236,39 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
const createOrganization = useCallback(async (
|
||||
organizationName: string,
|
||||
organizationEmail: string,
|
||||
organizationType: 'CLINIC' | 'LAB',
|
||||
planName?: string,
|
||||
) => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
const createResponse = await authApi.createOrganization({
|
||||
organizationName,
|
||||
organizationEmail,
|
||||
organizationType,
|
||||
planName,
|
||||
});
|
||||
|
||||
const profileResponse = await authApi.getProfile();
|
||||
if (profileResponse.success) {
|
||||
const { user: userData, organizations: orgs } = normalizeProfilePayload(profileResponse.data);
|
||||
setUser(userData);
|
||||
setOrganizations(orgs);
|
||||
}
|
||||
|
||||
return createResponse.data.organization.id as string;
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to create organization');
|
||||
throw err;
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [normalizeProfilePayload]);
|
||||
|
||||
const clearError = useCallback(() => setError(null), []);
|
||||
|
||||
const contextValue = useMemo(
|
||||
@@ -224,6 +283,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
login,
|
||||
logout,
|
||||
selectOrganization,
|
||||
createOrganization,
|
||||
clearError,
|
||||
}),
|
||||
[
|
||||
@@ -237,6 +297,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
login,
|
||||
logout,
|
||||
selectOrganization,
|
||||
createOrganization,
|
||||
clearError,
|
||||
],
|
||||
);
|
||||
|
||||
@@ -3,7 +3,6 @@ import { NextResponse } from 'next/server';
|
||||
import type { NextRequest } from 'next/server';
|
||||
|
||||
const publicRoutes = ['/', '/login', '/register', '/terms', '/privacy', '/forgot-password'];
|
||||
const authOnlyRoutes = ['/login', '/register']; // routes that should NOT be accessed when logged in
|
||||
|
||||
export function middleware(request: NextRequest) {
|
||||
const { pathname } = request.nextUrl;
|
||||
@@ -15,12 +14,10 @@ export function middleware(request: NextRequest) {
|
||||
return NextResponse.redirect(new URL('/today', request.url));
|
||||
}
|
||||
|
||||
// Always allow public routes first
|
||||
// Always allow public routes first. We intentionally do not block /login or /register
|
||||
// when a cookie exists, because the cookie might be stale/invalid and the client
|
||||
// auth check needs to recover gracefully.
|
||||
if (publicRoutes.includes(pathname)) {
|
||||
// If user is already logged in and tries to access login/register → redirect to dashboard
|
||||
if (isAuthenticated && authOnlyRoutes.includes(pathname)) {
|
||||
return NextResponse.redirect(new URL('/today', request.url));
|
||||
}
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
/* Light theme tokens (future-ready) */
|
||||
:root[data-theme="light"] {
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
|
||||
--color-background-primary: #f6f9fc;
|
||||
--color-background-secondary: #ffffff;
|
||||
@@ -45,7 +45,7 @@
|
||||
--color-primary: #09a9bc;
|
||||
--color-primary-contrast: #001117;
|
||||
--color-primary-soft: rgba(9, 169, 188, 0.2);
|
||||
--color-icon: #f3bb4b;
|
||||
--color-icon: #e1bc72;
|
||||
}
|
||||
|
||||
/* Default theme = dark */
|
||||
|
||||
@@ -10,12 +10,25 @@ export interface Organization {
|
||||
name: string;
|
||||
type: 'CLINIC' | 'LAB';
|
||||
isOwner: boolean;
|
||||
permissions?: string[];
|
||||
plan?: {
|
||||
name: string;
|
||||
maxUsers: number;
|
||||
};
|
||||
}
|
||||
|
||||
/** GET /auth/subscription-alert — owners only get meaningful flags */
|
||||
export interface SubscriptionAlertData {
|
||||
showWarning: boolean;
|
||||
seatsLow: boolean;
|
||||
trialEndingSoon: boolean;
|
||||
trialExpired: boolean;
|
||||
seatsUsed?: number;
|
||||
seatsLimit?: number;
|
||||
daysUntilTrialEnd?: number | null;
|
||||
trialEndsAt?: string | null;
|
||||
}
|
||||
|
||||
export interface AuthResponse {
|
||||
success: boolean;
|
||||
data: {
|
||||
@@ -31,6 +44,7 @@ export interface TrialRegistrationData {
|
||||
password: string;
|
||||
name: string;
|
||||
organizationName: string;
|
||||
organizationEmail: string;
|
||||
organizationType: 'CLINIC' | 'LAB';
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user