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,18 +100,37 @@ 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}
                     />
 
+                    {watch("main.url") && (
+                        <div className="flex items-center gap-3">
+                            <img
+                                src={watch("main.url") as string}
+                                alt={watch("main.alt_text") as string}
+                                className="w-40 h-24 object-cover rounded border cursor-zoom-in"
+                                onClick={() => setPreview({ url: watch("main.url") as string, alt: (watch("main.alt_text") as string) || "" })}
+                            />
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                onClick={() => setValue("main.url", "", { shouldDirty: true, shouldValidate: true })}
+                            >
+                                حذف تصویر فعلی
+                            </Button>
+                        </div>
+                    )}
+
+                    {!watch("main.url") && (
                         <FileUploader
                             onUpload={handleMainFileUpload}
                             onRemove={handleMainFileRemove}
@@ -120,12 +142,13 @@ export const HeroSliderPage = () => {
                             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,6 +177,25 @@ export const HeroSliderPage = () => {
                                 }
                             />
 
+                            {watch(`side.${index}.url` as const) && (
+                                <div className="flex items-center gap-3">
+                                    <img
+                                        src={watch(`side.${index}.url` as const) as string}
+                                        alt={(watch(`side.${index}.alt_text` as const) as string) || "preview"}
+                                        className="w-32 h-20 object-cover rounded border cursor-zoom-in"
+                                        onClick={() => setPreview({ url: watch(`side.${index}.url` as const) as string, alt: (watch(`side.${index}.alt_text` as const) as string) || "" })}
+                                    />
+                                    <Button
+                                        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)}
@@ -165,6 +207,7 @@ export const HeroSliderPage = () => {
                                     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 {
-        products: response.data.products,
+          ...p,
+          price,
+          category: primaryCategory,
+          status,
+        };
+      });
+
+      return {
+        products: normalizedProducts,
         total: response.data.total,
         page: response.data.page,
         per_page: response.data.per_page,