update,

01_Requirements/REQ0050/references/ionic-react-whatsapp-clone-main/src/pages/Chat.js

@@ -77,12 +77,12 @@ const Chat = () => {
   const [toastMessage, setToastMessage] = useState("");
 
   //  Refs
-  const contentRef = useRef();
+  const contentRef = useRef(null);
   const swiperRefs = useRef([]);
-  const textareaRef = useRef();
-  const sideRef = useRef();
-  const sendRef = useRef();
-  const replyToAnimationRef = useRef();
+  const textareaRef = useRef(null);
+  const sideRef = useRef(null);
+  const sendRef = useRef(null);
+  const replyToAnimationRef = useRef(null);
 
   const actionSheetButtons = [
     {
@@ -104,7 +104,7 @@ const Chat = () => {
           icon: alertOutline,
           handler: () =>
             toaster(
-              "I haven't implemented unsend :) Simple store update though",
+              "I haven't implemented unsend :) Simple store update though"
             ),
         },
     {
@@ -165,11 +165,11 @@ const Chat = () => {
     const chatMessageID = elementID.includes("chatText")
       ? parseInt(elementID.replace("chatText_", ""))
       : elementID.includes("chatTime")
-        ? parseInt(elementID.replace("chatTime_", ""))
-        : parseInt(elementID.replace("chatBubble_", ""));
+      ? parseInt(elementID.replace("chatTime_", ""))
+      : parseInt(elementID.replace("chatBubble_", ""));
 
     const chatMessage = chat.filter(
-      (message) => parseInt(message.id) === parseInt(chatMessageID),
+      (message) => parseInt(message.id) === parseInt(chatMessageID)
     )[0];
 
     setActionMessage(chatMessage);
@@ -278,7 +278,7 @@ const Chat = () => {
         replyToMessage,
         replyToMessage ? replyToMessage.id : false,
         image,
-        imagePath,
+        imagePath
       );
       setMessage("");
 
@@ -329,7 +329,7 @@ const Chat = () => {
               fill="clear"
               onClick={() =>
                 toaster(
-                  "As this is a UI only, video calling wouldn't work here.",
+                  "As this is a UI only, video calling wouldn't work here."
                 )
               }
             >
@@ -352,7 +352,7 @@ const Chat = () => {
         {chat.map((message, index) => {
           const repliedMessage = chat.filter(
             (subMessage) =>
-              parseInt(subMessage.id) === parseInt(message.replyID),
+              parseInt(subMessage.id) === parseInt(message.replyID)
           )[0];
 
           return (
@@ -360,7 +360,9 @@ const Chat = () => {
               ref={(ref) => (swiperRefs.current[index] = ref)}
               id={`chatBubble_${message.id}`}
               key={index}
-              className={`chat-bubble ${message.sent ? "bubble-sent" : "bubble-received"}`}
+              className={`chat-bubble ${
+                message.sent ? "bubble-sent" : "bubble-received"
+              }`}
               {...longPressEvent}
             >
               <div id={`chatText_${message.id}`}>

01_Requirements/REQ0050/references/ionic-react-whatsapp-clone-main/src/pages/Chats.js

@@ -22,7 +22,7 @@ import { useRef } from "react";
 import ContactModal from "../components/ContactModal";
 
 const Chats = () => {
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const contacts = ContactStore.useState(getContacts);
   const latestChats = ChatStore.useState(getChats);
 
@@ -43,7 +43,7 @@ const Chats = () => {
         contacts
           .filter((c) => c.id === chat.contact_id)[0]
           .name.toLowerCase()
-          .includes(searchTermLower),
+          .includes(searchTermLower)
       );
       setResults(newResults);
     } else {

03_source/mobile/.prettierrc

@@ -3,5 +3,28 @@
   "semi": true,
   "singleQuote": true,
   "trailingComma": "es5",
-  "printWidth": 100
-}
+  "printWidth": 100,
+  "overrides": [
+    {
+      "files": "src/App.tsx",
+      "options": {
+        "printWidth": 160
+      }
+    },
+    {
+      "files": "src/routes/*",
+      "options": {
+        "printWidth": 160
+      }
+    },
+    {
+      "files": [
+        "*.html",
+        "legacy/**/*.js"
+      ],
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
+}

03_source/mobile/package.json

@@ -18,6 +18,7 @@
     "@hookform/resolvers": "^4.1.3",
     "@ionic/react": "^8.5.0",
     "@ionic/react-router": "^8.5.0",
+    "@ionic/storage": "^4.0.0",
     "@mdx-js/react": "^3.1.0",
     "@react-hook/window-size": "^3.1.1",
     "@types/leaflet": "^1.9.17",
@@ -29,10 +30,12 @@
     "pigeon-maps": "^0.22.1",
     "pullstate": "^1",
     "react": "19.0.0",
+    "react-canvas-draw": "^1.2.1",
     "react-color": "^2.19.3",
     "react-confetti": "^6.4.0",
     "react-dom": "19.0.0",
     "react-hook-form": "^7.55.0",
+    "react-iconly": "^2.2.10",
     "react-leaflet": "^5.0.0",
     "react-markdown": "^10.1.0",
     "react-qr-code": "^2.0.15",

03_source/mobile/public/assets/DemoReactAddToCart/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/DemoReactLogin/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/DemoReactProfileDashboardUi/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/blue.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "blue",
+	"tab_bar_background_color": "blue",
+    "toolbar_color": "",
+	"tab_bar_color": "",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "",
+    "light_color": "",
+    
+    "main_color_tint": "",
+    "main_color_shade": "",
+
+    "light_color_tint": "",
+    "light_color_shade": ""
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/coffeebrown.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#5f361e",
+	"tab_bar_background_color": "#5f361e",
+    "toolbar_color": "#d1bfb5",
+	"tab_bar_color": "#886551",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "#5f361e",
+    "light_color": "#886551",
+    
+    "main_color_tint": "#855a41",
+    "main_color_shade": "#57331e",
+
+    "light_color_tint": "#9c7d6b",
+    "light_color_shade": "#61412f"
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/earthytones.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#c4b0c4",
+	"tab_bar_background_color": "#c4b0c4",
+    "toolbar_color": "#5c4153",
+	"tab_bar_color": "#917788",
+    "tab_bar_activated_color": "#5c4153",
+    
+    "main_color": "#5c4153",
+    "light_color": "#917788",
+    
+    "main_color_tint": "#6b5463",
+    "main_color_shade": "#4d3545",
+
+    "light_color_tint": "#a893a1",
+    "light_color_shade": "#74606d"
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/fireyred.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#c93608",
+	"tab_bar_background_color": "#c93608",
+    "toolbar_color": "",
+	"tab_bar_color": "#852506",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "#c93608",
+    "light_color": "#c95834",
+    
+    "main_color_tint": "#aa614a",
+    "main_color_shade": "#692611",
+
+    "light_color_tint": "#d67151",
+    "light_color_shade": "#a85439"
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/green.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "green",
+	"tab_bar_background_color": "green",
+    "toolbar_color": "",
+	"tab_bar_color": "",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "",
+    "light_color": "",
+    
+    "main_color_tint": "",
+    "main_color_shade": "",
+
+    "light_color_tint": "",
+    "light_color_shade": ""
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/leafygreen.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#336b36",
+	"tab_bar_background_color": "#336b36",
+    "toolbar_color": "white",
+	"tab_bar_color": "#1c421d",
+    "tab_bar_activated_color": "white",
+    
+    "main_color": "#336b36",
+    "light_color": "#517953",
+    
+    "main_color_tint": "#497a4b",
+    "main_color_shade": "#305832",
+
+    "light_color_tint": "#738574",
+    "light_color_shade": "#485849"
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/moodyblue.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#7baec7",
+	"tab_bar_background_color": "#7baec7",
+    "toolbar_color": "",
+	"tab_bar_color": "#49758b",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "#7baec7",
+    "light_color": "#90bbcf",
+    
+    "main_color_tint": "#96c0d5",
+    "main_color_shade": "#6b93a7",
+
+    "light_color_tint": "#c3e2f1",
+    "light_color_shade": "#89aec0"
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/peelyorange.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#fd8f38",
+	"tab_bar_background_color": "#fd8f38",
+    "toolbar_color": "#815208",
+	"tab_bar_color": "#ffb67c",
+    "tab_bar_activated_color": "#815208",
+    
+    "main_color": "#e49200",
+    "light_color": "#ffb67c",
+    
+    "main_color_tint": "#e6ae4b",
+    "main_color_shade": "#b4780c",
+
+    "light_color_tint": "#fad4b6",
+    "light_color_shade": "#ff9c4e"
+}

03_source/mobile/public/assets/DemoReactProfileDashboardUi/themes/red.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "red",
+	"tab_bar_background_color": "red",
+    "toolbar_color": "",
+	"tab_bar_color": "",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "",
+    "light_color": "",
+    
+    "main_color_tint": "",
+    "main_color_shade": "",
+
+    "light_color_tint": "",
+    "light_color_shade": ""
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/blue.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "blue",
+	"tab_bar_background_color": "blue",
+    "toolbar_color": "",
+	"tab_bar_color": "",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "",
+    "light_color": "",
+    
+    "main_color_tint": "",
+    "main_color_shade": "",
+
+    "light_color_tint": "",
+    "light_color_shade": ""
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/coffeebrown.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#5f361e",
+	"tab_bar_background_color": "#5f361e",
+    "toolbar_color": "#d1bfb5",
+	"tab_bar_color": "#886551",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "#5f361e",
+    "light_color": "#886551",
+    
+    "main_color_tint": "#855a41",
+    "main_color_shade": "#57331e",
+
+    "light_color_tint": "#9c7d6b",
+    "light_color_shade": "#61412f"
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/earthytones.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#c4b0c4",
+	"tab_bar_background_color": "#c4b0c4",
+    "toolbar_color": "#5c4153",
+	"tab_bar_color": "#917788",
+    "tab_bar_activated_color": "#5c4153",
+    
+    "main_color": "#5c4153",
+    "light_color": "#917788",
+    
+    "main_color_tint": "#6b5463",
+    "main_color_shade": "#4d3545",
+
+    "light_color_tint": "#a893a1",
+    "light_color_shade": "#74606d"
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/fireyred.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#c93608",
+	"tab_bar_background_color": "#c93608",
+    "toolbar_color": "",
+	"tab_bar_color": "#852506",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "#c93608",
+    "light_color": "#c95834",
+    
+    "main_color_tint": "#aa614a",
+    "main_color_shade": "#692611",
+
+    "light_color_tint": "#d67151",
+    "light_color_shade": "#a85439"
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/green.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "green",
+	"tab_bar_background_color": "green",
+    "toolbar_color": "",
+	"tab_bar_color": "",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "",
+    "light_color": "",
+    
+    "main_color_tint": "",
+    "main_color_shade": "",
+
+    "light_color_tint": "",
+    "light_color_shade": ""
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/leafygreen.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#336b36",
+	"tab_bar_background_color": "#336b36",
+    "toolbar_color": "white",
+	"tab_bar_color": "#1c421d",
+    "tab_bar_activated_color": "white",
+    
+    "main_color": "#336b36",
+    "light_color": "#517953",
+    
+    "main_color_tint": "#497a4b",
+    "main_color_shade": "#305832",
+
+    "light_color_tint": "#738574",
+    "light_color_shade": "#485849"
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/moodyblue.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#7baec7",
+	"tab_bar_background_color": "#7baec7",
+    "toolbar_color": "",
+	"tab_bar_color": "#49758b",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "#7baec7",
+    "light_color": "#90bbcf",
+    
+    "main_color_tint": "#96c0d5",
+    "main_color_shade": "#6b93a7",
+
+    "light_color_tint": "#c3e2f1",
+    "light_color_shade": "#89aec0"
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/peelyorange.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "#fd8f38",
+	"tab_bar_background_color": "#fd8f38",
+    "toolbar_color": "#815208",
+	"tab_bar_color": "#ffb67c",
+    "tab_bar_activated_color": "#815208",
+    
+    "main_color": "#e49200",
+    "light_color": "#ffb67c",
+    
+    "main_color_tint": "#e6ae4b",
+    "main_color_shade": "#b4780c",
+
+    "light_color_tint": "#fad4b6",
+    "light_color_shade": "#ff9c4e"
+}

03_source/mobile/public/assets/DemoReactThemeSwitcher/themes/red.json

@@ -0,0 +1,16 @@
+{
+    "toolbar_background_color": "red",
+	"tab_bar_background_color": "red",
+    "toolbar_color": "",
+	"tab_bar_color": "",
+    "tab_bar_activated_color": "",
+    
+    "main_color": "",
+    "light_color": "",
+    
+    "main_color_tint": "",
+    "main_color_shade": "",
+
+    "light_color_tint": "",
+    "light_color_shade": ""
+}

03_source/mobile/public/assets/DemoSkeletonText/shapes.svg

@@ -0,0 +1 @@
+<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

03_source/mobile/src/App.tsx

@@ -54,49 +54,34 @@ import Tutorial from './pages/Tutorial';
 import HomeOrTutorial from './components/HomeOrTutorial';
 import { Schedule } from './models/Schedule';
 import RedirectToLogin from './components/RedirectToLogin';
-import EventDetail from './pages/EventDetail';
-import EventList from './pages/EventList';
-import MemberProfile from './pages/MemberProfile';
-import Settings from './pages/Settings';
-import NotImplemented from './pages/NotImplemented';
-import ChangeLanguage from './pages/ChangeLanguage';
-import ServiceAgreement from './pages/ServiceAgreement';
-import paths from './paths';
-import PrivacyAgreement from './pages/PrivacyAgreement';
 import AppRoute from './AppRoute';
 //
 // TODO: resume DemoReactShop
 // import DemoReactShop from './pages/DemoReactShop';
-import DemoWeatherApp from './pages/DemoWeatherApp';
-import DemoClubHouse from './pages/DemoClubHouse';
-import DemoScoreBoard from './pages/DemoScoreBoard';
-import DemoQuoteApp from './pages/DemoQuoteApp';
-import DemoQrScanner from './pages/DemoQrScanner';
+
+// TODO: remove obsoleted DemoWeatherApp
+// import DemoWeatherApp from './pages/DemoWeatherApp';
+
 // DemoShopAppUi
-import DemoShopAppUi from './pages/DemoShopAppUi';
 // DemoDictionaryApp
-import DemoDictionaryApp from './pages/DemoDictionaryApp';
 // demo-recipe-app
-import DemoRecipeApp from './pages/DemoRecipeApp';
 
 // DemoSlidingProfile
-import DemoSlidingProfile from './pages/DemoSlidingProfile';
 
 // DemoQuizApp
-import DemoQuizApp from './pages/DemoQuizApp';
-import DemoBlogPostUi from './pages/DemoBlogPostUi';
-import DemoReactTravelApp from './pages/DemoReactTravelApp';
-import DemoPinterestFloatingTabBar from './pages/DemoPinterestFloatingTabBar';
-import DemoRestaurantFinder from './pages/DemoRestaurantFinder';
-import DemoReactOverlayHooks from './pages/DemoReactOverlayHooks';
-import DemoReactSwitchTabs from './pages/DemoReactSwitchTabs';
-import DemoReactPollApp from './pages/DemoReactPollApp';
-import DemoReactWhatsAppClone from './pages/DemoReactWhatsAppClone';
-import Demo2FaExample from './pages/Demo2FaExample';
-import DemoAccordionTutorial from './pages/DemoAccordionTutorial';
-import DemoBankingUi from './pages/DemoBankingUi';
-import DemoCapacitorGoogleMapsTutorial from './pages/DemoCapacitorGoogleMapsTutorial';
-import DemoColorTutorial from './pages/DemoColorTutorial';
+
+//
+// import DemoReactMarvelApp from './pages/DemoReactMarvelApp';
+// import DemoReactOnboardingUI from './pages/DemoReactOnboardingUI';
+// import DemoReactTabsMenusCustom from './pages/DemoReactTabsMenusCustom';
+// import DemoReactThemeSwitcher from './pages/DemoReactThemeSwitcher';
+// import DemoSkeletonText from './pages/DemoSkeletonText';
+// import DemoStickyBottomSheetExample from './pages/DemoStickyBottomSheetExample';
+// import DemoStorageExample from './pages/DemoStorageExample';
+// import DemoSwiperjsTutorial from './pages/DemoSwiperjsTutorial';
+// TODO: SCSS of this directory will alter the main page
+import AppDemoRoute from './routes/DemoRoute';
+import Settings from './pages/Settings';
 
 setupIonicReact();
 
@@ -122,14 +107,7 @@ interface DispatchProps {
 
 interface IonicAppProps extends StateProps, DispatchProps {}
 
-const IonicApp: React.FC<IonicAppProps> = ({
-  darkMode,
-  schedule,
-  setIsLoggedIn,
-  setUsername,
-  loadConfData,
-  loadUserData,
-}) => {
+const IonicApp: React.FC<IonicAppProps> = ({ darkMode, schedule, setIsLoggedIn, setUsername, loadConfData, loadUserData }) => {
   useEffect(() => {
     loadUserData();
     loadConfData();
@@ -153,98 +131,28 @@ const IonicApp: React.FC<IonicAppProps> = ({
             <AppRoute />
 
             <Route path="/tabs" render={() => <MainTabs />} />
-            <Route path={paths.DEMO_WEATHER_APP} render={() => <DemoWeatherApp />} />
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
+
+            <AppDemoRoute />
+
             {/*  */}
 
-            <Route path={paths.DEMO_ACCORDION_TUTORIAL} render={() => <DemoAccordionTutorial />} />
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-            {/*  */}
-
-            <Route path={paths.DEMO_BANKING_UI} render={() => <DemoBankingUi />} />
-            <Route
-              path={paths.DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL}
-              render={() => <DemoCapacitorGoogleMapsTutorial />}
-            />
-
-            <Route path={paths.DEMO_COLOR_TUTORIAL} render={() => <DemoColorTutorial />} />
-
-            {/*
-              <Route path={paths.DEMO_ECOMMERCE_EXAMPLE} render={() => <DemoEcommerceExample />} />
-              <Route path={paths.DEMO_FACEBOOK_CLONE} render={() => <DemoFacebookClone />} />
-              <Route path={paths.DEMO_FAST_FOOD_APP} render={() => <DemoFastFoodApp />} />
-              <Route path={paths.DEMO_FLOATING_TABS} render={() => <DemoFloatingTabs />} />
-              <Route path={paths.DEMO_INSTAGRAM_CLONE} render={() => <DemoInstagramClone />} />
-              <Route path={paths.DEMO_KANBAN_BOARD} render={() => <DemoKanbanBoard />} />
-              <Route path={paths.DEMO_ORDERING_APP} render={() => <DemoOrderingApp />} />
-              <Route path={paths.DEMO_PROFILE_EXAMPLE} render={() => <DemoProfileExample />} />
-              <Route path={paths.DEMO_PULLSTATE_TUTORIAL} render={() => <DemoPullstateTutorial />} />
-              <Route path={paths.DEMO_REACT_ADD_TO_CART} render={() => <DemoReactAddToCart />} />
-              <Route path={paths.DEMO_REACT_CALCULATOR} render={() => <DemoReactCalculator />} />
-              <Route path={paths.DEMO_REACT_DRAWING_CANVAS} render={() => <DemoReactDrawingCanvas />} />
-              <Route path={paths.DEMO_REACT_HOOK_FORM_EXAMPLE} render={() => <DemoReactHookFormExample />} />
-              <Route path={paths.DEMO_REACT_ITEM_LIST} render={() => <DemoReactItemList />} />
-              <Route path={paths.DEMO_REACT_LIFECYCLES} render={() => <DemoReactLifecycles />} />
-              <Route path={paths.DEMO_REACT_LOGIN} render={() => <DemoReactLogin />} />
-              <Route path={paths.DEMO_REACT_MARVEL_APP} render={() => <DemoReactMarvelApp />} />
-              <Route path={paths.DEMO_REACT_MOVIE_APP_WITH_ALGOLIA} render(() => <DemoReactMovieAppWithAlgolia />} />
-              <Route path={paths.DEMO_REACT_NOTES} render={() => <DemoReactNotes />} />
-              <Route path={paths.DEMO_REACT_ONBOARDING_UI} render={() => <DemoReactOnboardingUI />} />
-              <Route path={paths.DEMO_REACT_PROFILE_DASHBOARD_UI} render(() => <DemoReactProfileDashboardUI />} />
-              <Route path={paths.DEMO_REACT_QR_CODE} render={() => <DemoReactQRCode />} />
-              <Route path={paths.DEMO_REACT_QUOTES} render(() => <DemoReactQuotes />} />
-              <Route path={paths.DEMO_REACT_SHOP_UI} render(() => <DemoReactShopUI />} />
-              <Route path={paths.DEMO_REACT_TABS_MENUS_CUSTOM} render(() => <DemoReactTabsMenusCustom />} />
-              <Route path={paths.DEMO_REACT_THEME_SWITCHER} render(() => <DemoReactThemeSwitcher />} />
-              <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render(() => <DemoReactWhatsAppClone />} />
-              <Route path={paths.DEMO_SKELETON_TEXT} render(() => <DemoSkeletonText />} />
-              <Route path={paths.DEMO_STICKY_BOTTOM_SHEET_EXAMPLE} render(() => <DemoStickyBottomSheetExample />} />
-              <Route path={paths.DEMO_STORAGE_EXAMPLE} render(() => <DemoStorageExample />} />
-              <Route path={paths.DEMO_SWIPERJS_TUTORIAL} render(() => <DemoSwiperjsTutorial />} />
-              <Route path={paths.DEMO_WEATHER_APP_UI} render(() => <DemoWeatherAppUI />} />
-               */}
-
-            <Route path={paths.DEMO_2FA_EXAMPLE} render={() => <Demo2FaExample />} />
-
-            {/* have problemx` */}
-            {/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
-
-            <Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />
-
-            <Route path={paths.DEMO_BLOG_POST_UI} render={() => <DemoBlogPostUi />} />
-            <Route path={paths.DEMO_CLUB_HOUSE} render={() => <DemoClubHouse />} />
-            <Route path={paths.DEMO_DICTIONARY_APP} render={() => <DemoDictionaryApp />} />
-            <Route
-              path={paths.DEMO_PINTEREST_FLOATING_TAB_BAR}
-              render={() => <DemoPinterestFloatingTabBar />}
-            />
-            <Route path={paths.DEMO_QR_SCANNER} render={() => <DemoQrScanner />} />
-            <Route path={paths.DEMO_QUIZ_APP} render={() => <DemoQuizApp />} />
-            <Route path={paths.DEMO_QUOTE_APP} render={() => <DemoQuoteApp />} />
-            <Route path={paths.DEMO_REACT_OVERLAY_HOOKS} render={() => <DemoReactOverlayHooks />} />
-            <Route path={paths.DEMO_REACT_POLL_APP} render={() => <DemoReactPollApp />} />
+            {/* TODO: need update to @capacitor/barcode-scanner */}
+            {/* <Route path={paths.DEMO_REACT_QR_CODE} render={() => <DemoReactQrCode />} /> */}
 
             {/* TODO: resume DemoReactShop */}
             {/* <Route path={paths.DEMO_REACT_SHOP} render={() => <DemoReactShop />} /> */}
 
-            <Route path={paths.DEMO_REACT_SWITCH_TABS} render={() => <DemoReactSwitchTabs />} />
-            <Route path={paths.DEMO_REACT_TRAVEL_APP} render={() => <DemoReactTravelApp />} />
-            <Route path={paths.DEMO_RECIPE_APP} render={() => <DemoRecipeApp />} />
-            <Route path={paths.DEMO_RESTAURANT_FINDER} render={() => <DemoRestaurantFinder />} />
-            <Route path={paths.DEMO_SCORE_BOARD} render={() => <DemoScoreBoard />} />
-            <Route path={paths.DEMO_SHOP_APP_UI} render={() => <DemoShopAppUi />} />
-            <Route path={paths.DEMO_SLIDING_PROFILE} render={() => <DemoSlidingProfile />} />
+            {/* have problemx` */}
+            {/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
+
+            {/* TODO: scss will alter the main page,   */}
+            {/* <Route path={paths.DEMO_REACT_MARVEL_APP} render={() => <DemoReactMarvelApp />} /> */}
+
+            {/* TODO: update ionslide */}
+            {/* <Route path={paths.DEMO_REACT_ONBOARDING_UI} render={() => <DemoReactOnboardingUI />} /> */}
+
+            {/* TODO: place a whatsapp clone */}
+            {/* <Route path={paths.DEMO_REACT_WHATSAPP_CLONE} render={() => <DemoReactWhatsAppClone />} /> */}
 
             <Route path="/account" component={Account} />
             <Route path="/login" component={Login} />
@@ -253,6 +161,7 @@ const IonicApp: React.FC<IonicAppProps> = ({
             <Route path="/signup" component={Signup} />
             <Route path="/support" component={Support} />
             <Route path="/tutorial" component={Tutorial} />
+            <Route path="/settings" component={Settings} />
 
             <Route
               path="/logout"

03_source/mobile/src/AppRoute.tsx

@@ -6,7 +6,7 @@ import { Route } from 'react-router';
 import NotImplemented from './pages/NotImplemented';
 import EventDetail from './pages/EventDetail';
 import MemberProfile from './pages/MemberProfile';
-import paths from './paths';
+import PATHS from './PATHS';
 import Settings from './pages/Settings';
 import ChangeLanguage from './pages/ChangeLanguage';
 import ServiceAgreement from './pages/ServiceAgreement';
@@ -28,10 +28,10 @@ const AppRoute: React.FC = () => {
       {/* <Route path="/tabs/speakers/:id" component={SpeakerDetail} exact={true} /> */}
 
       {/*  */}
-      <Route exact={true} path={paths.SETTINGS} component={Settings} />
-      <Route exact={true} path={paths.CHANGE_LANGUAGE} component={ChangeLanguage} />
-      <Route exact={true} path={paths.SERVICE_AGREEMENT} component={ServiceAgreement} />
-      <Route exact={true} path={paths.PRIVACY_AGREEMENT} component={PrivacyAgreement} />
+      <Route exact={true} path={PATHS.SETTINGS} component={Settings} />
+      <Route exact={true} path={PATHS.CHANGE_LANGUAGE} component={ChangeLanguage} />
+      <Route exact={true} path={PATHS.SERVICE_AGREEMENT} component={ServiceAgreement} />
+      <Route exact={true} path={PATHS.PRIVACY_AGREEMENT} component={PrivacyAgreement} />
     </>
   );
 };

03_source/mobile/src/PATHS.ts

@@ -0,0 +1,81 @@
+const PATHS = {
+  NOT_IMPLEMENTED: '/not_implemented',
+  SETTINGS: '/settings',
+  CHANGE_LANGUAGE: '/change_language',
+  SERVICE_AGREEMENT: '/service_agreement',
+  PRIVACY_AGREEMENT: '/privacy_agreement',
+  SIGN_IN: '/mylogin',
+  //
+  ORDER_DETAIL: '/order_detail/:id',
+  getOrderDetail: (id: string) => `/order_detail/${id}`,
+  //
+  TAB_NOT_IMPLEMENTED: '/tabs/not_implemented',
+  EVENT_LIST: `/tabs/events`,
+  MESSAGE_LIST: `/tabs/messages`,
+  NEARBY_LIST: '/tabs/nearby',
+  ORDERS_LIST: '/tabs/orders',
+  FAVOURITES_LIST: `/tabs/favourites`,
+  PROFILE: '/tabs/my_profile',
+
+  //
+  // DEMO_WEATHER_APP: '/demo-weather-app',
+  DEMO_WEATHER_APP_UI: '/demo-weather-app-ui',
+  //
+
+  DEMO_2FA_EXAMPLE: '/demo-2fa-example',
+  DEMO_ACCORDION_TUTORIAL: '/demo-accordion-tutorial',
+  DEMO_BANKING_UI: '/demo-banking-ui',
+  DEMO_BLOG_POST_UI: '/demo-blog-post-ui',
+  DEMO_CAPACITOR_GOOGLE_MAPS_TUTORIAL: '/demo-capacitor-google-maps-tutorial',
+  DEMO_CLUB_HOUSE: '/demo-club-house',
+  DEMO_COLOR_TUTORIAL: '/demo-color-tutorial',
+  DEMO_DICTIONARY_APP: '/demo-dictionary-app',
+  DEMO_ECOMMERCE_EXAMPLE: '/demo-ecommerce-example',
+  DEMO_FACEBOOK_CLONE: '/demo-facebook-clone',
+  DEMO_FAST_FOOD_APP: '/demo-fast-food-app',
+  DEMO_FLOATING_TABS: '/demo-floating-tabs',
+  DEMO_INSTAGRAM_CLONE: '/demo-instagram-clone',
+  DEMO_KANBAN_BOARD: '/demo-kanban-board',
+  DEMO_ORDERING_APP: '/demo-ordering-app',
+  DEMO_PAGE: '/tabs/demo-list',
+  DEMO_PINTEREST_FLOATING_TAB_BAR: '/demo-pinterest-floating-tab-bar',
+  DEMO_PROFILE_EXAMPLE: '/demo-profile-example',
+  DEMO_PULLSTATE_TUTORIAL: '/demo-pullstate-tutorial',
+  DEMO_QUIZ_APP: '/demo-quiz-app',
+  DEMO_QUOTE_APP: '/demo-quote-app',
+  DEMO_REACT_ADD_TO_CART: '/demo-react-add-to-cart',
+  DEMO_REACT_CALCULATOR: '/demo-react-calculator',
+  DEMO_REACT_DRAWING_CANVAS: '/demo-react-drawing-canvas',
+  DEMO_REACT_HOOK_FORM_EXAMPLE: '/demo-react-hook-form-example',
+  DEMO_REACT_ITEM_LIST: '/demo-react-item-list',
+  DEMO_REACT_LIFECYCLES: '/demo-react-lifecycles',
+  DEMO_REACT_LOGIN: '/demo-react-login',
+  DEMO_REACT_MARVEL_APP: '/demo-react-marvel-app',
+  DEMO_REACT_MOVIE_APP_WITH_ALGOLIA: '/demo-react-movie-app-with-algolia',
+  DEMO_REACT_NOTES: '/demo-react-notes',
+  DEMO_REACT_ONBOARDING_UI: '/demo-react-onboarding-ui',
+  DEMO_REACT_OVERLAY_HOOKS: '/demo-react-overlay-hooks',
+  DEMO_REACT_POLL_APP: '/demo-react-poll-app',
+  DEMO_REACT_PROFILE_DASHBOARD_UI: '/demo-react-profile-dashboard-ui',
+
+  DEMO_REACT_QR_CODE: '/demo-react-qr-code',
+  DEMO_QR_SCANNER: '/demo-qr-scanner',
+
+  DEMO_REACT_QUOTES: '/demo-react-quotes',
+  DEMO_REACT_SHOP_UI: '/demo-react-shop-ui',
+  DEMO_REACT_SHOP: '/demo-react-shop',
+  DEMO_REACT_SWITCH_TABS: '/demo-react-switch-tabs',
+  DEMO_REACT_TABS_MENUS_CUSTOM: '/demo-react-tabs-menus-custom',
+  DEMO_REACT_THEME_SWITCHER: '/demo-react-theme-switcher',
+  DEMO_REACT_TRAVEL_APP: '/demo-react-travel-app',
+  DEMO_REACT_WHATSAPP_CLONE: '/demo-react-whatsapp-clone',
+  DEMO_RECIPE_APP: '/demo-recipe-app',
+  DEMO_RESTAURANT_FINDER: '/demo-restaurant-finder',
+  DEMO_SCORE_BOARD: '/demo-score-board',
+  DEMO_SHOP_APP_UI: '/demo-shop-app-ui',
+  DEMO_SKELETON_TEXT: '/demo-skeleton-text',
+  DEMO_SLIDING_PROFILE: '/demo-sliding-profile',
+  DEMO_STICKY_BOTTOM_SHEET_EXAMPLE: '/demo-sticky-bottom-sheet-example',
+  DEMO_STORAGE_EXAMPLE: '/demo-storage-example',
+};
+export default PATHS;

03_source/mobile/src/TabAppRoute.tsx

@@ -2,7 +2,7 @@ import { Route } from 'react-router';
 import NotImplemented from './pages/NotImplemented';
 import EventDetail from './pages/EventDetail';
 import MemberProfile from './pages/MemberProfile';
-import paths from './paths';
+import PATHS from './PATHS';
 import MembersNearByList from './pages/MembersNearByList';
 import OrderList from './pages/OrderList';
 import MessageList from './pages/MessageList';
@@ -17,25 +17,25 @@ import DemoList from './pages/DemoList';
 const TabAppRoute: React.FC = () => {
   return (
     <>
-      <Route path={paths.TAB_NOT_IMPLEMENTED} component={NotImplemented} />
+      <Route path={PATHS.TAB_NOT_IMPLEMENTED} component={NotImplemented} />
 
       {/*  */}
-      <Route path={paths.NEARBY_LIST} render={() => <MembersNearByList />} exact={true} />
+      <Route path={PATHS.NEARBY_LIST} render={() => <MembersNearByList />} exact={true} />
 
       {/*  */}
-      <Route path={paths.ORDERS_LIST} render={() => <OrderList />} exact={true} />
+      <Route path={PATHS.ORDERS_LIST} render={() => <OrderList />} exact={true} />
 
       {/*  */}
-      <Route path={paths.MESSAGE_LIST} render={() => <MessageList />} exact={true} />
+      <Route path={PATHS.MESSAGE_LIST} render={() => <MessageList />} exact={true} />
 
       {/*  */}
-      <Route path={paths.FAVOURITES_LIST} render={() => <Favourites />} exact={true} />
+      <Route path={PATHS.FAVOURITES_LIST} render={() => <Favourites />} exact={true} />
 
       {/*  */}
-      <Route path={paths.EVENT_LIST} render={() => <EventList />} exact={true} />
+      <Route path={PATHS.EVENT_LIST} render={() => <EventList />} exact={true} />
 
       {/*  */}
-      <Route path={paths.PROFILE} render={() => <MyProfile />} exact={true} />
+      <Route path={PATHS.PROFILE} render={() => <MyProfile />} exact={true} />
 
       {/*  */}
       <Route path="/tabs/demo-list" render={() => <DemoList />} exact={true} />

03_source/mobile/src/context/jwt/utils.tsx

@@ -3,7 +3,7 @@
 import axios from '../../lib/axios';
 
 import { JWT_STORAGE_KEY } from './constant.js';
-import paths from '../../paths.js';
+import PATHS from '../../PATHS.js';
 
 // ----------------------------------------------------------------------
 
@@ -60,7 +60,7 @@ export function tokenExpired(exp: number) {
     try {
       alert('Token expired!');
       sessionStorage.removeItem(JWT_STORAGE_KEY);
-      window.location.href = paths.SIGN_IN;
+      window.location.href = PATHS.SIGN_IN;
     } catch (error) {
       console.error('Error during token expiration:', error);
       throw error;

03_source/mobile/src/pages/Demo2FaExample/AppPages/Tab1.jsx

@@ -14,9 +14,9 @@ import {
 
 import { Geolocation } from '@capacitor/geolocation';
 import { useEffect, useState } from 'react';
-import { SkeletonDashboard } from '../components/SkeletonDashboard';
+import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
 import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
-import { CurrentWeather } from '../components/CurrentWeather';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
 function Tab1() {
   const router = useIonRouter();

03_source/mobile/src/pages/Demo2FaExample/AppPages/Tab2.jsx

@@ -10,7 +10,7 @@ import {
   IonToolbar,
 } from '@ionic/react';
 import { useState } from 'react';
-import { CurrentWeather } from '../components/CurrentWeather';
+import { CurrentWeather } from '../TestComponents/CurrentWeather';
 
 function Tab2() {
   const [search, setSearch] = useState('');

03_source/mobile/src/pages/Demo2FaExample/components/Keypad.module.scss

@@ -0,0 +1,5 @@
+.keypad {
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+}

03_source/mobile/src/pages/Demo2FaExample/components/Keypad.tsx

@@ -0,0 +1,118 @@
+import { IonRow } from "@ionic/react";
+import styles from "./Keypad.module.scss";
+import KeypadButton from "./KeypadButton";
+
+const Keypad = (props: any): JSX.Element => {
+  const { activeIndex, handleClick, handleRemove, amount, correct } = props;
+
+  const keypadButtons = [
+    [
+      {
+        value: "1",
+        handleClick: () => handleClick(activeIndex, 1),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "2",
+        handleClick: () => handleClick(activeIndex, 2),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "3",
+        handleClick: () => handleClick(activeIndex, 3),
+        small: false,
+        remove: false,
+      },
+    ],
+    [
+      {
+        value: "4",
+        handleClick: () => handleClick(activeIndex, 4),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "5",
+        handleClick: () => handleClick(activeIndex, 5),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "6",
+        handleClick: () => handleClick(activeIndex, 6),
+        small: false,
+        remove: false,
+      },
+    ],
+    [
+      {
+        value: "7",
+        handleClick: () => handleClick(activeIndex, 7),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "8",
+        handleClick: () => handleClick(activeIndex, 8),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "9",
+        handleClick: () => handleClick(activeIndex, 9),
+        small: false,
+        remove: false,
+      },
+    ],
+    [
+      {
+        value: "Resend",
+        handleClick: () => handleClick(activeIndex, 1),
+        small: true,
+        remove: false,
+      },
+      {
+        value: "0",
+        handleClick: () => handleClick(activeIndex, 2),
+        small: false,
+        remove: false,
+      },
+      {
+        value: "",
+        handleClick: () => handleRemove(),
+        small: true,
+        remove: true,
+      },
+    ],
+  ];
+
+  return (
+    <div className={`${styles.keypad}`}>
+      {keypadButtons.map((keypadRow, index) => {
+        const isDisabled = parseInt(activeIndex) === parseInt(amount);
+
+        return (
+          <IonRow key={`keypadRow_${index}`}>
+            {keypadRow.map((button, index2) => {
+              return (
+                <KeypadButton
+                  correct={correct}
+                  isDisabled={isDisabled}
+                  key={`keypadButton_${index2}`}
+                  value={button.value}
+                  handleClick={button.handleClick}
+                  small={button.small}
+                  remove={button.remove}
+                />
+              );
+            })}
+          </IonRow>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Keypad;

03_source/mobile/src/pages/Demo2FaExample/components/KeypadButton.module.scss

@@ -0,0 +1,30 @@
+.logo {
+  height: 4rem;
+  width: auto;
+}
+
+.keypadButton {
+  --background: none;
+  --color: black;
+  font-size: 2rem;
+  font-weight: 700;
+  --outline: none;
+  --border: none;
+  --box-shadow: none;
+  padding: none;
+  margin: none;
+  --background-hover: rgb(245, 245, 245) !important;
+  --background-focused: rgb(245, 245, 245) !important;
+  --background-activated: rgb(245, 245, 245) !important;
+}
+
+.smallKeypadButton {
+  font-size: 1.4rem;
+  margin-top: 1rem;
+}
+
+.keypad {
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+}

03_source/mobile/src/pages/Demo2FaExample/components/KeypadButton.tsx

@@ -0,0 +1,31 @@
+import { IonButton, IonCol, IonIcon } from "@ionic/react";
+import { backspaceOutline } from "ionicons/icons";
+import styles from "./KeypadButton.module.scss";
+
+const KeypadButton = (props: any): JSX.Element => {
+  const {
+    small,
+    value,
+    remove,
+    handleClick,
+    isDisabled = false,
+    correct,
+  } = props;
+
+  return (
+    <IonCol size="4" className={styles.keypadButton}>
+      <IonButton
+        disabled={(!small || correct) && isDisabled}
+        className={`${styles.keypadButton} ${
+          small && styles.smallKeypadButton
+        }`}
+        onClick={handleClick}
+      >
+        {!remove && value}
+        {remove && <IonIcon icon={backspaceOutline} />}
+      </IonButton>
+    </IonCol>
+  );
+};
+
+export default KeypadButton;

03_source/mobile/src/pages/Demo2FaExample/components/KeypadInput.module.scss

@@ -0,0 +1,38 @@
+.keypadInput {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  font-size: 2.5rem;
+  width: 100%;
+  min-height: 2.5rem;
+  background-color: rgb(245, 245, 245);
+  border-radius: 4px;
+  color: rgb(207, 207, 207);
+  transition: 0.2s linear;
+}
+
+.active {
+  background-color: rgba(26, 150, 251, 0.2);
+  border: 0 !important;
+  color: white !important;
+  transition: 0.2s linear;
+}
+
+.filled {
+  color: rgb(151, 151, 151);
+  transition: 0.2s linear;
+}
+
+.incorrect {
+  background-color: rgba(251, 26, 26, 0.2);
+  color: rgb(218, 67, 67);
+  transition: 0.2s linear;
+}
+
+.correct {
+  background-color: rgba(26, 251, 120, 0.2);
+  color: rgb(67, 218, 112);
+  transition: 0.2s linear;
+}

03_source/mobile/src/pages/Demo2FaExample/components/KeypadInput.tsx

@@ -0,0 +1,28 @@
+import { IonCol } from "@ionic/react";
+import styles from "./KeypadInput.module.scss";
+
+const KeypadInput = (props: any): JSX.Element => {
+  const {
+    value,
+    isActive = false,
+    isFilled = false,
+    incorrect,
+    correct,
+  } = props;
+
+  return (
+    <IonCol size="2">
+      <div
+        className={`${styles.keypadInput} ${isActive && styles.active} ${
+          isFilled && styles.filled
+        } ${incorrect && styles.incorrect} ${correct && styles.correct}`}
+        onClick={props.handleChange}
+      >
+        {value}
+        {!isFilled && "0"}
+      </div>
+    </IonCol>
+  );
+};
+
+export default KeypadInput;

03_source/mobile/src/pages/Demo2FaExample/components/KeypadInputs.tsx

@@ -0,0 +1,50 @@
+import { IonRow } from "@ionic/react";
+import { useEffect, useRef } from "react";
+import KeypadInput from "./KeypadInput";
+
+const KeypadInputs = (props: any): JSX.Element => {
+  const { values, activeIndex, incorrect, correct } = props;
+  const keypadRef = useRef<HTMLIonRowElement>(null);
+
+  useEffect(() => {
+    if (incorrect && keypadRef.current) {
+      keypadRef.current.classList.add("incorrect");
+
+      setTimeout(() => {
+        if (keypadRef.current) {
+          keypadRef.current.classList.remove("incorrect");
+        }
+      }, 1000);
+    }
+  }, [incorrect]);
+
+  useEffect(() => {
+    if (correct) {
+      if (keypadRef.current) {
+        keypadRef.current.classList.add("correct");
+      }
+    }
+  }, [correct]);
+
+  return (
+    <IonRow ref={keypadRef} className="ion-justify-content-center">
+      {values.map((value: string, index: number) => {
+        const isActive = parseInt(index.toString()) === parseInt(activeIndex);
+        const isFilled = value !== "" ? true : false;
+
+        return (
+          <KeypadInput
+            correct={correct}
+            incorrect={incorrect}
+            isFilled={isFilled}
+            isActive={isActive}
+            value={value}
+            placeholder="0"
+          />
+        );
+      })}
+    </IonRow>
+  );
+};
+
+export default KeypadInputs;

03_source/mobile/src/pages/Demo2FaExample/index.tsx

@@ -1,38 +1,19 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
-
-import './style.scss';
+import Home from './pages/Home';
 
 function Demo2FaExample() {
   return (
-    <IonTabs>
+    <IonTabs className="demo-2fa-example">
       <IonRouterOutlet>
-        <Route exact path="/demo-weather-app/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-weather-app/tab2">
-          <Tab2 />
+        <Route exact path="/demo-2fa-example/home">
+          <Home />
         </Route>
 
-        <Redirect exact path="/demo-weather-app" to="/demo-weather-app/tab1" />
+        <Redirect exact path="/demo-2fa-example" to="/demo-2fa-example/home" />
       </IonRouterOutlet>
-
-      {/*  */}
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/demo-weather-app/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/demo-weather-app/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
     </IonTabs>
   );
 }

03_source/mobile/src/pages/Demo2FaExample/pages/Home.module.scss

@@ -0,0 +1,30 @@
+.logo {
+  height: 4rem;
+  width: auto;
+}
+
+.incorrect {
+  color: rgb(218, 67, 67);
+}
+
+.successContainer {
+}
+
+.successText {
+  background-color: rgba(26, 251, 120, 0.2);
+  color: rgb(67, 218, 112);
+  padding: 1rem;
+}
+
+.successContinue {
+  font-weight: 700;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.successContinue ion-icon {
+  margin-top: 0.2rem;
+}

03_source/mobile/src/pages/Demo2FaExample/pages/Home.tsx

@@ -0,0 +1,135 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonImg,
+  IonPage,
+  IonRow,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import { arrowForwardOutline, chevronBackOutline } from 'ionicons/icons';
+import styles from './Home.module.scss';
+import KeypadInputs from '../components/KeypadInputs';
+import Keypad from '../components/Keypad';
+import { JSX, useEffect, useRef, useState } from 'react';
+
+const Home = (): JSX.Element => {
+  const correctCode = [5, 9, 2, 5];
+  const [keypadValues, setKeypadValues] = useState(['', '', '', '']);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const successRef = useRef<HTMLIonRowElement>(null);
+
+  const [incorrect, setIncorrect] = useState(false);
+  const [correct, setCorrect] = useState(false);
+
+  const tempValues: { [key: string]: any } = {};
+
+  const handleClick = (index: number, value: any) => {
+    const stringKey = index.toString();
+    tempValues[stringKey] = value;
+
+    setKeypadValues(value);
+    setActiveIndex((activeIndex) => activeIndex + 1);
+  };
+
+  const handleRemove = () => {
+    const tempValues = [...keypadValues];
+    tempValues[activeIndex - 1] = '';
+
+    setKeypadValues(tempValues);
+    activeIndex > 0 && setActiveIndex((activeIndex) => activeIndex - 1);
+    setIncorrect(false);
+    setCorrect(false);
+  };
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  useEffect(() => {
+    if (parseInt(activeIndex.toString()) === parseInt(keypadValues.length.toString())) {
+      var error = false;
+
+      keypadValues.forEach((value, index) => {
+        if (parseInt(value) !== parseInt(correctCode[index].toString())) {
+          error = true;
+          return false;
+        }
+      });
+
+      if (error) {
+        setIncorrect(true);
+      } else {
+        setCorrect(true);
+
+        setTimeout(() => {
+          if (successRef.current) {
+            successRef.current.classList.remove('hidden');
+            successRef.current.classList.add('success');
+          }
+        }, 900);
+      }
+    }
+  }, [activeIndex]);
+
+  return (
+    <IonPage>
+      <IonToolbar>
+        <IonHeader></IonHeader>
+
+        <IonButtons slot="start">
+          <IonButton shape={'round'} onClick={() => handleBackClick()}>
+            <IonIcon icon={chevronBackOutline} color="primary" />
+          </IonButton>
+        </IonButtons>
+      </IonToolbar>
+      <IonContent fullscreen>
+        <IonGrid className="ion-text-center ion-padding-top">
+          <IonRow>
+            <IonCol size="12">
+              <IonImg src="/assets/icon/favicon.png" className={styles.logo} />
+              <h1>Verification required</h1>
+              <p>Enter your 4 digit verification code</p>
+            </IonCol>
+          </IonRow>
+
+          <IonRow ref={successRef} className="ion-justify-content-center hidden">
+            <IonCol size="12" className={styles.successContainer}>
+              <p className={styles.successText}>
+                Awesome! You may continue.
+                <br />
+                <span className={styles.successContinue}>
+                  Continue&nbsp;&nbsp;
+                  <IonIcon icon={arrowForwardOutline} />
+                </span>
+              </p>
+            </IonCol>
+          </IonRow>
+
+          <KeypadInputs
+            incorrect={incorrect}
+            correct={correct}
+            values={keypadValues}
+            activeIndex={activeIndex}
+          />
+          {incorrect && <p className={styles.incorrect}>Wrong code entered</p>}
+          <Keypad
+            handleRemove={handleRemove}
+            handleClick={handleClick}
+            activeIndex={activeIndex}
+            amount={keypadValues.length}
+            correct={correct}
+          />
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/Demo2FaExample/style.scss

@@ -1,103 +0,0 @@
-#about-page {
-  ion-toolbar {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    right: 0;
-
-    --background: transparent;
-    --color: white;
-  }
-
-  ion-toolbar ion-back-button,
-  ion-toolbar ion-button,
-  ion-toolbar ion-menu-button {
-    --color: white;
-  }
-
-  .about-header {
-    position: relative;
-
-    width: 100%;
-    height: 30%;
-  }
-
-  .about-header .about-image {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-
-    opacity: 0;
-
-    transition: opacity 500ms ease-in-out;
-  }
-
-  .about-header .madison {
-    background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
-  }
-
-  .about-header .austin {
-    background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
-  }
-
-  .about-header .chicago {
-    background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
-  }
-
-  .about-header .seattle {
-    background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
-  }
-
-  .about-info {
-    position: relative;
-    margin-top: -10px;
-    border-radius: 10px;
-    background: var(--ion-background-color, #fff);
-    z-index: 2; // display rounded border above header image
-  }
-
-  .about-info h3 {
-    margin-top: 0;
-  }
-
-  .about-info ion-list {
-    padding-top: 0;
-  }
-
-  .about-info p {
-    line-height: 130%;
-
-    color: var(--ion-color-dark);
-  }
-
-  .about-info ion-icon {
-    margin-inline-end: 32px;
-  }
-
-  /*
-   * iOS Only
-   */
-
-  .ios .about-info {
-    --ion-padding: 19px;
-  }
-
-  .ios .about-info h3 {
-    font-weight: 700;
-  }
-}
-
-#date-input-popover {
-  --offset-y: -var(--ion-safe-area-bottom);
-
-  --max-width: 90%;
-  --width: 336px;
-}

03_source/mobile/src/pages/Demo2FaExample/theme/variables.scss

@@ -0,0 +1,249 @@
+.demo-2fa-example {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  * {
+    font-family: 'Lato', sans-serif;
+  }
+
+  .hidden {
+    display: none;
+    transition: 0.2s linear;
+  }
+
+  /** Ionic CSS Variables **/
+  :root {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --ion-color-warning: #ffc409;
+    --ion-color-warning-rgb: 255, 196, 9;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0ac08;
+    --ion-color-warning-tint: #ffca22;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+
+  .incorrect {
+    -webkit-animation: incorrect-animation 0.9s both;
+    animation: incorrect-animation 0.9s both;
+  }
+
+  @-webkit-keyframes incorrect-animation {
+    0% {
+      -webkit-transform: scale3d(1, 1, 1);
+      transform: scale3d(1, 1, 1);
+    }
+
+    30% {
+      -webkit-transform: scale3d(1.25, 0.75, 1);
+      transform: scale3d(1.25, 0.75, 1);
+    }
+
+    40% {
+      -webkit-transform: scale3d(0.75, 1.25, 1);
+      transform: scale3d(0.75, 1.25, 1);
+    }
+
+    50% {
+      -webkit-transform: scale3d(1.15, 0.85, 1);
+      transform: scale3d(1.15, 0.85, 1);
+    }
+
+    65% {
+      -webkit-transform: scale3d(0.95, 1.05, 1);
+      transform: scale3d(0.95, 1.05, 1);
+    }
+
+    75% {
+      -webkit-transform: scale3d(1.05, 0.95, 1);
+      transform: scale3d(1.05, 0.95, 1);
+    }
+
+    100% {
+      -webkit-transform: scale3d(1, 1, 1);
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  @keyframes incorrect-animation {
+    0% {
+      -webkit-transform: scale3d(1, 1, 1);
+      transform: scale3d(1, 1, 1);
+    }
+
+    30% {
+      -webkit-transform: scale3d(1.25, 0.75, 1);
+      transform: scale3d(1.25, 0.75, 1);
+    }
+
+    40% {
+      -webkit-transform: scale3d(0.75, 1.25, 1);
+      transform: scale3d(0.75, 1.25, 1);
+    }
+
+    50% {
+      -webkit-transform: scale3d(1.15, 0.85, 1);
+      transform: scale3d(1.15, 0.85, 1);
+    }
+
+    65% {
+      -webkit-transform: scale3d(0.95, 1.05, 1);
+      transform: scale3d(0.95, 1.05, 1);
+    }
+
+    75% {
+      -webkit-transform: scale3d(1.05, 0.95, 1);
+      transform: scale3d(1.05, 0.95, 1);
+    }
+
+    100% {
+      -webkit-transform: scale3d(1, 1, 1);
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  .correct {
+    -webkit-animation: correct-animation 1s ease-in both;
+    animation: correct-animation 1s ease-in both;
+  }
+
+  @-webkit-keyframes correct-animation {
+    0% {
+      -webkit-transform: translateY(0) rotateX(0) scale(1);
+      transform: translateY(0) rotateX(0) scale(1);
+      -webkit-transform-origin: 50% 1400px;
+      transform-origin: 50% 1400px;
+      opacity: 1;
+    }
+
+    100% {
+      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
+      transform: translateY(-600px) rotateX(-30deg) scale(0);
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+      opacity: 1;
+    }
+  }
+
+  @keyframes correct-animation {
+    0% {
+      -webkit-transform: translateY(0) rotateX(0) scale(1);
+      transform: translateY(0) rotateX(0) scale(1);
+      -webkit-transform-origin: 50% 1400px;
+      transform-origin: 50% 1400px;
+      opacity: 1;
+    }
+
+    100% {
+      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
+      transform: translateY(-600px) rotateX(-30deg) scale(0);
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+      opacity: 1;
+    }
+  }
+
+  .success {
+    -webkit-animation: success-animation 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    animation: success-animation 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+
+  @-webkit-keyframes success-animation {
+    0% {
+      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
+      transform: translateY(-600px) rotateX(-30deg) scale(0);
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+      opacity: 0;
+    }
+
+    100% {
+      -webkit-transform: translateY(0) rotateX(0) scale(1);
+      transform: translateY(0) rotateX(0) scale(1);
+      -webkit-transform-origin: 50% 1400px;
+      transform-origin: 50% 1400px;
+      opacity: 1;
+    }
+  }
+
+  @keyframes success-animation {
+    0% {
+      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
+      transform: translateY(-600px) rotateX(-30deg) scale(0);
+      -webkit-transform-origin: 50% 100%;
+      transform-origin: 50% 100%;
+      opacity: 0;
+    }
+
+    100% {
+      -webkit-transform: translateY(0) rotateX(0) scale(1);
+      transform: translateY(0) rotateX(0) scale(1);
+      -webkit-transform-origin: 50% 1400px;
+      transform-origin: 50% 1400px;
+      opacity: 1;
+    }
+  }
+}

03_source/mobile/src/pages/DemoBankingUi/components/SkeletonDashboard/index.tsx

@@ -13,8 +13,9 @@ import {
   IonThumbnail,
 } from '@ionic/react';
 import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
+import React from 'react';
 
-export const SkeletonDashboard = () => (
+export const SkeletonDashboard = (): React.JSX.Element => (
   <IonGrid>
     <IonCard>
       <IonCardContent className="ion-text-center">

03_source/mobile/src/pages/DemoBankingUi/index.tsx

@@ -1,19 +1,19 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
 
-import Home from './pages/Home.jsx';
+import Home from './pages/Home';
 import Account from './pages/Account';
 import AddCard from './pages/AddCard';
 import AddTransaction from './pages/AddTransaction';
 
 import './style.scss';
+import React from 'react';
 
-function DemoBankingUi() {
+function DemoBankingUi(): React.JSX.Element {
   return (
     <IonTabs className="demo-banking-ui">
       <IonRouterOutlet>

03_source/mobile/src/pages/DemoBankingUi/pages/Home.jsx

@@ -1,5 +1,17 @@
 import { useRef, useState } from 'react';
-import { IonButton, IonButtons, IonContent, IonGrid, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar, useIonRouter, useIonViewDidEnter } from '@ionic/react';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+  useIonViewDidEnter,
+} from '@ionic/react';
 import styles from './Home.module.css';
 import { AccountStore } from '../data/AccountStore';
 import CardSlide from '../components/CardSlide';
@@ -22,7 +34,7 @@ const Home = () => {
   const [mainColor, setMainColor] = useState(cards[0].color);
   const [slideSpace, setSlideSpace] = useState(10);
 
-  const slidesRef = useRef();
+  const slidesRef = useRef(null);
 
   useIonViewDidEnter(() => {
     setSlideSpace(0);
@@ -38,7 +50,9 @@ const Home = () => {
     document.getElementById(`slide_${swiperIndex}_balance`).classList.add('animate__headShake');
 
     setTimeout(() => {
-      document.getElementById(`slide_${swiperIndex}_balance`).classList.remove('animate__headShake');
+      document
+        .getElementById(`slide_${swiperIndex}_balance`)
+        .classList.remove('animate__headShake');
     }, 1000);
   };
 
@@ -47,9 +61,13 @@ const Home = () => {
     const swiperIndex = swiper.activeIndex;
 
     if (touched) {
-      document.getElementById(`slide_${swiperIndex}_transactions`).classList.add('animate__fadeOut');
+      document
+        .getElementById(`slide_${swiperIndex}_transactions`)
+        .classList.add('animate__fadeOut');
     } else {
-      document.getElementById(`slide_${swiperIndex}_transactions`).classList.remove('animate__fadeOut');
+      document
+        .getElementById(`slide_${swiperIndex}_transactions`)
+        .classList.remove('animate__fadeOut');
       document.getElementById(`slide_${swiperIndex}_transactions`).classList.add('animate__fadeIn');
     }
   };
@@ -70,7 +88,11 @@ const Home = () => {
               routerLink="/demo-banking-ui/account"
               className={stylesS.toolbarAvatar}
             >
-              <img alt="toolbar avatar" className={stylesS.toolbarAvatarImage} src={profile.avatar} />
+              <img
+                alt="toolbar avatar"
+                className={stylesS.toolbarAvatarImage}
+                src={profile.avatar}
+              />
             </IonButton>
           </IonButtons>
 
@@ -82,7 +104,11 @@ const Home = () => {
             </IonButton>
             {/*  */}
             <IonButton>
-              <IonIcon color="light" icon={searchOutline} style={{ backgroundColor: mainColor, borderRadius: '500px', padding: '0.2rem' }} />
+              <IonIcon
+                color="light"
+                icon={searchOutline}
+                style={{ backgroundColor: mainColor, borderRadius: '500px', padding: '0.2rem' }}
+              />
             </IonButton>
           </IonButtons>
         </IonToolbar>
@@ -101,7 +127,11 @@ const Home = () => {
           >
             {cards.map((card, index) => {
               return (
-                <SwiperSlide key={`slide_${index}`} id={`slide_${index}`} className={stylesS.customSlide}>
+                <SwiperSlide
+                  key={`slide_${index}`}
+                  id={`slide_${index}`}
+                  className={stylesS.customSlide}
+                >
                   <CardSlide key={index} card={card} profile={profile} index={index} />
                 </SwiperSlide>
               );

03_source/mobile/src/pages/DemoClubHouse/AppPages/Tab1.jsx

@@ -23,7 +23,7 @@ import { TalkCard } from '../components/TalkCard';
 import { useRef } from 'react';
 
 const Tab1 = () => {
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const talks = useStoreState(TalkStore, getTalks);
 
   const router = useIonRouter();

03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab1.jsx

@@ -24,7 +24,7 @@ import { getFavourites, getSearchCount } from '../store/Selectors';
 
 const Tab1 = () => {
   const router = useIonRouter();
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const favourites = useStoreState(WordStore, getFavourites);
   const searchCount = useStoreState(WordStore, getSearchCount);
 

03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab2.jsx

@@ -17,7 +17,7 @@ import { WordStore } from '../store';
 import { searchWord } from '../utils';
 
 const Tab2 = () => {
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const [searchTerm, setSearchTerm] = useState('');
   const [searchResult, setSearchResult] = useState(false);
   const [animatedClass, setAnimatedClass] = useState('');

03_source/mobile/src/pages/DemoDictionaryApp/AppPages/Tab3.jsx

@@ -7,7 +7,7 @@ import { WordStore } from '../store';
 import { getFavourites } from '../store/Selectors';
 
 const Tab3 = () => {
-  const pageRef = useRef();
+  const pageRef = useRef(null);
   const favourites = useStoreState(WordStore, getFavourites);
   const [animatedClass, setAnimatedClass] = useState('animate__slideInLeft');
 

03_source/mobile/src/pages/DemoEcommerceExample/components/ProductCard.module.css

@@ -0,0 +1,72 @@
+.categoryPage ion-toolbar {
+
+    --border-style: none;
+}
+
+.categoryCard {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    /* min-height: 20rem !important; */
+}
+
+.productCardActions {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.productCardAction {
+
+    font-size: 1.1rem;
+}
+
+.productCardHeader {
+
+    min-height: 17rem;
+}
+
+.productCardHeader p {
+
+    font-size: 0.8rem;
+    padding: 0;
+    margin: 0;
+    margin-top: 0.75rem;
+}
+
+.categoryCardContent {
+
+    display: flex;
+    flex-direction: column;
+}
+
+.categoryCardContent ion-button {
+
+    height: 1.5rem;
+    font-size: 0.8rem;
+}
+
+.categoryCardContent p {
+
+    font-size: 0.8rem;
+    padding: 0;
+    margin: 0;
+}
+
+.categoryCard img {
+
+    /* border-radius: 5px; */
+    /* padding: 1rem; */
+}
+
+.productPrice {
+
+    display: flex;
+    flex-direction: row;
+}

03_source/mobile/src/pages/DemoEcommerceExample/components/ProductCard.tsx

@@ -0,0 +1,105 @@
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCol, IonIcon } from '@ionic/react';
+import { arrowRedoOutline, cart, cartOutline, heart, heartOutline } from 'ionicons/icons';
+import { useEffect, useRef, useState } from 'react';
+import { addToCart } from '../data/CartStore';
+import { addToFavourites, FavouritesStore } from '../data/FavouritesStore';
+import styles from './ProductCard.module.css';
+
+const ProductCard = (props): React.FC => {
+  const { product, category, index, cartRef } = props;
+  const favourites = FavouritesStore.useState((s) => s.product_ids);
+
+  const productCartRef = useRef();
+  const productFavouriteRef = useRef();
+  const [isFavourite, setIsFavourite] = useState(false);
+
+  useEffect(() => {
+    const tempIsFavourite = favourites.find((f) => f === `${category.slug}/${product.id}`);
+    setIsFavourite(tempIsFavourite ? true : false);
+  }, [props.product, favourites]);
+
+  const addProductToFavourites = (e, categorySlug, productID) => {
+    e.preventDefault();
+    e.stopPropagation();
+    addToFavourites(categorySlug, productID);
+
+    productFavouriteRef.current.style.display = '';
+    productFavouriteRef.current.classList.add('animate__fadeOutTopRight');
+
+    setTimeout(() => {
+      if (productCartRef.current) {
+        productFavouriteRef.current.classList.remove('animate__fadeOutTopRight');
+        productFavouriteRef.current.style.display = 'none';
+      }
+    }, 500);
+  };
+
+  const addProductToCart = (e, categorySlug, productID) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    productCartRef.current.style.display = '';
+    productCartRef.current.classList.add('animate__fadeOutUp');
+
+    setTimeout(() => {
+      cartRef.current.classList.add('animate__tada');
+      addToCart(categorySlug, productID);
+
+      setTimeout(() => {
+        cartRef.current.classList.remove('animate__tada');
+        productCartRef.current.style.display = 'none';
+      }, 500);
+    }, 500);
+  };
+
+  return (
+    <IonCol size="6" key={`category_product_list_${index}`}>
+      <IonCard
+        routerLink={`/category/${category.slug}/${product.id}`}
+        className={styles.categoryCard}
+      >
+        <IonCardHeader className={styles.productCardHeader}>
+          <div className={styles.productCardActions}>
+            <IonIcon
+              className={styles.productCardAction}
+              color={isFavourite ? 'danger' : 'medium'}
+              icon={isFavourite ? heart : heartOutline}
+              onClick={(e) => addProductToFavourites(e, category.slug, product.id)}
+            />
+            <IonIcon
+              ref={productFavouriteRef}
+              style={{ position: 'absolute', display: 'none' }}
+              className={`${styles.productCardAction} animate__animated`}
+              color="danger"
+              icon={heart}
+            />
+            <IonIcon className={styles.productCardAction} size="medium" icon={arrowRedoOutline} />
+          </div>
+          <img src={product.image} alt="product pic" />
+          <p className="ion-text-wrap">{product.name}</p>
+        </IonCardHeader>
+
+        <IonCardContent className={styles.categoryCardContent}>
+          <div className={styles.productPrice}>
+            <IonButton style={{ width: '100%' }} color="light">
+              {product.price}
+            </IonButton>
+            <IonButton color="dark" onClick={(e) => addProductToCart(e, category.slug, product.id)}>
+              <IonIcon icon={cartOutline} />
+            </IonButton>
+
+            <IonIcon
+              ref={productCartRef}
+              icon={cart}
+              color="dark"
+              style={{ position: 'absolute', display: 'none', fontSize: '3rem' }}
+              className="animate__animated"
+            />
+          </div>
+        </IonCardContent>
+      </IonCard>
+    </IonCol>
+  );
+};
+
+export default ProductCard;

03_source/mobile/src/pages/DemoEcommerceExample/data/CartStore.ts

@@ -0,0 +1,18 @@
+import { Store } from 'pullstate';
+
+export const CartStore = new Store({
+  total: 0,
+  product_ids: [],
+});
+
+export const addToCart = (categorySlug, productID) => {
+  CartStore.update((s) => {
+    s.product_ids = [...s.product_ids, `${categorySlug}/${parseInt(productID)}`];
+  });
+};
+
+export const removeFromCart = (productIndex) => {
+  CartStore.update((s) => {
+    s.product_ids.splice(productIndex, 1);
+  });
+};

03_source/mobile/src/pages/DemoEcommerceExample/data/FavouritesStore.ts

@@ -0,0 +1,17 @@
+import { Store } from "pullstate";
+
+export const FavouritesStore = new Store({
+    
+    total: 0,
+    product_ids: []
+});
+
+export const addToFavourites = (categorySlug, productID) => {
+    FavouritesStore.update(s => {
+        if (s.product_ids.find(id => id === `${ categorySlug }/${ parseInt(productID) }`)) {
+            s.product_ids = s.product_ids.filter(id => id !== `${ categorySlug }/${ parseInt(productID) }`);
+        } else {
+            s.product_ids = [ ...s.product_ids, `${ categorySlug }/${ parseInt(productID) }` ];
+        }
+    });
+}

03_source/mobile/src/pages/DemoEcommerceExample/data/ProductStore.ts

@@ -0,0 +1,6 @@
+import { Store } from "pullstate";
+
+export const ProductStore = new Store({
+    
+    products: []
+});

03_source/mobile/src/pages/DemoEcommerceExample/data/fetcher.ts

@@ -0,0 +1,57 @@
+import { ProductStore } from './ProductStore';
+
+export const fetchData = async () => {
+  const json = [
+    'beds.json',
+    'armchairs.json',
+    'coffee_tables.json',
+    'cushions.json',
+    'floor_lamps.json',
+    'office_chairs.json',
+  ];
+
+  var products = [];
+
+  json.forEach(async (category) => {
+    const products = await fetchProducts(category);
+
+    let categoryName = category.replace('.json', '');
+    categoryName = categoryName.replace('_', ' ');
+    categoryName = uppercaseWords(categoryName);
+
+    const productCategory = {
+      name: categoryName,
+      slug: category.replace('.json', ''),
+      cover: products[6].image,
+      products,
+    };
+
+    ProductStore.update((s) => {
+      s.products = [...s.products, productCategory];
+    });
+  });
+
+  return products;
+};
+
+const fetchProducts = async (category) => {
+  const response = await fetch(`products/${category}`);
+  const data = await response.json();
+
+  //  Set a product id
+  await data.forEach((d, i) => {
+    d.id = i + 1;
+  });
+
+  return data;
+};
+
+const uppercaseWords = (words) => {
+  words = words
+    .toLowerCase()
+    .split(' ')
+    .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
+    .join(' ');
+
+  return words;
+};

03_source/mobile/src/pages/DemoEcommerceExample/index.tsx

@@ -3,23 +3,48 @@ import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs }
 import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
+
+import Home from './pages/Home';
+import { fetchData } from './data/fetcher';
+import CategoryProducts from './pages/CategoryProducts';
+import Product from './pages/Product';
+import FavouriteProducts from './pages/FavouriteProducts';
+import CartProducts from './pages/CartProducts';
 
 import './style.scss';
+import React, { useEffect } from 'react';
+
+function DemoEcommerceExample(): React.JSX.Element {
+  useEffect(() => {
+    fetchData();
+  }, []);
 
-function DemoEcommerceExample() {
   return (
     <IonTabs>
       <IonRouterOutlet>
-        <Route exact path="/demo-ecommerce-example/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-ecommerce-example/tab2">
-          <Tab2 />
+        <Route path="/demo-ecommerce-example/home" exact={true}>
+          <Home />
         </Route>
 
-        <Redirect exact path="/demo-ecommerce-example" to="/demo-ecommerce-example/tab1" />
+        <Route path="/demo-ecommerce-example/favourites" exact>
+          <FavouriteProducts />
+        </Route>
+
+        <Route path="/demo-ecommerce-example/cart" exact>
+          <CartProducts />
+        </Route>
+
+        <Route path="/demo-ecommerce-example/category/:slug" exact>
+          <CategoryProducts />
+        </Route>
+
+        <Route path="/demo-ecommerce-example/category/:slug/:id" exact>
+          <Product />
+        </Route>
+
+        <Redirect exact path="/demo-ecommerce-example" to="/demo-ecommerce-example/home" />
       </IonRouterOutlet>
 
       {/*  */}

03_source/mobile/src/pages/DemoEcommerceExample/module.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}