home page started

.env

@@ -1,3 +1,7 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="development"
+REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
+REACT_APP_MAIN_API="https://dev-api.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
+
 

.env.development

@@ -1,3 +1,6 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="development"
+REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
+REACT_APP_MAIN_API="https://dev-api.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
 

.env.production

@@ -1,3 +1,5 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="production"
-
+REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
+REACT_APP_MAIN_API="https://api.mermsemr.com"
+REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"

docker-compose.yml

@@ -17,8 +17,12 @@ services:
       - ./src/:/usr/src/app/src
       - ./run.sh:/usr/src/app/run.sh
     extra_hosts:
-      - backend.mermsemr.api.live:10.10.33.15
+      - api.mermsemr.com:10.10.33.15
-      - backend.mermsemr.api.test:10.10.33.15
+      - devapi.mermsemr.com:10.10.33.15
+      - dev-socket.mermsemr.com:10.10.33.15
+      - socket.mermsemr.com:10.10.33.15
+      - dev-media.mermsemr.com:10.10.33.15
+      - media.mermsemr.com:10.10.33.15
     environment:
       - CHOKIDAR_USEPOLLING=true
       - NODE_ENV=${NODE_ENV:-production}

package.json

@@ -6,7 +6,9 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "apexcharts": "^4.1.0",
     "react": "^18.3.1",
+    "react-apexcharts": "^1.7.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
     "react-router-dom": "^7.0.2",

src/App.js

@@ -6,6 +6,7 @@ import siteLinks from './links/siteLinks';
 import HomePage from './views/HomePage';
 import SignupPage from './views/SignupPage';
 import ForgetpwdPage from './views/ForgetpwdPage';
+import UserExist from './component/authorization/UserExist';
 
 
 
@@ -13,10 +14,14 @@ function App() {
   return (
     <div className="">
       <Routes>
-        <Route path={siteLinks.home} element={<HomePage />} />
         <Route path={siteLinks.login} element={<LoginPage />} />
         <Route path={siteLinks.signup} element={<SignupPage />} />
         <Route path={siteLinks.error} element={<ForgetpwdPage />} />
+
+        {/* protected routes */}
+        <Route element={<UserExist />}> 
+          <Route path={siteLinks.home} element={<HomePage />} />
+        </Route>
       </Routes>
     </div>
   );

src/component/CardContainer.jsx

@@ -0,0 +1,7 @@
+import React, { Children } from 'react'
+
+export default function CardContainer({children}) {
+  return (
+    <div className='w-full h-full py-4 flex flex-col gap-1 rounded-sm shadow-shadow_round bg-white'>{children}</div>
+  )
+}

src/component/authorization/UserExist.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react'
+import { Outlet } from 'react-router-dom'
+import MainLoader from '../loaders/MainLoader'
+
+export default function UserExist() {
+
+    const [loading, setLoading] = useState(true)
+  
+    useEffect(()=>{
+      const timer = setTimeout(()=>{
+          setLoading(false)
+      },1000)
+  
+      return () => clearTimeout(timer)
+    },[])
+
+  return (
+    <>
+    {loading ? 
+        <MainLoader />
+        :
+        <Outlet />
+    }
+    </>
+  )
+}

src/component/breadcrumb/BreadcrumbCom.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { MdKeyboardDoubleArrowRight } from 'react-icons/md'
+import { TiHomeOutline } from 'react-icons/ti'
+
+export default function BreadcrumbCom({title, paths}) {
+  return (
+    <div className='w-full py-4 flex justify-between items-center'>
+        <h1 className='text-3xl text-black font-semibold'>{title}</h1>
+        <div className='flex gap-2 items-center text-black-gray text-base'>
+            <TiHomeOutline />
+            {paths.map((item, index) => (
+              <>
+                <MdKeyboardDoubleArrowRight />
+                <p className={`${index + 1 == paths.length ? 'text-primary' : ''}`}>{item}</p>
+              </>
+            ))}
+        </div>
+    </div>
+  )
+}

src/component/charts/AreaChart.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import ReactApexChart from 'react-apexcharts';
+
+export default function AreaChart() {
+         
+    var options = {
+    series: [{
+        name: 'value',
+        data: [31, 40, 28, 51, 42, 109, 100]
+      }, 
+    //   {
+    //     name: 'series2',
+    //     data: [11, 32, 45, 32, 34, 52, 41]
+    //   }
+    ],
+      options:{
+          chart: {
+            height: 350,
+            type: 'area',
+            zoom: {
+                enabled: false
+              }
+          },
+          dataLabels: {
+            enabled: false
+          },
+          stroke: {
+            curve: 'smooth'
+          },
+          xaxis: {
+            // type: 'datetime',
+            // categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
+            type: 'text',
+            categories: ["mon", "tues", "wed", "thur", "fri", "sat", "sun"]
+          },
+        //   tooltip: {
+        //     x: {
+        //       format: 'dd/MM/yy HH:mm'
+        //     },
+        //   },
+      }
+    };
+
+  return (
+    <ReactApexChart {...options} type="area" height={'60%'} className='w-full' />
+  )
+}

src/component/home/Home.jsx

@@ -0,0 +1,163 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import siteLinks from '../../links/siteLinks'
+import AreaChart from '../charts/AreaChart'
+import CardContainer from '../CardContainer'
+import { FaArrowUp } from 'react-icons/fa'
+import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
+
+export default function Home() {
+  return (
+    <div className="p-10 flex flex-col justify-center items-center gap-8">
+
+      <Link className='w-full block text-left' to={siteLinks.login}>Logout</Link> 
+
+      <BreadcrumbCom title={'Home'} paths={['Dashboard', 'Home']} />
+      <div className='w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-8'>
+        <div className='w-full'>
+          <CardContainer>
+            <div className='px-4 flex justify-between items-center'>
+              <div className='flex flex-col gap-1'>
+                <h1 className='text-black text-3xl font-semibold'>52%</h1>
+                <p className='text-black-gray font-medium text-10'>Past 12 hours</p>
+              </div>
+              <div className='flex flex-col gap-1'>
+                <h1 className='text-black-gray text-12 font-semibold'>Revenues</h1>
+                <p className='text-black-gray font-medium text-10 flex gap-2'><span><FaArrowUp /></span> <span>5.35%</span></p>
+              </div>
+            </div>
+            <AreaChart />
+          </CardContainer>
+        </div>
+        <div className='w-full'>
+          <CardContainer>
+            <div className='px-4 flex justify-between items-center'>
+              <div className='flex flex-col gap-1'>
+                <h1 className='text-black text-3xl font-semibold'>52%</h1>
+                <p className='text-black-gray font-medium text-10'>Past 12 hours</p>
+              </div>
+              <div className='flex flex-col gap-1'>
+                <h1 className='text-black-gray text-12 font-semibold'>Conversion Rate</h1>
+                <p className='text-black-gray font-medium text-10 flex gap-2'><span><FaArrowUp /></span> <span>5.35%</span></p>
+              </div>
+            </div>
+            <AreaChart />
+          </CardContainer>
+        </div>
+        <div className='w-full'>
+          <CardContainer>
+            <div className='px-4 flex justify-between items-center'>
+              <div className='flex flex-col gap-1'>
+                <h1 className='text-black text-3xl font-semibold'>52%</h1>
+                <p className='text-black-gray font-medium text-10'>Past 12 hours</p>
+              </div>
+              <div className='flex flex-col gap-1'>
+                <h1 className='text-black-gray text-12 font-semibold'>Transaction</h1>
+                <p className='text-black-gray font-medium text-10 flex gap-2'><span><FaArrowUp /></span> <span>5.35%</span></p>
+              </div>
+            </div>
+            <AreaChart />
+          </CardContainer>
+        </div>
+        <div className='w-full'>
+          <CardContainer>
+            <div className='px-4 flex justify-between items-center'>
+              <div className='flex flex-col gap-1'>
+                <h1 className='text-black text-3xl font-semibold'>52%</h1>
+                <p className='text-black-gray font-medium text-10'>Past 12 hours</p>
+              </div>
+              <div className='flex flex-col gap-1'>
+                <h1 className='text-black-gray text-12 font-semibold'>Purchases</h1>
+                <p className='text-black-gray font-medium text-10 flex gap-2'><span><FaArrowUp /></span> <span>5.35%</span></p>
+              </div>
+            </div>
+            <AreaChart />
+          </CardContainer>
+        </div>
+
+      </div>
+
+      {/* top selling */}
+      <div className='w-full grid grid-cols-1 xl:grid-cols-9 gap-8'>
+        <div className='w-full col-span-1 xl:col-span-6'>
+          <CardContainer>
+            <div className='px-4 pb-4 flex justify-between items-center border-b'>
+              <div className='flex justify-between'>
+                <h1 className='text-black text-lg font-semibold'>Top Selling Products</h1>
+              </div>
+            </div>
+            <div className='px-4 h-[350px]'></div>
+          </CardContainer>
+        </div>
+        <div className='w-full col-span-1 xl:col-span-3'>
+          <CardContainer>
+            <div className='px-4 pb-4 flex justify-between items-center border-b'>
+              <div className='flex justify-between'>
+                <h1 className='text-black text-lg font-semibold'>Lifetime sales</h1>
+              </div>
+            </div>
+            <div className='px-4 h-[350px]'></div>
+          </CardContainer>
+        </div>
+      </div>
+
+      {/* yearly sells */}
+      <div className='w-full grid grid-cols-1 xl:grid-cols-2 gap-8'>
+        <div className='w-full'>
+          <CardContainer>
+            <div className='px-4 pb-4 flex justify-between items-center border-b'>
+              <div className='flex justify-between'>
+                <h1 className='text-black text-lg font-semibold'>Yearly Sales Report</h1>
+              </div>
+            </div>
+            <div className='h-[350px]'></div>
+          </CardContainer>
+        </div>
+        <div className='w-full'>
+          <CardContainer>
+            <div className='px-4 pb-4 flex justify-between items-center border-b'>
+              <div className='flex justify-between'>
+                <h1 className='text-black text-lg font-semibold'>Invoices Status</h1>
+              </div>
+            </div>
+            <div className='h-[350px]'></div>
+          </CardContainer>
+        </div>
+      </div>
+
+      {/* conversion */}
+      <div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
+        <div className='w-full'>
+          <CardContainer>
+            <div className='px-4 pb-4 flex justify-between items-center border-b'>
+              <div className='flex justify-between'>
+                <h1 className='text-black text-lg font-semibold'>Conversion Visualizer</h1>
+              </div>
+            </div>
+            <div className='h-[350px]'></div>
+          </CardContainer>
+        </div>
+        <div className='w-full'>
+          <CardContainer>
+            <div className='px-4 pb-4 flex justify-between items-center border-b'>
+              <div className='flex justify-between'>
+                <h1 className='text-black text-lg font-semibold'>Best selling product</h1>
+              </div>
+            </div>
+            <div className='h-[350px]'></div>
+          </CardContainer>
+        </div>
+        <div className='w-full'>
+          <CardContainer>
+            <div className='px-4 pb-4 flex justify-between items-center border-b'>
+              <div className='flex justify-between'>
+                <h1 className='text-black text-lg font-semibold'>Sales overview</h1>
+              </div>
+            </div>
+            <div className='h-[350px]'></div>
+          </CardContainer>
+        </div>
+      </div>
+    </div>
+  )
+}

src/component/loaders/MainLoader.jsx

@@ -4,8 +4,8 @@ import Loader from '../../assets/loader/loader.svg'
 export default function MainLoader() {
   return (
 
-        <div className="vh-100 d-flex justify-content-center">
+        <div className="h-screen flex justify-center">
-            <div className="align-self-center">
+            <div className="self-center">
                 <img src={Loader} alt="loader" />
             </div>
         </div>

src/views/HomePage.js

@@ -1,9 +1,7 @@
-import { Link } from 'react-router-dom';
-import siteLinks from '../links/siteLinks';
 
-import '../css/App.css';
+import Home from '../component/home/Home';
 
 
 export default function HomePage(){
-    return <div className="samatze">Merms Panel Home <Link to={siteLinks.login}>Logout</Link> </div>;
+    return <Home />
 }

tailwind.config.js

@@ -30,6 +30,9 @@ export default {
       },
       backgroundImage: {
         login_gradient: 'linear-gradient(to right, #8e54e9 0, #4776e6 100%)'
+      },
+      boxShadow: {
+        shadow_round: '0 0px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.19)'
       }
     },
   },