import{useState,useEffect,useCallback}from "react"; import{Upload,Save,Trash2,Plus,X,Eye,Package,Palette,Settings,Check,AlertCircle,}from "lucide-react"; import{supabase,type PodProduct,type PodColor}from "../lib/supabase"; import TShirtMockup from "./TShirtMockup"; import ProductImageManager from "./ProductImageManager"; import OrderManager from "./OrderManager"; import "./AdminPanel.css"; const DEFAULT_SIZES = ["S","M","L","XL","XXL","XXXL"]; type ProductType = "tshirt" | "panjabi" | "beauty"; const PRODUCT_TYPES:{value:ProductType;label:string}[] = [{value: "tshirt",label: "T-Shirt",},{value: "panjabi",label: "Hand Painted Panjabi",},{value: "beauty",label: "Beauty Accessories",},]; const CATEGORY_OPTIONS: Record ={tshirt:["POD T-Shirt","Casual T-Shirt","Oversize T-Shirt","Polo T-Shirt","Free Size T-Shirt","Hand Design Custom T-Shirt",],panjabi: ["Hand Painted Panjabi","Classic Panjabi","Embroidery Panjabi","Design Panjabi",],beauty: ["Junk Jewellery","Hand Bags","Dolls & Soft Toys","Fashion Accessories","Gift & Lifestyle",],}; const SHOWS_GARMENT_MOCKUP = (type: ProductType) => type === "tshirt" || type === "panjabi"; interface ProductForm{product_type:ProductType;name:string;description:string;base_price:number;category:string;available_sizes:string[];design_front_url:string | null;design_back_url:string | null;has_back_design:boolean;print_position_x:number;print_position_y:number;print_size_width:number;print_size_height:number;selected_color_ids:string[];beauty_size:string;beauty_color:string;beauty_material:string;beauty_weight:string;beauty_stock:number;main_image_url:string | null;image_2_url:string | null;image_3_url:string | null;image_4_url:string | null;detail_image_url:string | null;is_active:boolean}const DEFAULT_FORM: ProductForm ={product_type:"tshirt",name: "",description: "Premium quality t-shirt crafted from 100% combed cotton. Soft, breathable fabric with a relaxed fit.",base_price: 650,category: "POD T-Shirt",available_sizes: DEFAULT_SIZES,design_front_url: null,design_back_url: null,has_back_design: false,print_position_x: 50,print_position_y: 40,print_size_width: 35,print_size_height: 35,selected_color_ids: [],beauty_size: "",beauty_color: "",beauty_material: "",beauty_weight: "",beauty_stock: 0,main_image_url: null,image_2_url: null,image_3_url: null,image_4_url: null,detail_image_url: null,is_active: true,}; export default function AdminPanel(){const [products,setProducts] = useState([]);const [colors,setColors] = useState([]);const [selectedProductId,setSelectedProductId] = useState(null);const [listFilter,setListFilter] = useState<"all" | ProductType>("all");const [view,setView] = useState<"products" | "orders">("products");const [loading,setLoading] = useState(true);const [uploading,setUploading] = useState(false);const [saving,setSaving] = useState(false);const [message,setMessage] = useState<{type:"success" | "error";text:string}| null>(null);const [form,setForm] = useState(DEFAULT_FORM);const loadData = useCallback(async () => {setLoading(true); const {data: prods,error: productError} = await supabase .from("pod_products") .select("*") .order("created_at",{ascending: false,}); const {data: cols,error: colorError} = await supabase .from("pod_colors") .select("*") .eq("is_active",true) .order("sort_order"); if (!productError && prods) {setProducts(prods);} if (!colorError && cols) {setColors(cols);} setLoading(false);},[]);useEffect(() => {loadData();},[loadData]);const showMessage = (type: "success" | "error",text: string) =>{setMessage({type,text,});setTimeout(() => {setMessage(null);},3000)}const loadProduct = (p: PodProduct) =>{const product = p as any;const options = product.product_options ||{}const images = product.product_images ||{}setSelectedProductId(p.id);setForm({product_type: product.product_type || "tshirt",name: product.name || "",description: product.description || "",base_price: Number(product.base_price || 0),category: product.category || CATEGORY_OPTIONS[product.product_type || "tshirt"][0],available_sizes: product.available_sizes || [],design_front_url: product.design_front_url || null,design_back_url: product.design_back_url || null,has_back_design: Boolean(product.has_back_design),print_position_x: Number(product.print_position?.x ?? 50),print_position_y: Number(product.print_position?.y ?? 40),print_size_width: Number(product.print_size?.width ?? 35),print_size_height: Number(product.print_size?.height ?? 35),selected_color_ids: [],beauty_size: options.size || "",beauty_color: options.color || "",beauty_material: options.material || "",beauty_weight: options.weight || "",beauty_stock: Number(options.stock || 0),main_image_url: images.main || null,image_2_url: images.image2 || null,image_3_url: images.image3 || null,image_4_url: images.image4 || null,detail_image_url: images.detail || null,is_active: product.is_active !== false,});loadProductColors(p.id)}const loadProductColors = async (productId: string) =>{const{data}= await supabase .from("pod_product_colors") .select("color_id") .eq("product_id",productId);if (data){setForm((current) => ({...current,selected_color_ids: data.map((item: {color_id: string}) => item.color_id),}))}}const uploadDesign = async (file: File,side: "front" | "back") =>{setUploading(true);const ext = file.name.split(".").pop() || "png";const fileName = `design-${Date.now()}-${side}.${ext}`;const{error}= await supabase.storage .from("pod-designs") .upload(fileName,file);if (error){showMessage("error",`Upload failed: ${error.message}`);setUploading(false);return}const{data:urlData}= supabase.storage .from("pod-designs") .getPublicUrl(fileName);if (side === "front"){setForm((current) => ({...current,design_front_url: urlData.publicUrl,}))}else{setForm((current) => ({...current,design_back_url: urlData.publicUrl,has_back_design: true,}))}setUploading(false);showMessage("success","Design uploaded successfully")}const uploadBeautyImage = async (file: File,field: "main" | "image2" | "image3" | "image4" | "detail") =>{setUploading(true);const ext = file.name.split(".").pop() || "jpg";const fileName = `beauty-${Date.now()}-${field}.${ext}`;const{error}= await supabase.storage .from("pod-designs") .upload(fileName,file);if (error){showMessage("error",`Image upload failed: ${error.message}`);setUploading(false);return}const{data}= supabase.storage .from("pod-designs") .getPublicUrl(fileName);const url = data.publicUrl;setForm((current) => {if (field === "main") {return {...current,main_image_url: url,};} if (field === "image2") {return {...current,image_2_url: url,};} if (field === "image3") {return {...current,image_3_url: url,};} if (field === "image4") {return {...current,image_4_url: url,};} return {...current,detail_image_url: url,};});setUploading(false);showMessage("success",`${field === "main" ? "Main" : "Product"} image uploaded`)}const handleSave = async () =>{if (!form.name.trim()){showMessage("error","Please enter Product Name");return}setSaving(true);const productOptions = form.product_type === "beauty" ?{size:form.beauty_size.trim() || null,color: form.beauty_color.trim() || null,material: form.beauty_material.trim() || null,weight: form.beauty_weight.trim() || null,stock: Number(form.beauty_stock || 0),}const productImages = form.product_type === "beauty" ?{main:form.main_image_url || null,image2: form.image_2_url || null,image3: form.image_3_url || null,image4: form.image_4_url || null,detail: form.detail_image_url || null,}: null;const payload ={product_type: form.product_type,name: form.name.trim(),description: form.description,base_price: Number(form.base_price || 0),category: form.category,available_sizes: form.product_type === "beauty" ? [] : form.available_sizes,product_options: productOptions,product_images: productImages,design_front_url: form.design_front_url,design_back_url: form.design_back_url,has_back_design: form.has_back_design,print_position:{x:form.print_position_x,y: form.print_position_y,},print_size:{width:form.print_size_width,height: form.print_size_height,},is_active: form.is_active,}if (selectedProductId){const{data,error}= await supabase .from("pod_products") .update(payload) .eq("id",selectedProductId) .select();if (error){showMessage("error",error.message);setSaving(false);return}if (!data || data.length === 0){showMessage("error","Update blocked (0 rows changed) — likely a Supabase RLS policy issue on pod_products.");setSaving(false);return}await syncProductColors(selectedProductId)}else{const{data,error}= await supabase .from("pod_products") .insert(payload) .select() .single();if (error){showMessage("error",error.message);setSaving(false);return}if (data){setSelectedProductId(data.id);await syncProductColors(data.id)}}setSaving(false);showMessage("success","Product saved successfully");await loadData()}const syncProductColors = async (productId: string) =>{await supabase .from("pod_product_colors") .delete() .eq("product_id",productId);if (form.selected_color_ids.length === 0){return}const rows = form.selected_color_ids.map((colorId) => ({product_id: productId,color_id: colorId,}));await supabase.from("pod_product_colors").insert(rows)}const deleteProduct = async (id: string) =>{const confirmed = window.confirm("Are you sure you want to delete this product?");if (!confirmed){return}const{error}= await supabase.from("pod_products").delete().eq("id",id);if (error){showMessage("error",error.message);return}if (selectedProductId === id){resetForm("tshirt")}await loadData();showMessage("success","Product deleted")}const resetForm = (type: ProductType = "tshirt") =>{const formData: ProductForm ={...DEFAULT_FORM,product_type: type,name: "",description: type === "tshirt" ? "Premium quality t-shirt crafted from 100% combed cotton. Soft, breathable fabric with a relaxed fit." : type === "panjabi" ? "Hand painted premium panjabi, crafted with care and attention to detail." : "Premium quality beauty accessory crafted for your everyday lifestyle.",base_price: type === "tshirt" ? 650 : type === "panjabi" ? 1000 : 500,category: CATEGORY_OPTIONS[type][0],available_sizes: type === "beauty" ? [] : DEFAULT_SIZES,}setForm(formData);setSelectedProductId(null)}const changeProductType = (newType: ProductType) =>{setForm((current) => ({...current,product_type: newType,category: CATEGORY_OPTIONS[newType][0],available_sizes: newType === "beauty" ? [] : DEFAULT_SIZES,description: newType === "tshirt" ? "Premium quality t-shirt crafted from 100% combed cotton. Soft, breathable fabric with a relaxed fit." : newType === "panjabi" ? "Hand painted premium panjabi, crafted with care and attention to detail." : "Premium quality beauty accessory crafted for your everyday lifestyle.",}))}const toggleColor = (colorId: string) =>{setForm((current) => ({...current,selected_color_ids: current.selected_color_ids.includes(colorId) ? current.selected_color_ids.filter((id) => id !== colorId) : [...current.selected_color_ids,colorId],}))}const toggleSize = (size: string) =>{setForm((current) => ({...current,available_sizes: current.available_sizes.includes(size) ? current.available_sizes.filter((s) => s !== size) : [...current.available_sizes,size],}))}const previewColor: PodColor = colors[0] ||{id:"preview",name: "Black",hex: "#1a1a1a",is_active: true,sort_order: 0,}const filteredProducts = listFilter === "all" ? products : products.filter((product) => ((product as any).product_type || "tshirt") === listFilter);return (
{}

Admin Panel

Manage T-Shirt,Panjabi,and Beauty Accessories products

{view === "products" && ()}
{} {message && (
{message.type === "success" ? () : ()} {message.text}
)} {} {view === "orders" ? (
) : (
{}

Products ({filteredProducts.length})

{}
{(["all","tshirt","panjabi","beauty"] as const).map((type) => ())}
{}
{loading &&

Loading...

} {!loading && filteredProducts.length === 0 && (

No products yet. Create one!

)} {filteredProducts.map((product) => ())}
{}

Color Options ({colors.length})

{}
{}

Live Preview

{SHOWS_GARMENT_MOCKUP(form.product_type) ? (<>
{colors.slice(0,6).map((color) => (
) : (
👜 Beauty & Accessories
এখানে garment mockup নেই।
নিচে সরাসরি product photos upload করুন।
)}
{}

Product Details

{}
{}
setForm((current) => ({...current,name: event.target.value,}))} placeholder="Enter product name" />
{}
setForm((current) => ({...current,base_price: Number(event.target.value),}))} />
{}