124 lines
4.7 KiB
TypeScript
124 lines
4.7 KiB
TypeScript
// app/admin/upload/_components/step-1-upload.tsx
|
|
"use client";
|
|
|
|
import { useUploadLogic } from "../_hooks/use-upload";
|
|
import { FileUpload } from "@/shared/components/file-upload"; // Pastikan path import benar
|
|
import { Button } from "@/shared/components/ui/button";
|
|
import { Input } from "@/shared/components/ui/input";
|
|
import { Label } from "@/shared/components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue
|
|
} from "@/shared/components/ui/select";
|
|
import { AlertCircle } from "lucide-react";
|
|
|
|
export default function StepUpload() {
|
|
const {
|
|
file,
|
|
handleFileSelect,
|
|
handleUploadProcess,
|
|
loading,
|
|
fileDesc,
|
|
setFileDesc,
|
|
sheetNames,
|
|
selectedSheet,
|
|
setSelectedSheet,
|
|
// Kita butuh fungsi reset file di hook, anggap namanya resetFile
|
|
setState
|
|
} = useUploadLogic();
|
|
|
|
const handleRemoveFile = () => {
|
|
// Reset state di context/hook
|
|
setState(prev => ({
|
|
...prev,
|
|
file: null,
|
|
sheetCount: 0,
|
|
sheetNames: [],
|
|
selectedPages: []
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto py-8">
|
|
<div className="mb-8 text-center">
|
|
<h1 className="text-2xl font-bold text-slate-800">Upload Data Baru</h1>
|
|
<p className="text-slate-500 text-sm mt-1">Unggah file CSV, Excel, PDF, atau ZIP spasial Anda.</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border shadow-sm p-6 space-y-6">
|
|
|
|
{/* 1. Component File Upload Custom */}
|
|
<div className="space-y-2">
|
|
<Label>File Sumber</Label>
|
|
<FileUpload
|
|
// Kirim file yang ada di state agar sinkron (optional jika komponen controlled)
|
|
filePreview={file}
|
|
fileName={file?.name}
|
|
// Saat drop, kirim raw file ke logic
|
|
onFileSelect={(f) => handleFileSelect(f)}
|
|
// Saat remove, reset state
|
|
onRemove={handleRemoveFile}
|
|
description=""
|
|
/>
|
|
</div>
|
|
|
|
{/* 2. Logic Form Tambahan (Hanya muncul jika file ada) */}
|
|
{file && (
|
|
<div className="space-y-5 animate-in fade-in slide-in-from-top-4 duration-300">
|
|
|
|
{/* Input Deskripsi */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="desc">Deskripsi File <span className="text-red-500">*</span></Label>
|
|
<Input
|
|
id="desc"
|
|
value={fileDesc}
|
|
onChange={(e) => setFileDesc(e.target.value)}
|
|
placeholder="Contoh: Data Curah Hujan Tahun 2024"
|
|
className="bg-slate-50"
|
|
/>
|
|
</div>
|
|
|
|
{/* Sheet Selector (Khusus Excel) */}
|
|
{sheetNames && sheetNames.length > 1 && (
|
|
<div className="p-4 bg-blue-50 border border-blue-100 rounded-lg space-y-3">
|
|
<div className="flex items-start gap-2 text-blue-700">
|
|
<AlertCircle className="w-5 h-5 mt-0.5" />
|
|
<div className="text-sm">
|
|
<p className="font-semibold">File Excel memiliki banyak sheet.</p>
|
|
<p>Silakan pilih sheet mana yang ingin diproses.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Select value={selectedSheet || ""} onValueChange={setSelectedSheet}>
|
|
<SelectTrigger className="w-full bg-white border-blue-200">
|
|
<SelectValue placeholder="Pilih Sheet..." />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{sheetNames.map((name: string) => (
|
|
<SelectItem key={name} value={name}>{name}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tombol Aksi */}
|
|
<div className="pt-4 flex justify-end">
|
|
<Button
|
|
size="lg"
|
|
className="w-full md:w-auto min-w-[150px]"
|
|
onClick={() => handleUploadProcess(selectedSheet || undefined)}
|
|
disabled={loading || !fileDesc || (sheetNames.length > 1 && !selectedSheet)}
|
|
>
|
|
{loading ? "Memproses..." : "Lanjut Proses →"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |