Working on bugs, add delete restore. Review the auth style. working on the RBAC.

This commit is contained in:
charlesgauthereau
2025-07-26 16:34:06 +02:00
parent f8f599e4dd
commit 1ffbd6efc8
23 changed files with 419 additions and 194 deletions
@@ -48,7 +48,7 @@ export function CardsWithPagination<T>(props: CardsWithPaginationProps<T>) {
))}
</div>
<PaginationNavigation
className="justify-end"
className="justify-end mt-4"
totalPages={totalPages}
currentPage={currentPage}
goToPage={goToPage}
@@ -7,11 +7,13 @@ export type ConnectionCircleProps = {
export const ConnectionCircle = ({ date }: ConnectionCircleProps) => {
let style = "bg-gray-300 border-gray-400";
if (date) {
if (date instanceof Date && !isNaN(date.getTime())) {
const now = Date.now();
const timestamp = new Date(date).getTime();
const timestamp = date.getTime();
const interval = now - timestamp;
console.log({ now, timestamp, interval });
if (interval < 10000) {
style = "bg-green-400 border-green-600";
} else if (interval <= 20000) {
@@ -19,7 +21,11 @@ export const ConnectionCircle = ({ date }: ConnectionCircleProps) => {
} else {
style = "bg-red-400 border-red-600";
}
} else {
console.warn("Invalid date passed to ConnectionCircle:", date);
}
console.log(style);
return <div className={cn("w-5 h-5 rounded-full border-4", style)} />;
};
@@ -14,13 +14,13 @@ export const AgentCard = (props: agentCardProps) => {
const { data: agent } = props;
return (
<Link href={`/dashboard/agents/${agent.id}`}>
<Link href={`/dashboard/agents/${agent.id}`} className="block transition-all duration-200 hover:scale-[1.01] hover:shadow-md">
<Card className="flex flex-row justify-between">
<div className="">
<CardHeader>{agent.name}</CardHeader>
<CardContent>Last contact : {formatDateLastContact(agent.lastContact)}</CardContent>
<div>
<CardHeader className="text-2xl font-bold">{agent.name}</CardHeader>
<CardContent>Last contact: {formatDateLastContact(agent.lastContact)}</CardContent>
</div>
<div className="mt-3 mr-3">
<div className="flex items-center px-4">
<ConnectionCircle date={agent.lastContact} />
</div>
</Card>
@@ -1,16 +1,24 @@
"use client";
import { Card, CardContent } from "@/components/ui/card";
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useZodForm } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Form } from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";
import { useMutation } from "@tanstack/react-query";
import { TooltipProvider } from "@/components/ui/tooltip";
import { AgentSchema, AgentType } from "@/components/wrappers/dashboard/agent/AgentForm/agent-form.schema";
import { toast } from "sonner";
import { createAgentAction, updateAgentAction } from "@/components/wrappers/dashboard/agent/AgentForm/agent-form.action";
import {Card, CardContent} from "@/components/ui/card";
import {
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
useZodForm
} from "@/components/ui/form";
import {Input} from "@/components/ui/input";
import {Form} from "@/components/ui/form";
import {Button} from "@/components/ui/button";
import {useRouter} from "next/navigation";
import {useMutation} from "@tanstack/react-query";
import {TooltipProvider} from "@/components/ui/tooltip";
import {AgentSchema, AgentType} from "@/components/wrappers/dashboard/agent/AgentForm/agent-form.schema";
import {toast} from "sonner";
import {createAgentAction, updateAgentAction} from "@/components/wrappers/dashboard/agent/AgentForm/agent-form.action";
export type agentFormProps = {
defaultValues?: AgentType;
@@ -29,14 +37,13 @@ export const AgentForm = (props: agentFormProps) => {
const mutation = useMutation({
mutationFn: async (values: AgentType) => {
console.log("values", values);
const createAgent = isCreate
? await createAgentAction(values)
: await updateAgentAction({
id: props.agentId ?? "-",
data: values,
});
id: props.agentId ?? "-",
data: values,
});
const data = createAgent?.data?.data;
if (createAgent?.serverError || !data) {
@@ -44,7 +51,7 @@ export const AgentForm = (props: agentFormProps) => {
toast.error(createAgent?.serverError);
return;
}
toast.success(`Success`);
toast.success(`Success ${isCreate ? "creating" : "updating"} agent`);
router.push(`/dashboard/agents/${data.id}`);
router.refresh();
},
@@ -65,37 +72,14 @@ export const AgentForm = (props: agentFormProps) => {
control={form.control}
name="name"
defaultValue=""
render={({ field }) => (
render={({field}) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input placeholder="Agent 1" {...field} />
</FormControl>
<FormDescription>Your agent project name</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
defaultValue=""
name="slug"
render={({ field }) => (
<FormItem>
<FormLabel>Slug</FormLabel>
<FormControl>
<Input
//value={field.value ?? ""}
placeholder="agent-1"
{...field}
onChange={(e) => {
const value = e.target.value.replaceAll(" ", "-").toLowerCase();
field.onChange(value);
}}
/>
</FormControl>
<FormDescription>The slug is used in the url of the agent</FormDescription>
<FormMessage />
<FormMessage/>
</FormItem>
)}
/>
@@ -103,14 +87,15 @@ export const AgentForm = (props: agentFormProps) => {
control={form.control}
defaultValue=""
name="description"
render={({ field }) => (
render={({field}) => (
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl>
<Input placeholder="This agent is for the client exemple.com" {...field} value={field.value ?? ""} />
<Input placeholder="This agent is for the client exemple.com" {...field}
value={field.value ?? ""}/>
</FormControl>
<FormDescription>Enter your project agent description</FormDescription>
<FormMessage />
<FormMessage/>
</FormItem>
)}
/>
@@ -1,26 +1,26 @@
"use server";
import { ActionError, userAction } from "@/safe-actions";
import { AgentSchema } from "@/components/wrappers/dashboard/agent/AgentForm/agent-form.schema";
import { z } from "zod";
import { eq, and, ne, count } from "drizzle-orm";
import { db } from "@/db";
import {ActionError, userAction} from "@/safe-actions";
import {AgentSchema} from "@/components/wrappers/dashboard/agent/AgentForm/agent-form.schema";
import {z} from "zod";
import {eq, and, ne, count} from "drizzle-orm";
import {db} from "@/db";
import * as drizzleDb from "@/db";
import {slugify} from "@/utils/slugify";
const verifySlugUniqueness = async (slug: string, agentId?: string) => {
const conditions = agentId ? and(eq(drizzleDb.schemas.agent.slug, slug), ne(drizzleDb.schemas.agent.id, agentId)) : eq(drizzleDb.schemas.agent.slug, slug);
const conditions = agentId ? and(eq(drizzleDb.schemas.agent.slug, slug), ne(drizzleDb.schemas.agent.id, agentId)) : eq(drizzleDb.schemas.agent.slug, slug);
const [countResult] = await db.select({ count: count() }).from(drizzleDb.schemas.agent).where(conditions);
const [countResult] = await db.select({count: count()}).from(drizzleDb.schemas.agent).where(conditions);
if (countResult.count > 0) {
throw new ActionError("Slug already exists");
}
};
export const createAgentAction = userAction.schema(AgentSchema).action(async ({ parsedInput }) => {
await verifySlugUniqueness(parsedInput.slug);
const [createdAgent] = await db.insert(drizzleDb.schemas.agent).values(parsedInput).returning();
export const createAgentAction = userAction.schema(AgentSchema).action(async ({parsedInput}) => {
const slug = slugify(parsedInput.name);
await verifySlugUniqueness(slug);
const [createdAgent] = await db.insert(drizzleDb.schemas.agent).values({...parsedInput, slug: slug}).returning();
return {
data: createdAgent,
};
@@ -33,10 +33,14 @@ export const updateAgentAction = userAction
data: AgentSchema,
})
)
.action(async ({ parsedInput }) => {
await verifySlugUniqueness(parsedInput.data.slug, parsedInput.id);
.action(async ({parsedInput}) => {
const slug = slugify(parsedInput.data.name);
await verifySlugUniqueness(slug, parsedInput.id);
const [updatedAgent] = await db.update(drizzleDb.schemas.agent).set(parsedInput.data).where(eq(drizzleDb.schemas.agent.id, parsedInput.id)).returning();
const [updatedAgent] = await db.update(drizzleDb.schemas.agent).set({
...parsedInput.data,
slug: slug
}).where(eq(drizzleDb.schemas.agent.id, parsedInput.id)).returning();
return {
data: updatedAgent,
@@ -2,11 +2,6 @@ import { z } from "zod";
export const AgentSchema = z.object({
name: z.string(),
slug: z
.string()
.regex(/^[a-zA-Z0-9_-]*$/)
.min(5)
.max(25),
description: z.string(),
});
@@ -41,13 +41,10 @@ export const DatabaseTabs = (props: DatabaseTabsProps) => {
</TabsList>
<TabsContent className="h-full justify-between" value="backup">
{/*<DataTable columns={backupColumns} data={props.backups} extendedProps={props.isAlreadyRestore} />*/}
<DataTable columns={backupColumns(props.isAlreadyRestore)} data={props.backups} enablePagination />
</TabsContent>
<TabsContent className="h-full justify-between" value="restore">
<DataTable columns={restoreColumns} data={props.restorations} enablePagination />
<DataTable columns={restoreColumns(props.isAlreadyRestore)} data={props.restorations} enablePagination />
</TabsContent>
</Tabs>
);
@@ -13,10 +13,10 @@ export const ProjectCard = (props: projectCardProps) => {
const { data: project, organizationSlug } = props;
return (
<Link href={`/dashboard/projects/${project.id}`}>
<Link href={`/dashboard/projects/${project.id}`} className="block transition-all duration-200 hover:scale-[1.01] hover:shadow-md">
<Card className="flex flex-row justify-between">
<div className="">
<CardHeader>{project.name}</CardHeader>
<CardHeader className="text-2xl font-bold">{project.name}</CardHeader>
<CardContent>{project.databases.length} databases</CardContent>
</div>
</Card>
@@ -6,6 +6,7 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { ConnectionCircle } from "@/components/wrappers/common/connection-circle";
import { formatDateLastContact } from "@/utils/date-formatting";
import {Database} from "@/db/schema/06_database";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
export type projectDatabaseCardProps = {
data: Database;
@@ -17,7 +18,7 @@ export const ProjectDatabaseCard = (props: projectDatabaseCardProps) => {
const { organizationSlug, data: database, extendedProps: extendedProps } = props;
return (
<Link href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
<Link className="block transition-all duration-200 hover:scale-[1.01] hover:shadow-md" href={`/dashboard/projects/${extendedProps.id}/database/${database.id}`}>
<DatabaseCard data={database} />
</Link>
);
@@ -31,15 +32,21 @@ export const DatabaseCard = (props: databaseCardProps) => {
const { data: database } = props;
return (
<Card className="flex flex-row justify-between">
<div className="flex flex-row items-center gap-2">
<div className="flex items-center space-x-4 px-4">
<Image src="/PostgreSQL.png" alt="Database type Icon" width={60} height={60} className="object-cover ml-4" />
<div>
<CardHeader>Name : {database.name}</CardHeader>
<CardContent>Last contact: {formatDateLastContact(database.lastContact)}</CardContent>
<div className="justify-between">
<div className="font-medium">Name: {database.name}</div>
<div className="text-sm text-muted-foreground">Generated Id: {database.agentDatabaseId}</div>
<div className="text-xs text-muted-foreground">
Last contact: {formatDateLastContact(database.lastContact)}
</div>
</div>
</div>
<div className="mt-3 mr-3">
<div className="flex items-center px-4">
<ConnectionCircle date={database.lastContact} />
</div>
</Card>
@@ -2,7 +2,6 @@ import { z } from "zod";
export const ProjectSchema = z.object({
name: z.string(),
slug: z.string(),
databases: z.array(z.string()),
});
@@ -103,27 +103,6 @@ export const ProjectForm = (props: projectFormProps) => {
</FormItem>
)}
/>
<FormField
control={form.control}
name="slug"
defaultValue=""
render={({ field }) => (
<FormItem>
<FormLabel>Slug</FormLabel>
<FormControl>
<Input
placeholder="project-1"
{...field}
onChange={(e) => {
const value = e.target.value.replaceAll(" ", "-").toLowerCase();
field.onChange(value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="databases"
@@ -9,6 +9,7 @@ import { eq, inArray } from "drizzle-orm";
import {Project} from "@/db/schema/05_project";
import * as drizzleDb from "@/db";
import {Database} from "@/db/schema/06_database";
import {slugify} from "@/utils/slugify";
export const createProjectAction = userAction
.schema(
@@ -19,11 +20,12 @@ export const createProjectAction = userAction
)
.action(async ({ parsedInput }): Promise<ServerActionResult<Project>> => {
try {
const slug = slugify(parsedInput.data.name);
const [createdProject] = await db
.insert(drizzleDb.schemas.project)
.values({
name: parsedInput.data.name,
slug: parsedInput.data.slug,
slug: slug,
organizationId: parsedInput.organizationId,
})
.returning();
@@ -87,12 +89,13 @@ export const updateProjectAction = userAction
if (databasesToRemove.length > 0) {
await db.update(drizzleDb.schemas.database).set({ projectId: null }).where(inArray(drizzleDb.schemas.database.id, databasesToRemove));
}
const slug = slugify(parsedInput.data.name);
const [updatedProject] = await db
.update(drizzleDb.schemas.project)
.set({
name: parsedInput.data.name,
slug: parsedInput.data.slug,
slug: slug,
})
.where(eq(drizzleDb.schemas.project.id, parsedInput.projectId))
.returning();
+96 -6
View File
@@ -1,15 +1,33 @@
"use client";
import { ColumnDef } from "@tanstack/react-table";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { MoreHorizontal } from "lucide-react";
import {MoreHorizontal, Trash2} from "lucide-react";
import { ReloadIcon } from "@radix-ui/react-icons";
import { StatusBadge } from "@/components/wrappers/common/status-badge";
import {Restoration} from "@/db/schema/06_database";
import {Backup, Restoration} from "@/db/schema/06_database";
import {formatFrenchDate} from "@/utils/date-formatting";
import {useMutation} from "@tanstack/react-query";
import {
deleteBackupAction,
deleteRestoreAction,
rerunRestorationAction
} from "@/features/dashboard/restore/restore.action";
import {toast} from "sonner";
import {useRouter} from "next/navigation";
import {TooltipCustom} from "@/components/wrappers/common/tooltipCustom/TooltipCustom";
export const restoreColumns: ColumnDef<Restoration>[] = [
export function restoreColumns(isAlreadyRestore: boolean): ColumnDef<Restoration>[] {
return[
{
accessorKey: "id",
header: "Reference",
@@ -31,6 +49,58 @@ export const restoreColumns: ColumnDef<Restoration>[] = [
{
id: "actions",
cell: ({ row }) => {
const status = row.getValue("status");
const router = useRouter();
const rowData: Restoration = row.original;
const mutationDeleteRestore = useMutation({
mutationFn: async () => {
const restoration = await deleteRestoreAction({
restorationId: rowData.id,
});
// @ts-ignore
if (restoration.data.success) {
// @ts-ignore
toast.success(restoration.data.actionSuccess.message);
router.refresh();
} else {
// @ts-ignore
toast.error(restoration.data.actionError.message);
}
},
});
const mutationRerunRestore = useMutation({
mutationFn: async () => {
const restoration = await rerunRestorationAction({
restorationId: rowData.id,
});
// @ts-ignore
if (restoration.data.success) {
// @ts-ignore
toast.success(restoration.data.actionSuccess.message);
router.refresh();
} else {
// @ts-ignore
toast.error(restoration.data.actionError.message);
}
},
});
const handleDelete = async () => {
await mutationDeleteRestore.mutateAsync();
};
const handleRerunRestore = async () => {
await mutationRerunRestore.mutateAsync();
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
@@ -42,8 +112,26 @@ export const restoreColumns: ColumnDef<Restoration>[] = [
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem onClick={() => {}}>
<ReloadIcon /> Rerun
<TooltipCustom disabled={isAlreadyRestore} text="Already a restoration waiting">
<DropdownMenuItem
disabled={mutationRerunRestore.isPending || isAlreadyRestore}
onClick={async () => {
await handleRerunRestore();
}}
>
<ReloadIcon/> Rerun
</DropdownMenuItem>
</TooltipCustom>
<DropdownMenuSeparator/>
<DropdownMenuItem
disabled={status == "waiting"}
className="text-red-600"
onClick={async () => {
await handleDelete();
}}
>
<Trash2/> Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@@ -51,3 +139,5 @@ export const restoreColumns: ColumnDef<Restoration>[] = [
},
},
];
}
@@ -8,6 +8,43 @@ import { db } from "@/db";
import { and, eq } from "drizzle-orm";
import {Backup, Restoration} from "@/db/schema/06_database";
export const deleteRestoreAction = userAction
.schema(
z.object({
restorationId: z.string(),
})
)
.action(async ({ parsedInput }): Promise<ServerActionResult<Backup>> => {
try {
await db
.delete(drizzleDb.schemas.restoration)
.where(and(eq(drizzleDb.schemas.restoration.id, parsedInput.restorationId)))
.execute();
return {
success: true,
actionSuccess: {
message: "Restoration deleted successfully.",
},
};
} catch (error) {
return {
success: false,
actionError: {
message: "Failed to delete restoration.",
status: 500,
cause: error instanceof Error ? error.message : "Unknown error",
messageParams: { message: "Error deleting the restoration" },
},
};
}
});
export const deleteBackupAction = userAction
.schema(
z.object({
@@ -60,6 +97,58 @@ export const deleteBackupAction = userAction
});
export const rerunRestorationAction = userAction
.schema(
z.object({
restorationId: z.string(),
})
)
.action(async ({ parsedInput }): Promise<ServerActionResult<Restoration>> => {
try {
const updateResult = await db
.update(drizzleDb.schemas.restoration)
.set({ status: "waiting" })
.where(eq(drizzleDb.schemas.restoration.id, parsedInput.restorationId))
.returning()
.execute();
const updatedRestoration = updateResult[0];
if (!updatedRestoration) {
return {
success: false,
actionError: {
message: "Restoration not found.",
status: 404,
cause: "No restoration with the given ID exists.",
messageParams: { message: "Restoration not found" },
},
};
}
return {
success: true,
value: updatedRestoration,
actionSuccess: {
message: "Restoration has been requeued.",
messageParams: { restorationId: updatedRestoration.id },
},
};
} catch (error) {
return {
success: false,
actionError: {
message: "Failed to rerun restoration.",
status: 500,
cause: error instanceof Error ? error.message : "Unknown error",
messageParams: { message: "Error updating the restoration" },
},
};
}
});
// Create Restoration Action (Drizzle version)
export const createRestorationAction = userAction
.schema(
+22 -6
View File
@@ -113,25 +113,41 @@ export const auth = betterAuth({
before: async (session, context) => {
const userId = session.userId;
const memberships = await db.query.member.findMany({
let memberships = await db.query.member.findMany({
where: eq(drizzleDb.schemas.member.userId, userId),
});
if (!memberships.length) {
// Fail the login attempt explicitly
throw new Error("User is not part of any organization.");
}
const defaultOrgSlug = "default";
const defaultOrg = await db.query.organization.findFirst({
where: eq(drizzleDb.schemas.organization.slug, defaultOrgSlug),
});
const firstOrgId = memberships[0].organizationId;
if (!defaultOrg) {
throw new Error("No organization found. Cannot assign member.");
}
await db.insert(drizzleDb.schemas.member).values({
userId,
organizationId: defaultOrg.id,
role: "member",
});
memberships = await db.query.member.findMany({
where: eq(drizzleDb.schemas.member.userId, userId),
});
}
return {
data: {
activeOrganizationId: firstOrgId,
activeOrganizationId: memberships[0].organizationId,
},
};
},
},
},
},
session: {
additionalFields: {