fixed edit reminder style issue

src/Routers.jsx

@@ -65,6 +65,9 @@ export default function Routers() {
           <Route exact path="/resources" element={<ResourcePage />} />
           <Route exact path="/my-wallet" element={<MyWalletPage />} />
           <Route exact path="/notification" element={<Notification />} />
+
+          <Route exact path="/t-weight" element={<TrackingPage />} />
+
           <Route
             exact
             path="/my-collection/collection-item"

src/components/Cards/TrackItemCard.jsx

@@ -16,7 +16,7 @@ export default function TrackItemCard({ datas, hidden = false }) {
     }
   };
   return (
-    <div className="card-style-one flex flex-col justify-between w-full h-[187px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
+    <div className="card-style-one flex flex-col justify-between w-full h-[200px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
       <div className="content">
         {/* thumbnail */}
         <div className="w-full h-40">
@@ -38,18 +38,7 @@ export default function TrackItemCard({ datas, hidden = false }) {
               >
                 <Icons name="love" />
               </span>
-              <span
-                onClick={() => setOption(!options)}
-                className="w-7 h-7 flex justify-center items-center bg-white  rounded-full cursor-pointer"
-              >
-                <Icons name="dots" />
-              </span>
-              {options && (
-                <div
-                  onClick={() => setOption(!options)}
-                  className="w-full h-screen fixed top-0 left-0 z-10"
-                ></div>
-              )}
+       
             </div>
             {hidden && (
               <div className="flex justify-center">
@@ -87,22 +76,18 @@ export default function TrackItemCard({ datas, hidden = false }) {
         </div>
         {/* user */}
         <div className="user w-ful -mt-6 mb-2">
-          <div className="user-img w-10 h-10 flex  justify-center items-center overflow-hidden rounded-full mb-2 ml-4">
-            <img
-              src={localImgLoad(`images/${datas.profile_img}`)}
-              alt="user"
-              className=" w-full h-full"
-            />
-          </div>
+
           <p className="text-sm text-thin-light-gray dark:text-white">
-            Owned by
-            <Link to="/user-profile" className="text-purple ml-1">
-              {datas.username}
+            <Link
+            to={`/${datas.widget}`}
+            className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1"
+            >
+            {datas.title}
             </Link>
           </p>
         </div>
 
-      </div>
+        </div>
      
     </div>
   );

src/components/Reminders/AddEditReminder.jsx

@@ -5,10 +5,8 @@ import { Link, useNavigate, useLocation, useParams } from 'react-router-dom'
 // import { toast } from 'react-toastify';
 
 import InputCom from "../Helpers/Inputs/InputCom";
-
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
-
 import usersService from "../../services/UsersService";
 
 
@@ -37,8 +35,8 @@ export default function AddEditReminder({ className }) {
     'member_id': localStorage.getItem('member_id'),
     description: location.state?.reminder.description || '',
     note: location.state?.reminder.note || '',
-    category: location.state?.reminder.category || '',
-    mode: location.state?.reminder.mode || '',
+    category: location.state?.reminder.code || '',
+    mode: location.state?.reminder.code || '',
     'start_date': location.state? new Date(location.state?.reminder.start_date) : startDate,
     'end_date': location.state? new Date(location.state?.reminder.end_date) : endDate
   })
@@ -49,7 +47,6 @@ export default function AddEditReminder({ className }) {
     ))
   }
 
-  
   const getUserMode = async () => {
     try {
       const res = await api.getUserModeCategory('remmode');
@@ -87,19 +84,21 @@ export default function AddEditReminder({ className }) {
       const res = await api.addReminder(reminder);
       if(res && res.status == 200){
         setSuccess(false)
-        setMessage({status: true, message: 'Reminder successfully'})
+        setMessage({status: true, message: 'Reminder set successfully'})
         setTimeout(()=>{
           navigate('/reminders', {replace: true})
         }, 2000)
         return
       }
       setSuccess(false)
-      setMessage({status: false, message: `Opps, couldn't perform action`})
+      setMessage({status: false, message: `Sorry, couldn't perform action`})
     } catch (error) {
       setSuccess(false)
       setMessage({status: false, message: 'An error occurred'})
     }
   }
+
+  
   
   useEffect(() => {
     getUserMode();
@@ -132,7 +131,7 @@ export default function AddEditReminder({ className }) {
 
              {/* first name and last name */}
              <div className="xl:flex xl:space-x-7 mb-6">
-              <div className="field w-full mb-6 xl:mb-0">
+              <div className="field w-full reminder-select mb-6 xl:mb-0">
                 {/* <InputCom
                   label="Reminder Type"
                   type="text"
@@ -141,19 +140,19 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Reminder Type</label>
-                <select value={reminder.category} name='category' className='bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <select value={reminder.category} name='category' className='bg-slate-50 rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
                   <option className='' value="">Select category</option>
                   {category.length > 0 &&
                   <>
                     {category.map((option, index)=>(
-                      <option key={index} className='' value={option.category}>{option.category}</option>
+                      <option key={index} className='' value={option.code}>{option.category}</option>
                     ))
                     }
                   </>
                   }
                 </select>
               </div>
-              <div className="field w-full">
+              <div className="field w-full reminder-select">
                 {/* <InputCom
                   label="Mode"
                   type="text"
@@ -162,12 +161,12 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Mode</label>
-                <select value={reminder.mode} name='mode' className='bg-white dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
+                <select value={reminder.mode} name='mode' className='bg-slate-50 rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
                 <option className='' value="">Select mode</option>
                   {category.length > 0 &&
                   <>
                     {mode.map((option, index)=>(
-                      <option key={index} className='' value={option.mode}>{option.mode}</option>
+                      <option key={index} className='' value={option.code}>{option.mode}</option>
                     ))
                     }
                   </>
@@ -247,7 +246,7 @@ export default function AddEditReminder({ className }) {
                 className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                 onClick={handleAddReminder}
               >
-                {location.state?.reminder ? 'Edit' : 'Upadate'}
+                {location.state?.reminder ? 'Edit' : 'Add Reminder'}
               </button>
             }
           </div>

src/components/Reminders/ReminderTable.jsx

@@ -3,6 +3,7 @@ import dataImage1 from "../../assets/images/data-table-user-1.png";
 import usersService from "../../services/UsersService";
 import SelectBox from "../Helpers/SelectBox";
 import { Link } from "react-router-dom";
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function ReminderTable({ className }) {
   const api = new usersService();
@@ -98,7 +99,7 @@ export default function ReminderTable({ className }) {
                       <div className="flex space-x-2 items-center">
                         <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                           <img
-                            src={dataImage1}
+                            src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
                             alt="data"
                             className="w-full h-full"
                           />
@@ -137,7 +138,7 @@ export default function ReminderTable({ className }) {
                       </span>
                     </td>
                     <td className="text-right py-4 px-2">
-                    <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full">Edit</Link>
+                    <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white btn-gradient px-2.5 py-1.5 rounded-full">Edit</Link>
                     </td>
                       </tr>
                       ))
@@ -150,8 +151,8 @@ export default function ReminderTable({ className }) {
                     <td className=" py-4">
                       <div className="flex space-x-2 items-center">
                         <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                          <img
-                            src={dataImage1}
+                        <img
+                            src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
                             alt="data"
                             className="w-full h-full"
                           />
@@ -196,7 +197,7 @@ export default function ReminderTable({ className }) {
                       >
                         Edit
                       </button> */}
-                      <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full">Edit</Link>
+                      <Link to={`/add-reminder/${reminder.uuid}`} state={{reminder}} className="text-sm text-white btn-gradient px-2.5 py-1.5 rounded-full">Edit</Link>
                     </td>
                           </tr>
                         )

src/components/Tracking/TrackCategory.jsx

@@ -3,7 +3,7 @@ import TrackItemCard from "../Cards/TrackItemCard";
 import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
 
-export default function TrackCategoy({ className, trending }) {
+export default function TrackCategory({ className, trackcategory }) {
   const settings = {
     arrows: false,
     slidesToShow: 4,
@@ -91,9 +91,9 @@ export default function TrackCategoy({ className, trending }) {
       {/* trending products */}
       <div className="trending-products relative w-full">
         <SliderCom selector={trendingSlider} settings={settings}>
-          {trending &&
-            trending.length > 0 &&
-            trending.map((item) => (
+          {trackcategory &&
+            trackcategory.length > 0 &&
+            trackcategory.map((item) => (
               <TrackItemCard key={item.id} datas={item} />
             ))}
         </SliderCom>

src/components/Tracking/index.jsx

@@ -1,20 +1,24 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import HistoryAnalyticsCard from "../Cards/HistoryAnalyticsCard";
 import SellHistoryMarketVisitorAnalytic from "../Home/SellHistoryMarketVisitorAnalytic";
 import Layout from "../Partials/Layout";
 import TrackingTable from "./TrackingTable";
 import MarketHistorySection from "./MarketHistorySection";
-import TrackCategoy from "./TrackCategory";
+import TrackCategory from "./TrackCategory";
 import datas from "../../data/product_data.json";
 
-export default function Tracking() {
+export default function Tracking(props) {
+  console.log("IN TRACKING COMPO", props);
+ 
   const trending = datas.datas;
+  console.log("IN TRACKING COMPO TRD", trending);
+  //debugger;
   return (
     <>
       <Layout>
         <div className="history-wrapper w-full mb-10">
           <div className="main-wrapper w-full">
-            <TrackCategoy trending={trending} className="mb-10" />
+            <TrackCategory trackcategory={props.trackCategory} className="mb-10" />
             <TrackingTable />
           </div>
         </div>

src/index.css

@@ -712,3 +712,28 @@ TODO: Responsive ===========================
   height: 4.813rem !important;
   transition: all 500ms;
 }
+
+.reminder-select select{
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat #fafafa;
+  background-position: calc(100% - 0.75rem) center !important;
+  box-shadow: 0 0 0.5em 0 rgba(194, 194, 194, 0.2); 
+}
+
+.reminder-select select::-ms-expand {
+  display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
+}
+
+.reminder-select select option{
+  color: inherit;
+}
+
+/* Target Internet Explorer 9 to undo the custom arrow */
+@media screen and (min-width:0\0) {
+  .reminder-select select {
+      background: none\9;
+      padding: 5px\9;
+  }
+}

src/services/UsersService.js

@@ -43,6 +43,13 @@ class usersService {
         };
         return this.getAuxEnd("/resources", reqData);
       }
+
+      getTrackCategory(){
+        var reqData = {
+            member_id: localStorage.getItem("member_id")
+        };
+        return this.getAuxEnd("/trackcategory", reqData);
+      }
     //----------------------------------------  -----
     //----------------------------------------  -----
     // Unified call below

src/views/TrackingPage.jsx

@@ -1,10 +1,32 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Tracking from "../components/Tracking";
-
+import usersService
+ from "../services/UsersService";
 export default function TrackingPage() {
+    const userApi = new usersService();
+    const [trackCategory, setTrackCategory] = useState([]);
+//debugger;
+    const getTrackCategory = async () => {
+        try {
+          const res = await userApi.getTrackCategory(); 
+          if(res.status == 200){
+            setTrackCategory(res.data);
+            return
+          }
+        }catch(error) {
+            console.log("error ~");
+        }
+      };
+      
+      useEffect(() => {
+        getTrackCategory();
+      }, []);
+
     return (
         <>
-            <Tracking />
+            <Tracking 
+              trackCategory={trackCategory}
+            />
         </>
     );
 }