Working on the home page.

This commit is contained in:
charlesgauthereau
2025-07-29 08:51:50 +02:00
parent 2139dfd55d
commit d3f465b5d4
5 changed files with 104 additions and 27 deletions
@@ -1,21 +0,0 @@
import { PageParams } from "@/types/next";
import {Page, PageHeader, PageTitle} from "@/features/layout/page";
export default async function RoutePage(props: PageParams<{}>) {
return (
<Page>
<PageHeader>
<PageTitle>Dashboard</PageTitle>
</PageHeader>
<div className="flex flex-1 flex-col gap-4">
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
<div className="aspect-video rounded-xl bg-muted/50" />
<div className="aspect-video rounded-xl bg-muted/50" />
<div className="aspect-video rounded-xl bg-muted/50" />
</div>
</div>
</Page>
);
}
@@ -5,7 +5,7 @@ import {EvolutionLineChart} from "@/components/wrappers/dashboard/statistics/cha
import {PercentageLineChart} from "@/components/wrappers/dashboard/statistics/charts/percentage-line-chart";
import {notFound} from "next/navigation";
import {db} from "@/db";
import {asc, count, eq, inArray} from "drizzle-orm";
import {and, asc, count, eq, inArray} from "drizzle-orm";
import * as drizzleDb from "@/db";
import {getOrganization} from "@/lib/auth/auth";
import {DatabaseBackup, Folder, RefreshCcw} from "lucide-react";
@@ -53,7 +53,7 @@ export default async function RoutePage(props: PageParams<{}>) {
_count: count(),
})
.from(drizzleDb.schemas.backup)
.where(inArray(drizzleDb.schemas.backup.status, ["success", "failed"]))
.where(and(inArray(drizzleDb.schemas.backup.status, ["success", "failed"]), inArray(drizzleDb.schemas.backup.databaseId, databaseIds)))
.groupBy(drizzleDb.schemas.backup.createdAt, drizzleDb.schemas.backup.status)
.orderBy(drizzleDb.schemas.backup.createdAt);
+90
View File
@@ -0,0 +1,90 @@
import {PageParams} from "@/types/next";
import {Page, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {Building2, DatabaseBackup, Folder, RefreshCcw} from "lucide-react";
import {EvolutionLineChart} from "@/components/wrappers/dashboard/statistics/charts/evolution-line-chart";
import {PercentageLineChart} from "@/components/wrappers/dashboard/statistics/charts/percentage-line-chart";
import {currentUser} from "@/lib/auth/current-user";
import {notFound} from "next/navigation";
import {db} from "@/db";
import {asc, eq, inArray} from "drizzle-orm";
import * as drizzleDb from "@/db";
import {auth, listOrganizations} from "@/lib/auth/auth";
import {authClient} from "@/lib/auth/auth-client";
export default async function RoutePage(props: PageParams<{}>) {
const user = await currentUser();
const organizations = await listOrganizations()
if (!user || !organizations) notFound();
const organizationIds = organizations.map(project => project.id);
const projects = await db.query.project.findMany({
where: inArray(drizzleDb.schemas.project.organizationId, organizationIds),
});
const projectIds = projects.map(project => project.id);
const databasesOfAllProjects = await db.query.database.findMany({
where: inArray(drizzleDb.schemas.database.projectId, projectIds),
})
const databaseIds = databasesOfAllProjects.map((database) => database.id);
const backupsEvolution = await db.query.backup.findMany({
columns: {
id: true,
createdAt: true,
},
orderBy: [asc(drizzleDb.schemas.backup.id)],
where: inArray(drizzleDb.schemas.backup.databaseId, databaseIds),
});
return (
<Page>
<PageHeader>
<PageTitle>Dashboard</PageTitle>
</PageHeader>
<PageContent className="flex flex-col gap-y-4">
<div className="flex flex-col md:flex-row gap-4">
<Card className="w-full flex-1">
<CardHeader className="flex items-center gap-2">
<Building2 className="w-5 h-5 text-muted-foreground"/>
<CardTitle>Organizations</CardTitle>
</CardHeader>
<CardContent className="text-3xl font-bold">{organizations.length}</CardContent>
</Card>
<Card className="w-full flex-1">
<CardHeader className="flex items-center gap-2">
<Folder className="w-5 h-5 text-muted-foreground"/>
<CardTitle>Projects</CardTitle>
</CardHeader>
<CardContent className="text-3xl font-bold">{projects.length}</CardContent>
</Card>
<Card className="w-full flex-1">
<CardHeader className="flex items-center gap-2">
<DatabaseBackup className="w-5 h-5 text-muted-foreground"/>
<CardTitle>Backups</CardTitle>
</CardHeader>
<CardContent className="text-3xl font-bold">{backupsEvolution.length}</CardContent>
</Card>
</div>
<div className="flex flex-1 flex-col gap-4">
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
<div className="aspect-video rounded-xl bg-muted/50"/>
<div className="aspect-video rounded-xl bg-muted/50"/>
<div className="aspect-video rounded-xl bg-muted/50"/>
</div>
</div>
</PageContent>
</Page>
);
}
@@ -22,9 +22,11 @@ export const SidebarMenuCustomMain = () => {
return null;
}
const groupContentApplication: SidebarGroupItem["group_content"] = [
{ title: "Dashboard", url: "/home", icon: Home },
];
const groupContent: SidebarGroupItem["group_content"] = [
{ title: "Dashboard", url: "/home", icon: Home },
{ title: "Projects", url: "/projects", icon: Layers, details:true },
{ title: "Statistics", url: "/statistics", icon: ChartArea },
];
@@ -37,6 +39,11 @@ export const SidebarMenuCustomMain = () => {
{
label: "Application",
type: "list",
group_content: groupContentApplication,
},
{
label: "Organization",
type: "list",
group_content: groupContent,
},
];
+4 -3
View File
@@ -4,7 +4,7 @@ import * as drizzleDb from "@/db";
import {db} from "@/db";
import {env} from "@/env.mjs";
import {nextCookies} from "better-auth/next-js";
import {admin as adminPlugin, openAPI, organization} from "better-auth/plugins";
import {admin as adminPlugin, openAPI, Organization, organization} from "better-auth/plugins";
import {ac, admin, orgAdmin, orgMember, orgOwner, pending, superadmin, user} from "@/lib/auth/permissions";
import {headers} from "next/headers";
import {count, eq} from "drizzle-orm";
@@ -353,12 +353,13 @@ export const getOrganization = async ({
}
};
export const listOrganizations = async () => {
export const listOrganizations = async (): Promise<Organization[] | null> => {
try {
return await auth.api.listOrganizations({
headers: await headers(),
});
}) as Organization[];
} catch (e) {
return null;
}
};