updated

components/Collection/InnerDetails.js

@@ -7,6 +7,7 @@ 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,7 +58,7 @@ const InnerDetails = ({ subCategories }) => {
 
         {/* Sub-category cards */}
         <Row>
-          {subCategories?.map((sub) => (
+          {sortedSubCategories?.map((sub) => (
             <Col md={6} key={sub.slug}>
               <div className="collections-item">
                 {/* <Link
@@ -66,8 +70,7 @@ const InnerDetails = ({ subCategories }) => {
                       ? `/collections/${category}/${sub?.show_detail_page?.slug}`
                       : `/collections/${category}/${sub.slug}`
                   }
->
-
+                >
                   <Image
                     width={868}
                     height={560}

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

@@ -48,21 +48,19 @@ const SubCategoryOrProductPage = ({
         label: productData.title,
       },
     ];
-const [activeTab, setActiveTab] = useState(null);
+    const [activeTab, setActiveTab] = useState(null);
 
-
-const productTabs = productData?.productTabs;
-useEffect(() => {
+    const productTabs = productData?.productTabs;
+    useEffect(() => {
       if (productTabs?.length > 0) {
         setActiveTab(productTabs[0].title);
       }
-}, [productTabs]);
+    }, [productTabs]);
     return (
       <>
         <Breadcrumb breadcrumbData={breadcrumbData} />
         <InnerBannerproduct productData={productData} />
 
-        
         {productData?.isDoorAndPartitionsLayouts == true ? (
           <section className="details-tab-section">
             <div className="custom_containers">
@@ -72,13 +70,9 @@ useEffect(() => {
                   activeKey={activeTab}
                   onSelect={(k) => setActiveTab(k)}
                   className="tab-01"
->
-  {productTabs?.map((tab) => (
-    <Tab
-      key={tab.id}
-      eventKey={tab.title}
-      title={tab.title}
                 >
+                  {productTabs?.map((tab) => (
+                    <Tab key={tab.id} eventKey={tab.title} title={tab.title}>
                       <AboutInfo productData={tab?.aboutInfo} />
 
                       <CompanyOverview
@@ -96,14 +90,16 @@ useEffect(() => {
                       )}
                     </Tab>
                   ))}
-</Tabs>
+                </Tabs>
               </div>
             </div>
           </section>
-        ) : (<>
-        
+        ) : (
+          <>
             <AboutInfo productData={productData?.aboutInfo} />
-        <CompanyOverview companyOverviewData={productData?.companyOverview} />
+            <CompanyOverview
+              companyOverviewData={productData?.companyOverview}
+            />
             {/* <Video productData={productData?.video} /> */}
             <Video productData={productData?.video} />
             {productData?.technicalDetails?.length > 0 && (
@@ -111,7 +107,8 @@ useEffect(() => {
             )}
             <Gallery productData={productData?.gallery} />
             {/* <Explore productData={productData?.explore} /> */}
-        </>)}
+          </>
+        )}
 
         {productData?.isDoorAndPartitionsLayouts && (
           <Explore productData={productData?.exploreProducts} />
@@ -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" },
@@ -190,7 +183,6 @@ 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 =