Merge pull request #3 from PropertyControl360/UAT-PROD

UAT-PROD

src/config-global.ts

@@ -4,6 +4,7 @@ import { paths } from 'src/routes/paths';
 // ----------------------------------------------------------------------
 
 export const HOST_API = import.meta.env.VITE_HOST_API;
+export const HOST_PROD_API = import.meta.env.VITE_PROD_HOST_API;
 export const ASSETS_API = import.meta.env.VITE_ASSETS_API;
 
 export const FIREBASE_API = {

src/layouts/common/environment-toggle.tsx

@@ -0,0 +1,32 @@
+import React, { useState, useEffect, ChangeEvent } from 'react';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+const STORAGE_ENV = 'is_prod';
+
+const EnvironmentToggle: React.FC = () => {
+  const [isProd, setIsProd] = useState<boolean>(false);
+
+  useEffect(() => {
+    const savedEnv = localStorage.getItem(STORAGE_ENV);
+    if (savedEnv !== null) {
+      setIsProd(JSON.parse(savedEnv));
+    }
+  }, []);
+
+  const handleToggle = (event: ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.checked;
+    setIsProd(newValue);
+    localStorage.setItem(STORAGE_ENV, JSON.stringify(newValue));
+    window.location.reload();
+  };
+
+  return (
+    <FormControlLabel
+      control={<Switch checked={isProd} onChange={handleToggle} />}
+      label={isProd ? 'Production' : 'UAT'}
+    />
+  );
+};
+
+export default EnvironmentToggle;

src/layouts/dashboard/header.tsx

@@ -22,6 +22,7 @@ import { NAV, HEADER } from '../config-layout';
 import AccountPopover from '../common/account-popover';
 import LanguagePopover from '../common/language-popover';
 import NotificationsPopover from '../common/notifications-popover';
+import EnvironmentToggle from '../common/environment-toggle';
 
 // ----------------------------------------------------------------------
 
@@ -88,6 +89,7 @@ export default function Header({ onOpenNav }: Props) {
         spacing={{ xs: 0.5, sm: 1 }}
       >
         <LanguagePopover />
+        <EnvironmentToggle />
 
         <NotificationsPopover />
 

src/utils/axios.ts

@@ -1,10 +1,15 @@
 import axios, { AxiosRequestConfig } from 'axios';
 
-import { HOST_API } from 'src/config-global';
+import { HOST_API, HOST_PROD_API } from 'src/config-global';
 
 // ----------------------------------------------------------------------
+const getApiHost = () => {
+  const isProdValue = localStorage.getItem('is_prod');
+  const isProd = isProdValue ? JSON.parse(isProdValue) : false;
+  return isProd ? HOST_PROD_API : HOST_API;
+};
 
-const axiosInstance = axios.create({ baseURL: HOST_API });
+const axiosInstance = axios.create({ baseURL: getApiHost() });
 
 axiosInstance.interceptors.response.use(
   (res) => res,