diff --git a/frontend/src/components/backups/BackupManager.jsx b/frontend/src/components/backups/BackupManager.jsx
index 1e4d4fb8..46bd0689 100644
--- a/frontend/src/components/backups/BackupManager.jsx
+++ b/frontend/src/components/backups/BackupManager.jsx
@@ -3,7 +3,6 @@ import {
ActionIcon,
Box,
Button,
- Center,
FileInput,
Flex,
Group,
@@ -33,6 +32,45 @@ import ConfirmationDialog from '../ConfirmationDialog';
import useLocalStorage from '../../hooks/useLocalStorage';
import { CustomTable, useTable } from '../tables/CustomTable';
+const RowActions = ({ row, handleDownload, handleRestoreClick, handleDeleteClick, downloading }) => {
+ return (
+
+
+ handleDownload(row.original.name)}
+ loading={downloading === row.original.name}
+ disabled={downloading !== null}
+ >
+
+
+
+
+ handleRestoreClick(row.original)}
+ >
+
+
+
+
+ handleDeleteClick(row.original)}
+ >
+
+
+
+
+ );
+};
+
// Convert 24h time string to 12h format with period
function to12Hour(time24) {
if (!time24) return { time: '12:00', period: 'AM' };
@@ -94,6 +132,7 @@ export default function BackupManager() {
// Read user's time format preference from settings
const [timeFormat] = useLocalStorage('time-format', '12h');
+ const [tableSize] = useLocalStorage('table-size', 'default');
const is12Hour = timeFormat === '12h';
// Schedule state
@@ -117,17 +156,23 @@ export default function BackupManager() {
{
header: 'Filename',
accessorKey: 'name',
- size: 250,
+ grow: true,
cell: ({ cell }) => (
-
+
{cell.getValue()}
-
+
),
},
{
header: 'Size',
accessorKey: 'size',
- size: 100,
+ size: 80,
cell: ({ cell }) => (
{formatBytes(cell.getValue())}
),
@@ -135,7 +180,7 @@ export default function BackupManager() {
{
header: 'Created',
accessorKey: 'created',
- size: 175,
+ size: 160,
cell: ({ cell }) => (
{formatDate(cell.getValue())}
),
@@ -143,20 +188,13 @@ export default function BackupManager() {
{
id: 'actions',
header: 'Actions',
- size: 150,
+ size: tableSize === 'compact' ? 75 : 100,
},
],
- []
+ [tableSize]
);
const renderHeaderCell = (header) => {
- if (header.id === 'actions') {
- return (
-
- {header.column.columnDef.header}
-
- );
- }
return (
{header.column.columnDef.header}
@@ -165,42 +203,18 @@ export default function BackupManager() {
};
const renderBodyCell = ({ cell, row }) => {
- if (cell.column.id === 'actions') {
- return (
-
-
- handleDownload(row.original.name)}
- loading={downloading === row.original.name}
- disabled={downloading !== null}
- >
-
-
-
-
- handleRestoreClick(row.original)}
- >
-
-
-
-
- handleDeleteClick(row.original)}
- >
-
-
-
-
- );
+ switch (cell.column.id) {
+ case 'actions':
+ return (
+
+ );
}
- return null;
};
const table = useTable({
@@ -435,7 +449,7 @@ export default function BackupManager() {
) : (
<>
-
+
+ {schedule.frequency === 'weekly' && (
+
-
-
+
>
)}