@arch-cadre/backup-module 1.0.7 → 1.0.9

package/dist/actions.cjs

@@ -14,7 +14,7 @@ var _nodePath = _interopRequireDefault(require("node:path"));
 var _nodeUtil = require("node:util");
 var _server = require("@arch-cadre/core/server");
 var _drizzleOrm = require("drizzle-orm");
-var _schema = require("./schema.cjs");
+var _schema = require("./schema.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const execAsync = (0, _nodeUtil.promisify)(_nodeChild_process.exec);
 const BACKUP_DIR = _nodePath.default.join(process.cwd(), "backups");

package/dist/actions.mjs

@@ -5,7 +5,7 @@ import path from "node:path";
 import { promisify } from "node:util";
 import { db, eventBus, getCurrentSession } from "@arch-cadre/core/server";
 import { desc, eq } from "drizzle-orm";
-import { backupTable } from "./schema.mjs";
+import { backupTable } from "./schema.js";
 const execAsync = promisify(exec);
 const BACKUP_DIR = path.join(process.cwd(), "backups");
 export async function getBackups() {

package/dist/index.cjs

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 var _server = require("@arch-cadre/core/server");
 var _drizzleOrm = require("drizzle-orm");
 var _manifest = _interopRequireDefault(require("../manifest.json"));
-var _navigation = require("./navigation.cjs");
-var _routes = require("./routes.cjs");
+var _navigation = require("./navigation.js");
+var _routes = require("./routes.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const BACKUP_PERMISSIONS = [{
   name: "backup:create",

package/dist/index.mjs

@@ -7,8 +7,8 @@ import {
 } from "@arch-cadre/core/server";
 import { inArray, sql } from "drizzle-orm";
 import manifest from "../manifest.json";
-import { navigation } from "./navigation.mjs";
-import { privateRoutes } from "./routes.mjs";
+import { navigation } from "./navigation.js";
+import { privateRoutes } from "./routes.js";
 const BACKUP_PERMISSIONS = [
   { name: "backup:create", description: "Allow creating system backups" },
   { name: "backup:restore", description: "Allow restoring system backups" },

package/dist/routes.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.publicRoutes = exports.privateRoutes = void 0;
-var _backupList = _interopRequireDefault(require("./ui/pages/backup-list.cjs"));
+var _backupList = _interopRequireDefault(require("./ui/pages/backup-list.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const publicRoutes = exports.publicRoutes = [];
 const privateRoutes = exports.privateRoutes = [{

package/dist/routes.mjs

@@ -1,4 +1,4 @@
-import BackupListPage from "./ui/pages/backup-list.mjs";
+import BackupListPage from "./ui/pages/backup-list.js";
 export const publicRoutes = [];
 export const privateRoutes = [
   {

package/dist/ui/components/backup-actions.cjs

@@ -8,7 +8,7 @@ exports.createBackupAction = createBackupAction;
 exports.deleteBackupAction = deleteBackupAction;
 exports.restoreBackupAction = restoreBackupAction;
 var _cache = require("next/cache");
-var _actions = require("../../actions.cjs");
+var _actions = require("../../actions.js");
 async function createBackupAction() {
   await (0, _actions.createBackup)();
   (0, _cache.revalidatePath)("/module/backup");

package/dist/ui/components/backup-actions.mjs

@@ -1,6 +1,6 @@
 "use server";
 import { revalidatePath } from "next/cache";
-import { createBackup, deleteBackup, restoreBackup } from "../../actions.mjs";
+import { createBackup, deleteBackup, restoreBackup } from "../../actions.js";
 export async function createBackupAction() {
   await createBackup();
   revalidatePath("/module/backup");

package/dist/ui/components/backup-client.cjs

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.CreateBackupButton = CreateBackupButton;
 exports.DeleteBackupButton = DeleteBackupButton;
 exports.RestoreBackupButton = RestoreBackupButton;
+var _ui = require("@arch-cadre/ui");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
-var _ui = require("@arch-cadre/ui");
-var _backupActions = require("./backup-actions.cjs");
+var _backupActions = require("./backup-actions.js");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function CreateBackupButton() {

package/dist/ui/components/backup-client.mjs

@@ -1,12 +1,12 @@
 "use client";
-import * as React from "react";
 import { Button, Icon, toast } from "@arch-cadre/ui";
+import * as React from "react";
 import { useState } from "react";
 import {
   createBackupAction,
   deleteBackupAction,
   restoreBackupAction
-} from "./backup-actions.mjs";
+} from "./backup-actions.js";
 export function CreateBackupButton() {
   const [pending, setPending] = useState(false);
   const handleCreate = async () => {

package/dist/ui/pages/backup-list.cjs

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 module.exports = BackupListPage;
-var React = _interopRequireWildcard(require("react"));
 var _card = require("@arch-cadre/ui/components/card");
 var _table = require("@arch-cadre/ui/components/table");
 var _dateFns = require("date-fns");
 var _locale = require("date-fns/locale");
-var _actions = require("../../actions.cjs");
-var _backupClient = require("../components/backup-client.cjs");
+var React = _interopRequireWildcard(require("react"));
+var _actions = require("../../actions.js");
+var _backupClient = require("../components/backup-client.js");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function formatBytes(bytes, decimals = 2) {

package/dist/ui/pages/backup-list.mjs

@@ -1,4 +1,3 @@
-import * as React from "react";
 import {
   Card,
   CardContent,
@@ -16,12 +15,13 @@ import {
 } from "@arch-cadre/ui/components/table";
 import { formatDistanceToNow } from "date-fns";
 import { pl } from "date-fns/locale";
-import { getBackups } from "../../actions.mjs";
+import * as React from "react";
+import { getBackups } from "../../actions.js";
 import {
   CreateBackupButton,
   DeleteBackupButton,
   RestoreBackupButton
-} from "../components/backup-client.mjs";
+} from "../components/backup-client.js";
 function formatBytes(bytes, decimals = 2) {
   if (bytes === 0) return "0 Bytes";
   const k = 1024;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arch-cadre/backup-module",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Backup module for Kryo framework",
   "type": "module",
   "exports": {
@@ -13,6 +13,7 @@
   },
   "files": [
     "dist",
+    "src",
     "locales",
     "manifest.json"
   ],
@@ -25,8 +26,8 @@
     "build": "unbuild"
   },
   "dependencies": {
-    "@arch-cadre/modules": "^0.0.73",
-    "@arch-cadre/ui": "^0.0.47",
+    "@arch-cadre/modules": "^0.0.79",
+    "@arch-cadre/ui": "^0.0.53",
     "@hookform/resolvers": "^3.10.0",
     "date-fns": "^4.1.0",
     "drizzle-orm": "1.0.0-beta.6-4414a19",
@@ -37,7 +38,7 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@arch-cadre/core": "^0.0.47",
+    "@arch-cadre/core": "^0.0.53",
     "@types/pg": "^8.16.0",
     "@types/react": "^19",
     "next": "16.1.1",
@@ -46,9 +47,9 @@
     "unbuild": "^3.6.1"
   },
   "peerDependencies": {
-    "@arch-cadre/core": "^0.0.47",
-    "@arch-cadre/intl": "^0.0.47",
-    "@arch-cadre/ui": "^0.0.47",
+    "@arch-cadre/core": "^0.0.53",
+    "@arch-cadre/intl": "^0.0.53",
+    "@arch-cadre/ui": "^0.0.53",
     "next": ">=13.0.0",
     "react": "^19.0.0"
   },

package/src/actions.ts

@@ -0,0 +1,144 @@
+"use server";
+
+import { exec } from "node:child_process";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { promisify } from "node:util";
+import { db, eventBus, getCurrentSession } from "@arch-cadre/core/server";
+import { desc, eq } from "drizzle-orm";
+import { backupTable } from "./schema.js";
+
+const execAsync = promisify(exec);
+const BACKUP_DIR = path.join(process.cwd(), "backups");
+
+export async function getBackups() {
+  return await db
+    .select()
+    .from(backupTable)
+    .orderBy(desc(backupTable.createdAt));
+}
+
+export async function createBackup() {
+  const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+  const filename = `backup-${timestamp}.sql`;
+  const filePath = path.join(BACKUP_DIR, filename);
+
+  try {
+    // Ensure backup directory exists
+    await fs.mkdir(BACKUP_DIR, { recursive: true });
+
+    const dbUrl = process.env.DATABASE_URL;
+    if (!dbUrl) throw new Error("DATABASE_URL is not defined");
+
+    // Execute pg_dump
+    // We use -x to exclude privileges and -O to exclude ownership to make it more portable
+    // We add -c (clean) and --if-exists to make restoration easier
+    await execAsync(`pg_dump "${dbUrl}" -c --if-exists -x -O > "${filePath}"`);
+
+    const stats = await fs.stat(filePath);
+
+    const [backup] = await db
+      .insert(backupTable)
+      .values({
+        filename,
+        size: Math.round(stats.size),
+        status: "success",
+      })
+      .returning();
+
+    const { user } = await getCurrentSession();
+    await eventBus.publish(
+      "activity.create",
+      {
+        action: "backup.create",
+        description: `Created database backup: ${filename}`,
+        userId: user?.id,
+        metadata: { filename, size: stats.size, backupId: backup.id },
+      },
+      "backup",
+    );
+
+    return { success: true, backup };
+  } catch (error) {
+    console.error("[Backup] Create backup failed:", error);
+    return { success: false, error: (error as Error).message };
+  }
+}
+
+export async function restoreBackup(id: string) {
+  try {
+    const [backup] = await db
+      .select()
+      .from(backupTable)
+      .where(eq(backupTable.id, id));
+    if (!backup) throw new Error("Backup not found");
+
+    const filePath = path.join(BACKUP_DIR, backup.filename);
+    const dbUrl = process.env.DATABASE_URL;
+    if (!dbUrl) throw new Error("DATABASE_URL is not defined");
+
+    // Check if file exists
+    await fs.access(filePath);
+
+    // Execute psql restore
+    // Note: This will execute the SQL commands in the backup file
+    await execAsync(`psql "${dbUrl}" < "${filePath}"`);
+
+    const { user } = await getCurrentSession();
+    await eventBus.publish(
+      "activity.create",
+      {
+        action: "backup.restore",
+        description: `Restored database from backup: ${backup.filename}`,
+        userId: user?.id,
+        metadata: { filename: backup.filename, backupId: backup.id },
+      },
+      "backup",
+    );
+
+    return { success: true };
+  } catch (error) {
+    console.error("[Backup] Restore backup failed:", error);
+    return { success: false, error: (error as Error).message };
+  }
+}
+
+export async function deleteBackup(id: string) {
+  try {
+    const [backup] = await db
+      .select()
+      .from(backupTable)
+      .where(eq(backupTable.id, id));
+    if (!backup) throw new Error("Backup not found");
+
+    const filePath = path.join(BACKUP_DIR, backup.filename);
+
+    // Delete file if exists
+    try {
+      await fs.unlink(filePath);
+    } catch (_e) {
+      console.warn(
+        `[Backup] File ${filePath} could not be deleted or doesn't exist`,
+      );
+    }
+
+    await db.delete(backupTable).where(eq(backupTable.id, id));
+
+    const { user } = await getCurrentSession();
+    await eventBus.publish(
+      "activity.create",
+      {
+        action: "backup.delete",
+        description: `Deleted database backup: ${backup.filename}`,
+        userId: user?.id,
+        metadata: { filename: backup.filename, backupId: id },
+      },
+      "backup",
+    );
+
+    return { success: true };
+  } catch (error) {
+    console.error("[Backup] Delete backup failed:", error);
+    return { success: false, error: (error as Error).message };
+  }
+}

package/src/docs/getting-started.md

@@ -0,0 +1,13 @@
+# Database Backup Module
+
+This module allows you to create full SQL snapshots of your database using `pg_dump`.
+
+## Features
+- **Create Backup**: Generates a portable `.sql` file with all tables and data.
+- **Restore**: Easily revert your database to a previous state.
+- **Activity Logging**: Every backup action is recorded in the system logs.
+
+## Storage
+All backups are stored in the root `/backups` directory of the project.
+
+> **Warning**: Restoring a backup will overwrite all current data in the database. Always ensure you have a recent snapshot before performing a restore.

package/src/index.ts

@@ -0,0 +1,85 @@
+import {
+  assignPermissionToRole,
+  createPermission,
+  db,
+  getRoles,
+  permissionsTable,
+} from "@arch-cadre/core/server";
+import type { IModule } from "@arch-cadre/modules";
+import { inArray, sql } from "drizzle-orm";
+import manifest from "../manifest.json";
+import { navigation } from "./navigation.js";
+import { privateRoutes } from "./routes.js";
+
+const BACKUP_PERMISSIONS = [
+  { name: "backup:create", description: "Allow creating system backups" },
+  { name: "backup:restore", description: "Allow restoring system backups" },
+  { name: "backup:delete", description: "Allow deleting system backups" },
+  { name: "backup:list", description: "Allow listing system backups" },
+];
+
+const backupModule: IModule = {
+  manifest,
+
+  navigation,
+
+  routes: {
+    private: privateRoutes,
+  },
+  onEnable: async () => {
+    console.log("[Backup] enabling and registering permissions...");
+
+    try {
+      // 1. Create permissions
+      for (const perm of BACKUP_PERMISSIONS) {
+        await createPermission(perm.name, perm.description);
+      }
+
+      // 2. Assign to admin role
+      const roles = await getRoles();
+      const adminRole = roles.find((r) => r.name === "admin");
+
+      if (adminRole) {
+        const backupPermNames = BACKUP_PERMISSIONS.map((p) => p.name);
+        const backupPerms = await db
+          .select()
+          .from(permissionsTable)
+          .where(inArray(permissionsTable.name, backupPermNames));
+
+        for (const p of backupPerms) {
+          await assignPermissionToRole(adminRole.id, p.id);
+        }
+        console.log("[Backup] Permissions assigned to admin role.");
+      }
+    } catch (error) {
+      console.error("[Backup] Error during permission registration:", error);
+    }
+
+    console.log("[Backup] Module enabled.");
+  },
+
+  onDisable: async () => {
+    console.log("[Backup] onDisable: Cleaning up tables and permissions...");
+    try {
+      // 1. Remove permissions (cascades to role-permission mappings)
+      const backupPermNames = BACKUP_PERMISSIONS.map((p) => p.name);
+      await db
+        .delete(permissionsTable)
+        .where(inArray(permissionsTable.name, backupPermNames));
+      console.log("[Backup] Permissions and mappings removed.");
+
+      // 2. Drop tables
+      await db.execute(sql.raw(`DROP TABLE IF EXISTS backups CASCADE`));
+      console.log("[Backup] Database tables removed.");
+    } catch (error) {
+      console.error("[Backup] Failed to remove tables or permissions:", error);
+    }
+    console.log("[Backup] Module disabled.");
+  },
+
+  init: async () => {
+    console.log("[Backup] Module initialized.");
+  },
+};
+
+export default backupModule;

package/src/navigation.ts

@@ -0,0 +1,15 @@
+import type { ModuleNavigation } from "@arch-cadre/modules";
+
+export const navigation: ModuleNavigation = {
+  admin: {
+    System: [
+      {
+        title: "Backups",
+        url: "/backups",
+        icon: "solar:database-bold-duotone",
+        roles: ["admin"],
+        permissions: ["backup:list"],
+      },
+    ],
+  },
+};

package/src/routes.ts

@@ -0,0 +1,17 @@
+import type {
+  PrivateRouteDefinition,
+  PublicRouteDefinition,
+} from "@arch-cadre/modules";
+import BackupListPage from "./ui/pages/backup-list.js";
+
+export const publicRoutes: PublicRouteDefinition[] = [];
+
+export const privateRoutes: PrivateRouteDefinition[] = [
+  {
+    path: "/backups",
+    component: BackupListPage,
+    auth: true,
+    roles: ["admin"],
+    permissions: ["backup:list"],
+  },
+];

package/src/schema.ts

@@ -0,0 +1,12 @@
+import { integer, pgTable, text, timestamp } from "drizzle-orm/pg-core";
+
+export const backupTable = pgTable("backups", {
+  id: text("id")
+    .$defaultFn(() => crypto.randomUUID())
+    .notNull()
+    .primaryKey(),
+  filename: text("filename").notNull(),
+  size: integer("size").notNull(), // in bytes
+  createdAt: timestamp("created_at", { precision: 3 }).notNull().defaultNow(),
+  status: text("status").notNull(), // 'success', 'failed'
+});

package/src/ui/components/backup-actions.ts

@@ -0,0 +1,20 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { createBackup, deleteBackup, restoreBackup } from "../../actions.js";
+
+export async function createBackupAction() {
+  await createBackup();
+  revalidatePath("/module/backup");
+}
+
+export async function restoreBackupAction(id: string) {
+  const result = await restoreBackup(id);
+  revalidatePath("/module/backup");
+  return result;
+}
+
+export async function deleteBackupAction(id: string) {
+  await deleteBackup(id);
+  revalidatePath("/module/backup");
+}

package/src/ui/components/backup-client.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { Button, Icon, toast } from "@arch-cadre/ui";
+import * as React from "react";
+import { useState } from "react";
+import {
+  createBackupAction,
+  deleteBackupAction,
+  restoreBackupAction,
+} from "./backup-actions.js";
+
+export function CreateBackupButton() {
+  // ... (omitting for brevity in thought, but tool call needs context)
+  const [pending, setPending] = useState(false);
+
+  const handleCreate = async () => {
+    setPending(true);
+    try {
+      await createBackupAction();
+      toast.success("Backup created successfully");
+    } catch (_error) {
+      toast.error("Failed to create backup");
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <Button onClick={handleCreate} disabled={pending}>
+      {pending ? (
+        <Icon icon="svg-spinners:180-ring" className="mr-2 h-4 w-4" />
+      ) : (
+        <Icon icon="solar:add-circle-broken" className="mr-2 h-4 w-4" />
+      )}
+      Create Backup
+    </Button>
+  );
+}
+
+export function RestoreBackupButton({ id }: { id: string }) {
+  const [pending, setPending] = useState(false);
+
+  const handleRestore = async () => {
+    if (
+      !confirm(
+        "WARNING: This will overwrite your current database. Are you sure you want to restore this backup?",
+      )
+    )
+      return;
+
+    setPending(true);
+    try {
+      const result = await restoreBackupAction(id);
+      if (result.success) {
+        toast.success(
+          "Database restored successfully. You might need to refresh the page.",
+        );
+      } else {
+        toast.error(`Failed to restore backup: ${result.error}`);
+      }
+    } catch (_error) {
+      toast.error("An unexpected error occurred during restore");
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={handleRestore}
+      disabled={pending}
+      title="Restore this backup"
+    >
+      {pending ? (
+        <Icon icon="svg-spinners:180-ring" className="h-4 w-4" />
+      ) : (
+        <Icon icon="solar:restart-broken" className="h-4 w-4" />
+      )}
+    </Button>
+  );
+}
+
+export function DeleteBackupButton({ id }: { id: string }) {
+  const [pending, setPending] = useState(false);
+
+  const handleDelete = async () => {
+    if (!confirm("Are you sure you want to delete this backup?")) return;
+
+    setPending(true);
+    try {
+      await deleteBackupAction(id);
+      toast.success("Backup deleted successfully");
+    } catch (_error) {
+      toast.error("Failed to delete backup");
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={handleDelete}
+      disabled={pending}
+      className="text-destructive hover:text-destructive hover:bg-destructive/10"
+    >
+      {pending ? (
+        <Icon icon="svg-spinners:180-ring" className="h-4 w-4" />
+      ) : (
+        <Icon icon="solar:trash-bin-trash-broken" className="h-4 w-4" />
+      )}
+    </Button>
+  );
+}

package/src/ui/pages/backup-list.tsx

@@ -0,0 +1,117 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@arch-cadre/ui/components/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@arch-cadre/ui/components/table";
+import { formatDistanceToNow } from "date-fns";
+import { pl } from "date-fns/locale";
+import * as React from "react";
+import { getBackups } from "../../actions.js";
+import {
+  CreateBackupButton,
+  DeleteBackupButton,
+  RestoreBackupButton,
+} from "../components/backup-client.js";
+
+function formatBytes(bytes: number, decimals = 2) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  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 / k ** i).toFixed(dm)) + " " + sizes[i];
+}
+
+export default async function BackupListPage() {
+  const backups = await getBackups();
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="space-y-1">
+          <h2 className="text-3xl font-bold tracking-tight">
+            Database Backups
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Manage your database snapshots. All backups are stored locally on
+            the server.
+          </p>
+        </div>
+        <CreateBackupButton />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Available Backups</CardTitle>
+          <CardDescription>
+            A list of all backups created in the system.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Filename</TableHead>
+                <TableHead>Size</TableHead>
+                <TableHead>Created</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {backups.length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={5}
+                    className="text-center py-10 text-muted-foreground"
+                  >
+                    No backups found. Create your first backup to see it here.
+                  </TableCell>
+                </TableRow>
+              ) : (
+                backups.map((backup) => (
+                  <TableRow key={backup.id}>
+                    <TableCell className="font-medium">
+                      {backup.filename}
+                    </TableCell>
+                    <TableCell>{formatBytes(backup.size)}</TableCell>
+                    <TableCell title={backup.createdAt.toLocaleString()}>
+                      {formatDistanceToNow(backup.createdAt, {
+                        addSuffix: true,
+                        locale: pl,
+                      })}
+                    </TableCell>
+                    <TableCell>
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs font-semibold ${backup.status === "success"
+                            ? "bg-green-100 text-green-700"
+                            : "bg-red-100 text-red-700"
+                          }`}
+                      >
+                        {backup.status}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right space-x-1">
+                      <RestoreBackupButton id={backup.id} />
+                      <DeleteBackupButton id={backup.id} />
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}