@libredb/studio 0.9.7 → 0.9.13

package/src/components/monitoring/tabs/SessionsTab.tsx

@@ -1,316 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { Users, Skull, Activity, Clock, Loader2 } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import type { MonitoringData, ActiveSessionDetails } from '@/lib/db/types';
-
-interface SessionsTabProps {
-  data: MonitoringData | null;
-  loading: boolean;
-  onKillSession: (pid: number | string) => Promise<boolean>;
-  isAdmin?: boolean;
-}
-
-export function SessionsTab({ data, loading, onKillSession, isAdmin = true }: SessionsTabProps) {
-  const [killingPid, setKillingPid] = useState<number | string | null>(null);
-  const [confirmKill, setConfirmKill] = useState<ActiveSessionDetails | null>(null);
-
-  if (loading && !data) {
-    return <SessionsSkeleton />;
-  }
-
-  const sessions = data?.activeSessions ?? [];
-
-  const activeCount = sessions.filter((s) => s.state === 'active').length;
-  const idleCount = sessions.filter((s) => s.state === 'idle').length;
-  const idleInTxCount = sessions.filter((s) =>
-    s.state?.includes('idle in transaction')
-  ).length;
-  const waitingCount = sessions.filter((s) => s.waitEventType).length;
-
-  const handleKillClick = (session: ActiveSessionDetails) => {
-    setConfirmKill(session);
-  };
-
-  const handleConfirmKill = async () => {
-    if (!confirmKill) return;
-
-    setKillingPid(confirmKill.pid);
-    setConfirmKill(null);
-
-    await onKillSession(confirmKill.pid);
-
-    setKillingPid(null);
-  };
-
-  const getStateBadge = (state: string) => {
-    switch (state) {
-      case 'active':
-        return <Badge className="bg-green-500">Active</Badge>;
-      case 'idle':
-        return <Badge variant="secondary">Idle</Badge>;
-      case 'idle in transaction':
-        return <Badge className="bg-yellow-500">Idle in TX</Badge>;
-      case 'idle in transaction (aborted)':
-        return <Badge variant="destructive">Aborted TX</Badge>;
-      default:
-        return <Badge variant="outline">{state}</Badge>;
-    }
-  };
-
-  return (
-    <div className="p-3 sm:p-6 space-y-4 sm:space-y-6">
-      {/* Stats Cards */}
-      <div className="grid grid-cols-4 gap-2 sm:gap-4">
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              Active
-            </CardTitle>
-            <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{activeCount}</div>
-          </CardContent>
-        </Card>
-
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              Idle
-            </CardTitle>
-            <Clock className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{idleCount}</div>
-          </CardContent>
-        </Card>
-
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              In TX
-            </CardTitle>
-            <Clock className={`h-3 w-3 sm:h-4 sm:w-4 ${idleInTxCount > 0 ? 'text-yellow-500' : 'text-muted-foreground'}`} />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{idleInTxCount}</div>
-          </CardContent>
-        </Card>
-
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              Wait
-            </CardTitle>
-            <Users className={`h-3 w-3 sm:h-4 sm:w-4 ${waitingCount > 0 ? 'text-orange-500' : 'text-muted-foreground'}`} />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{waitingCount}</div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Sessions Table */}
-      <Card className="p-0">
-        <CardHeader className="p-3 sm:p-4">
-          <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
-            <Users className="h-3 w-3 sm:h-4 sm:w-4" />
-            Sessions ({sessions.length})
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="p-0 sm:p-4 sm:pt-0">
-          {sessions.length === 0 ? (
-            <div className="text-center py-8 text-muted-foreground">
-              <Users className="h-8 w-8 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">No active sessions found.</p>
-            </div>
-          ) : (
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="text-xs w-[60px]">PID</TableHead>
-                    <TableHead className="text-xs">User</TableHead>
-                    <TableHead className="text-xs">State</TableHead>
-                    <TableHead className="text-xs hidden md:table-cell">Query</TableHead>
-                    <TableHead className="text-xs">Time</TableHead>
-                    <TableHead className="text-xs hidden lg:table-cell">Wait</TableHead>
-                    <TableHead className="text-right text-xs w-12">Act</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {sessions.map((session) => (
-                    <TableRow key={session.pid}>
-                      <TableCell className="font-mono text-[10px] sm:text-xs py-2">
-                        {session.pid}
-                      </TableCell>
-                      <TableCell className="py-2">
-                        <div className="flex flex-col">
-                          <span className="font-medium text-xs truncate max-w-[60px] sm:max-w-[100px]">{session.user}</span>
-                          {session.applicationName && (
-                            <span className="text-[10px] text-muted-foreground truncate max-w-[60px] sm:max-w-[100px] hidden sm:block">
-                              {session.applicationName}
-                            </span>
-                          )}
-                        </div>
-                      </TableCell>
-                      <TableCell className="py-2">{getStateBadge(session.state)}</TableCell>
-                      <TableCell className="font-mono text-[10px] hidden md:table-cell py-2">
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <div className="max-w-[150px] lg:max-w-[250px] truncate cursor-help">
-                                {session.query || '-'}
-                              </div>
-                            </TooltipTrigger>
-                            <TooltipContent
-                              side="bottom"
-                              className="max-w-lg"
-                            >
-                              <pre className="text-xs whitespace-pre-wrap">
-                                {session.query || 'No query'}
-                              </pre>
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </TableCell>
-                      <TableCell className="py-2">
-                        <Badge
-                          variant={
-                            session.durationMs > 60000
-                              ? 'destructive'
-                              : session.durationMs > 10000
-                                ? 'outline'
-                                : 'secondary'
-                          }
-                          className="text-[10px] sm:text-xs"
-                        >
-                          {session.duration}
-                        </Badge>
-                      </TableCell>
-                      <TableCell className="text-[10px] text-muted-foreground hidden lg:table-cell py-2">
-                        {session.waitEventType
-                          ? `${session.waitEventType}`
-                          : '-'}
-                      </TableCell>
-                      <TableCell className="text-right py-2">
-                        {isAdmin ? (
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-6 w-6 sm:h-8 sm:w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
-                            onClick={() => handleKillClick(session)}
-                            disabled={killingPid === session.pid}
-                          >
-                            {killingPid === session.pid ? (
-                              <Loader2 className="h-3 w-3 sm:h-4 sm:w-4 animate-spin" />
-                            ) : (
-                              <Skull className="h-3 w-3 sm:h-4 sm:w-4" />
-                            )}
-                          </Button>
-                        ) : (
-                          <span className="text-[10px] text-muted-foreground">-</span>
-                        )}
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Confirm Kill Dialog */}
-      <AlertDialog open={!!confirmKill} onOpenChange={() => setConfirmKill(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Terminate Session?</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to terminate session{' '}
-              <span className="font-mono font-bold">{confirmKill?.pid}</span>?
-              <br />
-              <br />
-              User: <span className="font-medium">{confirmKill?.user}</span>
-              <br />
-              State: <span className="font-medium">{confirmKill?.state}</span>
-              <br />
-              <br />
-              This action will forcefully end the connection and may cause data
-              loss if the session has uncommitted transactions.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmKill}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              Terminate
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  );
-}
-
-function SessionsSkeleton() {
-  return (
-    <div className="p-6 space-y-6">
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-        {[...Array(4)].map((_, i) => (
-          <Card key={i}>
-            <CardHeader className="pb-2">
-              <Skeleton className="h-4 w-16" />
-            </CardHeader>
-            <CardContent>
-              <Skeleton className="h-8 w-12" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-      <Card>
-        <CardHeader>
-          <Skeleton className="h-5 w-32" />
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-2">
-            {[...Array(5)].map((_, i) => (
-              <Skeleton key={i} className="h-12 w-full" />
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

package/src/components/monitoring/tabs/StorageTab.tsx

@@ -1,335 +0,0 @@
-'use client';
-
-import React from 'react';
-import { HardDrive, Database, Archive, FolderOpen } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Progress } from '@/components/ui/progress';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import type { MonitoringData } from '@/lib/db/types';
-
-interface StorageTabProps {
-  data: MonitoringData | null;
-  loading: boolean;
-}
-
-export function StorageTab({ data, loading }: StorageTabProps) {
-  if (loading && !data) {
-    return <StorageSkeleton />;
-  }
-
-  const overview = data?.overview;
-  const storage = data?.storage ?? [];
-  const tables = data?.tables ?? [];
-  const indexes = data?.indexes ?? [];
-
-  // Calculate totals
-  const totalTableSize = tables.reduce((sum, t) => sum + t.tableSizeBytes, 0);
-  const totalIndexSize = indexes.reduce((sum, i) => sum + i.indexSizeBytes, 0);
-  const walStorage = storage.find((s) => s.name === 'WAL');
-
-  const formatBytes = (bytes: number) => {
-    if (bytes >= 1073741824) return `${(bytes / 1073741824).toFixed(2)} GB`;
-    if (bytes >= 1048576) return `${(bytes / 1048576).toFixed(2)} MB`;
-    if (bytes >= 1024) return `${(bytes / 1024).toFixed(2)} KB`;
-    return `${bytes} B`;
-  };
-
-  // Calculate storage breakdown
-  const totalSize = overview?.databaseSizeBytes ?? 0;
-  const tablePercent = totalSize > 0 ? (totalTableSize / totalSize) * 100 : 0;
-  const indexPercent = totalSize > 0 ? (totalIndexSize / totalSize) * 100 : 0;
-  const otherPercent = Math.max(0, 100 - tablePercent - indexPercent);
-
-  return (
-    <div className="p-3 sm:p-6 space-y-4 sm:space-y-6">
-      {/* Stats Cards */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4">
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              DB Size
-            </CardTitle>
-            <Database className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold truncate">
-              {overview?.databaseSize || 'N/A'}
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              Tables
-            </CardTitle>
-            <HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold truncate">{formatBytes(totalTableSize)}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
-              {tablePercent.toFixed(1)}%
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              Indexes
-            </CardTitle>
-            <Archive className="h-3 w-3 sm:h-4 sm:w-4 text-purple-500" />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold truncate">{formatBytes(totalIndexSize)}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
-              {indexPercent.toFixed(1)}%
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              WAL
-            </CardTitle>
-            <FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-orange-500" />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold truncate">
-              {walStorage?.walSize || walStorage?.size || 'N/A'}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Storage Breakdown */}
-      <Card className="p-0">
-        <CardHeader className="p-3 sm:p-4 pb-2">
-          <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
-            <HardDrive className="h-3 w-3 sm:h-4 sm:w-4" />
-            Storage Breakdown
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="p-3 sm:p-4 pt-0 space-y-3 sm:space-y-4">
-          <div className="space-y-2 sm:space-y-3">
-            <div>
-              <div className="flex items-center justify-between text-xs sm:text-sm mb-1">
-                <span className="flex items-center gap-1 sm:gap-2">
-                  <div className="w-2 h-2 sm:w-3 sm:h-3 rounded-sm bg-green-500" />
-                  Tables
-                </span>
-                <span className="font-medium">{formatBytes(totalTableSize)}</span>
-              </div>
-              <Progress value={tablePercent} className="h-1.5 sm:h-2" />
-            </div>
-
-            <div>
-              <div className="flex items-center justify-between text-xs sm:text-sm mb-1">
-                <span className="flex items-center gap-1 sm:gap-2">
-                  <div className="w-2 h-2 sm:w-3 sm:h-3 rounded-sm bg-purple-500" />
-                  Indexes
-                </span>
-                <span className="font-medium">{formatBytes(totalIndexSize)}</span>
-              </div>
-              <Progress value={indexPercent} className="h-1.5 sm:h-2 [&>div]:bg-purple-500" />
-            </div>
-
-            <div>
-              <div className="flex items-center justify-between text-xs sm:text-sm mb-1">
-                <span className="flex items-center gap-1 sm:gap-2">
-                  <div className="w-2 h-2 sm:w-3 sm:h-3 rounded-sm bg-muted-foreground" />
-                  <span className="hidden sm:inline">Other (TOAST, FSM)</span>
-                  <span className="sm:hidden">Other</span>
-                </span>
-                <span className="font-medium">
-                  {formatBytes(totalSize - totalTableSize - totalIndexSize)}
-                </span>
-              </div>
-              <Progress value={otherPercent} className="h-1.5 sm:h-2 [&>div]:bg-muted-foreground" />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Tablespaces */}
-      <Card className="p-0">
-        <CardHeader className="p-3 sm:p-4 pb-2">
-          <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
-            <FolderOpen className="h-3 w-3 sm:h-4 sm:w-4" />
-            Tablespaces
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="p-0 sm:p-4 sm:pt-0">
-          {storage.length === 0 ? (
-            <div className="text-center py-8 text-muted-foreground">
-              <FolderOpen className="h-8 w-8 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">No tablespace information available.</p>
-            </div>
-          ) : (
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="text-xs">Name</TableHead>
-                    <TableHead className="text-xs hidden md:table-cell">Location</TableHead>
-                    <TableHead className="text-right text-xs">Size</TableHead>
-                    <TableHead className="text-right text-xs hidden sm:table-cell">Usage</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {storage.map((ts) => (
-                    <TableRow key={ts.name}>
-                      <TableCell className="py-2">
-                        <div className="flex items-center gap-1 sm:gap-2">
-                          <FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground flex-shrink-0" />
-                          <span className="font-medium text-xs sm:text-sm truncate max-w-[80px] sm:max-w-none">{ts.name}</span>
-                          {ts.name === 'pg_default' && (
-                            <Badge variant="secondary" className="text-[10px] sm:text-xs hidden sm:inline-flex">Default</Badge>
-                          )}
-                          {ts.name === 'WAL' && (
-                            <Badge variant="outline" className="text-[10px] sm:text-xs hidden sm:inline-flex">WAL</Badge>
-                          )}
-                        </div>
-                      </TableCell>
-                      <TableCell className="font-mono text-[10px] sm:text-xs text-muted-foreground hidden md:table-cell py-2">
-                        {ts.location || 'default'}
-                      </TableCell>
-                      <TableCell className="text-right text-xs py-2">{ts.size}</TableCell>
-                      <TableCell className="text-right hidden sm:table-cell py-2">
-                        {ts.usagePercent !== undefined ? (
-                          <div className="flex items-center justify-end gap-1 sm:gap-2">
-                            <Progress
-                              value={ts.usagePercent}
-                              className="w-12 sm:w-16 h-1.5 sm:h-2"
-                            />
-                            <span className="text-xs w-10 sm:w-12">
-                              {ts.usagePercent.toFixed(0)}%
-                            </span>
-                          </div>
-                        ) : (
-                          '-'
-                        )}
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Top Tables by Size */}
-      <Card className="p-0">
-        <CardHeader className="p-3 sm:p-4 pb-2">
-          <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
-            <Database className="h-3 w-3 sm:h-4 sm:w-4" />
-            Largest Tables
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="p-0 sm:p-4 sm:pt-0">
-          {tables.length === 0 ? (
-            <div className="text-center py-8 text-muted-foreground">
-              <Database className="h-8 w-8 mx-auto mb-2 opacity-50" />
-              <p className="text-sm">No table information available.</p>
-            </div>
-          ) : (
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="text-xs">Table</TableHead>
-                    <TableHead className="text-right text-xs">Size</TableHead>
-                    <TableHead className="text-right text-xs hidden sm:table-cell">% of DB</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {tables
-                    .slice()
-                    .sort((a, b) => b.totalSizeBytes - a.totalSizeBytes)
-                    .slice(0, 10)
-                    .map((table) => {
-                      const percent =
-                        totalSize > 0
-                          ? (table.totalSizeBytes / totalSize) * 100
-                          : 0;
-                      return (
-                        <TableRow key={`${table.schemaName}.${table.tableName}`}>
-                          <TableCell className="py-2">
-                            <div className="flex flex-col">
-                              <span className="font-medium text-xs sm:text-sm truncate max-w-[100px] sm:max-w-[200px]">{table.tableName}</span>
-                              <span className="text-[10px] sm:text-xs text-muted-foreground">
-                                {table.schemaName}
-                              </span>
-                            </div>
-                          </TableCell>
-                          <TableCell className="text-right text-xs py-2">
-                            {table.totalSize}
-                          </TableCell>
-                          <TableCell className="text-right hidden sm:table-cell py-2">
-                            <div className="flex items-center justify-end gap-1 sm:gap-2">
-                              <Progress
-                                value={percent}
-                                className="w-12 sm:w-16 h-1.5 sm:h-2"
-                              />
-                              <span className="text-xs w-10 sm:w-12">
-                                {percent.toFixed(1)}%
-                              </span>
-                            </div>
-                          </TableCell>
-                        </TableRow>
-                      );
-                    })}
-                </TableBody>
-              </Table>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-function StorageSkeleton() {
-  return (
-    <div className="p-3 sm:p-6 space-y-4 sm:space-y-6">
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4">
-        {[...Array(4)].map((_, i) => (
-          <Card key={i} className="p-0">
-            <CardHeader className="p-2 sm:p-4 pb-1 sm:pb-2">
-              <Skeleton className="h-3 sm:h-4 w-12 sm:w-20" />
-            </CardHeader>
-            <CardContent className="p-2 sm:p-4 pt-0">
-              <Skeleton className="h-5 sm:h-8 w-16 sm:w-24" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-      <Card className="p-0">
-        <CardHeader className="p-3 sm:p-4">
-          <Skeleton className="h-4 sm:h-5 w-24 sm:w-32" />
-        </CardHeader>
-        <CardContent className="p-3 sm:p-4 pt-0">
-          <div className="space-y-2 sm:space-y-3">
-            {[...Array(3)].map((_, i) => (
-              <div key={i}>
-                <Skeleton className="h-3 sm:h-4 w-full mb-1 sm:mb-2" />
-                <Skeleton className="h-1.5 sm:h-2 w-full" />
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}