fix:product,promo form
This commit is contained in:
parent
56b2d981af
commit
be38482c88
|
|
@ -289,7 +289,7 @@ export default function PromoDetailDialog({
|
|||
<div className="space-y-4 text-sm">
|
||||
<div>
|
||||
<div className="w-24 h-24 rounded-lg overflow-hidden border">
|
||||
<Image
|
||||
<img
|
||||
src={promo.thumbnail_url}
|
||||
alt="Profile"
|
||||
width={96}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,181 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import Cookies from "js-cookie";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
|
||||
import { getPromotionById, updatePromotion } from "@/service/promotion";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { loading, success, error } from "@/config/swal";
|
||||
|
||||
type PromoEditDialogProps = {
|
||||
promoId: number | null;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSuccess?: () => void;
|
||||
};
|
||||
|
||||
export default function PromoEditDialog({
|
||||
promoId,
|
||||
open,
|
||||
onOpenChange,
|
||||
onSuccess,
|
||||
}: PromoEditDialogProps) {
|
||||
const [loadingData, setLoadingData] = useState(false);
|
||||
|
||||
// 🔹 FORM STATE
|
||||
const [title, setTitle] = useState("");
|
||||
const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
|
||||
const [thumbnailFile, setThumbnailFile] = useState<File | null>(null);
|
||||
|
||||
const MySwal = withReactContent(Swal);
|
||||
|
||||
/* =========================
|
||||
* Fetch promo detail
|
||||
========================= */
|
||||
useEffect(() => {
|
||||
if (!promoId || !open) return;
|
||||
|
||||
async function fetchPromo() {
|
||||
try {
|
||||
setLoadingData(true);
|
||||
const res = await getPromotionById(promoId);
|
||||
const data = res?.data?.data;
|
||||
|
||||
setTitle(data?.title || "");
|
||||
setThumbnailUrl(data?.thumbnail_url || null);
|
||||
} catch (e) {
|
||||
console.error("FETCH PROMO ERROR:", e);
|
||||
} finally {
|
||||
setLoadingData(false);
|
||||
}
|
||||
}
|
||||
|
||||
fetchPromo();
|
||||
}, [promoId, open]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
/* =========================
|
||||
* Handlers
|
||||
========================= */
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
setThumbnailFile(file);
|
||||
setThumbnailUrl(URL.createObjectURL(file));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!promoId) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("title", title);
|
||||
|
||||
if (thumbnailFile) {
|
||||
formData.append("file", thumbnailFile);
|
||||
}
|
||||
|
||||
loading();
|
||||
const res = await updatePromotion(formData, promoId);
|
||||
|
||||
if (res?.error) {
|
||||
error(res.message || "Gagal update promo");
|
||||
return;
|
||||
}
|
||||
|
||||
success("Promo berhasil diperbarui");
|
||||
onOpenChange(false);
|
||||
onSuccess?.();
|
||||
};
|
||||
|
||||
/* =========================
|
||||
* Render
|
||||
========================= */
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
|
||||
onClick={() => onOpenChange(false)}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded-2xl shadow-xl max-w-lg w-full overflow-hidden"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* HEADER */}
|
||||
<div className="bg-gradient-to-br from-[#1F6779] to-[#0F6C75] text-white px-6 py-5 relative">
|
||||
<button
|
||||
onClick={() => onOpenChange(false)}
|
||||
className="absolute top-4 right-4 text-xl"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<h2 className="text-lg font-semibold">Edit Promo</h2>
|
||||
</div>
|
||||
|
||||
{/* BODY */}
|
||||
<div className="p-6 space-y-5">
|
||||
{loadingData ? (
|
||||
<p>Memuat data...</p>
|
||||
) : (
|
||||
<>
|
||||
{/* TITLE */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600 mb-1">
|
||||
Judul Promo
|
||||
</label>
|
||||
<input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
className="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-[#0F6C75]"
|
||||
placeholder="Judul promo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* THUMBNAIL */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600 mb-2">
|
||||
Thumbnail
|
||||
</label>
|
||||
|
||||
{thumbnailUrl && (
|
||||
<div className="w-32 h-32 mb-3 rounded-lg overflow-hidden border">
|
||||
<img
|
||||
src={thumbnailUrl}
|
||||
alt="Thumbnail"
|
||||
className="w-32 h-32 object-cover rounded-lg border"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleFileChange}
|
||||
className="bg-[#0F6C75] text-white rounded-full px-2 w-[230px]"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* FOOTER */}
|
||||
<div className="flex justify-end gap-3 px-6 py-4 border-t bg-[#F2F7FA]">
|
||||
<Button variant="secondary" onClick={() => onOpenChange(false)}>
|
||||
Batal
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className="bg-[#1F6779] hover:bg-[#0F6C75] text-white"
|
||||
onClick={handleSubmit}
|
||||
disabled={loadingData}
|
||||
>
|
||||
Simpan Perubahan
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -278,7 +278,7 @@ export default function DetailAgentForm(props: { isDetail: boolean }) {
|
|||
<div>
|
||||
<Label className="mb-2 block">Foto Profile</Label>
|
||||
<div className="w-24 h-24 rounded-lg overflow-hidden border">
|
||||
<Image
|
||||
<img
|
||||
src={data?.profile_picture_url}
|
||||
alt="Profile"
|
||||
width={96}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRef, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import * as z from "zod";
|
||||
|
|
@ -23,6 +23,7 @@ import { createProduct } from "@/service/product";
|
|||
import withReactContent from "sweetalert2-react-content";
|
||||
import Swal from "sweetalert2";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { loading } from "@/config/swal";
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(1, "Nama produk wajib diisi"),
|
||||
|
|
@ -48,6 +49,8 @@ export default function AddProductForm() {
|
|||
} | null>(null);
|
||||
|
||||
const fileInputId = "spec-upload-input";
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const isUploadingRef = useRef(false);
|
||||
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const router = useRouter();
|
||||
|
|
@ -80,30 +83,57 @@ export default function AddProductForm() {
|
|||
setSpecs(updated);
|
||||
};
|
||||
|
||||
const handleFileSelected = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file || !uploadTarget) return;
|
||||
const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const input = e.target;
|
||||
const selectedFile = input.files?.[0];
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const fileUrl = reader.result as string;
|
||||
if (!selectedFile || !uploadTarget) return;
|
||||
|
||||
if (uploadTarget.type === "spec") {
|
||||
setSpecs((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[uploadTarget.index].images.push(fileUrl);
|
||||
updated[uploadTarget.index].files.push(file);
|
||||
return updated;
|
||||
});
|
||||
// 🔒 CEGAH DOUBLE EVENT
|
||||
if (isUploadingRef.current) return;
|
||||
isUploadingRef.current = true;
|
||||
|
||||
setSpecs((prev) => {
|
||||
const updated = [...prev];
|
||||
const spec = updated[uploadTarget.index];
|
||||
|
||||
// max 5 gambar
|
||||
if (spec.files.length >= 5) {
|
||||
isUploadingRef.current = false;
|
||||
return prev;
|
||||
}
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
// cegah file sama
|
||||
if (
|
||||
spec.files.some(
|
||||
(f) => f.name === selectedFile.name && f.size === selectedFile.size,
|
||||
)
|
||||
) {
|
||||
isUploadingRef.current = false;
|
||||
return prev;
|
||||
}
|
||||
|
||||
const previewUrl = URL.createObjectURL(selectedFile);
|
||||
|
||||
spec.images = [...spec.images, previewUrl];
|
||||
spec.files = [...spec.files, selectedFile];
|
||||
|
||||
return updated;
|
||||
});
|
||||
|
||||
// reset input
|
||||
input.value = "";
|
||||
setIsUploadDialogOpen(false);
|
||||
|
||||
// release lock
|
||||
setTimeout(() => {
|
||||
isUploadingRef.current = false;
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const onSubmit = async (data: z.infer<typeof formSchema>) => {
|
||||
try {
|
||||
loading();
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append("title", data.name);
|
||||
|
|
@ -370,7 +400,10 @@ export default function AddProductForm() {
|
|||
</Label>
|
||||
|
||||
{specs.map((spec, index) => (
|
||||
<div key={spec.id} className="mt-6 border-2 rounded-lg border-black p-3">
|
||||
<div
|
||||
key={spec.id}
|
||||
className="mt-6 border-2 rounded-lg border-black p-3"
|
||||
>
|
||||
<Label className="text-sm font-semibold">
|
||||
Judul Spesifikasi {index + 1}
|
||||
</Label>
|
||||
|
|
@ -456,36 +489,32 @@ export default function AddProductForm() {
|
|||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div
|
||||
className="border-2 border-dashed rounded-xl p-8 text-center cursor-pointer"
|
||||
onClick={() => document.getElementById(fileInputId)?.click()}
|
||||
>
|
||||
<div className="border-2 border-dashed rounded-xl p-8 text-center">
|
||||
<Upload className="w-10 h-10 text-gray-400 mx-auto mb-3" />
|
||||
<p className="text-sm text-gray-500">
|
||||
Klik untuk upload atau drag & drop
|
||||
Klik tombol di bawah untuk memilih file
|
||||
</p>
|
||||
<p className="text-xs text-gray-400">PNG, JPG (max 2 MB)</p>
|
||||
|
||||
<input
|
||||
id={fileInputId}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={handleFileSelected}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={handleFileSelected}
|
||||
/>
|
||||
|
||||
<DialogFooter className="flex gap-3 pt-4">
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="bg-slate-200"
|
||||
onClick={() => setIsUploadDialogOpen(false)}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => document.getElementById(fileInputId)?.click()}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="bg-teal-800 hover:bg-teal-900 text-white"
|
||||
>
|
||||
Pilih File
|
||||
|
|
|
|||
|
|
@ -159,13 +159,13 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
|
|||
setError,
|
||||
clearErrors,
|
||||
} = useForm<UserSettingSchema>(formOptions);
|
||||
const [specs, setSpecs] = useState([
|
||||
const [specs, setSpecs] = useState<
|
||||
{
|
||||
id: 1,
|
||||
title: "Jaecoo 7 SHS Teknologi dan Exterior",
|
||||
images: ["/spec1.jpg", "/spec2.jpg", "/spec3.jpg", "/spec4.jpg"],
|
||||
},
|
||||
]);
|
||||
id: number;
|
||||
title: string;
|
||||
images: string[];
|
||||
}[]
|
||||
>([]);
|
||||
|
||||
type ColorType = {
|
||||
id: number;
|
||||
|
|
@ -174,20 +174,7 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
|
|||
colorSelected: string | null;
|
||||
};
|
||||
|
||||
const [colors, setColors] = useState<ColorType[]>([
|
||||
{
|
||||
id: 1,
|
||||
name: "",
|
||||
preview: "/car-1.png",
|
||||
colorSelected: null,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "",
|
||||
preview: "/car-2.png",
|
||||
colorSelected: null,
|
||||
},
|
||||
]);
|
||||
const [colors, setColors] = useState<ColorType[]>([]);
|
||||
|
||||
const palette = [
|
||||
"#1E4E52",
|
||||
|
|
@ -297,24 +284,31 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
|
|||
setThumbnail(data.thumbnail_url);
|
||||
|
||||
// colors
|
||||
if (data.colors?.length) {
|
||||
if (Array.isArray(data.colors)) {
|
||||
setColors(
|
||||
data.colors.map((color: any, index: number) => ({
|
||||
id: index + 1,
|
||||
name: color.name || "",
|
||||
preview: color.image_url || data.thumbnail_url || "",
|
||||
colorSelected: color.name || null,
|
||||
id: color.id ?? index + 1,
|
||||
name: color.name ?? "",
|
||||
preview:
|
||||
typeof color.image_url === "string" && color.image_url.length > 0
|
||||
? color.image_url
|
||||
: "/car-default.png", // fallback aman
|
||||
colorSelected: color.name ?? null,
|
||||
})),
|
||||
);
|
||||
}
|
||||
|
||||
// specifications
|
||||
if (data.specifications?.length) {
|
||||
if (Array.isArray(data.specifications)) {
|
||||
setSpecs(
|
||||
data.specifications.map((spec: any, index: number) => ({
|
||||
id: index + 1,
|
||||
title: spec.title || "",
|
||||
images: spec.image_urls || [],
|
||||
title: spec.title ?? "",
|
||||
images: Array.isArray(spec.image_urls)
|
||||
? spec.image_urls.filter(
|
||||
(url: any) => typeof url === "string" && url.length > 0,
|
||||
)
|
||||
: [],
|
||||
})),
|
||||
);
|
||||
}
|
||||
|
|
@ -520,36 +514,44 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
|
|||
<div>
|
||||
<Label className="font-semibold text-gray-700">Warna Produk</Label>
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 md:grid-cols-4 gap-6 border-2 rounded-lg border-black p-3 ">
|
||||
{colors.map((item, index) => (
|
||||
<div key={item.id} className="space-y-3">
|
||||
<Label className="text-sm text-gray-500">
|
||||
Warna {index + 1}
|
||||
</Label>
|
||||
{colors.length === 0 ? (
|
||||
<p className="mt-3 text-sm text-gray-400 italic">
|
||||
Tidak ada data warna
|
||||
</p>
|
||||
) : (
|
||||
<div className="mt-4 grid grid-cols-1 md:grid-cols-4 gap-6 border-2 rounded-lg border-black p-3">
|
||||
{colors.map((item, index) => (
|
||||
<div key={item.id} className="space-y-3">
|
||||
<Label className="text-sm text-gray-500">
|
||||
Warna {index + 1}
|
||||
</Label>
|
||||
|
||||
{/* Preview warna */}
|
||||
<div
|
||||
className="w-12 h-12 rounded-full border"
|
||||
style={{ backgroundColor: item.colorSelected ?? "#e5e7eb" }}
|
||||
/>
|
||||
|
||||
{/* Foto mobil */}
|
||||
<div className="w-full h-[90px] border rounded-lg overflow-hidden">
|
||||
<Image
|
||||
src={item.preview}
|
||||
alt="warna"
|
||||
width={200}
|
||||
height={120}
|
||||
className="object-cover w-full h-full"
|
||||
{/* Preview warna */}
|
||||
<div
|
||||
className="w-12 h-12 rounded-full border"
|
||||
style={{
|
||||
backgroundColor: item.colorSelected || "#e5e7eb",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500 text-center">
|
||||
Foto Produk Warna {index + 1}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Foto mobil */}
|
||||
<div className="w-full h-[90px] border rounded-lg overflow-hidden">
|
||||
<Image
|
||||
src={item.preview}
|
||||
alt={`warna-${index}`}
|
||||
width={200}
|
||||
height={120}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500 text-center">
|
||||
Foto Produk Warna {index + 1}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -557,29 +559,45 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
|
|||
Spesifikasi Produk
|
||||
</Label>
|
||||
|
||||
{specs.map((spec) => (
|
||||
<div
|
||||
key={spec.id}
|
||||
className="mt-4 space-y-3 border-2 rounded-lg border-black p-3"
|
||||
>
|
||||
<Input value={spec.title} readOnly className="font-medium" />
|
||||
{specs.length === 0 ? (
|
||||
<p className="mt-3 text-sm text-gray-400 italic">
|
||||
Tidak ada spesifikasi
|
||||
</p>
|
||||
) : (
|
||||
specs.map((spec) => (
|
||||
<div
|
||||
key={spec.id}
|
||||
className="mt-4 space-y-3 border-2 rounded-lg border-black p-3"
|
||||
>
|
||||
<Input value={spec.title} readOnly className="font-medium" />
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{spec.images.map((img, i) => (
|
||||
<div key={i} className="border rounded-lg overflow-hidden">
|
||||
<Image
|
||||
src={img}
|
||||
alt="spec"
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-cover w-full h-[120px]"
|
||||
/>
|
||||
{spec.images.length === 0 ? (
|
||||
<p className="text-sm text-gray-400 italic">
|
||||
Tidak ada gambar spesifikasi
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{spec.images.map((img, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="border rounded-lg overflow-hidden"
|
||||
>
|
||||
<Image
|
||||
src={img}
|
||||
alt={`spec-${i}`}
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-cover w-full h-[120px]"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-gray-700 mb-3">
|
||||
Status Timeline
|
||||
|
|
|
|||
|
|
@ -83,56 +83,70 @@ export default function UpdateProductForm() {
|
|||
};
|
||||
|
||||
const [isUploadDialogOpen, setIsUploadDialogOpen] = useState(false);
|
||||
const [bannerFile, setBannerFile] = useState<File | null>(null);
|
||||
|
||||
const [uploadTarget, setUploadTarget] = useState<{
|
||||
type: "spec" | "color";
|
||||
index: number;
|
||||
type: "spec" | "color" | "banner";
|
||||
index?: number;
|
||||
} | null>(null);
|
||||
|
||||
const fileInputId = "file-upload-input";
|
||||
|
||||
const handleFileSelected = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const input = e.target;
|
||||
const file = input.files?.[0];
|
||||
if (!file || !uploadTarget) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const fileUrl = reader.result as string;
|
||||
const previewUrl = URL.createObjectURL(file);
|
||||
|
||||
if (uploadTarget.type === "spec") {
|
||||
setSpecs((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[uploadTarget.index].images.push(fileUrl);
|
||||
return updated;
|
||||
});
|
||||
// Store the file for upload
|
||||
if (file) {
|
||||
setSpecFiles((prev) => {
|
||||
const newMap = new Map(prev);
|
||||
const existingFiles = newMap.get(uploadTarget.index) || [];
|
||||
newMap.set(uploadTarget.index, [...existingFiles, file]);
|
||||
return newMap;
|
||||
});
|
||||
}
|
||||
}
|
||||
// ===================== SPEC =====================
|
||||
if (uploadTarget.type === "spec") {
|
||||
if (uploadTarget.index === undefined) return;
|
||||
|
||||
if (uploadTarget.type === "color") {
|
||||
setColors((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[uploadTarget.index].preview = fileUrl;
|
||||
return updated;
|
||||
});
|
||||
// Store the file for upload
|
||||
if (file) {
|
||||
setColorFiles((prev) => {
|
||||
const newMap = new Map(prev);
|
||||
newMap.set(uploadTarget.index, file);
|
||||
return newMap;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
const index = uploadTarget.index;
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
// preview
|
||||
setSpecs((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[index].images = [...updated[index].images, previewUrl];
|
||||
return updated;
|
||||
});
|
||||
|
||||
// file upload
|
||||
setSpecFiles((prev) => {
|
||||
const newMap = new Map(prev);
|
||||
const files = newMap.get(index) || [];
|
||||
newMap.set(index, [...files, file]);
|
||||
return newMap;
|
||||
});
|
||||
}
|
||||
|
||||
// ===================== COLOR =====================
|
||||
if (uploadTarget.type === "color") {
|
||||
if (uploadTarget.index === undefined) return;
|
||||
|
||||
const index = uploadTarget.index;
|
||||
|
||||
setColors((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[index].preview = previewUrl;
|
||||
return updated;
|
||||
});
|
||||
|
||||
setColorFiles((prev) => {
|
||||
const newMap = new Map(prev);
|
||||
newMap.set(index, file);
|
||||
return newMap;
|
||||
});
|
||||
}
|
||||
|
||||
// ===================== BANNER =====================
|
||||
if (uploadTarget.type === "banner") {
|
||||
setThumbnail(previewUrl);
|
||||
setBannerFile(file);
|
||||
}
|
||||
|
||||
input.value = "";
|
||||
setIsUploadDialogOpen(false);
|
||||
};
|
||||
|
||||
|
|
@ -230,6 +244,10 @@ export default function UpdateProductForm() {
|
|||
}
|
||||
});
|
||||
|
||||
if (bannerFile) {
|
||||
formData.append("file", bannerFile);
|
||||
}
|
||||
|
||||
// Specifications JSON (include image count for new files only)
|
||||
const specificationsPayload = specs.map((s, index) => {
|
||||
const newFiles = specFiles.get(index) || [];
|
||||
|
|
@ -240,7 +258,6 @@ export default function UpdateProductForm() {
|
|||
});
|
||||
formData.append("specifications", JSON.stringify(specificationsPayload));
|
||||
|
||||
// Specification images (only new files if uploaded)
|
||||
specs.forEach((_, index) => {
|
||||
const files = specFiles.get(index) || [];
|
||||
files.forEach((file) => {
|
||||
|
|
@ -301,20 +318,33 @@ export default function UpdateProductForm() {
|
|||
|
||||
<div>
|
||||
<Label className="font-semibold">Thumbnail Produk</Label>
|
||||
<div className="mt-2 w-[120px] h-[80px] rounded-lg overflow-hidden border bg-gray-100">
|
||||
{thumbnail ? (
|
||||
<Image
|
||||
src={thumbnail}
|
||||
alt="Thumbnail"
|
||||
width={120}
|
||||
height={80}
|
||||
className="object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center text-xs text-gray-400 h-full">
|
||||
No Image
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-2 flex items-center gap-4">
|
||||
<div className="w-[120px] h-[80px] rounded-lg overflow-hidden border bg-gray-100">
|
||||
{thumbnail ? (
|
||||
<Image
|
||||
src={thumbnail}
|
||||
alt="Thumbnail"
|
||||
width={120}
|
||||
height={80}
|
||||
className="object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center text-xs text-gray-400 h-full">
|
||||
No Image
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="bg-teal-800 hover:bg-teal-900 text-white"
|
||||
onClick={() => {
|
||||
setUploadTarget({ type: "banner" });
|
||||
setIsUploadDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
Upload Banner Baru
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -360,6 +390,7 @@ export default function UpdateProductForm() {
|
|||
setColors((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[index].colorSelected = colorCode;
|
||||
updated[index].name = colorCode; // ✅ sinkron ke input
|
||||
return updated;
|
||||
});
|
||||
}}
|
||||
|
|
@ -415,9 +446,16 @@ export default function UpdateProductForm() {
|
|||
Judul Spesifikasi {index + 1}
|
||||
</Label>
|
||||
<Input
|
||||
defaultValue={spec.title}
|
||||
value={spec.title}
|
||||
placeholder="Masukkan Judul Spesifikasi"
|
||||
className="mt-1"
|
||||
onChange={(e) => {
|
||||
setSpecs((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[index].title = e.target.value;
|
||||
return updated;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<Label className="font-semibold text-sm mt-4 block">
|
||||
|
|
@ -426,14 +464,42 @@ export default function UpdateProductForm() {
|
|||
|
||||
<div className="flex flex-wrap gap-4 mt-2">
|
||||
{spec.images.map((img, i) => (
|
||||
<Image
|
||||
key={i}
|
||||
src={img}
|
||||
width={120}
|
||||
height={120}
|
||||
alt="spec"
|
||||
className="rounded-lg border object-cover"
|
||||
/>
|
||||
<div key={i} className="relative">
|
||||
<Image
|
||||
src={img}
|
||||
width={120}
|
||||
height={120}
|
||||
alt="spec"
|
||||
className="rounded-lg border object-cover"
|
||||
/>
|
||||
|
||||
{/* 🔴 TOMBOL HAPUS GAMBAR */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
// hapus preview
|
||||
setSpecs((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[index].images.splice(i, 1);
|
||||
return updated;
|
||||
});
|
||||
|
||||
// hapus file baru (jika ada)
|
||||
setSpecFiles((prev) => {
|
||||
const map = new Map(prev);
|
||||
const files = map.get(index) || [];
|
||||
files.splice(i, 1);
|
||||
map.set(index, files);
|
||||
return map;
|
||||
});
|
||||
}}
|
||||
className="absolute -top-2 -right-2 bg-red-500 text-white
|
||||
rounded-full w-6 h-6 flex items-center justify-center
|
||||
text-xs hover:bg-red-600"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ import {
|
|||
approvePromotion,
|
||||
rejectPromotion,
|
||||
} from "@/service/promotion";
|
||||
import PromoEditDialog from "../dialog/promo-edit-dialog";
|
||||
|
||||
const columns = [
|
||||
{ name: "No", uid: "no" },
|
||||
|
|
@ -95,6 +96,11 @@ export default function PromotionTable() {
|
|||
const [categories, setCategories] = useState<any>([]);
|
||||
const [selectedCategories, setSelectedCategories] = useState<any>("");
|
||||
const [openDetail, setOpenDetail] = useState(false);
|
||||
const [openEditPromo, setOpenEditPromo] = useState(false);
|
||||
const [selectedEditPromoId, setSelectedEditPromoId] = useState<number | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const [selectedPromo, setPromoDetail] = useState<any>(null);
|
||||
const [selectedPromoId, setSelectedPromoId] = useState<number | null>(null);
|
||||
const [startDateValue, setStartDateValue] = useState({
|
||||
|
|
@ -474,7 +480,19 @@ export default function PromotionTable() {
|
|||
<Eye className="w-4 h-4 mr-1" /> Lihat
|
||||
</Button>
|
||||
{/* Tombol Edit */}
|
||||
|
||||
{userRoleId !== "1" && (
|
||||
<Button
|
||||
className="text-[#0F6C75] hover:bg-transparent hover:underline p-0"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedEditPromoId(item.id);
|
||||
setOpenEditPromo(true);
|
||||
}}
|
||||
>
|
||||
<CreateIconIon className="w-4 h-4 mr-1" /> Edit
|
||||
</Button>
|
||||
)}
|
||||
{/* Tombol Approve & Reject - hanya untuk admin dan status pending */}
|
||||
{/* {userRoleId === "1" && item.status_id === 1 && (
|
||||
<>
|
||||
|
|
@ -529,6 +547,15 @@ export default function PromotionTable() {
|
|||
open={openDetail}
|
||||
onOpenChange={setOpenDetail}
|
||||
/>
|
||||
<PromoEditDialog
|
||||
promoId={selectedEditPromoId}
|
||||
open={openEditPromo}
|
||||
onOpenChange={setOpenEditPromo}
|
||||
onSuccess={() => {
|
||||
setOpenEditPromo(false);
|
||||
initState(); // refresh table setelah edit
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* FOOTER PAGINATION */}
|
||||
<div className="flex items-center justify-between px-6 py-3 border-t text-sm text-gray-600">
|
||||
|
|
|
|||
|
|
@ -1,17 +1,24 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
images: {
|
||||
domains: [
|
||||
"mikulnews.com",
|
||||
"dev.mikulnews.com",
|
||||
"jaecoocihampelasbdg.com",
|
||||
"jaecookelapagading.com",
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "jaecoocihampelasbdg.com",
|
||||
pathname: "/api/**",
|
||||
},
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "jaecookelapagading.com",
|
||||
pathname: "/api/**",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
},
|
||||
|
||||
experimental: {
|
||||
optimizePackageImports: ["@ckeditor/ckeditor5-react", "react-apexcharts"],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3232,6 +3232,7 @@
|
|||
"version": "19.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
|
||||
"integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.2.2"
|
||||
}
|
||||
|
|
@ -3240,7 +3241,7 @@
|
|||
"version": "19.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
|
||||
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
|
||||
"devOptional": true,
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.2.0"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue