gucci
This commit is contained in:
asabizanjo
721
app/dashboard/page.tsx
Normal file
721
app/dashboard/page.tsx
Normal file
@@ -0,0 +1,721 @@
|
||||
"use client";
|
||||
|
||||
import { FormEvent, useEffect, useRef, useState, DragEvent } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
type FileRow = {
|
||||
id: string;
|
||||
name: string;
|
||||
relativePath: string;
|
||||
contentType: string;
|
||||
sizeBytes: number;
|
||||
createdAt: string | Date;
|
||||
};
|
||||
|
||||
const MAX_UPLOAD_SIZE = 10 * 1024 * 1024 * 1024; // 10GB in bytes
|
||||
|
||||
function formatBytes(bytes: number) {
|
||||
if (!bytes) return "0 B";
|
||||
const sizes = ["B", "KB", "MB", "GB", "TB"];
|
||||
const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), sizes.length - 1);
|
||||
const value = bytes / Math.pow(1024, i);
|
||||
return `${value.toFixed(value >= 10 || value % 1 === 0 ? 0 : 1)} ${sizes[i]}`;
|
||||
}
|
||||
|
||||
function getFileIcon(contentType: string) {
|
||||
if (contentType.startsWith("image/")) {
|
||||
return (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
if (contentType.startsWith("video/")) {
|
||||
return (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
if (contentType.includes("pdf")) {
|
||||
return (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const router = useRouter();
|
||||
const [files, setFiles] = useState<FileRow[]>([]);
|
||||
const [loadingList, setLoadingList] = useState(true);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [deletingAll, setDeletingAll] = useState(false);
|
||||
const [showDeleteAllConfirm, setShowDeleteAllConfirm] = useState(false);
|
||||
const [deletingFileId, setDeletingFileId] = useState<string | null>(null);
|
||||
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const folderInputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const loadFiles = async () => {
|
||||
setLoadingList(true);
|
||||
const res = await fetch("/api/files/list");
|
||||
const data = await res.json();
|
||||
setLoadingList(false);
|
||||
if (!res.ok) {
|
||||
setError(data?.error ?? "Unable to load files");
|
||||
return;
|
||||
}
|
||||
setFiles(data.files ?? []);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadFiles();
|
||||
}, []);
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files;
|
||||
if (files && files.length > 0) {
|
||||
const fileArray = Array.from(files);
|
||||
setSelectedFiles((prev) => [...prev, ...fileArray]);
|
||||
}
|
||||
// Reset input to allow selecting the same file again
|
||||
e.target.value = "";
|
||||
};
|
||||
|
||||
const getTotalSelectedSize = () => {
|
||||
return selectedFiles.reduce((acc, f) => acc + f.size, 0);
|
||||
};
|
||||
|
||||
const isOverSizeLimit = () => {
|
||||
return getTotalSelectedSize() > MAX_UPLOAD_SIZE;
|
||||
};
|
||||
|
||||
const handleUpload = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (selectedFiles.length === 0) {
|
||||
setError("Please choose at least one file or folder.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (isOverSizeLimit()) {
|
||||
setError("Total upload size exceeds 10GB limit. Please remove some files.");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
selectedFiles.forEach((file) => {
|
||||
const fileWithPath = file as File & { webkitRelativePath?: string };
|
||||
const filename = fileWithPath.webkitRelativePath || fileWithPath.name;
|
||||
formData.append("files", fileWithPath, filename);
|
||||
});
|
||||
|
||||
setUploading(true);
|
||||
setError(null);
|
||||
const res = await fetch("/api/files/upload", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
const data = await res.json();
|
||||
setUploading(false);
|
||||
if (!res.ok) {
|
||||
setError(data?.error ?? "Upload failed");
|
||||
return;
|
||||
}
|
||||
setFiles((prev) => [...data.files, ...prev]);
|
||||
setSelectedFiles([]);
|
||||
};
|
||||
|
||||
const clearSelectedFiles = () => {
|
||||
setSelectedFiles([]);
|
||||
};
|
||||
|
||||
const addFilesToSelection = (fileList: FileList) => {
|
||||
setSelectedFiles((prev) => [...prev, ...Array.from(fileList)]);
|
||||
};
|
||||
|
||||
const handleDragOver = (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
};
|
||||
|
||||
const handleDragLeave = (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleDrop = (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
|
||||
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||||
addFilesToSelection(e.dataTransfer.files);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownload = async (id: string) => {
|
||||
const res = await fetch(`/api/files/${id}/download`);
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setError(data?.error ?? "Unable to download");
|
||||
return;
|
||||
}
|
||||
window.location.assign(data.url);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
setDeletingFileId(id);
|
||||
setError(null);
|
||||
const res = await fetch(`/api/files/${id}/delete`, { method: "DELETE" });
|
||||
const data = await res.json();
|
||||
setDeletingFileId(null);
|
||||
if (!res.ok) {
|
||||
setError(data?.error ?? "Unable to delete");
|
||||
return;
|
||||
}
|
||||
setFiles((prev) => prev.filter((f) => f.id !== id));
|
||||
};
|
||||
|
||||
const handleDeleteAll = async () => {
|
||||
setDeletingAll(true);
|
||||
setError(null);
|
||||
const res = await fetch("/api/files/delete-all", { method: "DELETE" });
|
||||
const data = await res.json();
|
||||
setDeletingAll(false);
|
||||
setShowDeleteAllConfirm(false);
|
||||
if (!res.ok) {
|
||||
setError(data?.error ?? "Unable to delete all files");
|
||||
return;
|
||||
}
|
||||
setFiles([]);
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
await fetch("/api/auth/logout", { method: "POST" });
|
||||
router.push("/login");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="border-b-4 border-accent-lime bg-bg-card sticky top-0 z-50">
|
||||
<div className="mx-auto max-w-6xl px-4 sm:px-6 py-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-10 h-10 bg-accent-lime flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-bg-dark" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<h1 className="text-lg font-black text-text-primary tracking-tight">
|
||||
Asa's FTP
|
||||
</h1>
|
||||
<p className="text-xs text-text-muted uppercase tracking-wider">
|
||||
Asa's FTP Storage
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="brutal-btn-outline text-xs px-4 py-2"
|
||||
style={{ boxShadow: "3px 3px 0 var(--accent-lime)" }}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
||||
</svg>
|
||||
<span className="hidden sm:inline">Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 mx-auto w-full max-w-6xl px-4 sm:px-6 py-6 sm:py-8">
|
||||
{/* Upload Section */}
|
||||
<section className="mb-8 animate-slide-up">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-2 h-8 bg-accent-cyan" />
|
||||
<h2 className="text-xl font-black text-text-primary uppercase tracking-tight">
|
||||
Upload Files
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`brutal-card p-6 sm:p-8 transition-all duration-200 ${
|
||||
isDragging ? "border-accent-cyan" : ""
|
||||
}`}
|
||||
style={{
|
||||
boxShadow: isDragging
|
||||
? "8px 8px 0 var(--accent-cyan)"
|
||||
: "8px 8px 0 var(--accent-lime)"
|
||||
}}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<form onSubmit={handleUpload}>
|
||||
{/* Drop Zone */}
|
||||
<div
|
||||
className={`border-3 border-dashed rounded-none p-8 sm:p-12 text-center transition-colors ${
|
||||
isDragging
|
||||
? "border-accent-cyan bg-accent-cyan/5"
|
||||
: "border-text-muted hover:border-accent-lime"
|
||||
}`}
|
||||
style={{ borderWidth: "3px" }}
|
||||
>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className={`w-16 h-16 flex items-center justify-center transition-colors ${
|
||||
isDragging ? "bg-accent-cyan" : "bg-bg-elevated"
|
||||
}`}>
|
||||
<svg
|
||||
className={`w-8 h-8 transition-colors ${
|
||||
isDragging ? "text-bg-dark" : "text-text-secondary"
|
||||
}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-text-primary font-bold text-lg">
|
||||
{isDragging ? "Drop files here" : "Drag & drop files here"}
|
||||
</p>
|
||||
<p className="text-text-muted text-sm mt-1">
|
||||
or select files/folders from your computer
|
||||
</p>
|
||||
</div>
|
||||
{/* Hidden file inputs */}
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileSelect}
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
ref={folderInputRef}
|
||||
onChange={handleFileSelect}
|
||||
// @ts-expect-error webkitdirectory is valid in browsers
|
||||
webkitdirectory=""
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
<div className="flex flex-wrap items-center justify-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="brutal-btn-outline cursor-pointer text-sm"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Select Files
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => folderInputRef.current?.click()}
|
||||
className="brutal-btn-outline cursor-pointer text-sm"
|
||||
style={{
|
||||
borderColor: "var(--accent-cyan)",
|
||||
boxShadow: "4px 4px 0 var(--accent-cyan)"
|
||||
}}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
Select Folder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected Files Preview */}
|
||||
{selectedFiles.length > 0 && (
|
||||
<div className={`mt-6 p-4 bg-bg-elevated border-2 ${isOverSizeLimit() ? "border-danger" : "border-text-muted"}`}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<p className="text-sm font-bold text-text-primary">
|
||||
{selectedFiles.length} {selectedFiles.length === 1 ? "file" : "files"} selected
|
||||
<span className={`ml-2 font-normal ${isOverSizeLimit() ? "text-danger" : "text-text-muted"}`}>
|
||||
({formatBytes(getTotalSelectedSize())} / 10 GB max)
|
||||
</span>
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearSelectedFiles}
|
||||
className="text-xs text-text-muted hover:text-danger transition-colors"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
{isOverSizeLimit() && (
|
||||
<div className="flex items-center gap-2 mb-3 p-2 bg-danger/10 border border-danger text-danger text-xs">
|
||||
<svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
Total size exceeds 10GB limit. Remove some files to continue.
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
|
||||
{selectedFiles.slice(0, 10).map((file, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-flex items-center gap-1.5 px-2 py-1 bg-bg-card text-xs text-text-secondary border border-text-muted"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
{file.name.length > 25 ? file.name.slice(0, 22) + "..." : file.name}
|
||||
</span>
|
||||
))}
|
||||
{selectedFiles.length > 10 && (
|
||||
<span className="inline-flex items-center px-2 py-1 bg-accent-lime/20 text-xs text-accent-lime font-bold">
|
||||
+{selectedFiles.length - 10} more
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upload Button */}
|
||||
<div className="mt-6 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4">
|
||||
<p className="text-text-muted text-sm">
|
||||
{selectedFiles.length === 0
|
||||
? "Supports files and entire folders with preserved structure"
|
||||
: "Ready to upload"}
|
||||
</p>
|
||||
<button
|
||||
type="submit"
|
||||
className="brutal-btn"
|
||||
disabled={uploading || selectedFiles.length === 0 || isOverSizeLimit()}
|
||||
>
|
||||
{uploading ? (
|
||||
<>
|
||||
<svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
Uploading...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
||||
</svg>
|
||||
Upload {selectedFiles.length > 0 ? `${selectedFiles.length} Files` : "Files"}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="mt-4 flex items-center gap-3 p-4 bg-danger/10 border-l-4 border-danger animate-slide-left">
|
||||
<svg className="w-5 h-5 text-danger flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<p className="text-sm text-danger font-medium">{error}</p>
|
||||
<button
|
||||
onClick={() => setError(null)}
|
||||
className="ml-auto text-danger hover:text-text-primary"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Files Section */}
|
||||
<section className="animate-slide-up delay-200" style={{ opacity: 0, animationFillMode: "forwards" }}>
|
||||
<div className="flex items-center justify-between gap-4 mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-8 bg-accent-magenta" />
|
||||
<h2 className="text-xl font-black text-text-primary uppercase tracking-tight">
|
||||
Your Files
|
||||
</h2>
|
||||
<span className="text-xs font-bold text-text-muted bg-bg-elevated px-2 py-1">
|
||||
{files.length} {files.length === 1 ? "FILE" : "FILES"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{files.length > 0 && (
|
||||
<button
|
||||
className="brutal-btn-danger text-xs px-3 py-2"
|
||||
onClick={() => setShowDeleteAllConfirm(true)}
|
||||
disabled={deletingAll}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Delete All
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="brutal-btn-outline text-xs px-3 py-2"
|
||||
onClick={loadFiles}
|
||||
disabled={loadingList}
|
||||
style={{
|
||||
borderColor: "var(--accent-magenta)",
|
||||
boxShadow: "3px 3px 0 var(--accent-magenta)"
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
className={`w-4 h-4 ${loadingList ? "animate-spin" : ""}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
{loadingList ? "Loading..." : "Refresh"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="brutal-card overflow-hidden" style={{ boxShadow: "8px 8px 0 var(--accent-magenta)" }}>
|
||||
{loadingList ? (
|
||||
<div className="p-12 text-center">
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<svg className="animate-spin h-6 w-6 text-accent-magenta" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
<span className="text-text-secondary font-medium">Loading your files...</span>
|
||||
</div>
|
||||
</div>
|
||||
) : files.length === 0 ? (
|
||||
<div className="p-12 text-center">
|
||||
<div className="w-20 h-20 mx-auto mb-6 bg-bg-elevated flex items-center justify-center">
|
||||
<svg className="w-10 h-10 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-text-primary mb-2">No files yet</h3>
|
||||
<p className="text-text-muted text-sm max-w-sm mx-auto">
|
||||
Upload your first file or folder using the upload section above.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Desktop Table */}
|
||||
<div className="hidden md:block overflow-x-auto">
|
||||
<table className="brutal-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="w-12"></th>
|
||||
<th>Name</th>
|
||||
<th>Path</th>
|
||||
<th>Size</th>
|
||||
<th className="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{files.map((file, index) => (
|
||||
<tr
|
||||
key={file.id}
|
||||
className="animate-slide-up"
|
||||
style={{
|
||||
opacity: 0,
|
||||
animationFillMode: "forwards",
|
||||
animationDelay: `${index * 50}ms`
|
||||
}}
|
||||
>
|
||||
<td className="text-text-muted">
|
||||
{getFileIcon(file.contentType)}
|
||||
</td>
|
||||
<td className="font-bold text-text-primary">{file.name}</td>
|
||||
<td className="text-text-muted font-mono text-xs">{file.relativePath}</td>
|
||||
<td className="text-text-secondary">{formatBytes(file.sizeBytes)}</td>
|
||||
<td>
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<button
|
||||
className="brutal-btn-outline text-xs px-3 py-1.5"
|
||||
onClick={() => handleDownload(file.id)}
|
||||
style={{ boxShadow: "2px 2px 0 var(--accent-lime)" }}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
Download
|
||||
</button>
|
||||
<button
|
||||
className="brutal-btn-danger"
|
||||
onClick={() => handleDelete(file.id)}
|
||||
disabled={deletingFileId === file.id}
|
||||
>
|
||||
{deletingFileId === file.id ? (
|
||||
<>
|
||||
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
Deleting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Delete
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Mobile Cards */}
|
||||
<div className="md:hidden divide-y divide-bg-elevated">
|
||||
{files.map((file, index) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className="p-4 animate-slide-up"
|
||||
style={{
|
||||
opacity: 0,
|
||||
animationFillMode: "forwards",
|
||||
animationDelay: `${index * 50}ms`
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="text-text-muted mt-0.5">
|
||||
{getFileIcon(file.contentType)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-bold text-text-primary truncate">{file.name}</p>
|
||||
<p className="text-xs text-text-muted font-mono truncate mt-1">{file.relativePath}</p>
|
||||
<p className="text-xs text-text-secondary mt-1">{formatBytes(file.sizeBytes)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-4">
|
||||
<button
|
||||
className="flex-1 brutal-btn-outline text-xs py-2"
|
||||
onClick={() => handleDownload(file.id)}
|
||||
style={{ boxShadow: "2px 2px 0 var(--accent-lime)" }}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
Download
|
||||
</button>
|
||||
<button
|
||||
className="brutal-btn-danger py-2 px-4"
|
||||
onClick={() => handleDelete(file.id)}
|
||||
disabled={deletingFileId === file.id}
|
||||
>
|
||||
{deletingFileId === file.id ? (
|
||||
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Delete All Confirmation Modal */}
|
||||
{showDeleteAllConfirm && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-bg-dark/80 animate-fade-in">
|
||||
<div
|
||||
className="brutal-card p-6 max-w-md w-full animate-slide-up"
|
||||
style={{ boxShadow: "8px 8px 0 var(--danger)" }}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-danger/20 flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-danger" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-black text-text-primary">Delete All Files?</h3>
|
||||
<p className="text-sm text-text-muted">This action cannot be undone</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-text-secondary mb-6">
|
||||
You are about to permanently delete <span className="font-bold text-danger">{files.length} {files.length === 1 ? "file" : "files"}</span> from your storage. This action is irreversible.
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
className="flex-1 brutal-btn-outline text-sm py-2.5"
|
||||
onClick={() => setShowDeleteAllConfirm(false)}
|
||||
disabled={deletingAll}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 brutal-btn-danger text-sm py-2.5"
|
||||
onClick={handleDeleteAll}
|
||||
disabled={deletingAll}
|
||||
>
|
||||
{deletingAll ? (
|
||||
<>
|
||||
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
Deleting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Delete All
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t-2 border-bg-elevated py-4 mt-auto">
|
||||
<div className="mx-auto max-w-6xl px-4 sm:px-6">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-evenly gap-2 text-xs text-text-muted">
|
||||
<p>FTP</p>
|
||||
<p>asabizanjo.dev</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-accent-lime" />
|
||||
<div className="w-2 h-2 bg-accent-magenta" />
|
||||
<div className="w-2 h-2 bg-accent-cyan" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user