allow caca to test and allow collection arragment based on last updated

src/App.js

 import { useSelector, useDispatch } from 'react-redux';
 import Collection from './pages/Collection';
 import customerService from './services/CustomerService';
+import Maintainance from './pages/Maintainance';
 
 const isEmptyObject = (obj) => Object.keys(obj).length === 0 && obj.constructor === Object;
 
       <Navbar />
       <BrowserRouter>
         <Routes>
-          <Route path='/' element={<Home />} />
+          <Route path='/' element={<Maintainance />} />
+          <Route path='/cacatest' element={<Home />} />
           <Route path='/login' element={<Login />} />
 
           <Route path='products'>

src/components/Navbar/Navbar.jsx

   return data.map(item => {
     // Use a Map to store unique collection titles with their corresponding image
     const uniqueCollectionsMap = new Map();
-
-    item.collection.forEach(({ title, image }) => {
+    item.collection.forEach(({ title, image, updatedAt }) => {
       if (!uniqueCollectionsMap.has(title)) {
-        uniqueCollectionsMap.set(title, { title, image });
+        uniqueCollectionsMap.set(title, { title, image, updatedAt });
       }
     });
 
     }
   };
 
-  const displayCollectionList = (collection, productType) => {
+  const displayCollectionList = (collection = [], productType) => {
+
+    
+    collection = collection.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt) )
+    console.log(collection)
+    debugger
+
     setDisplayCollection([])
     setTimeout(() => {
       setDisplayCollection({

src/index.js

 
 // JS MODULE STUFF
 
-import Maintainance from './pages/Maintainance';
 
 /**
  * NOTE: Dear future programmer of this project, before you judge me on how fucked up this codebase is, I already take everything into consideration and 
  * this code is really the most spegatthi that you'll ever seen, I only have 2 weeks to figure everything out
  * and somehow I don't have time to refactor everything since the client and management want this project to be done as soon as possible
  * with that in mind, if you have free time, do help me refactor everything. I know I should be the one doing it, but it seems I don't have time to do it
- * and my mind is already elsewhere. I pray that you'll have the perservernce to deal with the refactor and wish you the best of luck, you'll might need all of it
+* and my mind is already elsewhere. I pray that you'll have the perservernce to deal with the refactor and wish you the best of luck, you'll might need all of it
  * TLDR: to much things to do, to little time time to refactor
  */
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <Provider store={store}>
-    {/* <App /> */}
-    <Maintainance/>
+    <App />
   </Provider>
 );
 

src/pages/Maintainance.jsx

             sx={{
                 height:"100vh",
                 width:"100%",
-                display:"flex"
+                display:"flex",
+                position:"absolute",
+                zIndex:99999
             }}
         >
             <img src={maintananceIMage} style={{width:"100%", margin:"auto auto"}} />

src/services/ProductService.js

               image {
                 url
               }
+              updatedAt
             }
           }
           variants(first: 200) {