yusufipek/OpenFrame
1
0
Fork 0
mirror of https://github.com/yusufipk/OpenFrame.git synced 2026-09-11 09:36:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: eslint and prettier conflict will be resolved and formatted

Browse Source
This commit is contained in:
Enes Köksal
2026-04-23 17:05:43 +03:00
parent 385b61f29b
commit 3cfea40fbd
219 changed files with 16638 additions and 13663 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/admin/feedback/[feedbackId]/page.tsx
+37 -31
View File
@@ -20,25 +20,29 @@ export default async function AdminFeedbackDetailPage({
}
const { feedbackId } = await params;
const userFeedbackDelegate = (db as unknown as {
userFeedback?: {
findUnique: (args?: unknown) => Promise<{
id: string;
type: string;
category: string | null;
status: string;
rating: number | null;
title: string;
message: string;
screenshotUrl: string | null;
createdAt: Date;
user: { name: string | null; email: string | null };
screenshots: Array<{ id: string; url: string }>;
} | null>;
};
}).userFeedback;
const userFeedbackDelegate = (
db as unknown as {
userFeedback?: {
findUnique: (args?: unknown) => Promise<{
id: string;
type: string;
category: string | null;
status: string;
rating: number | null;
title: string;
message: string;
screenshotUrl: string | null;
createdAt: Date;
user: { name: string | null; email: string | null };
screenshots: Array<{ id: string; url: string }>;
} | null>;
};
}
).userFeedback;
let entry = null as Awaited<ReturnType<NonNullable<typeof userFeedbackDelegate>['findUnique']>> | null;
let entry = null as Awaited<
ReturnType<NonNullable<typeof userFeedbackDelegate>['findUnique']>
> | null;
if (userFeedbackDelegate) {
try {
entry = await userFeedbackDelegate.findUnique({
@@ -63,7 +67,7 @@ export default async function AdminFeedbackDetailPage({
} catch (error) {
const message = error instanceof Error ? error.message : '';
if (message.includes('Unknown field `screenshots`')) {
entry = await userFeedbackDelegate.findUnique({
entry = (await userFeedbackDelegate.findUnique({
where: { id: feedbackId },
include: {
user: {
@@ -74,7 +78,7 @@ export default async function AdminFeedbackDetailPage({
},
},
},
}) as typeof entry;
})) as typeof entry;
if (entry && !Array.isArray(entry.screenshots)) {
entry = {
@@ -95,9 +99,9 @@ export default async function AdminFeedbackDetailPage({
const screenshotItems =
entry.screenshots.length > 0
? entry.screenshots
: (entry.screenshotUrl
: entry.screenshotUrl
? [{ id: `${entry.id}-legacy`, url: entry.screenshotUrl }]
: []);
: [];
const submittedAtText = format(new Date(entry.createdAt), 'MMM dd, yyyy HH:mm');
const submitterName = entry.user.name || 'there';
const feedbackTypeLabel = entry.type.toLowerCase();
@@ -107,14 +111,14 @@ export default async function AdminFeedbackDetailPage({
.join('\n');
const mailtoHref = entry.user.email
? `mailto:${entry.user.email}?subject=${encodeURIComponent(
`[OpenFrame ${entry.type}] Re: ${entry.title}`
)}&body=${encodeURIComponent(
`Hi ${submitterName},\n\nThanks for your ${feedbackTypeLabel}.\n\n` +
`I reviewed your submission:\n` +
`Title: ${entry.title}\n` +
`Submitted: ${submittedAtText}\n\n` +
`Your message:\n${quotedMessage}\n\n`
)}`
`[OpenFrame ${entry.type}] Re: ${entry.title}`
)}&body=${encodeURIComponent(
`Hi ${submitterName},\n\nThanks for your ${feedbackTypeLabel}.\n\n` +
`I reviewed your submission:\n` +
`Title: ${entry.title}\n` +
`Submitted: ${submittedAtText}\n\n` +
`Your message:\n${quotedMessage}\n\n`
)}`
: null;
return (
@@ -169,7 +173,9 @@ export default async function AdminFeedbackDetailPage({
Screenshots ({screenshotItems.length})
</h3>
{screenshotItems.length === 0 ? (
<div className="rounded-md border p-4 text-sm text-muted-foreground">No screenshots attached.</div>
<div className="rounded-md border p-4 text-sm text-muted-foreground">
No screenshots attached.
</div>
) : (
<div className="grid gap-3 md:grid-cols-2">
{screenshotItems.map((screenshot, index) => (
app/admin/feedback/page.tsx
+114 -34
View File
@@ -18,7 +18,14 @@ import {
TableRow,
} from '@/components/ui/table';
type SortBy = 'submittedAt' | 'type' | 'status' | 'rating' | 'user' | 'allowShowcase' | 'showOnLanding';
type SortBy =
| 'submittedAt'
| 'type'
| 'status'
| 'rating'
| 'user'
| 'allowShowcase'
| 'showOnLanding';
type SortDirection = 'asc' | 'desc';
type TypeFilter = 'ALL' | FeedbackEntryType;
type StatusFilter = 'ALL' | FeedbackStatus;
@@ -39,7 +46,15 @@ type AdminFeedbackEntry = {
};
function parseSortBy(value: string | undefined): SortBy {
const accepted: SortBy[] = ['submittedAt', 'type', 'status', 'rating', 'user', 'allowShowcase', 'showOnLanding'];
const accepted: SortBy[] = [
'submittedAt',
'type',
'status',
'rating',
'user',
'allowShowcase',
'showOnLanding',
];
return accepted.includes(value as SortBy) ? (value as SortBy) : 'submittedAt';
}
@@ -58,7 +73,11 @@ function parseStatusFilter(value: string | undefined): StatusFilter {
return 'ALL';
}
function getSortIndicator(column: SortBy, activeSortBy: SortBy, activeSortDirection: SortDirection): string {
function getSortIndicator(
column: SortBy,
activeSortBy: SortBy,
activeSortDirection: SortDirection
): string {
if (column !== activeSortBy) return '↕';
return activeSortDirection === 'asc' ? '↑' : '↓';
}
@@ -127,12 +146,14 @@ export default async function AdminFeedbackPage({
};
const orderBy = getOrderBy(sortBy, sortDirection);
const userFeedbackDelegate = (db as unknown as {
userFeedback?: {
count: (args?: unknown) => Promise<number>;
findMany: (args?: unknown) => Promise<AdminFeedbackEntry[]>;
};
}).userFeedback;
const userFeedbackDelegate = (
db as unknown as {
userFeedback?: {
count: (args?: unknown) => Promise<number>;
findMany: (args?: unknown) => Promise<AdminFeedbackEntry[]>;
};
}
).userFeedback;
let totalEntries = 0;
let page = requestedPage;
@@ -174,7 +195,7 @@ export default async function AdminFeedbackPage({
const totalPages = Math.max(1, Math.ceil(totalEntries / pageSize));
page = Math.min(requestedPage, totalPages);
const skip = (page - 1) * pageSize;
const fallbackEntries = await userFeedbackDelegate.findMany({
const fallbackEntries = (await userFeedbackDelegate.findMany({
where,
skip,
take: pageSize,
@@ -188,7 +209,11 @@ export default async function AdminFeedbackPage({
},
},
orderBy,
}) as Array<Omit<AdminFeedbackEntry, 'screenshots'> & { screenshots?: Array<{ id: string; url: string }> }>;
})) as Array<
Omit<AdminFeedbackEntry, 'screenshots'> & {
screenshots?: Array<{ id: string; url: string }>;
}
>;
entries = fallbackEntries.map((entry) => ({
id: entry.id,
@@ -272,7 +297,12 @@ export default async function AdminFeedbackPage({
<Link href={buildFilterHref(typeFilter, 'ALL')}>All Statuses</Link>
</Button>
{(['NEW', 'IN_REVIEW', 'APPROVED', 'REJECTED', 'RESOLVED'] as const).map((status) => (
<Button key={status} variant={statusFilter === status ? 'default' : 'outline'} size="sm" asChild>
<Button
key={status}
variant={statusFilter === status ? 'default' : 'outline'}
size="sm"
asChild
>
<Link href={buildFilterHref(typeFilter, status)}>{status.replace('_', ' ')}</Link>
</Button>
))}
@@ -289,48 +319,83 @@ export default async function AdminFeedbackPage({
<TableHeader>
<TableRow>
<TableHead>
<Link href={buildSortHref('submittedAt')} className="inline-flex items-center gap-1 hover:underline">
<Link
href={buildSortHref('submittedAt')}
className="inline-flex items-center gap-1 hover:underline"
>
Submitted
<span className="text-xs">{getSortIndicator('submittedAt', sortBy, sortDirection)}</span>
<span className="text-xs">
{getSortIndicator('submittedAt', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead>
<Link href={buildSortHref('user')} className="inline-flex items-center gap-1 hover:underline">
<Link
href={buildSortHref('user')}
className="inline-flex items-center gap-1 hover:underline"
>
User
<span className="text-xs">{getSortIndicator('user', sortBy, sortDirection)}</span>
<span className="text-xs">
{getSortIndicator('user', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead>
<Link href={buildSortHref('type')} className="inline-flex items-center gap-1 hover:underline">
<Link
href={buildSortHref('type')}
className="inline-flex items-center gap-1 hover:underline"
>
Type
<span className="text-xs">{getSortIndicator('type', sortBy, sortDirection)}</span>
<span className="text-xs">
{getSortIndicator('type', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead>Title</TableHead>
<TableHead>Message</TableHead>
<TableHead className="text-center">Screenshot</TableHead>
<TableHead className="text-center">
<Link href={buildSortHref('rating')} className="inline-flex items-center justify-center gap-1 hover:underline">
<Link
href={buildSortHref('rating')}
className="inline-flex items-center justify-center gap-1 hover:underline"
>
Rating
<span className="text-xs">{getSortIndicator('rating', sortBy, sortDirection)}</span>
<span className="text-xs">
{getSortIndicator('rating', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead className="text-center">
<Link href={buildSortHref('status')} className="inline-flex items-center justify-center gap-1 hover:underline">
<Link
href={buildSortHref('status')}
className="inline-flex items-center justify-center gap-1 hover:underline"
>
Status
<span className="text-xs">{getSortIndicator('status', sortBy, sortDirection)}</span>
<span className="text-xs">
{getSortIndicator('status', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead className="text-center">
<Link href={buildSortHref('allowShowcase')} className="inline-flex items-center justify-center gap-1 hover:underline">
<Link
href={buildSortHref('allowShowcase')}
className="inline-flex items-center justify-center gap-1 hover:underline"
>
Consent
<span className="text-xs">{getSortIndicator('allowShowcase', sortBy, sortDirection)}</span>
<span className="text-xs">
{getSortIndicator('allowShowcase', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead className="text-center">
<Link href={buildSortHref('showOnLanding')} className="inline-flex items-center justify-center gap-1 hover:underline">
<Link
href={buildSortHref('showOnLanding')}
className="inline-flex items-center justify-center gap-1 hover:underline"
>
Landing
<span className="text-xs">{getSortIndicator('showOnLanding', sortBy, sortDirection)}</span>
<span className="text-xs">
{getSortIndicator('showOnLanding', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead className="text-right">Actions</TableHead>
@@ -357,7 +422,9 @@ export default async function AdminFeedbackPage({
</TableCell>
<TableCell>
<div className="flex flex-col gap-1">
<Badge variant="outline">{entry.type === 'FEEDBACK' ? 'Feedback' : 'Review'}</Badge>
<Badge variant="outline">
{entry.type === 'FEEDBACK' ? 'Feedback' : 'Review'}
</Badge>
{entry.category && (
<Badge variant="secondary" className="w-fit">
{entry.category}
@@ -366,12 +433,16 @@ export default async function AdminFeedbackPage({
</div>
</TableCell>
<TableCell className="font-medium">{entry.title}</TableCell>
<TableCell className="max-w-[320px] truncate text-sm text-muted-foreground">{entry.message}</TableCell>
<TableCell className="max-w-[320px] truncate text-sm text-muted-foreground">
{entry.message}
</TableCell>
<TableCell className="text-center">
{(entry.screenshots.length > 0 || entry.screenshotUrl) ? (
{entry.screenshots.length > 0 || entry.screenshotUrl ? (
<Link href={`/admin/feedback/${entry.id}`} className="text-xs underline">
{(entry.screenshots.length || (entry.screenshotUrl ? 1 : 0))} image
{(entry.screenshots.length || (entry.screenshotUrl ? 1 : 0)) > 1 ? 's' : ''}
{entry.screenshots.length || (entry.screenshotUrl ? 1 : 0)} image
{(entry.screenshots.length || (entry.screenshotUrl ? 1 : 0)) > 1
? 's'
: ''}
</Link>
) : (
'-'
@@ -381,8 +452,12 @@ export default async function AdminFeedbackPage({
<TableCell className="text-center">
<Badge variant="outline">{entry.status}</Badge>
</TableCell>
<TableCell className="text-center">{entry.allowShowcase ? 'Yes' : 'No'}</TableCell>
<TableCell className="text-center">{entry.showOnLanding ? 'Yes' : 'No'}</TableCell>
<TableCell className="text-center">
{entry.allowShowcase ? 'Yes' : 'No'}
</TableCell>
<TableCell className="text-center">
{entry.showOnLanding ? 'Yes' : 'No'}
</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-2">
<Button variant="outline" size="sm" asChild>
@@ -411,7 +486,12 @@ export default async function AdminFeedbackPage({
<span className="text-sm font-medium">
Page {page} of {totalPages}
</span>
<Button variant="outline" size="sm" disabled={page >= totalPages} asChild={page < totalPages}>
<Button
variant="outline"
size="sm"
disabled={page >= totalPages}
asChild={page < totalPages}
>
{page < totalPages ? <Link href={buildPageHref(page + 1)}>Next</Link> : 'Next'}
</Button>
</div>
app/admin/layout.tsx
+68 -63
View File
@@ -4,70 +4,75 @@ import { Header } from '@/components/layout';
import Link from 'next/link';
import { LayoutDashboard, MessageSquareQuote, Users } from 'lucide-react';
export default async function AdminLayout({
children,
}: {
children: React.ReactNode;
}) {
const session = await auth();
export default async function AdminLayout({ children }: { children: React.ReactNode }) {
const session = await auth();
if (!session?.user?.isAdmin) {
redirect('/');
}
if (!session?.user?.isAdmin) {
redirect('/');
}
return (
<div className="relative flex min-h-screen flex-col">
<Header user={session.user} showAppNavigation />
<div className="w-full px-4 md:px-8 flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
{/* Mobile Nav */}
<div className="md:hidden py-4 border-b mb-4">
<nav className="flex items-center gap-4 overflow-x-auto">
<Link href="/admin" className="flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium hover:bg-muted/50">
<LayoutDashboard className="h-4 w-4" />
Dashboard
</Link>
<Link href="/admin/users" className="flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium hover:bg-muted/50">
<Users className="h-4 w-4" />
Users
</Link>
<Link href="/admin/feedback" className="flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium hover:bg-muted/50">
<MessageSquareQuote className="h-4 w-4" />
Feedback
</Link>
</nav>
</div>
{/* Desktop Nav */}
<aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
<div className="h-full py-6 pr-6 lg:py-8">
<nav className="flex flex-col gap-2">
<Link
href="/admin"
className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-muted/50 transition-colors"
>
<LayoutDashboard className="h-4 w-4" />
Dashboard
</Link>
<Link
href="/admin/users"
className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-muted/50 transition-colors"
>
<Users className="h-4 w-4" />
Users
</Link>
<Link
href="/admin/feedback"
className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-muted/50 transition-colors"
>
<MessageSquareQuote className="h-4 w-4" />
Feedback
</Link>
</nav>
</div>
</aside>
<main className="flex w-full flex-col overflow-hidden py-0 md:py-6 lg:py-8">
{children}
</main>
</div>
return (
<div className="relative flex min-h-screen flex-col">
<Header user={session.user} showAppNavigation />
<div className="w-full px-4 md:px-8 flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
{/* Mobile Nav */}
<div className="md:hidden py-4 border-b mb-4">
<nav className="flex items-center gap-4 overflow-x-auto">
<Link
href="/admin"
className="flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium hover:bg-muted/50"
>
<LayoutDashboard className="h-4 w-4" />
Dashboard
</Link>
<Link
href="/admin/users"
className="flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium hover:bg-muted/50"
>
<Users className="h-4 w-4" />
Users
</Link>
<Link
href="/admin/feedback"
className="flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium hover:bg-muted/50"
>
<MessageSquareQuote className="h-4 w-4" />
Feedback
</Link>
</nav>
</div>
);
{/* Desktop Nav */}
<aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
<div className="h-full py-6 pr-6 lg:py-8">
<nav className="flex flex-col gap-2">
<Link
href="/admin"
className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-muted/50 transition-colors"
>
<LayoutDashboard className="h-4 w-4" />
Dashboard
</Link>
<Link
href="/admin/users"
className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-muted/50 transition-colors"
>
<Users className="h-4 w-4" />
Users
</Link>
<Link
href="/admin/feedback"
className="flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-muted/50 transition-colors"
>
<MessageSquareQuote className="h-4 w-4" />
Feedback
</Link>
</nav>
</div>
</aside>
<main className="flex w-full flex-col overflow-hidden py-0 md:py-6 lg:py-8">
{children}
</main>
</div>
</div>
);
}
app/admin/page.tsx
+254 -230
View File
@@ -3,257 +3,281 @@ import { db } from '@/lib/db';
import { auth } from '@/lib/auth';
import { isBunnyUploadsFeatureEnabled, isStripeBillingEnabled } from '@/lib/feature-flags';
import { redirect } from 'next/navigation';
import { getCachedBunnyStorageStats, getCachedTotalStorage, getCachedStripeStats } from '@/lib/admin-stats';
import {
getCachedBunnyStorageStats,
getCachedTotalStorage,
getCachedStripeStats,
} from '@/lib/admin-stats';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { RefreshR2StatsButton } from '@/components/admin/refresh-r2-stats-button';
import { Users, Folder, Video, MessageSquare, Mic, HardDrive, Image as ImageIcon, Film, MessageSquareQuote, Star, CreditCard, TrendingUp, UserCheck, AlertCircle, UserX } from 'lucide-react';
import {
Users,
Folder,
Video,
MessageSquare,
Mic,
HardDrive,
Image as ImageIcon,
Film,
MessageSquareQuote,
Star,
CreditCard,
TrendingUp,
UserCheck,
AlertCircle,
UserX,
} from 'lucide-react';
export const metadata: Metadata = {
title: 'Admin Dashboard | OpenFrame',
description: 'Admin overview dashboard',
title: 'Admin Dashboard | OpenFrame',
description: 'Admin overview dashboard',
};
function formatBytes(bytes: number, decimals = 2) {
if (bytes < 0) return 'Error Fetching';
if (!+bytes) return '0 Bytes';
const k = 1000;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
if (bytes < 0) return 'Error Fetching';
if (!+bytes) return '0 Bytes';
const k = 1000;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
}
function formatMrr(cents: number, currency: string) {
const safeCurrency = /^[a-zA-Z]{3}$/.test(currency) ? currency.toUpperCase() : 'USD';
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: safeCurrency,
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}).format(cents / 100);
const safeCurrency = /^[a-zA-Z]{3}$/.test(currency) ? currency.toUpperCase() : 'USD';
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: safeCurrency,
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}).format(cents / 100);
}
export default async function AdminDashboardPage() {
const session = await auth();
if (!session?.user?.isAdmin) {
redirect('/');
const session = await auth();
if (!session?.user?.isAdmin) {
redirect('/');
}
const userFeedbackDelegate = (
db as unknown as {
userFeedback?: { count: (args?: unknown) => Promise<number> };
}
).userFeedback;
const userFeedbackDelegate = (db as unknown as {
userFeedback?: { count: (args?: unknown) => Promise<number> };
}).userFeedback;
// 1. Database Stats
const [
totalUsers,
totalProjects,
totalVideos,
totalComments,
totalVoiceComments,
totalImageComments,
] = await Promise.all([
db.user.count(),
db.project.count(),
db.video.count(),
db.comment.count(),
db.comment.count({
where: { voiceUrl: { not: null } },
}),
db.comment.count({
where: { imageUrl: { not: null } },
}),
]);
// 1. Database Stats
const [
totalUsers,
totalProjects,
totalVideos,
totalComments,
totalVoiceComments,
totalImageComments,
] = await Promise.all([
db.user.count(),
db.project.count(),
db.video.count(),
db.comment.count(),
db.comment.count({
where: { voiceUrl: { not: null } },
let totalFeedback = 0;
let totalReviews = 0;
if (userFeedbackDelegate) {
try {
[totalFeedback, totalReviews] = await Promise.all([
userFeedbackDelegate.count({
where: { type: 'FEEDBACK' },
}),
db.comment.count({
where: { imageUrl: { not: null } },
userFeedbackDelegate.count({
where: { type: 'REVIEW' },
}),
]);
let totalFeedback = 0;
let totalReviews = 0;
if (userFeedbackDelegate) {
try {
[totalFeedback, totalReviews] = await Promise.all([
userFeedbackDelegate.count({
where: { type: 'FEEDBACK' },
}),
userFeedbackDelegate.count({
where: { type: 'REVIEW' },
}),
]);
} catch (error) {
console.error('Failed to fetch feedback stats:', error);
}
]);
} catch (error) {
console.error('Failed to fetch feedback stats:', error);
}
}
// 2. Storage Stats (Cached)
const [totalStorageBytes, bunnyStorageStats, stripeStats] = await Promise.all([
getCachedTotalStorage(),
getCachedBunnyStorageStats(),
getCachedStripeStats(),
]);
// 2. Storage Stats (Cached)
const [totalStorageBytes, bunnyStorageStats, stripeStats] = await Promise.all([
getCachedTotalStorage(),
getCachedBunnyStorageStats(),
getCachedStripeStats(),
]);
return (
<div className="flex-1 space-y-4 px-4 md:px-8">
<div className="flex items-center justify-between space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Dashboard Overview</h2>
<RefreshR2StatsButton />
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Users</CardTitle>
<Users className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalUsers}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Workspaces & Projects</CardTitle>
<Folder className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalProjects}</div>
<p className="text-xs text-muted-foreground">
Total active projects on the platform
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Active Videos</CardTitle>
<Video className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalVideos}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Comments</CardTitle>
<MessageSquare className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalComments}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Voice Recordings</CardTitle>
<Mic className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalVoiceComments}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Image Attachments</CardTitle>
<ImageIcon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalImageComments}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Feedback Submissions</CardTitle>
<MessageSquareQuote className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalFeedback}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Review Submissions</CardTitle>
<Star className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalReviews}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Cloudflare R2 Storage</CardTitle>
<HardDrive className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{formatBytes(totalStorageBytes)}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Bunny Stream Storage</CardTitle>
<Film className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{isBunnyUploadsFeatureEnabled() ? formatBytes(bunnyStorageStats.totalBytes) : 'Disabled'}
</div>
</CardContent>
</Card>
return (
<div className="flex-1 space-y-4 px-4 md:px-8">
<div className="flex items-center justify-between space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Dashboard Overview</h2>
<RefreshR2StatsButton />
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Users</CardTitle>
<Users className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalUsers}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Workspaces & Projects</CardTitle>
<Folder className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalProjects}</div>
<p className="text-xs text-muted-foreground">Total active projects on the platform</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Active Videos</CardTitle>
<Video className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalVideos}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Comments</CardTitle>
<MessageSquare className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalComments}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Voice Recordings</CardTitle>
<Mic className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalVoiceComments}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Image Attachments</CardTitle>
<ImageIcon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalImageComments}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Feedback Submissions</CardTitle>
<MessageSquareQuote className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalFeedback}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Review Submissions</CardTitle>
<Star className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{totalReviews}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Cloudflare R2 Storage</CardTitle>
<HardDrive className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{formatBytes(totalStorageBytes)}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Bunny Stream Storage</CardTitle>
<Film className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{isBunnyUploadsFeatureEnabled()
? formatBytes(bunnyStorageStats.totalBytes)
: 'Disabled'}
</div>
</CardContent>
</Card>
</div>
{isStripeBillingEnabled() && stripeStats && (
<>
<h3 className="text-xl font-semibold tracking-tight pt-2">Billing &amp; Revenue</h3>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Monthly Recurring Revenue</CardTitle>
<TrendingUp className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{formatMrr(stripeStats.mrrCents, stripeStats.currency)}</div>
<p className="text-xs text-muted-foreground">Based on active subscriptions</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Active Subscribers</CardTitle>
<UserCheck className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stripeStats.activeSubscribers}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">On Trial</CardTitle>
<CreditCard className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stripeStats.trialingUsers}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Free Users</CardTitle>
<Users className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stripeStats.freeUsers}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Past Due</CardTitle>
<AlertCircle className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stripeStats.pastDueUsers}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Canceled</CardTitle>
<UserX className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stripeStats.canceledUsers}</div>
</CardContent>
</Card>
</div>
</>
)}
</div>
);
{isStripeBillingEnabled() && stripeStats && (
<>
<h3 className="text-xl font-semibold tracking-tight pt-2">Billing &amp; Revenue</h3>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Monthly Recurring Revenue</CardTitle>
<TrendingUp className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{formatMrr(stripeStats.mrrCents, stripeStats.currency)}
</div>
<p className="text-xs text-muted-foreground">Based on active subscriptions</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Active Subscribers</CardTitle>
<UserCheck className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stripeStats.activeSubscribers}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">On Trial</CardTitle>
<CreditCard className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stripeStats.trialingUsers}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Free Users</CardTitle>
<Users className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stripeStats.freeUsers}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Past Due</CardTitle>
<AlertCircle className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stripeStats.pastDueUsers}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Canceled</CardTitle>
<UserX className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{stripeStats.canceledUsers}</div>
</CardContent>
</Card>
</div>
</>
)}
</div>
);
}
app/admin/users/page.tsx
+416 -378
View File
@@ -5,449 +5,487 @@ import { auth } from '@/lib/auth';
import { isBunnyUploadsFeatureEnabled } from '@/lib/feature-flags';
import { redirect } from 'next/navigation';
import {
getCachedBunnyStorageStats,
getCachedUserBunnyStorage,
getCachedUserDownloadEgress,
getCachedUserMediaStorage
getCachedBunnyStorageStats,
getCachedUserBunnyStorage,
getCachedUserDownloadEgress,
getCachedUserMediaStorage,
} from '@/lib/admin-stats';
import { Film, HardDrive } from 'lucide-react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { format } from 'date-fns';
export const metadata: Metadata = {
title: 'Manage Users | Admin',
title: 'Manage Users | Admin',
};
type SortBy =
| 'user'
| 'joinedDate'
| 'workspacesOwned'
| 'invitedMembers'
| 'projectsOwned'
| 'totalComments'
| 'bunnyUpload'
| 'downloadEgress'
| 'mediaStorage';
| 'user'
| 'joinedDate'
| 'workspacesOwned'
| 'invitedMembers'
| 'projectsOwned'
| 'totalComments'
| 'bunnyUpload'
| 'downloadEgress'
| 'mediaStorage';
type SortDirection = 'asc' | 'desc';
const SORTABLE_COLUMNS: SortBy[] = [
'user',
'joinedDate',
'workspacesOwned',
'invitedMembers',
'projectsOwned',
'totalComments',
'bunnyUpload',
'downloadEgress',
'mediaStorage',
'user',
'joinedDate',
'workspacesOwned',
'invitedMembers',
'projectsOwned',
'totalComments',
'bunnyUpload',
'downloadEgress',
'mediaStorage',
];
function formatBytes(bytes: number, decimals = 2) {
if (bytes < 0) return 'Error Fetching';
if (!+bytes) return '0 Bytes';
const k = 1000;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
if (bytes < 0) return 'Error Fetching';
if (!+bytes) return '0 Bytes';
const k = 1000;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
}
function isSortBy(value: string | undefined): value is SortBy {
return !!value && SORTABLE_COLUMNS.includes(value as SortBy);
return !!value && SORTABLE_COLUMNS.includes(value as SortBy);
}
function getDefaultSortDirection(sortBy: SortBy): SortDirection {
return sortBy === 'user' ? 'asc' : 'desc';
return sortBy === 'user' ? 'asc' : 'desc';
}
function getSortIndicator(column: SortBy, activeSortBy: SortBy, activeSortDirection: SortDirection): string {
if (column !== activeSortBy) return '↕';
return activeSortDirection === 'asc' ? '↑' : '↓';
function getSortIndicator(
column: SortBy,
activeSortBy: SortBy,
activeSortDirection: SortDirection
): string {
if (column !== activeSortBy) return '↕';
return activeSortDirection === 'asc' ? '↑' : '↓';
}
function canSortInDb(sortBy: SortBy): boolean {
return sortBy === 'user'
|| sortBy === 'joinedDate'
|| sortBy === 'workspacesOwned'
|| sortBy === 'projectsOwned'
|| sortBy === 'totalComments';
return (
sortBy === 'user' ||
sortBy === 'joinedDate' ||
sortBy === 'workspacesOwned' ||
sortBy === 'projectsOwned' ||
sortBy === 'totalComments'
);
}
function getUsersOrderBy(sortBy: SortBy, sortDirection: SortDirection): Prisma.UserOrderByWithRelationInput[] {
const createdAtTieBreaker: Prisma.UserOrderByWithRelationInput = { createdAt: 'desc' };
function getUsersOrderBy(
sortBy: SortBy,
sortDirection: SortDirection
): Prisma.UserOrderByWithRelationInput[] {
const createdAtTieBreaker: Prisma.UserOrderByWithRelationInput = { createdAt: 'desc' };
if (sortBy === 'user') {
return [
{ name: sortDirection },
{ email: sortDirection },
createdAtTieBreaker,
];
}
if (sortBy === 'user') {
return [{ name: sortDirection }, { email: sortDirection }, createdAtTieBreaker];
}
if (sortBy === 'joinedDate') {
return [{ createdAt: sortDirection }];
}
if (sortBy === 'joinedDate') {
return [{ createdAt: sortDirection }];
}
if (sortBy === 'workspacesOwned') {
return [
{ ownedWorkspaces: { _count: sortDirection } },
createdAtTieBreaker,
];
}
if (sortBy === 'workspacesOwned') {
return [{ ownedWorkspaces: { _count: sortDirection } }, createdAtTieBreaker];
}
if (sortBy === 'projectsOwned') {
return [
{ projects: { _count: sortDirection } },
createdAtTieBreaker,
];
}
if (sortBy === 'projectsOwned') {
return [{ projects: { _count: sortDirection } }, createdAtTieBreaker];
}
if (sortBy === 'totalComments') {
return [
{ comments: { _count: sortDirection } },
createdAtTieBreaker,
];
}
if (sortBy === 'totalComments') {
return [{ comments: { _count: sortDirection } }, createdAtTieBreaker];
}
return [createdAtTieBreaker];
return [createdAtTieBreaker];
}
export default async function AdminUsersPage({
searchParams
searchParams,
}: {
searchParams: Promise<{ page?: string; sortBy?: string; sortDirection?: string }>
searchParams: Promise<{ page?: string; sortBy?: string; sortDirection?: string }>;
}) {
const session = await auth();
if (!session?.user?.isAdmin) {
redirect('/');
}
const session = await auth();
if (!session?.user?.isAdmin) {
redirect('/');
}
const resolvedSearchParams = await searchParams;
const requestedPage = Number(resolvedSearchParams?.page) || 1;
const sortBy: SortBy = isSortBy(resolvedSearchParams?.sortBy) ? resolvedSearchParams.sortBy : 'joinedDate';
const sortDirection: SortDirection =
resolvedSearchParams?.sortDirection === 'asc' || resolvedSearchParams?.sortDirection === 'desc'
? resolvedSearchParams.sortDirection
: getDefaultSortDirection(sortBy);
const pageSize = 20;
const [totalUsers, userStorage, userBunnyStorage, userDownloadEgress, bunnyStorageStats] = await Promise.all([
db.user.count(),
getCachedUserMediaStorage(),
getCachedUserBunnyStorage(),
getCachedUserDownloadEgress(),
getCachedBunnyStorageStats(),
const resolvedSearchParams = await searchParams;
const requestedPage = Number(resolvedSearchParams?.page) || 1;
const sortBy: SortBy = isSortBy(resolvedSearchParams?.sortBy)
? resolvedSearchParams.sortBy
: 'joinedDate';
const sortDirection: SortDirection =
resolvedSearchParams?.sortDirection === 'asc' || resolvedSearchParams?.sortDirection === 'desc'
? resolvedSearchParams.sortDirection
: getDefaultSortDirection(sortBy);
const pageSize = 20;
const [totalUsers, userStorage, userBunnyStorage, userDownloadEgress, bunnyStorageStats] =
await Promise.all([
db.user.count(),
getCachedUserMediaStorage(),
getCachedUserBunnyStorage(),
getCachedUserDownloadEgress(),
getCachedBunnyStorageStats(),
]);
const totalPages = Math.max(1, Math.ceil(totalUsers / pageSize));
const page = Math.min(Math.max(1, requestedPage), totalPages);
const skip = (page - 1) * pageSize;
const totalPages = Math.max(1, Math.ceil(totalUsers / pageSize));
const page = Math.min(Math.max(1, requestedPage), totalPages);
const skip = (page - 1) * pageSize;
const select = {
id: true,
name: true,
email: true,
createdAt: true,
ownedWorkspaces: {
select: {
_count: {
select: {
members: true,
}
}
}
},
const select = {
id: true,
name: true,
email: true,
createdAt: true,
ownedWorkspaces: {
select: {
_count: {
select: {
ownedWorkspaces: true,
projects: true,
comments: true,
}
}
} satisfies Prisma.UserSelect;
select: {
members: true,
},
},
},
},
_count: {
select: {
ownedWorkspaces: true,
projects: true,
comments: true,
},
},
} satisfies Prisma.UserSelect;
let paginatedUsers: Array<{
id: string;
name: string | null;
email: string | null;
createdAt: Date;
ownedWorkspaces: Array<{ _count: { members: number } }>;
_count: { ownedWorkspaces: number; projects: number; comments: number };
invitedMembersCount: number;
bunnyUploadBytes: number;
downloadEgressBytes: number;
mediaStorageBytes: number;
}> = [];
let paginatedUsers: Array<{
id: string;
name: string | null;
email: string | null;
createdAt: Date;
ownedWorkspaces: Array<{ _count: { members: number } }>;
_count: { ownedWorkspaces: number; projects: number; comments: number };
invitedMembersCount: number;
bunnyUploadBytes: number;
downloadEgressBytes: number;
mediaStorageBytes: number;
}> = [];
if (canSortInDb(sortBy)) {
const users = await db.user.findMany({
skip,
take: pageSize,
orderBy: getUsersOrderBy(sortBy, sortDirection),
select,
});
if (canSortInDb(sortBy)) {
const users = await db.user.findMany({
skip,
take: pageSize,
orderBy: getUsersOrderBy(sortBy, sortDirection),
select,
});
paginatedUsers = users.map((user) => ({
...user,
invitedMembersCount: user.ownedWorkspaces.reduce(
(total, workspace) => total + workspace._count.members,
0
),
bunnyUploadBytes: userBunnyStorage[user.id] || 0,
downloadEgressBytes: userDownloadEgress[user.id] || 0,
mediaStorageBytes: userStorage[user.id]?.total || 0,
}));
} else {
const users = await db.user.findMany({ select });
paginatedUsers = users.map((user) => ({
...user,
invitedMembersCount: user.ownedWorkspaces.reduce(
(total, workspace) => total + workspace._count.members,
0
),
bunnyUploadBytes: userBunnyStorage[user.id] || 0,
downloadEgressBytes: userDownloadEgress[user.id] || 0,
mediaStorageBytes: userStorage[user.id]?.total || 0,
}));
} else {
const users = await db.user.findMany({ select });
const usersWithMetrics = users.map((user) => ({
...user,
invitedMembersCount: user.ownedWorkspaces.reduce(
(total, workspace) => total + workspace._count.members,
0
),
bunnyUploadBytes: userBunnyStorage[user.id] || 0,
downloadEgressBytes: userDownloadEgress[user.id] || 0,
mediaStorageBytes: userStorage[user.id]?.total || 0,
}));
const usersWithMetrics = users.map((user) => ({
...user,
invitedMembersCount: user.ownedWorkspaces.reduce(
(total, workspace) => total + workspace._count.members,
0
),
bunnyUploadBytes: userBunnyStorage[user.id] || 0,
downloadEgressBytes: userDownloadEgress[user.id] || 0,
mediaStorageBytes: userStorage[user.id]?.total || 0,
}));
const sortedUsers = usersWithMetrics.sort((a, b) => {
let comparison = 0;
const sortedUsers = usersWithMetrics.sort((a, b) => {
let comparison = 0;
if (sortBy === 'invitedMembers') {
comparison = a.invitedMembersCount - b.invitedMembersCount;
} else if (sortBy === 'bunnyUpload') {
comparison = a.bunnyUploadBytes - b.bunnyUploadBytes;
} else if (sortBy === 'downloadEgress') {
comparison = a.downloadEgressBytes - b.downloadEgressBytes;
} else if (sortBy === 'mediaStorage') {
comparison = a.mediaStorageBytes - b.mediaStorageBytes;
}
if (sortBy === 'invitedMembers') {
comparison = a.invitedMembersCount - b.invitedMembersCount;
} else if (sortBy === 'bunnyUpload') {
comparison = a.bunnyUploadBytes - b.bunnyUploadBytes;
} else if (sortBy === 'downloadEgress') {
comparison = a.downloadEgressBytes - b.downloadEgressBytes;
} else if (sortBy === 'mediaStorage') {
comparison = a.mediaStorageBytes - b.mediaStorageBytes;
}
if (comparison === 0) {
comparison = new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
}
if (comparison === 0) {
comparison = new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
}
return sortDirection === 'asc' ? comparison : -comparison;
});
return sortDirection === 'asc' ? comparison : -comparison;
});
paginatedUsers = sortedUsers.slice(skip, skip + pageSize);
}
paginatedUsers = sortedUsers.slice(skip, skip + pageSize);
}
const buildUsersPageHref = (
targetPage: number,
targetSortBy: SortBy = sortBy,
targetSortDirection: SortDirection = sortDirection
): string => {
const params = new URLSearchParams({
page: String(targetPage),
sortBy: targetSortBy,
sortDirection: targetSortDirection,
});
const buildUsersPageHref = (
targetPage: number,
targetSortBy: SortBy = sortBy,
targetSortDirection: SortDirection = sortDirection
): string => {
const params = new URLSearchParams({
page: String(targetPage),
sortBy: targetSortBy,
sortDirection: targetSortDirection,
});
return `/admin/users?${params.toString()}`;
};
return `/admin/users?${params.toString()}`;
};
const buildSortHref = (column: SortBy): string => {
const nextDirection: SortDirection =
column === sortBy
? sortDirection === 'asc'
? 'desc'
: 'asc'
: getDefaultSortDirection(column);
const buildSortHref = (column: SortBy): string => {
const nextDirection: SortDirection =
column === sortBy
? sortDirection === 'asc'
? 'desc'
: 'asc'
: getDefaultSortDirection(column);
return buildUsersPageHref(1, column, nextDirection);
};
return buildUsersPageHref(1, column, nextDirection);
};
return (
<div className="flex-1 space-y-4">
<div className="flex items-center justify-between space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Users</h2>
return (
<div className="flex-1 space-y-4">
<div className="flex items-center justify-between space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Users</h2>
</div>
<div className="grid gap-4 md:grid-cols-2">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Bunny Stream Storage</CardTitle>
<Film className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{isBunnyUploadsFeatureEnabled()
? formatBytes(bunnyStorageStats.totalBytes)
: 'Disabled'}
</div>
<div className="grid gap-4 md:grid-cols-2">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Bunny Stream Storage</CardTitle>
<Film className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{isBunnyUploadsFeatureEnabled() ? formatBytes(bunnyStorageStats.totalBytes) : 'Disabled'}
</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Cloudflare R2 Media Storage</CardTitle>
<HardDrive className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{formatBytes(Object.values(userStorage).reduce((sum, item) => sum + item.total, 0))}
</div>
</CardContent>
</Card>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Cloudflare R2 Media Storage</CardTitle>
<HardDrive className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{formatBytes(Object.values(userStorage).reduce((sum, item) => sum + item.total, 0))}
</div>
</CardContent>
</Card>
</div>
<Card>
<CardHeader>
<CardTitle>All Users</CardTitle>
<CardDescription>
A comprehensive list of all {totalUsers} users registered on the platform.
</CardDescription>
</CardHeader>
<CardContent>
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>
<Link href={buildSortHref('user')} className="inline-flex items-center gap-1 hover:underline">
User
<span className="text-xs">{getSortIndicator('user', sortBy, sortDirection)}</span>
</Link>
</TableHead>
<TableHead>
<Link href={buildSortHref('joinedDate')} className="inline-flex items-center gap-1 hover:underline">
Joined Date
<span className="text-xs">{getSortIndicator('joinedDate', sortBy, sortDirection)}</span>
</Link>
</TableHead>
<TableHead className="text-center">
<Link href={buildSortHref('workspacesOwned')} className="inline-flex items-center justify-center gap-1 hover:underline">
Workspaces Owned
<span className="text-xs">{getSortIndicator('workspacesOwned', sortBy, sortDirection)}</span>
</Link>
</TableHead>
<TableHead className="text-center">
<Link href={buildSortHref('invitedMembers')} className="inline-flex items-center justify-center gap-1 hover:underline">
Invited Members
<span className="text-xs">{getSortIndicator('invitedMembers', sortBy, sortDirection)}</span>
</Link>
</TableHead>
<TableHead className="text-center">
<Link href={buildSortHref('projectsOwned')} className="inline-flex items-center justify-center gap-1 hover:underline">
Projects Owned
<span className="text-xs">{getSortIndicator('projectsOwned', sortBy, sortDirection)}</span>
</Link>
</TableHead>
<TableHead className="text-center">
<Link href={buildSortHref('totalComments')} className="inline-flex items-center justify-center gap-1 hover:underline">
Total Comments
<span className="text-xs">{getSortIndicator('totalComments', sortBy, sortDirection)}</span>
</Link>
</TableHead>
<TableHead className="text-right">
<Link href={buildSortHref('bunnyUpload')} className="inline-flex items-center justify-end gap-1 hover:underline">
Bunny Upload
<span className="text-xs">{getSortIndicator('bunnyUpload', sortBy, sortDirection)}</span>
</Link>
</TableHead>
<TableHead className="text-right">
<Link href={buildSortHref('downloadEgress')} className="inline-flex items-center justify-end gap-1 hover:underline">
Download Egress (Est.)
<span className="text-xs">{getSortIndicator('downloadEgress', sortBy, sortDirection)}</span>
</Link>
</TableHead>
<TableHead className="text-right">
<Link href={buildSortHref('mediaStorage')} className="inline-flex items-center justify-end gap-1 hover:underline">
Media Storage
<span className="text-xs">{getSortIndicator('mediaStorage', sortBy, sortDirection)}</span>
</Link>
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{paginatedUsers.length === 0 ? (
<TableRow>
<TableCell colSpan={9} className="h-24 text-center">
No users found.
</TableCell>
</TableRow>
) : (
paginatedUsers.map((user) => (
<TableRow key={user.id}>
<TableCell>
<div className="flex flex-col">
<span className="font-medium">{user.name || 'Anonymous'}</span>
<span className="text-xs text-muted-foreground">{user.email}</span>
</div>
</TableCell>
<TableCell>
{format(new Date(user.createdAt), 'MMM dd, yyyy')}
</TableCell>
<TableCell className="text-center">{user._count.ownedWorkspaces}</TableCell>
<TableCell className="text-center">{user.invitedMembersCount}</TableCell>
<TableCell className="text-center">{user._count.projects}</TableCell>
<TableCell className="text-center">{user._count.comments}</TableCell>
<TableCell className="text-right text-sm font-medium">
{formatBytes(user.bunnyUploadBytes)}
</TableCell>
<TableCell className="text-right text-sm font-medium">
{formatBytes(user.downloadEgressBytes)}
</TableCell>
<TableCell className="text-right text-sm">
<div className="flex flex-col items-end">
<span className="font-medium text-foreground">{formatBytes(user.mediaStorageBytes)}</span>
{(userStorage[user.id]?.voice > 0 || userStorage[user.id]?.image > 0) && (
<span className="text-xs text-muted-foreground mt-0.5 whitespace-nowrap space-x-1">
{userStorage[user.id]?.voice > 0 && <span>🎤 {formatBytes(userStorage[user.id]?.voice)}</span>}
{userStorage[user.id]?.voice > 0 && userStorage[user.id]?.image > 0 && <span>•</span>}
{userStorage[user.id]?.image > 0 && <span>🖼️ {formatBytes(userStorage[user.id]?.image)}</span>}
</span>
)}
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
{/* Pagination */}
{totalPages > 1 && (
<div className="flex items-center justify-end space-x-2 py-4">
<Button
variant="outline"
size="sm"
disabled={page <= 1}
asChild={page > 1}
>
{page > 1 ? (
<Link href={buildUsersPageHref(page - 1)}>Previous</Link>
) : (
"Previous"
)}
</Button>
<span className="text-sm font-medium">
Page {page} of {totalPages}
<Card>
<CardHeader>
<CardTitle>All Users</CardTitle>
<CardDescription>
A comprehensive list of all {totalUsers} users registered on the platform.
</CardDescription>
</CardHeader>
<CardContent>
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>
<Link
href={buildSortHref('user')}
className="inline-flex items-center gap-1 hover:underline"
>
User
<span className="text-xs">
{getSortIndicator('user', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead>
<Link
href={buildSortHref('joinedDate')}
className="inline-flex items-center gap-1 hover:underline"
>
Joined Date
<span className="text-xs">
{getSortIndicator('joinedDate', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead className="text-center">
<Link
href={buildSortHref('workspacesOwned')}
className="inline-flex items-center justify-center gap-1 hover:underline"
>
Workspaces Owned
<span className="text-xs">
{getSortIndicator('workspacesOwned', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead className="text-center">
<Link
href={buildSortHref('invitedMembers')}
className="inline-flex items-center justify-center gap-1 hover:underline"
>
Invited Members
<span className="text-xs">
{getSortIndicator('invitedMembers', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead className="text-center">
<Link
href={buildSortHref('projectsOwned')}
className="inline-flex items-center justify-center gap-1 hover:underline"
>
Projects Owned
<span className="text-xs">
{getSortIndicator('projectsOwned', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead className="text-center">
<Link
href={buildSortHref('totalComments')}
className="inline-flex items-center justify-center gap-1 hover:underline"
>
Total Comments
<span className="text-xs">
{getSortIndicator('totalComments', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead className="text-right">
<Link
href={buildSortHref('bunnyUpload')}
className="inline-flex items-center justify-end gap-1 hover:underline"
>
Bunny Upload
<span className="text-xs">
{getSortIndicator('bunnyUpload', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead className="text-right">
<Link
href={buildSortHref('downloadEgress')}
className="inline-flex items-center justify-end gap-1 hover:underline"
>
Download Egress (Est.)
<span className="text-xs">
{getSortIndicator('downloadEgress', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
<TableHead className="text-right">
<Link
href={buildSortHref('mediaStorage')}
className="inline-flex items-center justify-end gap-1 hover:underline"
>
Media Storage
<span className="text-xs">
{getSortIndicator('mediaStorage', sortBy, sortDirection)}
</span>
</Link>
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{paginatedUsers.length === 0 ? (
<TableRow>
<TableCell colSpan={9} className="h-24 text-center">
No users found.
</TableCell>
</TableRow>
) : (
paginatedUsers.map((user) => (
<TableRow key={user.id}>
<TableCell>
<div className="flex flex-col">
<span className="font-medium">{user.name || 'Anonymous'}</span>
<span className="text-xs text-muted-foreground">{user.email}</span>
</div>
</TableCell>
<TableCell>{format(new Date(user.createdAt), 'MMM dd, yyyy')}</TableCell>
<TableCell className="text-center">{user._count.ownedWorkspaces}</TableCell>
<TableCell className="text-center">{user.invitedMembersCount}</TableCell>
<TableCell className="text-center">{user._count.projects}</TableCell>
<TableCell className="text-center">{user._count.comments}</TableCell>
<TableCell className="text-right text-sm font-medium">
{formatBytes(user.bunnyUploadBytes)}
</TableCell>
<TableCell className="text-right text-sm font-medium">
{formatBytes(user.downloadEgressBytes)}
</TableCell>
<TableCell className="text-right text-sm">
<div className="flex flex-col items-end">
<span className="font-medium text-foreground">
{formatBytes(user.mediaStorageBytes)}
</span>
{(userStorage[user.id]?.voice > 0 || userStorage[user.id]?.image > 0) && (
<span className="text-xs text-muted-foreground mt-0.5 whitespace-nowrap space-x-1">
{userStorage[user.id]?.voice > 0 && (
<span>🎤 {formatBytes(userStorage[user.id]?.voice)}</span>
)}
{userStorage[user.id]?.voice > 0 &&
userStorage[user.id]?.image > 0 && <span>•</span>}
{userStorage[user.id]?.image > 0 && (
<span>🖼️ {formatBytes(userStorage[user.id]?.image)}</span>
)}
</span>
<Button
variant="outline"
size="sm"
disabled={page >= totalPages}
asChild={page < totalPages}
>
{page < totalPages ? (
<Link href={buildUsersPageHref(page + 1)}>Next</Link>
) : (
"Next"
)}
</Button>
)}
</div>
)}
</CardContent>
</Card>
</div>
);
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
{/* Pagination */}
{totalPages > 1 && (
<div className="flex items-center justify-end space-x-2 py-4">
<Button variant="outline" size="sm" disabled={page <= 1} asChild={page > 1}>
{page > 1 ? <Link href={buildUsersPageHref(page - 1)}>Previous</Link> : 'Previous'}
</Button>
<span className="text-sm font-medium">
Page {page} of {totalPages}
</span>
<Button
variant="outline"
size="sm"
disabled={page >= totalPages}
asChild={page < totalPages}
>
{page < totalPages ? <Link href={buildUsersPageHref(page + 1)}>Next</Link> : 'Next'}
</Button>
</div>
)}
</CardContent>
</Card>
</div>
);
}