Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 73x 16x 32x 4x 41x 41x 48x 1x 1x 164x 82x 48x 8x 48x 56x 48x 7x 55x 48x 48x 8x 56x 192x 144x 48x 6x 48x 7x 48x 55x 48x 48x 96x 144x 192x | import { Eye, EyeOff, Table2, Trash2 } from "lucide-react";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/ahuora-design-system/ui/alert-dialog";
import { Button } from "@/ahuora-design-system/ui/button";
import { MonitoringTableRead } from "@/api/apiStore.gen";
import { cn } from "@/lib/utils";
interface MonitoringTableListProps {
tables: MonitoringTableRead[];
onToggleVisibility: (tableId: number) => void;
onDeleteTable: (tableId: number) => void;
}
export function MonitoringTableList({
tables,
onToggleVisibility,
onDeleteTable,
}: MonitoringTableListProps) {
if (tables.length === 0) {
return (
<div className="text-sm text-muted-foreground py-2">
No monitoring tables created yet. Click "Create New Monitoring Table"
above to add one.
</div>
);
}
return (
<div className="flex flex-col gap-2">
<p className="text-sm text-muted-foreground font-medium tracking-wide">
Monitoring Tables
</p>
{tables.map((table) => (
<MonitoringTableListItem
key={table.id}
table={table}
onToggleVisibility={() => onToggleVisibility(table.id)}
onDelete={() => onDeleteTable(table.id)}
/>
))}
</div>
);
}
interface MonitoringTableListItemProps {
table: MonitoringTableRead;
onToggleVisibility: () => void;
onDelete: () => void;
}
function MonitoringTableListItem({
table,
onToggleVisibility,
onDelete,
}: MonitoringTableListItemProps) {
return (
<div
className={cn(
"flex items-center justify-between gap-2 p-2 rounded-md border",
table.visible
? "bg-accent/50 border-accent"
: "bg-muted/30 border-border",
)}
>
<div className="flex items-center gap-2 min-w-0 flex-1">
<Table2 className="h-4 w-4 shrink-0 text-muted-foreground" />
<span className="text-sm truncate" title={table.title}>
{table.title}
</span>
<button
type="button"
onClick={onToggleVisibility}
className="p-0.5 rounded hover:bg-muted/50 transition-colors"
title={table.visible ? "Hide table" : "Show table"}
>
{table.visible ? (
<Eye className="h-3.5 w-3.5 shrink-0 text-green-600 cursor-pointer" />
) : (
<EyeOff className="h-3.5 w-3.5 shrink-0 text-muted-foreground cursor-pointer" />
)}
</button>
</div>
<div className="flex items-center gap-1 shrink-0">
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
variant="ghost"
size="sm"
className="h-7 px-2 text-destructive hover:text-destructive hover:bg-destructive/10"
title="Delete table permanently"
>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete Monitoring Table</AlertDialogTitle>
<AlertDialogDescription>
Are you sure you want to permanently delete "{table.title}"?
This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={onDelete}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
Delete
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</div>
);
}
|