Working on the retention system.

app/(customer)/dashboard/(organization)/projects/[projectId]/database/[databaseId]/page.tsx

@@ -13,6 +13,7 @@ import * as drizzleDb from "@/db";
 import {getOrganizationProjectDatabases} from "@/lib/services";
 import {getOrganization} from "@/lib/auth/auth";
 import {RetentionPolicySheet} from "@/components/wrappers/dashboard/database/retention-policy/retention-policy-sheet";
+import {capitalizeFirstLetter} from "@/utils/text";
 
 export default async function RoutePage(props: PageParams<{
     projectId: string;
@@ -87,7 +88,7 @@ export default async function RoutePage(props: PageParams<{
         <Page>
             <div className="justify-between gap-2 sm:flex">
                 <PageTitle className="flex items-center">
-                    {dbItem.name}
+                    {capitalizeFirstLetter(dbItem.name)}
                     <EditButton/>
                     <CronButton database={dbItem}/>
                     <RetentionPolicySheet/>

app/(customer)/dashboard/(organization)/projects/[projectId]/page.tsx

@@ -1,23 +1,27 @@
-import { PageParams } from "@/types/next";
-import { Page, PageActions, PageContent, PageDescription, PageTitle } from "@/features/layout/page";
-import { buttonVariants } from "@/components/ui/button";
-import { GearIcon } from "@radix-ui/react-icons";
+import {PageParams} from "@/types/next";
+import {Page, PageActions, PageContent, PageDescription, PageTitle} from "@/features/layout/page";
+import {buttonVariants} from "@/components/ui/button";
+import {GearIcon} from "@radix-ui/react-icons";
 import Link from "next/link";
-import { ButtonDeleteProject } from "@/components/wrappers/dashboard/projects/button-delete-project/button-delete-project";
-import { CardsWithPagination } from "@/components/wrappers/common/cards-with-pagination";
-import { ProjectDatabaseCard } from "@/components/wrappers/dashboard/projects/project-card/project-database-card";
+import {
+    ButtonDeleteProject
+} from "@/components/wrappers/dashboard/projects/button-delete-project/button-delete-project";
+import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
+import {ProjectDatabaseCard} from "@/components/wrappers/dashboard/projects/project-card/project-database-card";
 import {notFound, redirect} from "next/navigation";
 
-import { db } from "@/db";
-import { eq } from "drizzle-orm";
+import {db} from "@/db";
+import {eq} from "drizzle-orm";
 import {getOrganization} from "@/lib/auth/auth";
 import * as drizzleDb from "@/db";
+import {capitalizeFirstLetter} from "@/utils/text";
 
 export default async function RoutePage(props: PageParams<{
     projectId: string
 }>) {
     const {
-        projectId } = await props.params;
+        projectId
+    } = await props.params;
 
     const organization = await getOrganization({});
     if (!organization) {
@@ -30,7 +34,11 @@ export default async function RoutePage(props: PageParams<{
     if (!org) notFound();
 
     const proj = await db.query.project.findFirst({
-        where: (proj, { and, eq, not }) => and(eq(proj.id, projectId), eq(proj.organizationId, org.id), not(eq(proj.isArchived, true))),
+        where: (proj, {
+            and,
+            eq,
+            not
+        }) => and(eq(proj.id, projectId), eq(proj.organizationId, org.id), not(eq(proj.isArchived, true))),
         with: {
             databases: true,
         },
@@ -45,13 +53,13 @@ export default async function RoutePage(props: PageParams<{
         <Page>
             <div className="justify-between gap-2 sm:flex">
                 <PageTitle className="flex items-center">
-                    {proj.name}
-                    <Link className={buttonVariants({ variant: "outline" })} href={`/dashboard/projects/${proj.id}/edit`}>
-                        <GearIcon className="w-7 h-7" />
+                    {capitalizeFirstLetter(proj.name)}
+                    <Link className={buttonVariants({variant: "outline"})} href={`/dashboard/projects/${proj.id}/edit`}>
+                        <GearIcon className="w-7 h-7"/>
                     </Link>
                 </PageTitle>
                 <PageActions className="justify-between">
-                    <ButtonDeleteProject projectId={projectId} text={"Delete Project"} />
+                    <ButtonDeleteProject projectId={projectId} text={"Delete Project"}/>
                 </PageActions>
             </div>
 

src/components/ui/sheet.tsx

@@ -11,119 +11,121 @@ function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
 }
 
 function SheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+                        ...props
+                      }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }
 
 function SheetClose({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+                      ...props
+                    }: React.ComponentProps<typeof SheetPrimitive.Close>) {
   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 }
 
 function SheetPortal({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+                       ...props
+                     }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
   return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 }
 
 function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+                        className,
+                        ...props
+                      }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
   return (
-    <SheetPrimitive.Overlay
-      data-slot="sheet-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
+      <SheetPrimitive.Overlay
+          data-slot="sheet-overlay"
+          className={cn(
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+              className
+          )}
+          {...props}
+      />
   )
 }
 
 function SheetContent({
-  className,
-  children,
-  side = "right",
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+                        className,
+                        children,
+                        side = "right",
+                        ...props
+                      }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
 }) {
   return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-          side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-          side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-          side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-          side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <XIcon className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
+      <SheetPortal>
+        <SheetOverlay />
+        <SheetPrimitive.Content
+            data-slot="sheet-content"
+            className={cn(
+                "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+                side === "right" &&
+                "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l",
+                // "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+                side === "left" &&
+                "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r",
+                // "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+                side === "top" &&
+                "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+                side === "bottom" &&
+                "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+                className
+            )}
+            {...props}
+        >
+          {children}
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        </SheetPrimitive.Content>
+      </SheetPortal>
   )
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
-    />
+      <div
+          data-slot="sheet-header"
+          className={cn("flex flex-col gap-1.5 p-4", className)}
+          {...props}
+      />
   )
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
+      <div
+          data-slot="sheet-footer"
+          className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+          {...props}
+      />
   )
 }
 
 function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+                      className,
+                      ...props
+                    }: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
-    <SheetPrimitive.Title
-      data-slot="sheet-title"
-      className={cn("text-foreground font-semibold", className)}
-      {...props}
-    />
+      <SheetPrimitive.Title
+          data-slot="sheet-title"
+          className={cn("text-foreground font-semibold", className)}
+          {...props}
+      />
   )
 }
 
 function SheetDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+                            className,
+                            ...props
+                          }: React.ComponentProps<typeof SheetPrimitive.Description>) {
   return (
-    <SheetPrimitive.Description
-      data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
+      <SheetPrimitive.Description
+          data-slot="sheet-description"
+          className={cn("text-muted-foreground text-sm", className)}
+          {...props}
+      />
   )
 }
 

src/components/wrappers/dashboard/database/retention-policy/backup-retention-settings.tsx

@@ -69,18 +69,9 @@ export function BackupRetentionSettings() {
 
     return (
         <div className="space-y-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle className="flex items-center gap-2 text-balance">
-                        <Database className="h-5 w-5" />
-                        Backup Retention Policy
-                    </CardTitle>
-                    <CardDescription className="text-pretty">
-                        Configure how long to keep your .dump backup files. Choose from simple count-based, time-based, or
-                        enterprise GFS rotation strategies.
-                    </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-6">
+            <div className="flex flex-col">
+
+                <div className="px-3 space-y-6">
                     <div className="space-y-4">
                         <Label className="text-sm font-medium">Retention Policy Type</Label>
                         <RadioGroup
@@ -314,8 +305,8 @@ export function BackupRetentionSettings() {
                         <Save className="h-4 w-4 mr-2" />
                         {isLoading ? "Saving Policy..." : "Save Retention Policy"}
                     </Button>
-                </CardContent>
-            </Card>
+                </div>
+            </div>
         </div>
     )
 }

src/components/wrappers/dashboard/database/retention-policy/retention-policy-sheet.tsx

@@ -1,6 +1,9 @@
 import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger} from "@/components/ui/sheet";
 import {Button} from "@/components/ui/button";
-import {DatabaseZap} from "lucide-react";
+import {Database, DatabaseZap} from "lucide-react";
+import {
+    BackupRetentionSettings
+} from "@/components/wrappers/dashboard/database/retention-policy/backup-retention-settings";
 
 
 export const RetentionPolicySheet = () => {
@@ -11,14 +14,20 @@ export const RetentionPolicySheet = () => {
                     <DatabaseZap/>
                 </Button>
             </SheetTrigger>
-            <SheetContent className="w-[400px] sm:w-[540px]">
+            <SheetContent
+                className="flex gap-4 p-4 w-[540px] sm:w-[800px] max-w-[800px] max-h-screen overflow-y-scroll"
+            >
                 <SheetHeader>
-                    <SheetTitle>Are you absolutely sure?</SheetTitle>
-                    <SheetDescription>
-                        This action cannot be undone. This will permanently delete your account
-                        and remove your data from our servers.
+                    <SheetTitle className="flex items-center gap-2 text-balance">
+                        <Database className="h-5 w-5" />
+                        Backup Retention Policy
+                    </SheetTitle>
+                    <SheetDescription className="text-pretty">
+                        Configure how long to keep your .dump backup files. Choose from simple count-based, time-based, or
+                        enterprise GFS rotation strategies.
                     </SheetDescription>
                 </SheetHeader>
+                <BackupRetentionSettings/>
             </SheetContent>
         </Sheet>
     )

src/utils/text.ts

@@ -0,0 +1,10 @@
+export function truncateWords(text: string, wordLimit: number = 10): string {
+    if (!text) return "";
+    const words = text.trim().split(/\s+/);
+    if (words.length <= wordLimit) return text;
+    return words.slice(0, wordLimit).join(" ") + "…";
+}
+
+export function capitalizeFirstLetter(text: string): string {
+    return text ? text.charAt(0).toUpperCase() + text.slice(1) : "";
+}