updated

components/Collection/InnerDetails.js

@@ -6,6 +6,7 @@ import { useRouter } from "next/router";
 import { cleanImage } from "../services/imageHandling";
 
 const InnerDetails = ({ subCategories }) => {
+ 
 
   const router = useRouter();
   const { category } = router.query;
@@ -14,14 +15,17 @@ const InnerDetails = ({ subCategories }) => {
 
   const handleChange = (e) => {
     setSort(e.target.value);
-  
   };
 
   // Safety check
   if (!subCategories || !category) return null;
-// const filteredSubCategories = subCategories.filter(
-//   (item) => item?.collection_category?.slug === "kitchens"
-// );
+  // const filteredSubCategories = subCategories.filter(
+  //   (item) => item?.collection_category?.slug === "kitchens"
+  // );
+
+  const sortedSubCategories = [...subCategories].sort((a, b) => {
+  return (Number(a.rank) || 999) - (Number(b.rank) || 999);
+});
   return (
     <section className="collection-m-section sec_padd">
       <div className="custom_container">
@@ -31,7 +35,7 @@ const InnerDetails = ({ subCategories }) => {
             <h3>
               {category
                 .split("-")
-                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                 .join(" ")}
             </h3>
           </Col>
@@ -54,20 +58,19 @@ const InnerDetails = ({ subCategories }) => {
 
         {/* Sub-category cards */}
         <Row>
-          {subCategories?.map((sub) => (
+          {sortedSubCategories?.map((sub) => (
             <Col md={6} key={sub.slug}>
               <div className="collections-item">
                 {/* <Link
                   href={sub?.show_detail_page ? `collections/${category}/${sub?.show_detail_page?.slug}` : `/collections/${category}/${sub.slug}`}
                 > */}
                 <Link
-  href={
-    sub?.show_detail_page
-      ? `/collections/${category}/${sub?.show_detail_page?.slug}`
-      : `/collections/${category}/${sub.slug}`
-  }
->
-
+                  href={
+                    sub?.show_detail_page
+                      ? `/collections/${category}/${sub?.show_detail_page?.slug}`
+                      : `/collections/${category}/${sub.slug}`
+                  }
+                >
                   <Image
                     width={868}
                     height={560}

pages/collections/[category]/[subCategory]/index.js

@@ -48,70 +48,67 @@ const SubCategoryOrProductPage = ({
         label: productData.title,
       },
     ];
-const [activeTab, setActiveTab] = useState(null);
-
-
-const productTabs = productData?.productTabs;
-useEffect(() => {
-  if (productTabs?.length > 0) {
-    setActiveTab(productTabs[0].title);
-  }
-}, [productTabs]);
+    const [activeTab, setActiveTab] = useState(null);
+
+    const productTabs = productData?.productTabs;
+    useEffect(() => {
+      if (productTabs?.length > 0) {
+        setActiveTab(productTabs[0].title);
+      }
+    }, [productTabs]);
     return (
       <>
         <Breadcrumb breadcrumbData={breadcrumbData} />
         <InnerBannerproduct productData={productData} />
-        
-        
+
         {productData?.isDoorAndPartitionsLayouts == true ? (
           <section className="details-tab-section">
             <div className="custom_containers">
               <div className="details-tab">
                 <div className="head">Products:</div>
-               <Tabs
-  activeKey={activeTab}
-  onSelect={(k) => setActiveTab(k)}
-  className="tab-01"
->
-  {productTabs?.map((tab) => (
-    <Tab
-      key={tab.id}
-      eventKey={tab.title}
-      title={tab.title}
-    >
-      <AboutInfo productData={tab?.aboutInfo} />
-
-      <CompanyOverview
-        companyOverviewData={tab?.companyOverview?.items}
-      />
-
-      <Video productData={tab?.videoSection} />
-
-      {tab?.technicalDetails?.length > 0 && (
-        <TechnicalDetails productData={tab?.technicalDetails} />
-      )}
-
-      {tab?.gallery?.length > 0 && (
-        <Gallery productData={tab?.gallery} />
-      )}
-    </Tab>
-  ))}
-</Tabs>
+                <Tabs
+                  activeKey={activeTab}
+                  onSelect={(k) => setActiveTab(k)}
+                  className="tab-01"
+                >
+                  {productTabs?.map((tab) => (
+                    <Tab key={tab.id} eventKey={tab.title} title={tab.title}>
+                      <AboutInfo productData={tab?.aboutInfo} />
+
+                      <CompanyOverview
+                        companyOverviewData={tab?.companyOverview?.items}
+                      />
+
+                      <Video productData={tab?.videoSection} />
+
+                      {tab?.technicalDetails?.length > 0 && (
+                        <TechnicalDetails productData={tab?.technicalDetails} />
+                      )}
+
+                      {tab?.gallery?.length > 0 && (
+                        <Gallery productData={tab?.gallery} />
+                      )}
+                    </Tab>
+                  ))}
+                </Tabs>
               </div>
             </div>
           </section>
-        ) : (<>
-        
-        <AboutInfo productData={productData?.aboutInfo} />
-        <CompanyOverview companyOverviewData={productData?.companyOverview} />
-        {/* <Video productData={productData?.video} /> */}
-          <Video productData={productData?.video} />
-        {productData?.technicalDetails?.length > 0 && (
-             <TechnicalDetails productData={productData?.technicalDetails} />
+        ) : (
+          <>
+            <AboutInfo productData={productData?.aboutInfo} />
+            <CompanyOverview
+              companyOverviewData={productData?.companyOverview}
+            />
+            {/* <Video productData={productData?.video} /> */}
+            <Video productData={productData?.video} />
+            {productData?.technicalDetails?.length > 0 && (
+              <TechnicalDetails productData={productData?.technicalDetails} />
             )}
-        <Gallery productData={productData?.gallery} />
-        {/* <Explore productData={productData?.explore} /> */}
-        </>)}
+            <Gallery productData={productData?.gallery} />
+            {/* <Explore productData={productData?.explore} /> */}
+          </>
+        )}
 
         {productData?.isDoorAndPartitionsLayouts && (
           <Explore productData={productData?.exploreProducts} />
@@ -124,7 +121,7 @@ useEffect(() => {
         {/* {productData?.isDoorAndPartitionsLayouts === false && (
           <AboutInfo productData={productData?.aboutInfo} />
         )} */}
-        
+
         {/* {productData?.isDoorAndPartitionsLayouts == false && (
           <CompanyOverview companyOverviewData={productData?.companyOverview} />
         )}
@@ -139,8 +136,6 @@ useEffect(() => {
           <Gallery productData={productData?.gallery} />
         )} */}
 
-        
-
         <Contact />
       </>
     );
@@ -156,8 +151,6 @@ useEffect(() => {
 
   const subCategoryData = products[0]?.collection_sub_category;
 
- 
-
   const breadcrumbData = [
     // { href: "/", label: "Home" },
     { href: "/", label: "Collections" },
@@ -189,7 +182,6 @@ export default SubCategoryOrProductPage;
 export async function getServerSideProps({ params }) {
   try {
     const { subCategory } = params;
- 
 
     /* 1️⃣ Check if this slug is a PRODUCT */
     const productCheck = await getCollectionDetailCategoryData(subCategory);
@@ -229,13 +221,9 @@ export async function getServerSideProps({ params }) {
       query,
     );
 
-  
-
     const allProducts = response?.data || [];
     const products = allProducts;
 
-  
-
     // const allProducts = await getCollectionDetailCategoryData();
     const categoriesSub = await getCollectionSubCategoryData();
     const activeSubCategory =