Entry widget

src/components/Tracking/TrackAction/TrackEntryWidget.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import background from "../../../assets/images/shape/balance-bg.svg";
+import InputCom from "../../../components/Helpers/Inputs/InputCom";
+import dataImage2 from "../../../assets/images/data-table-user-2.png";
+
+
+export default function TrackEntryWidget(props) {
+  const [eth] = useState(90);
+  const [btc] = useState(85);
+  const [ltc] = useState(20);
+  // debugger;
+  return (
+    <div
+      className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col justify-between  px-8 py-9"
+      style={{
+        background: `url(${background}) 0% 0% / cover no-repeat`,
+      }}
+    >
+      <div className="wallet flex justify-between">
+        <div className="w-[100px] h-[100px] rounded-full overflow-hidden flex justify-center items-center">
+          <img src={dataImage2} alt="data" className="w-full h-full" />
+        </div>
+        <div>
+          <p className="text-26 font-bold tracking-wide text-white text-right">
+            {props.selectedEntry?.title} Entry
+          </p>
+        </div>
+      </div>
+
+      <div className="balance">
+        <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+          <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
+            <InputCom placeholder="" label="" name="val1" type="text" />
+          </div>
+          <div className="input-item flex-1">
+            <InputCom
+              placeholder="Drop down Units"
+              label=""
+              name="unitofmeasure"
+              type="text"
+            />
+          </div>
+        </div>
+        <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+          <div className="input-item  w-full mb-5 sm:mb-0">
+            <InputCom
+              placeholder="date time selection"
+              label=""
+              name="event_time"
+              type="text"
+            />
+          </div>
+        </div>
+
+        <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+          <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+            <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0"></div>
+            <div className="input-item flex-1">
+              <button
+                type="button"
+                className="btn-login  rounded-[50px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center "
+              >
+                <span>Add</span>
+              </button>
+            </div>
+          </div>
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/Tracking/TrackAction/UserWeightWidget.jsx

@@ -37,38 +37,28 @@ export default function UserWeightWidget() {
             <InputCom
               placeholder=""
               label=""
-              name="first_name"
+              name="val1"
               type="text"
-              iconName="people"
+             
             />
           </div>
           <div className="input-item flex-1">
             <InputCom
-              placeholder=""
+              placeholder="Drop down Units"
               label=""
-              name="Last_name"
+              name="unitofmeasure"
               type="text"
-              iconName="people"
+            
             />
           </div>
         </div>
         <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
-          <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
+          <div className="input-item  w-full mb-5 sm:mb-0">
             <InputCom
-              placeholder=""
+              placeholder="date time selection"
               label=""
-              name="first_name"
+              name="event_time"
               type="text"
-              iconName="people"
-            />
-          </div>
-          <div className="input-item flex-1">
-            <InputCom
-              placeholder=""
-              label=""
-              name="Last_name"
-              type="text"
-              iconName="people"
             />
           </div>
         </div>

src/components/Tracking/TrackAction/index.jsx

@@ -1,15 +1,44 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import Layout from "../../Partials/Layout";
 import UserWeightWidget from "./UserWeightWidget";
+import TrackEntryWidget from "./TrackEntryWidget";
 import UserRecentTracking from "./UserRecentTracking";
+import usersService from "../../../services/UsersService";
 
 export default function TrackAction() {
+  const api = new usersService();
   let { trackpage } = useParams();
+  const [selectedCategory, setSelTrackCat] = useState([]);
+
+
+  const getTrackCat = async () => {
+    try {
+      const res = await api.refreshTrackCategory();
+      if(res.status == 200){
+        var fliterCategory = res.data.filter(function (el) {
+          return el.widget == trackpage;
+        });
+        //debugger;
+        setSelTrackCat([{data:fliterCategory[0]}]);
+        return
+      }
+    }catch(error) {
+     // setIsLoading(false)
+    }
+  };
+
+  useEffect(() => {
+    getTrackCat();
+  }, []);
 
   console.log("TRACK PAGE  = = ", trackpage);
+  console.log("SELECTED TRACK PAGE  trackCat = = ", selectedCategory);
+  const selectedEntry = selectedCategory[0]?.data; // better way to do this so thst null on promise will not kill the screen 
 
+  console.log("wait till you know whst page to show");
+  //debugger;
   return (
     <>
       <Layout>
@@ -17,13 +46,13 @@ export default function TrackAction() {
           <div className="main-wrapper w-full">
             <div className="balance-inquery w-full lg:h-[436px] lg:flex lg:space-x-11 mb-11">
               <div className="lg:w-1/2 h-full mb-10 lg:mb-0">
-                <UserWeightWidget />
+                <TrackEntryWidget selectedEntry={selectedEntry} />
               </div>
               <div className="flex-1">
                 <div className="my-wallets w-full h-full bg-white dark:bg-dark-white   rounded-lg p-6">
                   <div className="mb-4">
                     <h1 className="text-xl font-bold tracking-wide   text-dark-gray dark:text-white">
-                      Some title HERE
+                      {selectedCategory[0]?.data?.title}
                     </h1>
                   </div>
                   <div className="content-area">SOMETHING HERE</div>

src/services/UsersService.js

@@ -51,6 +51,10 @@ class usersService {
         return this.getAuxEnd("/resources", reqData);
       }
 
+      refreshTrackCategory(){
+        console.log("IMPLEMENT LOCAL STORAGE HERE - no need for server gab everytime");
+        return this.getTrackCategory();
+      }
       getTrackCategory(){
         var reqData = {
             member_id: localStorage.getItem("member_id")