99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Progress } from "@/components/ui/progress"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { HardDrive, Files, Box, Image as ImageIcon, FileText, Settings } from "lucide-react"
|
|
import type { FileStats as FileStatsType } from "@/lib/types/file-manager.types"
|
|
import { formatBytes } from "@/lib/utils"
|
|
|
|
interface FileStatsProps {
|
|
stats: FileStatsType
|
|
}
|
|
|
|
export function FileStats({ stats }: FileStatsProps) {
|
|
const storagePercentage = (stats.storageUsed / stats.storageLimit) * 100
|
|
const storageColor =
|
|
storagePercentage > 90 ? "text-destructive" : storagePercentage > 75 ? "text-amber-600" : "text-brand-600"
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{/* Total Files */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
|
<Files className="w-4 h-4" />
|
|
Total Files
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{stats.totalFiles}</div>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Across all categories
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Storage Used */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
|
<HardDrive className="w-4 h-4" />
|
|
Storage Used
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className={`text-2xl font-bold ${storageColor}`}>
|
|
{formatBytes(stats.storageUsed)}
|
|
</div>
|
|
<Progress value={storagePercentage} className="mt-2 h-2" />
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{storagePercentage.toFixed(1)}% of {formatBytes(stats.storageLimit)}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Files by Type */}
|
|
<Card className="col-span-2">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">Files by Type</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-wrap gap-2">
|
|
{Object.entries(stats.filesByType).map(([type, count]) => (
|
|
<Badge key={type} variant="secondary" className="gap-1">
|
|
{getTypeIcon(type)}
|
|
{type}: {count}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{Object.entries(stats.filesByCategory).map(([category, count]) => (
|
|
<Badge key={category} variant="outline" className="text-xs">
|
|
{category}: {count}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function getTypeIcon(type: string) {
|
|
const icons: Record<string, string> = {
|
|
model: "🎯",
|
|
image: "🖼️",
|
|
document: "📄",
|
|
data: "📊",
|
|
config: "⚙️",
|
|
template: "✉️",
|
|
translation: "🌐",
|
|
archive: "📦",
|
|
}
|
|
|
|
return icons[type] || "📁"
|
|
}
|
|
|