"add docker compose up/down scripts and update vite config for production environment"

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 textareaRef = useRef(null);
-  const sideRef = useRef();
+  const sideRef = useRef(null);
-  const sendRef = useRef();
+  const sendRef = useRef(null);
-  const replyToAnimationRef = useRef();
+  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("chatTime_", ""))
-        : parseInt(elementID.replace("chatBubble_", ""));
+      : 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 {

01_Requirements/REQ0119/index.md

@@ -0,0 +1 @@
+# Demo2FaExample

01_Requirements/REQ0120/index.md

@@ -0,0 +1 @@
+# DemoAccordionTutorial

01_Requirements/REQ0121/index.md

@@ -0,0 +1 @@
+# DemoBankingUi

01_Requirements/REQ0122/index.md

@@ -0,0 +1 @@
+# DemoBlogPostUi

01_Requirements/REQ0123/index.md

@@ -0,0 +1 @@
+# DemoCapacitorGoogleMapsTutorial

01_Requirements/REQ0124/index.md

@@ -0,0 +1 @@
+# DemoClubHouse

01_Requirements/REQ0125/index.md

@@ -0,0 +1 @@
+# DemoColorTutorial

01_Requirements/REQ0126/index.md

@@ -0,0 +1 @@
+# DemoDictionaryApp

01_Requirements/REQ0127/index.md

@@ -0,0 +1 @@
+# DemoEcommerceExample

01_Requirements/REQ0128/index.md

@@ -0,0 +1 @@
+# DemoFacebookClone

01_Requirements/REQ0129/index.md

@@ -0,0 +1 @@
+# DemoFastFoodApp

01_Requirements/REQ0130/index.md

@@ -0,0 +1 @@
+# DemoFloatingTabs

01_Requirements/REQ0131/index.md

@@ -0,0 +1 @@
+# DemoInstagramClone

01_Requirements/REQ0132/index.md

@@ -0,0 +1 @@
+# DemoKanbanBoard

01_Requirements/REQ0133/index.md

@@ -0,0 +1 @@
+# DemoList

01_Requirements/REQ0134/index.md

@@ -0,0 +1 @@
+# DemoOrderingApp

01_Requirements/REQ0135/index.md

@@ -0,0 +1 @@
+# DemoPinterestFloatingTabBar

01_Requirements/REQ0136/index.md

@@ -0,0 +1 @@
+# DemoProfileExample

01_Requirements/REQ0137/index.md

@@ -0,0 +1 @@
+# DemoPullstateTutorial

01_Requirements/REQ0138/index.md

@@ -0,0 +1 @@
+# DemoQrScanner

01_Requirements/REQ0139/index.md

@@ -0,0 +1 @@
+# DemoQuizApp

01_Requirements/REQ0140/index.md

@@ -0,0 +1 @@
+# DemoQuoteApp

01_Requirements/REQ0141/index.md

@@ -0,0 +1 @@
+# DemoReactAddToCart

01_Requirements/REQ0142/index.md

@@ -0,0 +1 @@
+# DemoReactCalculator

01_Requirements/REQ0143/index.md

@@ -0,0 +1 @@
+# DemoReactDrawingCanvas

01_Requirements/REQ0144/index.md

@@ -0,0 +1 @@
+# DemoReactHookFormExample

01_Requirements/REQ0145/index.md

@@ -0,0 +1 @@
+# DemoReactItemList

01_Requirements/REQ0146/index.md

@@ -0,0 +1 @@
+# DemoReactLifecycles

01_Requirements/REQ0147/index.md

@@ -0,0 +1 @@
+# DemoReactLogin

01_Requirements/REQ0148/index.md

@@ -0,0 +1 @@
+# DemoReactMarvelApp

01_Requirements/REQ0149/index.md

@@ -0,0 +1 @@
+# DemoReactMovieAppWithAlgolia

01_Requirements/REQ0150/index.md

@@ -0,0 +1 @@
+# DemoReactNotes

01_Requirements/REQ0151/index.md

@@ -0,0 +1 @@
+# DemoReactOnboardingUi

01_Requirements/REQ0152/index.md

@@ -0,0 +1 @@
+# DemoReactOverlayHooks

01_Requirements/REQ0153/index.md

@@ -0,0 +1 @@
+# DemoReactPollApp

01_Requirements/REQ0154/index.md

@@ -0,0 +1 @@
+# DemoReactProfileDashboardUi

01_Requirements/REQ0155/index.md

@@ -0,0 +1 @@
+# DemoReactQuotes

01_Requirements/REQ0156/index.md

@@ -0,0 +1 @@
+# DemoReactShop

01_Requirements/REQ0157/index.md

@@ -0,0 +1 @@
+# DemoReactShopUi

01_Requirements/REQ0158/index.md

@@ -0,0 +1 @@
+# DemoReactSwitchTabs

01_Requirements/REQ0159/index.md

@@ -0,0 +1 @@
+# DemoReactTabsMenusCustom

01_Requirements/REQ0160/index.md

@@ -0,0 +1 @@
+# DemoReactThemeSwitcher

01_Requirements/REQ0161/index.md

@@ -0,0 +1 @@
+# DemoReactTravelApp

01_Requirements/REQ0162/index.md

@@ -0,0 +1 @@
+# DemoRecipeApp

01_Requirements/REQ0163/index.md

@@ -0,0 +1 @@
+# DemoRestaurantFinder

01_Requirements/REQ0164/index.md

@@ -0,0 +1 @@
+# DemoScoreBoard

01_Requirements/REQ0165/index.md

@@ -0,0 +1 @@
+# DemoShopAppUi

01_Requirements/REQ0166/index.md

@@ -0,0 +1 @@
+# DemoSkeletonText

01_Requirements/REQ0167/index.md

@@ -0,0 +1 @@
+# DemoSlidingProfile

01_Requirements/REQ0168/index.md

@@ -0,0 +1 @@
+# DemoStickyBottomSheetExample

01_Requirements/REQ0169/index.md

@@ -0,0 +1 @@
+# DemoStorageExample

01_Requirements/REQ0170/index.md

@@ -0,0 +1 @@
+# DemoWeatherAppUi

01_Requirements/REQ0180/index.md

@@ -0,0 +1,16 @@
+---
+tags: docker, ports
+---
+
+# REQ0180 service port schedule
+
+## Port Usage
+
+| Service     | Host Port | Container Port | Environment | Purpose                          |
+| ----------- | --------- | -------------- | ----------- | -------------------------------- |
+| Frontend    | 10001     | 8080           | All         | Web application access           |
+| Mobile      | 10004     | 3000           | All         | Mobile application access        |
+| CMS Backend | 10002     | 7272           | All         | Main API access                  |
+| CMS Backend | 10003     | 5555           | All         | Additional service access        |
+| Postgres    | -         | 5432           | Production  | Database access (container only) |
+| Postgres    | 5432      | 5432           | Development | Database access                  |

03_source/docker/81_dc_down.sh

@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+
+set -ex
+
+#  -f docker-compose.db.yml
+DOCKER_COMPOSE_FILES=" -f docker-compose.yml  -f docker-compose.dev.yml"
+
+# docker compose $DOCKER_COMPOSE_FILES build
+docker compose $DOCKER_COMPOSE_FILES kill
+docker compose $DOCKER_COMPOSE_FILES down
+
+# cd ../api_server
+#   yarn docker:dev
+# cd ..
+
+# docker compose $DOCKER_COMPOSE_FILES logs -f

03_source/docker/91_prod_down.sh

@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+
+set -ex
+
+#  -f docker-compose.db.yml
+DOCKER_COMPOSE_FILES=" -f docker-compose.yml"
+
+# docker compose $DOCKER_COMPOSE_FILES build
+docker compose $DOCKER_COMPOSE_FILES kill
+docker compose $DOCKER_COMPOSE_FILES down
+
+# cd ../api_server
+#   yarn docker:dev
+# cd ..
+
+# docker compose $DOCKER_COMPOSE_FILES logs -f

03_source/docker/99_prod_up.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+
+set -ex
+
+#  -f docker-compose.db.yml
+DOCKER_COMPOSE_FILES=" -f docker-compose.yml"
+
+# docker compose $DOCKER_COMPOSE_FILES build
+docker compose $DOCKER_COMPOSE_FILES up -d
+
+docker compose $DOCKER_COMPOSE_FILES logs -f
+
+# cd ../api_server
+#   yarn docker:dev
+# cd ..
+
+# docker compose $DOCKER_COMPOSE_FILES logs -f

03_source/docker/docker-compose.dev.yml

@@ -1,9 +1,14 @@
 services:
   frontend:
-    command: "sleep infinity"
+    command: 'sleep infinity'
 
   mobile:
-    command: "sleep infinity"
+    command: 'sleep infinity'
 
   cms_backend:
-    command: "sleep infinity"
+    command: 'sleep infinity'
+
+  postgres:
+    # container_name: postgres
+    ports:
+      - '5432:5432'

03_source/docker/docker-compose.yml

@@ -8,22 +8,22 @@ services:
     build: ../frontend
     # user: 1000:1000
     ports:
-      - 8080:8080
+      - 10001:8080
     volumes:
       - ../frontend:/app
-    working_dir: "/app"
+    working_dir: '/app'
-    command: "yarn dev"
+    command: './dev.sh'
 
   mobile:
     image: 192.168.10.61:5000/hksingleparty_mobile
     build: ../mobile
     # user: 1000:1000
     ports:
-      - 8081:3000
+      - 10004:3000
     volumes:
       - ../mobile:/app
-    working_dir: "/app"
+    working_dir: '/app'
-    command: "npm run dev"
+    command: './dev.sh'
 
   cms_backend:
     image: 192.168.10.61:5000/demo_minimal_kit_backend
@@ -32,22 +32,19 @@ services:
     env_file:
       - .env
     ports:
-      - 7272:7272
+      - 10002:7272
-      - 5555:5555
+      - 10003:5555
     volumes:
       - ../cms_backend:/app
-    working_dir: "/app"
+    working_dir: '/app'
-    command: "yarn dev"
+    command: './dev.sh'
 
   postgres:
-    container_name: postgres
     image: postgres:14.1-alpine
     restart: unless-stopped
     env_file:
       - .env
     expose:
-      - "5432"
+      - '5432'
-    ports:
-      - "5432:5432"
     volumes:
       - db:/var/lib/postgresql/data

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"
+}