feat: enhance HeroSliderPage with image preview and improved file handling

src/pages/landing-hero/HeroSliderPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm, useFieldArray } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
@@ -10,6 +10,7 @@ import { LandingHeroData, HeroImage } from "./core/_models";
 import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
 import { PlusCircle, Trash2, Save } from "lucide-react";
 import { useFileUpload, useFileDelete } from "@/hooks/useFileUpload";
+import { Modal } from "@/components/ui/Modal";
 
 const heroImageSchema = yup.object({
     alt_text: yup.string().required("متن ALT الزامی است"),
@@ -28,6 +29,7 @@ const landingHeroSchema = yup.object({
 export const HeroSliderPage = () => {
     const { data, isLoading } = useLandingHero();
     const { mutate: updateHero, isPending: isSaving } = useUpdateLandingHero();
+    const [preview, setPreview] = useState<{ url: string; alt: string } | null>(null);
 
     const {
         control,
@@ -35,6 +37,7 @@ export const HeroSliderPage = () => {
         formState: { errors, isDirty, isValid },
         reset,
         setValue,
+        watch,
     } = useForm<LandingHeroData>({
         resolver: yupResolver(landingHeroSchema) as any,
         mode: "onChange",
@@ -97,35 +100,55 @@ export const HeroSliderPage = () => {
 
     return (
         <div className="p-6 max-w-4xl mx-auto">
-            <h1 className="text-2xl font-bold mb-6">مدیریت اسلایدر صفحه اصلی</h1>
+            <h1 className="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">مدیریت اسلایدر صفحه اصلی</h1>
 
             <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
                 {/* Main slide */}
                 <div className="card p-6 space-y-6">
-                    <h2 className="text-lg font-semibold">اسلاید اصلی</h2>
+                    <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">اسلاید اصلی</h2>
                     <Input
                         label="ALT Text"
                         {...control.register("main.alt_text" as const)}
                         error={(errors as any).main?.alt_text?.message}
                     />
 
-                    <FileUploader
+                    {watch("main.url") && (
-                        onUpload={handleMainFileUpload}
+                        <div className="flex items-center gap-3">
-                        onRemove={handleMainFileRemove}
+                            <img
-                        acceptedTypes={["image/*"]}
+                                src={watch("main.url") as string}
-                        maxFileSize={5 * 1024 * 1024}
+                                alt={watch("main.alt_text") as string}
-                        maxFiles={1}
+                                className="w-40 h-24 object-cover rounded border cursor-zoom-in"
-                        mode="single"
+                                onClick={() => setPreview({ url: watch("main.url") as string, alt: (watch("main.alt_text") as string) || "" })}
-                        label="تصویر اسلاید"
+                            />
-                        description="تصویر را انتخاب کنید (حداکثر 5MB)"
+                            <Button
-                        error={(errors as any).main?.url?.message}
+                                type="button"
-                    />
+                                variant="secondary"
+                                onClick={() => setValue("main.url", "", { shouldDirty: true, shouldValidate: true })}
+                            >
+                                حذف تصویر فعلی
+                            </Button>
+                        </div>
+                    )}
+
+                    {!watch("main.url") && (
+                        <FileUploader
+                            onUpload={handleMainFileUpload}
+                            onRemove={handleMainFileRemove}
+                            acceptedTypes={["image/*"]}
+                            maxFileSize={5 * 1024 * 1024}
+                            maxFiles={1}
+                            mode="single"
+                            label="تصویر اسلاید"
+                            description="تصویر را انتخاب کنید (حداکثر 5MB)"
+                            error={(errors as any).main?.url?.message}
+                        />
+                    )}
                 </div>
 
                 {/* Side slides */}
                 <div className="card p-6 space-y-6">
                     <div className="flex items-center justify-between">
-                        <h2 className="text-lg font-semibold">اسلایدهای جانبی</h2>
+                        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">اسلایدهای جانبی</h2>
                         <Button
                             type="button"
                             variant="secondary"
@@ -154,17 +177,37 @@ export const HeroSliderPage = () => {
                                 }
                             />
 
-                            <FileUploader
+                            {watch(`side.${index}.url` as const) && (
-                                onUpload={handleSideFileUpload(index)}
+                                <div className="flex items-center gap-3">
-                                onRemove={handleSideFileRemove(index)}
+                                    <img
-                                acceptedTypes={["image/*"]}
+                                        src={watch(`side.${index}.url` as const) as string}
-                                maxFileSize={5 * 1024 * 1024}
+                                        alt={(watch(`side.${index}.alt_text` as const) as string) || "preview"}
-                                maxFiles={1}
+                                        className="w-32 h-20 object-cover rounded border cursor-zoom-in"
-                                mode="single"
+                                        onClick={() => setPreview({ url: watch(`side.${index}.url` as const) as string, alt: (watch(`side.${index}.alt_text` as const) as string) || "" })}
-                                label="تصویر اسلاید"
+                                    />
-                                description="تصویر را انتخاب کنید (حداکثر 5MB)"
+                                    <Button
-                                error={(errors as any).side?.[index]?.url?.message as string | undefined}
+                                        type="button"
-                            />
+                                        variant="secondary"
+                                        onClick={() => setValue(`side.${index}.url` as const, "", { shouldDirty: true, shouldValidate: true })}
+                                    >
+                                        حذف تصویر فعلی
+                                    </Button>
+                                </div>
+                            )}
+
+                            {!watch(`side.${index}.url` as const) && (
+                                <FileUploader
+                                    onUpload={handleSideFileUpload(index)}
+                                    onRemove={handleSideFileRemove(index)}
+                                    acceptedTypes={["image/*"]}
+                                    maxFileSize={5 * 1024 * 1024}
+                                    maxFiles={1}
+                                    mode="single"
+                                    label="تصویر اسلاید"
+                                    description="تصویر را انتخاب کنید (حداکثر 5MB)"
+                                    error={(errors as any).side?.[index]?.url?.message as string | undefined}
+                                />
+                            )}
                         </div>
                     ))}
                 </div>
@@ -179,6 +222,11 @@ export const HeroSliderPage = () => {
                     </Button>
                 </div>
             </form>
+            <Modal isOpen={!!preview} onClose={() => setPreview(null)} title={preview?.alt || "مشاهده تصویر"}>
+                {preview && (
+                    <img src={preview.url} alt={preview.alt} className="max-h-[70vh] w-auto mx-auto rounded" />
+                )}
+            </Modal>
         </div>
     );
 };

src/pages/landing-hero/core/_requests.ts

@@ -11,10 +11,14 @@ import {
 } from "./_models";
 
 export const getLandingHero = async () => {
-  const response = await httpGetRequest<LandingHeroResponse>(
+  const response = await httpGetRequest<any>(
     APIUrlGenerator(API_ROUTES.GET_LANDING_HERO)
   );
-  return response.data.data;
+  const root = response.data;
+  const setting = root?.setting ?? root;
+  const data: LandingHeroData = setting?.data ??
+    root?.data ?? { main: { alt_text: "", url: "", thumbnail: "" }, side: [] };
+  return data;
 };
 
 export const updateLandingHero = async (data: LandingHeroData) => {

src/pages/product-options/product-option-form/ProductOptionFormPage.tsx

@@ -15,7 +15,7 @@ import { FormHeader, PageContainer, SectionTitle, Label } from '../../../compone
 
 const maintenanceSchema = yup.object({
     title: yup.string().required('عنوان نگهداری الزامی است'),
-    description: yup.string().required('توضیحات نگهداری الزامی است'),
+    description: yup.string(),
     content: yup.string().required('محتوای نگهداری الزامی است'),
     image: yup.string().required('تصویر نگهداری الزامی است'),
 });
@@ -28,7 +28,7 @@ const optionSchema = yup.object({
 
 const productOptionSchema = yup.object({
     title: yup.string().required('عنوان الزامی است').min(2, 'عنوان باید حداقل 2 کاراکتر باشد'),
-    description: yup.string().required('توضیحات الزامی است'),
+    description: yup.string(),
     maintenance: maintenanceSchema.required('اطلاعات نگهداری الزامی است'),
     options: yup.array().of(optionSchema).min(1, 'حداقل یک گزینه باید وارد شود').required('گزینه‌ها الزامی است'),
 });

src/pages/products/core/_requests.ts

@@ -49,8 +49,28 @@ export const getProducts = async (filters?: ProductFilters) => {
       response.data.products &&
       Array.isArray(response.data.products)
     ) {
+      // Normalize products for UI consumption
+      const normalizedProducts = response.data.products.map((p: any) => {
+        // Derive price from first variant if direct price is absent
+        const firstVariant = (p.product_variants || p.variants || [])[0] || {};
+        const price = p.price ?? firstVariant.price_amount ?? 0;
+
+        // Determine primary category
+        const primaryCategory = (p.product_categories || p.categories || [])[0];
+
+        // Map enabled boolean to status string expected by UI components
+        const status = p.status ?? (p.enabled ? "active" : "inactive");
+
+        return {
+          ...p,
+          price,
+          category: primaryCategory,
+          status,
+        };
+      });
+
       return {
-        products: response.data.products,
+        products: normalizedProducts,
         total: response.data.total,
         page: response.data.page,
         per_page: response.data.per_page,