Compare commits

..
3 Commits
Author SHA1 Message Date
dimitar d112dbb122 rb fine tune 2026-03-18 13:14:47 +01:00
dimitar 7043487fc2 edit local user fix 2026-03-18 12:37:21 +01:00
dimitar bb9c675421 setings page enhanced
gym managment added
2026-03-18 06:23:40 +01:00
13 changed files with 835 additions and 138 deletions

No files matched your search

Binary file not shown.
+89
View File
@@ -0,0 +1,89 @@
import { NextResponse } from "next/server";
import { auth } from "@clerk/nextjs/server";
import { eq, sql } from "@fitai/database";
import { db, users as usersTable } from "@fitai/database";
import { ensureUserSynced } from "@/lib/sync-user";
import log from "@/lib/logger";
async function ensureGymsTable() {
await db.run(sql`
CREATE TABLE IF NOT EXISTS gyms (
id TEXT PRIMARY KEY,
name TEXT NOT NULL,
location TEXT,
status TEXT NOT NULL CHECK (status IN ('active','inactive')) DEFAULT 'active',
admin_user_id TEXT NOT NULL,
created_at INTEGER NOT NULL,
updated_at INTEGER NOT NULL
)
`);
}
// DELETE /api/gyms/[id]
// Delete a gym (soft delete - mark as inactive)
export async function DELETE(
request: Request,
{ params }: { params: Promise<{ id: string }> },
) {
try {
const { id: gymId } = await params;
const { userId } = await auth();
if (!userId) {
return new NextResponse("Unauthorized", { status: 401 });
}
// Ensure user is synced
const currentUser = await ensureUserSynced(userId, {
getUserById: async (id: string) => {
const row = await db
.select()
.from(usersTable)
.where(eq(usersTable.id, id))
.get();
return row
? {
id: row.id,
email: row.email,
firstName: row.firstName,
lastName: row.lastName,
password: row.password ?? "",
phone: row.phone ?? undefined,
role: row.role,
imageUrl: undefined,
createdAt: new Date(row.createdAt),
updatedAt: new Date(row.updatedAt),
}
: null;
},
} as any);
// Only superAdmin can delete gyms
if (!currentUser || currentUser.role !== "superAdmin") {
return new NextResponse("Forbidden - Only superAdmin can delete gyms", {
status: 403,
});
}
await ensureGymsTable();
// Check if gym exists
const gymRows = await db.all(sql`SELECT * FROM gyms WHERE id = ${gymId}`);
if (gymRows.length === 0) {
return new NextResponse("Gym not found", { status: 404 });
}
// Soft delete - mark as inactive
await db.run(
sql`UPDATE gyms SET status = 'inactive', updated_at = ${Date.now()} WHERE id = ${gymId}`,
);
return NextResponse.json({
success: true,
message: "Gym deleted successfully",
});
} catch (error) {
log.error("Failed to delete gym", error);
return new NextResponse("Internal Server Error", { status: 500 });
}
}
@@ -0,0 +1,105 @@
import { NextResponse } from "next/server";
import { eq, sql } from "@fitai/database";
import { db } from "@fitai/database";
import log from "@/lib/logger";
async function ensureGymsTable() {
await db.run(sql`
CREATE TABLE IF NOT EXISTS gyms (
id TEXT PRIMARY KEY,
name TEXT NOT NULL,
location TEXT,
status TEXT NOT NULL CHECK (status IN ('active','inactive')) DEFAULT 'active',
admin_user_id TEXT NOT NULL,
created_at INTEGER NOT NULL,
updated_at INTEGER NOT NULL
)
`);
}
// GET /api/gyms/[id]/stats
// Get stats for a specific gym
export async function GET(
request: Request,
{ params }: { params: Promise<{ id: string }> },
) {
try {
const { id: gymId } = await params;
await ensureGymsTable();
// Get gym info
const gymRows = await db.all(sql`SELECT * FROM gyms WHERE id = ${gymId}`);
if (gymRows.length === 0) {
return new NextResponse("Gym not found", { status: 404 });
}
const gym = gymRows[0];
// Get user counts
const usersResult = await db.all(
sql`SELECT role, COUNT(*) as count FROM users WHERE gym_id = ${gymId} GROUP BY role`,
);
const userCounts: Record<string, number> = {
admin: 0,
trainer: 0,
client: 0,
};
for (const row of usersResult as any[]) {
if (row.role in userCounts) {
userCounts[row.role] = row.count;
}
}
// Get client stats
const clientsResult = (await db.all(
sql`SELECT
membership_type,
membership_status,
COUNT(*) as count
FROM clients
WHERE user_id IN (SELECT id FROM users WHERE gym_id = ${gymId})
GROUP BY membership_type, membership_status`,
)) as any[];
const membershipStats: Record<string, number> = {
basic: 0,
premium: 0,
vip: 0,
};
const activeClients = clientsResult.filter(
(c: any) => c.membership_status === "active",
);
for (const row of activeClients) {
if (row.membership_type in membershipStats) {
membershipStats[row.membership_type] = row.count;
}
}
// Get recent activity (attendance in last 30 days)
const thirtyDaysAgo = Date.now() - 30 * 24 * 60 * 60 * 1000;
const attendanceResult = (await db.all(
sql`SELECT COUNT(*) as count FROM attendance
WHERE user_id IN (SELECT id FROM users WHERE gym_id = ${gymId})
AND check_in_time > ${thirtyDaysAgo}`,
)) as any[];
const attendanceCount = attendanceResult[0]?.count || 0;
const stats = {
totalUsers: userCounts.admin + userCounts.trainer + userCounts.client,
admins: userCounts.admin,
trainers: userCounts.trainer,
clients: userCounts.client,
membershipStats,
activeClients: activeClients.reduce(
(sum: number, c: any) => sum + c.count,
0,
),
attendanceLast30Days: attendanceCount,
};
return NextResponse.json({ gym, stats });
} catch (error) {
log.error("Failed to get gym stats", error);
return new NextResponse("Internal Server Error", { status: 500 });
}
}
+37 -2
View File
@@ -8,6 +8,8 @@ import {
errorResponse, errorResponse,
unauthorizedResponse, unauthorizedResponse,
} from "@/lib/api/responses"; } from "@/lib/api/responses";
import { getAuthContext } from "@/lib/auth/context";
import { getInvitableRoles } from "@/lib/auth/permissions";
import log from "@/lib/logger"; import log from "@/lib/logger";
/** /**
@@ -26,6 +28,10 @@ export async function POST(request: NextRequest) {
return unauthorizedResponse("Unauthorized"); return unauthorizedResponse("Unauthorized");
} }
// Get full auth context (role and gymId)
const authContext = await getAuthContext();
const { role: requesterRole, gymId: requesterGymId } = authContext;
const body = await request.json(); const body = await request.json();
const validationResult = createUserSchema.safeParse(body); const validationResult = createUserSchema.safeParse(body);
@@ -41,6 +47,33 @@ export async function POST(request: NextRequest) {
const data = validationResult.data; const data = validationResult.data;
// Validate role creation permission
const allowedRoles = getInvitableRoles(requesterRole);
if (!allowedRoles.includes(data.role)) {
const roleMessages: Record<string, string> = {
trainer:
"Trainers can only create clients. Contact an admin to create other roles.",
admin:
"Admins can create trainers and clients only. Contact a superAdmin to create other admins.",
client: "Clients cannot create users.",
};
return errorResponse(
roleMessages[requesterRole] ||
"You are not authorized to create this role",
{ status: 403 },
);
}
// Auto-assign gym for non-superAdmins
// SuperAdmins can choose any gym, others must use their own gym
const assignedGymId =
requesterRole === "superAdmin" ? data.gymId : requesterGymId;
// Validate that non-superAdmins have a gym assigned
if (!assignedGymId && requesterRole !== "superAdmin") {
return errorResponse("You are not assigned to a gym", { status: 400 });
}
// Note: Email is required in current schema // Note: Email is required in current schema
// TODO: Add schema migration to make email optional for direct creation // TODO: Add schema migration to make email optional for direct creation
if (!data.email) { if (!data.email) {
@@ -55,13 +88,14 @@ export async function POST(request: NextRequest) {
emailAddress: data.email, emailAddress: data.email,
publicMetadata: { publicMetadata: {
role: data.role, role: data.role,
gymId: data.gymId, gymId: assignedGymId,
}, },
}); });
log.info("Clerk invitation sent", { log.info("Clerk invitation sent", {
email: data.email, email: data.email,
role: data.role, role: data.role,
gymId: assignedGymId,
invitationId: invitation.id, invitationId: invitation.id,
}); });
@@ -106,13 +140,14 @@ export async function POST(request: NextRequest) {
lastName: data.lastName, lastName: data.lastName,
role: data.role, role: data.role,
phone: data.phone, phone: data.phone,
gymId: data.gymId, gymId: assignedGymId,
}) })
.returning(); .returning();
log.info("User created in database", { log.info("User created in database", {
userId: newUser.id, userId: newUser.id,
role: data.role, role: data.role,
gymId: assignedGymId,
hasEmail: !!data.email, hasEmail: !!data.email,
}); });
+120 -26
View File
@@ -331,8 +331,17 @@ export async function PUT(request: NextRequest) {
return validationErrorResponse(validation.errors); return validationErrorResponse(validation.errors);
} }
const { id, email, firstName, lastName, role, phone, gymId } = const {
validation.data; id,
email,
firstName,
lastName,
role,
phone,
gymId,
membershipType,
membershipStatus,
} = validation.data;
log.debug("Updating user", { log.debug("Updating user", {
id, id,
@@ -342,6 +351,8 @@ export async function PUT(request: NextRequest) {
role, role,
phone, phone,
gymId, gymId,
membershipType,
membershipStatus,
}); });
const db = await getDatabase(); const db = await getDatabase();
@@ -363,6 +374,27 @@ export async function PUT(request: NextRequest) {
return notFoundResponse("User not found"); return notFoundResponse("User not found");
} }
log.debug("Edit authorization check", {
requesterId,
requesterRole: requester.role,
requesterGymId: requester.gymId,
targetUserId: id,
targetRole: existingUser.role,
targetGymId: existingUser.gymId,
requestedRole: role,
});
// Authorization: check gym-based permissions
// Non-superAdmins can only edit users in their own gym
if (requester.role !== "superAdmin") {
if (!requester.gymId) {
return forbiddenResponse("No gym assigned to requester");
}
if (existingUser.gymId !== requester.gymId) {
return forbiddenResponse("Cannot edit users from other gyms");
}
}
// Authorization: determine allowed role changes // Authorization: determine allowed role changes
const requesterRole = requester.role; const requesterRole = requester.role;
const allowedByRole: Record<string, string[]> = { const allowedByRole: Record<string, string[]> = {
@@ -373,10 +405,26 @@ export async function PUT(request: NextRequest) {
generalUser: [], // general users cannot change roles generalUser: [], // general users cannot change roles
}; };
if (role && !allowedByRole[requesterRole]?.includes(role)) { // Only check authorization if the role is actually being changed
if (
role &&
role !== existingUser.role &&
!allowedByRole[requesterRole]?.includes(role)
) {
return forbiddenResponse(`Not authorized to assign role '${role}'`); return forbiddenResponse(`Not authorized to assign role '${role}'`);
} }
// Authorization: trainers cannot reassign users to different gyms
if (
requesterRole === "trainer" &&
gymId !== undefined &&
gymId !== existingUser.gymId
) {
return forbiddenResponse(
"Trainers cannot reassign users to different gyms",
);
}
// Check if email is being changed and if it's already taken // Check if email is being changed and if it's already taken
if (email && email !== existingUser.email) { if (email && email !== existingUser.email) {
const userWithEmail = await db.getUserByEmail(email); const userWithEmail = await db.getUserByEmail(email);
@@ -387,24 +435,27 @@ export async function PUT(request: NextRequest) {
// Update Clerk publicMetadata (role/gymId) to propagate via webhook // Update Clerk publicMetadata (role/gymId) to propagate via webhook
// Note: Only update metadata when a change is requested // Note: Only update metadata when a change is requested
try { const client = await clerkClient();
const client = await clerkClient(); const publicMetadata: Record<string, unknown> = {};
const publicMetadata: Record<string, unknown> = {}; log.debug("Preparing Clerk metadata update", {
log.debug("Preparing Clerk metadata update", { targetUserId: id,
targetUserId: id, role,
role, gymId,
gymId, });
});
if (role) { if (role) {
publicMetadata.role = role; publicMetadata.role = role;
} }
if (gymId !== undefined) { if (gymId !== undefined) {
publicMetadata.gymId = gymId === null ? null : String(gymId); publicMetadata.gymId = gymId === null ? null : String(gymId);
} }
if (Object.keys(publicMetadata).length > 0) {
log.debug("Updating Clerk user metadata", { publicMetadata });
try {
// Check if user exists in Clerk first
await client.users.getUser(id);
if (Object.keys(publicMetadata).length > 0) {
log.debug("Updating Clerk user metadata", { publicMetadata });
const clerkResult = await client.users.updateUser(id, { const clerkResult = await client.users.updateUser(id, {
publicMetadata, publicMetadata,
}); });
@@ -413,14 +464,20 @@ export async function PUT(request: NextRequest) {
role: clerkResult.publicMetadata?.role, role: clerkResult.publicMetadata?.role,
gymId: clerkResult.publicMetadata?.gymId, gymId: clerkResult.publicMetadata?.gymId,
}); });
} else { } catch (clerkErr: any) {
log.debug("No Clerk metadata changes requested"); // User might not exist in Clerk yet - that's OK for local users
if (
clerkErr?.status === 404 ||
clerkErr?.errors?.[0]?.code === "resource_not_found"
) {
log.debug(
"User not found in Clerk, skipping metadata update (local-only user)",
);
} else {
log.error("Clerk metadata update failed", clerkErr, { userId: id });
// Don't fail the whole request - local DB update can still proceed
}
} }
} catch (clerkErr: any) {
log.error("Clerk metadata update failed", clerkErr, { userId: id });
return internalErrorResponse(
"Failed to update role/gym in identity provider",
);
} }
// Update local DB for immediate UI feedback (webhook will also sync) // Update local DB for immediate UI feedback (webhook will also sync)
@@ -442,6 +499,43 @@ export async function PUT(request: NextRequest) {
); );
log.debug("User updated in database", { updatedRow }); log.debug("User updated in database", { updatedRow });
// If the user is a client, update membership fields in clients table
const finalRole = role ?? existingUser.role;
if (
finalRole === "client" &&
(membershipType !== undefined || membershipStatus !== undefined)
) {
log.debug("Updating client membership fields", {
userId: id,
membershipType,
membershipStatus,
});
// Check if client record exists
const existingClient = await rawDb.get(
sql`SELECT * FROM clients WHERE user_id = ${id}`,
);
if (existingClient) {
// Update existing client record
await rawDb.run(
sql`UPDATE clients
SET membership_type = ${membershipType ?? (existingClient as any).membership_type},
membership_status = ${membershipStatus ?? (existingClient as any).membership_status},
updated_at = ${Date.now()}
WHERE user_id = ${id}`,
);
log.debug("Client membership updated");
} else {
// Create client record if it doesn't exist
await rawDb.run(
sql`INSERT INTO clients (id, user_id, membership_type, membership_status, join_date, created_at, updated_at)
VALUES (${`client_${id}_${Date.now()}`}, ${id}, ${membershipType ?? "basic"}, ${membershipStatus ?? "active"}, ${Date.now()}, ${Date.now()}, ${Date.now()})`,
);
log.debug("Client record created");
}
}
const updatedUser = { const updatedUser = {
...existingUser, ...existingUser,
email: email ?? existingUser.email, email: email ?? existingUser.email,
+2 -2
View File
@@ -9,7 +9,7 @@ import {
UserButton, UserButton,
} from "@clerk/nextjs"; } from "@clerk/nextjs";
import { Sidebar } from "@/components/ui/Sidebar"; import { Sidebar } from "@/components/ui/Sidebar";
import { Toaster } from "sonner"; import { ToasterProvider } from "@/components/providers/ToasterProvider";
import { QueryProvider } from "@/components/providers/QueryProvider"; import { QueryProvider } from "@/components/providers/QueryProvider";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@@ -35,7 +35,7 @@ export default function RootLayout({
<div className="max-w-7xl mx-auto space-y-8">{children}</div> <div className="max-w-7xl mx-auto space-y-8">{children}</div>
</main> </main>
</div> </div>
<Toaster richColors position="top-right" /> <ToasterProvider />
</body> </body>
</html> </html>
</QueryProvider> </QueryProvider>
+271 -71
View File
@@ -9,6 +9,10 @@ import {
AlertTriangle, AlertTriangle,
Check, Check,
Loader2, Loader2,
Trash2,
Users,
CalendarCheck,
TrendingUp,
} from "lucide-react"; } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useUser } from "@clerk/nextjs"; import { useUser } from "@clerk/nextjs";
@@ -26,6 +30,21 @@ interface Gym {
location?: string | null; location?: string | null;
status: "active" | "inactive"; status: "active" | "inactive";
adminUserId: string; adminUserId: string;
createdAt?: number;
}
interface GymStats {
totalUsers: number;
admins: number;
trainers: number;
clients: number;
membershipStats: {
basic: number;
premium: number;
vip: number;
};
activeClients: number;
attendanceLast30Days: number;
} }
export default function SettingsPage() { export default function SettingsPage() {
@@ -46,6 +65,13 @@ export default function SettingsPage() {
type: "success" | "error"; type: "success" | "error";
text: string; text: string;
} | null>(null); } | null>(null);
// Selected gym for details
const [selectedGym, setSelectedGym] = useState<Gym | null>(null);
const [gymStats, setGymStats] = useState<GymStats | null>(null);
const [statsLoading, setStatsLoading] = useState(false);
const [deletingGym, setDeletingGym] = useState(false);
// Create Gym modal state // Create Gym modal state
const [showCreateGym, setShowCreateGym] = useState(false); const [showCreateGym, setShowCreateGym] = useState(false);
const [gymName, setGymName] = useState(""); const [gymName, setGymName] = useState("");
@@ -77,11 +103,33 @@ export default function SettingsPage() {
} }
}; };
const fetchGymStats = async (gymId: string) => {
setStatsLoading(true);
try {
const res = await axios.get(`/api/gyms/${gymId}/stats`);
if (res.data?.stats) {
setGymStats(res.data.stats);
}
} catch (error) {
log.error("Failed to fetch gym stats", error);
} finally {
setStatsLoading(false);
}
};
useEffect(() => { useEffect(() => {
fetchBackups(); fetchBackups();
fetchGyms(); fetchGyms();
}, []); }, []);
useEffect(() => {
if (selectedGym) {
fetchGymStats(selectedGym.id);
} else {
setGymStats(null);
}
}, [selectedGym]);
const handleCreateBackup = async () => { const handleCreateBackup = async () => {
setCreatingBackup(true); setCreatingBackup(true);
setMessage(null); setMessage(null);
@@ -111,7 +159,6 @@ export default function SettingsPage() {
try { try {
await axios.post("/api/admin/backups/restore", { filename }); await axios.post("/api/admin/backups/restore", { filename });
setMessage({ type: "success", text: "Database restored successfully" }); setMessage({ type: "success", text: "Database restored successfully" });
// Optional: Refresh page or force re-login if session is invalidated
} catch (error) { } catch (error) {
log.error("Failed to restore backup", error); log.error("Failed to restore backup", error);
setMessage({ type: "error", text: "Failed to restore backup" }); setMessage({ type: "error", text: "Failed to restore backup" });
@@ -135,21 +182,39 @@ export default function SettingsPage() {
return new Date(dateString).toLocaleString(); return new Date(dateString).toLocaleString();
}; };
const handleSelectGym = async (gymId: string | null) => { const handleSelectGym = async (gym: Gym | null) => {
setSelectedGym(gym);
setGymStats(null);
};
const handleDeleteGym = async (gymId: string) => {
if (
!window.confirm(
"Are you sure you want to delete this gym? This action cannot be undone.",
)
) {
return;
}
setDeletingGym(true);
setGymMessage(null); setGymMessage(null);
try { try {
// Update current user's gym selection await axios.delete(`/api/gyms/${gymId}`);
await axios.patch("/api/users/gym", { gymId }); setGymMessage({ type: "success", text: "Gym deleted successfully" });
setGymMessage({ setSelectedGym(null);
type: "success", setGymStats(null);
text: gymId ? "Gym selected successfully" : "Proceeding without gym", fetchGyms();
});
} catch (error) { } catch (error) {
log.error("Failed to set gym", error); log.error("Failed to delete gym", error);
setGymMessage({ type: "error", text: "Failed to set gym" }); setGymMessage({ type: "error", text: "Failed to delete gym" });
} finally {
setDeletingGym(false);
} }
}; };
const userRole = (user?.publicMetadata?.role as string) ?? "client";
const isSuperAdmin = userRole === "superAdmin";
return ( return (
<div className="space-y-8 p-8"> <div className="space-y-8 p-8">
<div> <div>
@@ -159,7 +224,7 @@ export default function SettingsPage() {
</p> </p>
</div> </div>
{/* Gym Picker */} {/* Gym Management */}
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6"> <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@@ -168,10 +233,12 @@ export default function SettingsPage() {
</div> </div>
<div> <div>
<h3 className="text-xl font-bold text-slate-900"> <h3 className="text-xl font-bold text-slate-900">
Gym Selection Gym Management
</h3> </h3>
<p className="text-sm text-slate-500"> <p className="text-sm text-slate-500">
Select your gym or proceed without a gym {isSuperAdmin
? "Select a gym to view details, create or delete gyms"
: "Select your gym or proceed without a gym"}
</p> </p>
<p className="text-xs text-blue-600 mt-1"> <p className="text-xs text-blue-600 mt-1">
{user ? ( {user ? (
@@ -180,11 +247,6 @@ export default function SettingsPage() {
<span className="font-medium"> <span className="font-medium">
{String(user.publicMetadata?.role ?? "unknown")} {String(user.publicMetadata?.role ?? "unknown")}
</span> </span>
{" • "}
Gym ID:{" "}
<span className="font-medium">
{String(user.publicMetadata?.gymId ?? "none")}
</span>
</> </>
) : ( ) : (
"Loading user metadata..." "Loading user metadata..."
@@ -196,6 +258,8 @@ export default function SettingsPage() {
<Button <Button
onClick={fetchGyms} onClick={fetchGyms}
disabled={gymsLoading} disabled={gymsLoading}
variant="outline"
size="sm"
className="flex items-center gap-2" className="flex items-center gap-2"
> >
{gymsLoading ? ( {gymsLoading ? (
@@ -203,14 +267,17 @@ export default function SettingsPage() {
) : ( ) : (
<RefreshCw className="w-4 h-4" /> <RefreshCw className="w-4 h-4" />
)} )}
Refresh Gyms Refresh
</Button>
<Button
onClick={() => setShowCreateGym(true)}
className="flex items-center gap-2"
>
Create Gym
</Button> </Button>
{isSuperAdmin && (
<Button
onClick={() => setShowCreateGym(true)}
size="sm"
className="flex items-center gap-2"
>
Create Gym
</Button>
)}
</div> </div>
</div> </div>
@@ -226,6 +293,7 @@ export default function SettingsPage() {
{gymMessage.text} {gymMessage.text}
</div> </div>
)} )}
{showCreateGym && ( {showCreateGym && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full"> <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
@@ -310,59 +378,191 @@ export default function SettingsPage() {
</div> </div>
)} )}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="border rounded-lg p-4 flex flex-col justify-between"> {/* Gym List */}
<div> <div className="lg:col-span-1 space-y-4">
<h4 className="font-semibold text-slate-900"> <h4 className="font-semibold text-slate-900">Gyms</h4>
Proceed without gym {gymsLoading ? (
</h4> <div className="flex items-center justify-center p-8 text-slate-500">
<p className="text-sm text-slate-600 mt-1"> <Loader2 className="w-5 h-5 animate-spin mr-2" />
You can select a gym later. Loading...
</p> </div>
</div> ) : gyms.length === 0 ? (
<Button <div className="p-4 text-center text-slate-500">
variant="outline" No active gyms found.
className="mt-4" </div>
onClick={() => handleSelectGym(null)} ) : (
> <div className="space-y-2 max-h-96 overflow-y-auto">
Proceed without gym {gyms.map((gym) => (
</Button> <div
key={gym.id}
className={`border rounded-lg p-3 cursor-pointer transition-colors ${
selectedGym?.id === gym.id
? "border-blue-500 bg-blue-50"
: "hover:bg-slate-50"
}`}
onClick={() => handleSelectGym(gym)}
>
<div className="flex items-center justify-between">
<div>
<h5 className="font-medium text-slate-900">
{gym.name}
</h5>
<p className="text-xs text-slate-500">
{gym.location || "No location"}
</p>
</div>
<span
className={`text-xs px-2 py-1 rounded ${
gym.status === "active"
? "bg-green-100 text-green-700"
: "bg-red-100 text-red-700"
}`}
>
{gym.status}
</span>
</div>
</div>
))}
</div>
)}
</div> </div>
{gymsLoading ? ( {/* Gym Details / Stats */}
<div className="col-span-full flex items-center justify-center p-8 text-slate-500"> <div className="lg:col-span-2">
<Loader2 className="w-5 h-5 animate-spin mr-2" /> {selectedGym ? (
Loading gyms... <div className="space-y-4">
</div> <div className="flex items-center justify-between">
) : gyms.length === 0 ? ( <h4 className="font-semibold text-slate-900">
<div className="col-span-full p-8 text-center text-slate-500"> {selectedGym.name} - Details
No active gyms found. </h4>
</div> {isSuperAdmin && (
) : ( <Button
gyms.map((gym) => ( variant="ghost"
<div size="sm"
key={gym.id} className="text-red-600 hover:text-red-700 hover:bg-red-50"
className="border rounded-lg p-4 flex flex-col justify-between" onClick={() => handleDeleteGym(selectedGym.id)}
> disabled={deletingGym}
<div> >
<h4 className="font-semibold text-slate-900">{gym.name}</h4> {deletingGym ? (
<p className="text-sm text-slate-600 mt-1"> <Loader2 className="w-4 h-4 animate-spin" />
{gym.location || "No location provided"} ) : (
</p> <Trash2 className="w-4 h-4 mr-1" />
)}
Delete Gym
</Button>
)}
</div> </div>
<Button
variant="default" {/* Gym Info */}
className="mt-4" <div className="grid grid-cols-2 gap-4 p-4 bg-slate-50 rounded-lg">
onClick={() => handleSelectGym(gym.id)} <div>
> <p className="text-xs text-slate-500">Location</p>
Select this gym <p className="font-medium">
</Button> {selectedGym.location || "Not specified"}
</p>
</div>
<div>
<p className="text-xs text-slate-500">Status</p>
<p className="font-medium capitalize">
{selectedGym.status}
</p>
</div>
</div>
{/* Stats */}
{statsLoading ? (
<div className="flex items-center justify-center p-8">
<Loader2 className="w-6 h-6 animate-spin text-slate-400" />
</div>
) : gymStats ? (
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="p-4 bg-blue-50 rounded-lg">
<div className="flex items-center gap-2 mb-1">
<Users className="w-4 h-4 text-blue-600" />
<span className="text-xs text-blue-600">
Total Users
</span>
</div>
<p className="text-2xl font-bold text-blue-700">
{gymStats.totalUsers}
</p>
</div>
<div className="p-4 bg-green-50 rounded-lg">
<div className="flex items-center gap-2 mb-1">
<CalendarCheck className="w-4 h-4 text-green-600" />
<span className="text-xs text-green-600">
Active Clients
</span>
</div>
<p className="text-2xl font-bold text-green-700">
{gymStats.activeClients}
</p>
</div>
<div className="p-4 bg-purple-50 rounded-lg">
<div className="flex items-center gap-2 mb-1">
<TrendingUp className="w-4 h-4 text-purple-600" />
<span className="text-xs text-purple-600">
Check-ins (30d)
</span>
</div>
<p className="text-2xl font-bold text-purple-700">
{gymStats.attendanceLast30Days}
</p>
</div>
<div className="p-4 bg-orange-50 rounded-lg">
<div className="flex items-center gap-2 mb-1">
<Users className="w-4 h-4 text-orange-600" />
<span className="text-xs text-orange-600">
Trainers
</span>
</div>
<p className="text-2xl font-bold text-orange-700">
{gymStats.trainers}
</p>
</div>
</div>
) : null}
{/* Membership Distribution */}
{gymStats && (
<div className="mt-4">
<h5 className="text-sm font-medium text-slate-700 mb-2">
Membership Distribution
</h5>
<div className="flex gap-4">
<div className="flex-1 p-3 bg-slate-100 rounded-lg text-center">
<p className="text-2xl font-bold text-slate-700">
{gymStats.membershipStats.basic}
</p>
<p className="text-xs text-slate-500">Basic</p>
</div>
<div className="flex-1 p-3 bg-blue-50 rounded-lg text-center">
<p className="text-2xl font-bold text-blue-700">
{gymStats.membershipStats.premium}
</p>
<p className="text-xs text-blue-500">Premium</p>
</div>
<div className="flex-1 p-3 bg-yellow-50 rounded-lg text-center">
<p className="text-2xl font-bold text-yellow-700">
{gymStats.membershipStats.vip}
</p>
<p className="text-xs text-yellow-600">VIP</p>
</div>
</div>
</div>
)}
</div> </div>
)) ) : (
)} <div className="flex items-center justify-center h-64 bg-slate-50 rounded-lg">
<p className="text-slate-500">Select a gym to view details</p>
</div>
)}
</div>
</div> </div>
</div> </div>
{/* Database Management */}
<div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6"> <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@@ -0,0 +1,7 @@
"use client";
import { Toaster } from "sonner";
export function ToasterProvider() {
return <Toaster richColors position="top-right" />;
}
@@ -3,6 +3,7 @@
import { useState } from "react"; import { useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { useUser } from "@clerk/nextjs";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -26,6 +27,9 @@ import {
type InvitationOptionsData, type InvitationOptionsData,
} from "@/lib/validation/user-schemas"; } from "@/lib/validation/user-schemas";
import { ChevronLeft, ChevronRight, Check } from "lucide-react"; import { ChevronLeft, ChevronRight, Check } from "lucide-react";
import { useGyms } from "@/hooks/use-api";
import { getInvitableRoles } from "@/lib/auth/permissions";
import type { UserRole } from "@fitai/shared";
interface CreateUserModalProps { interface CreateUserModalProps {
open: boolean; open: boolean;
@@ -45,6 +49,15 @@ export function CreateUserModal({
const [basicInfo, setBasicInfo] = useState<BasicInfoData | null>(null); const [basicInfo, setBasicInfo] = useState<BasicInfoData | null>(null);
const [clientInfo, setClientInfo] = useState<ClientInfoData | null>(null); const [clientInfo, setClientInfo] = useState<ClientInfoData | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const { data: gyms = [] } = useGyms();
const { user } = useUser();
// Get current user's role and gym from Clerk metadata
const currentUserRole = (user?.publicMetadata?.role as UserRole) || "client";
const currentUserGymId = user?.publicMetadata?.gymId as string | null;
// Determine which roles the current user can create
const invitableRoles = getInvitableRoles(currentUserRole);
// Step 1: Role Selection Form // Step 1: Role Selection Form
const roleForm = useForm<RoleSelectionData>({ const roleForm = useForm<RoleSelectionData>({
@@ -136,10 +149,18 @@ export function CreateUserModal({
invitationData, invitationData,
); );
// Auto-assign gym for non-superAdmins
// SuperAdmins can select gym manually, others use their own gym
const finalPayload = {
...payload,
gymId:
currentUserRole === "superAdmin" ? payload.gymId : currentUserGymId,
};
const response = await fetch("/api/users/create", { const response = await fetch("/api/users/create", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload), body: JSON.stringify(finalPayload),
}); });
if (!response.ok) { if (!response.ok) {
@@ -259,7 +280,7 @@ export function CreateUserModal({
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium">Role *</label> <label className="text-sm font-medium">Role *</label>
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
{(["admin", "trainer", "client"] as const).map((role) => ( {invitableRoles.map((role) => (
<label <label
key={role} key={role}
className={`flex items-center justify-center p-4 border-2 rounded-lg cursor-pointer transition-colors ${ className={`flex items-center justify-center p-4 border-2 rounded-lg cursor-pointer transition-colors ${
@@ -461,6 +482,39 @@ export function CreateUserModal({
</p> </p>
</div> </div>
)} )}
{/* Gym Selector - Only for SuperAdmins */}
{currentUserRole === "superAdmin" && (
<div className="space-y-2">
<label className="text-sm font-medium">
Assign to Gym (Optional)
</label>
<select
{...invitationForm.register("gymId")}
className="w-full p-2 border border-gray-300 rounded-md"
>
<option value="">Select a gym...</option>
{gyms.map((gym) => (
<option key={gym.id} value={gym.id}>
{gym.name}
</option>
))}
</select>
<p className="text-xs text-gray-500">
If not selected, user will not be assigned to any gym
</p>
</div>
)}
{/* Info message for non-superAdmins */}
{currentUserRole !== "superAdmin" && currentUserGymId && (
<div className="p-4 bg-gray-50 border border-gray-200 rounded-md">
<p className="text-sm text-gray-700">
User will be automatically assigned to your gym
</p>
</div>
)}
<DialogFooter className="flex justify-between"> <DialogFooter className="flex justify-between">
<Button type="button" variant="outline" onClick={handleBack}> <Button type="button" variant="outline" onClick={handleBack}>
<ChevronLeft className="mr-2 h-4 w-4" /> Back <ChevronLeft className="mr-2 h-4 w-4" /> Back
@@ -34,6 +34,8 @@ export function UserManagement({ gymId }: UserManagementProps) {
role: string; role: string;
phone: string; phone: string;
gymId: string; gymId: string;
membershipType?: string;
membershipStatus?: string;
} | null>(null); } | null>(null);
const { const {
@@ -62,6 +64,8 @@ export function UserManagement({ gymId }: UserManagementProps) {
role: user.role, role: user.role,
phone: user.phone || "", phone: user.phone || "",
gymId: user.gymId || "", gymId: user.gymId || "",
membershipType: user.client?.membershipType || "basic",
membershipStatus: user.client?.membershipStatus || "active",
}); });
setIsEditing(true); setIsEditing(true);
}; };
@@ -133,7 +137,7 @@ export function UserManagement({ gymId }: UserManagementProps) {
try { try {
if (selectedUser) { if (selectedUser) {
const payload = { const payload: any = {
id: selectedUser.id, id: selectedUser.id,
email: editForm.email, email: editForm.email,
firstName: editForm.firstName, firstName: editForm.firstName,
@@ -143,6 +147,12 @@ export function UserManagement({ gymId }: UserManagementProps) {
gymId: editForm.gymId === "" ? null : editForm.gymId, gymId: editForm.gymId === "" ? null : editForm.gymId,
}; };
// Include membership fields if user is a client
if (editForm.role === "client") {
payload.membershipType = editForm.membershipType;
payload.membershipStatus = editForm.membershipStatus;
}
await updateUser.mutateAsync(payload); await updateUser.mutateAsync(payload);
setIsEditing(false); setIsEditing(false);
setEditForm(null); setEditForm(null);
@@ -351,26 +361,74 @@ export function UserManagement({ gymId }: UserManagementProps) {
className="w-full border border-gray-300 rounded px-3 py-2" className="w-full border border-gray-300 rounded px-3 py-2"
/> />
</div> </div>
<div className="mb-4">
<label className="block text-sm font-medium mb-1">Gym</label> {/* Only superAdmins and admins can reassign gyms */}
<select {user?.publicMetadata?.role !== "trainer" && (
value={editForm.gymId} <div className="mb-4">
onChange={(e) => <label className="block text-sm font-medium mb-1">Gym</label>
setEditForm({ ...editForm, gymId: e.target.value }) <select
} value={editForm.gymId}
className="w-full border border-gray-300 rounded px-3 py-2" onChange={(e) =>
> setEditForm({ ...editForm, gymId: e.target.value })
<option value="">Proceed without gym</option> }
{gyms.map((g) => ( className="w-full border border-gray-300 rounded px-3 py-2"
<option key={g.id} value={g.id}> >
{g.name} <option value="">Proceed without gym</option>
</option> {gyms.map((g) => (
))} <option key={g.id} value={g.id}>
</select> {g.name}
<p className="text-xs text-gray-500 mt-1"> </option>
Select an active gym or proceed without a gym. ))}
</p> </select>
</div> <p className="text-xs text-gray-500 mt-1">
Select an active gym or proceed without a gym.
</p>
</div>
)}
{/* Client-specific fields - only show when role is client */}
{editForm.role === "client" && (
<>
<div className="mb-4">
<label className="block text-sm font-medium mb-1">
Membership Type
</label>
<select
value={editForm.membershipType || "basic"}
onChange={(e) =>
setEditForm({
...editForm,
membershipType: e.target.value,
})
}
className="w-full border border-gray-300 rounded px-3 py-2"
>
<option value="basic">Basic</option>
<option value="premium">Premium</option>
<option value="vip">VIP</option>
</select>
</div>
<div className="mb-4">
<label className="block text-sm font-medium mb-1">
Membership Status
</label>
<select
value={editForm.membershipStatus || "active"}
onChange={(e) =>
setEditForm({
...editForm,
membershipStatus: e.target.value,
})
}
className="w-full border border-gray-300 rounded px-3 py-2"
>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="suspended">Suspended</option>
</select>
</div>
</>
)}
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<button <button
type="button" type="button"
+1 -1
View File
@@ -170,7 +170,7 @@ export function useGyms() {
queryKey: ["gyms"], queryKey: ["gyms"],
queryFn: () => queryFn: () =>
fetchApi<{ data: { gyms: Gym[] } }>("/api/gyms").then( fetchApi<{ data: { gyms: Gym[] } }>("/api/gyms").then(
(res) => res.data?.gyms ?? [], (res) => res.data?.gyms ?? (Array.isArray(res) ? res : []),
), ),
}); });
} }
+56 -13
View File
@@ -30,29 +30,72 @@ export async function getAuthContext(): Promise<AuthContext> {
throw new Error("Unauthorized: No authenticated user"); throw new Error("Unauthorized: No authenticated user");
} }
// Get role from Clerk metadata // Try to get role from Clerk metadata (could be in publicMetadata or metadata)
const role = (sessionClaims?.metadata as { role?: UserRole })?.role; let role = (sessionClaims?.publicMetadata as { role?: UserRole })?.role;
// Fallback: Try the metadata field if publicMetadata doesn't have it
if (!role) {
role = (sessionClaims?.metadata as { role?: UserRole })?.role;
}
// If still no role, try database lookup as last resort
if (!role || !USER_ROLES.includes(role)) { if (!role || !USER_ROLES.includes(role)) {
throw new Error(`Forbidden: Invalid or missing role - ${role}`); console.log("Role not found in session claims, fetching from database", {
userId,
roleFromPublicMetadata: (
sessionClaims?.publicMetadata as { role?: UserRole }
)?.role,
roleFromMetadata: (sessionClaims?.metadata as { role?: UserRole })?.role,
});
try {
const db = await getDatabase();
const user = await db.getUserById(userId);
if (!user) {
console.error("User not found in database", { userId });
throw new Error(`Forbidden: User not found in database - ${userId}`);
}
if (user.role && USER_ROLES.includes(user.role as UserRole)) {
console.log("Role found in database", { userId, role: user.role });
role = user.role as UserRole;
} else {
console.error("Invalid role in database", { userId, role: user.role });
throw new Error(`Forbidden: Invalid role in database - ${user.role}`);
}
} catch (error) {
console.error("Failed to get role from database:", error);
throw new Error(
`Forbidden: Could not determine user role - ${error instanceof Error ? error.message : String(error)}`,
);
}
} }
// Get gymId from Clerk metadata or database // Get gymId from Clerk metadata or database
let gymId: string | null = null; let gymId: string | null = null;
// First try Clerk metadata (faster path) // First try Clerk publicMetadata (faster path)
const clerkGymId = (sessionClaims?.metadata as { gymId?: string })?.gymId; const clerkGymId = (sessionClaims?.publicMetadata as { gymId?: string })
?.gymId;
if (clerkGymId) { if (clerkGymId) {
gymId = clerkGymId; gymId = clerkGymId;
} else { } else {
// Fallback to database lookup // Try metadata field
try { const metadataGymId = (sessionClaims?.metadata as { gymId?: string })
const db = await getDatabase(); ?.gymId;
const user = await db.getUserById(userId); if (metadataGymId) {
gymId = user?.gymId ?? null; gymId = metadataGymId;
} catch (error) { } else {
console.error("Failed to get gymId from database:", error); // Fallback to database lookup
gymId = null; try {
const db = await getDatabase();
const user = await db.getUserById(userId);
gymId = user?.gymId ?? null;
} catch (error) {
console.error("Failed to get gymId from database:", error);
gymId = null;
}
} }
} }
+12
View File
@@ -33,6 +33,14 @@ export const userRoleSchema = z.enum([
"superAdmin", "superAdmin",
]); ]);
export const membershipTypeSchema = z.enum(["basic", "premium", "vip"]);
export const membershipStatusSchema = z.enum([
"active",
"inactive",
"suspended",
]);
export const userSchema = z.object({ export const userSchema = z.object({
email: emailSchema, email: emailSchema,
password: passwordSchema, password: passwordSchema,
@@ -65,6 +73,8 @@ export const userUpdateWithIdSchema = z.object({
role: userRoleSchema.optional(), role: userRoleSchema.optional(),
phone: phoneSchema, phone: phoneSchema,
gymId: z.string().nullable().optional(), gymId: z.string().nullable().optional(),
membershipType: membershipTypeSchema.optional(),
membershipStatus: membershipStatusSchema.optional(),
}); });
// ============================================================================ // ============================================================================
@@ -335,6 +345,8 @@ export type User = z.infer<typeof userSchema>;
export type UserUpdate = z.infer<typeof userUpdateSchema>; export type UserUpdate = z.infer<typeof userUpdateSchema>;
export type UserLogin = z.infer<typeof userLoginSchema>; export type UserLogin = z.infer<typeof userLoginSchema>;
export type UserRole = z.infer<typeof userRoleSchema>; export type UserRole = z.infer<typeof userRoleSchema>;
export type MembershipType = z.infer<typeof membershipTypeSchema>;
export type MembershipStatus = z.infer<typeof membershipStatusSchema>;
export type FitnessGoal = z.infer<typeof fitnessGoalSchema>; export type FitnessGoal = z.infer<typeof fitnessGoalSchema>;
export type FitnessGoalUpdate = z.infer<typeof fitnessGoalUpdateSchema>; export type FitnessGoalUpdate = z.infer<typeof fitnessGoalUpdateSchema>;