made tracking component body navigate on click

src/components/Cards/TrackItemCard.jsx

@@ -1,14 +1,16 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 // import { toast } from "react-toastify";
 import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import Icons from "../Helpers/Icons";
 
 export default function TrackItemCard({ datas, hidden = false }) {
+  const navigate = useNavigate()
   const [addFavorite, setValue] = useState(false);
   const [options, setOption] = useState(false);
-  const favoriteHandler = () => {
+  const favoriteHandler = (e) => {
+    e.stopPropagation()
     if (!addFavorite) {
       setValue(true);
     } else {
@@ -16,7 +18,7 @@ export default function TrackItemCard({ datas, hidden = false }) {
     }
   };
   return (
-    <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="card-style-one flex flex-col justify-between w-full h-[200px] bg-white dark:bg-dark-white p-3 pb rounded-2xl cursor-pointer" onClick={()=>{navigate(`/track-action/${datas.widget}`, { replace: true })}}>
       <div className="content">
         {/* thumbnail */}
         <div className="w-full h-40">

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -21,12 +21,12 @@ export default function InputCom({
           {label}
         </label>
       )}
-      <div className="input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
+      <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
         <input
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className="input-field placeholder:text-base text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
+          className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
           type={type}
           id={name}
           name={name}

src/components/Reminders/AddEditReminder.jsx

@@ -1,13 +1,12 @@
 import React, {useState, useEffect} from 'react'
-import DatePicker from 'react-date-picker';
 import Layout from '../Partials/Layout'
 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 Calendar from 'react-calendar';
-// import 'react-calendar/dist/Calendar.css';
+import 'react-calendar/dist/Calendar.css';
 import usersService from "../../services/UsersService";
 
 
@@ -37,7 +36,9 @@ export default function AddEditReminder({ className }) {
     description: location.state?.reminder.description || '',
     notes: location.state?.reminder.notes || '',
     category: location.state?.reminder.code || '',
-    mode: 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
   })
   
   const onReminderInputChange = ({target:{name,value}}) => { //function to run when user changes any input on the add reminder page
@@ -66,15 +67,12 @@ export default function AddEditReminder({ className }) {
 
   const handleAddReminder = async () => { // function to add reminder, after all test cases are met
      // toast('Reminder Added')
-     let infoDetail = reminder
-     infoDetail.start_date = startDate
-     infoDetail.end_date = endDate
      if(location.state){
-      infoDetail.uuid = reminder_uuid
+      reminder.uuid = reminder_uuid
      }
     setSuccess(true)
     setMessage({status: true, message: ''})
-    let {description, notes, category, mode} = infoDetail
+    let {description, notes, category, mode} = reminder
     //CHECKING IF AN EMPTY FIELD WAS PASSED
     if(!description || !notes || !category || !mode){
       setSuccess(false)
@@ -83,7 +81,7 @@ export default function AddEditReminder({ className }) {
     }
 
     try {
-      const res = await api.addReminder(infoDetail);
+      const res = await api.addReminder(reminder);
       if(res && res.status == 200){
         setSuccess(false)
         setMessage({status: true, message: 'Reminder set successfully'})
@@ -142,7 +140,7 @@ 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-[#fafafa] border-light-purple rounded-full pl-4 dark:bg-[#11131F] dark:text-[#7B818D] text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' 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 &&
                   <>
@@ -163,7 +161,7 @@ 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-[#fafafa] rounded-full pl-4 dark:bg-[#11131F] dark:text-[#7B818D] text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' 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 &&
                   <>
@@ -187,35 +185,18 @@ export default function AddEditReminder({ className }) {
                   value={''}
                 /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Start Date</label>
-                {/* <Calendar onChange={setStartDate} value={reminder.start_date} calendarType="US" /> */}
+                <Calendar onChange={setStartDate} value={reminder.start_date} calendarType="US" />
-                <DatePicker
-                minDate={new Date()}
-                minDetail="decade"
-                format="y-MM-dd"
-                monthPlaceholder="mm"
-                yearPlaceholder="yyyy"
-                dayPlaceholder="dd"
-                range="range"
-                clearIcon={startDate ? null : 'x'}
-                value={startDate}
-                onChange={(date) => setStartDate(date)}
-                calendarIcon={<CalendarIcon />}
-              />
               </div>
               <div className="field w-full">
+                {/* <InputCom
+                  label="End Date"
+                  type="text"
+                  name="endDate"
+                  placeholder="10-20-2034"
+                  value={''}
+                /> */}
                 <label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">End Date</label>
-                <DatePicker
+                <Calendar onChange={setEndDate} value={reminder.end_date} calendarType="US" />
-                minDate={startDate}
-                minDetail="decade"
-                format="y-MM-dd"
-                monthPlaceholder="mm"
-                yearPlaceholder="yyyy"
-                dayPlaceholder="dd"
-                range="range"
-                value={endDate}
-                onChange={(date) => setEndDate(date)}
-                calendarIcon={<CalendarIcon />}
-              />
               </div>
             </div>
 
@@ -227,9 +208,9 @@ export default function AddEditReminder({ className }) {
                   <textarea
                     name='notes'
                     value={reminder.notes}
-                    placeholder="Provide a detailed description of your item."
+                    placeholder="provide a detailed description of your item."
                     rows="7"
-                    className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none resize-none"
+                    className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                     onChange={onReminderInputChange}
                     maxLength={250}
                   />
@@ -244,7 +225,6 @@ export default function AddEditReminder({ className }) {
             <button
               type="button"
               className="text-18 text-light-red tracking-wide "
-              onClick={() => navigate('/reminders')}
             >
               <span className="border-b dark:border-[#5356fb29]  border-light-red">
                 {" "}
@@ -278,8 +258,3 @@ export default function AddEditReminder({ className }) {
     </>
   )
 }
-
-const CalendarIcon = () => (<><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 dark:text-[#374151]">
-<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
-</svg>
-</>)

src/index.css

@@ -23,7 +23,6 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 * {
   min-height: 0;
   min-width: 0;
@@ -658,7 +657,7 @@ TODO: Responsive ===========================
   .children-element {
     left: 0;
     top: 0;
-    -webkit-transform: none;
+    webkit-transform: none;
     transform: none;
   }
 }
@@ -686,24 +685,11 @@ TODO: Responsive ===========================
   border-radius: 7px !important;
 }
 
-.dark .react-calendar{
-  background: #11131F;
-  color: #7B818D;
-  border: 1px solid #25284F;  
-}
-.dark .react-calendar__navigation button:enabled:hover, 
-.dark .react-calendar__navigation button:enabled:focus,
-.dark .react-calendar__tile:disabled,
-.dark .react-calendar__navigation button:disabled{background: #1D1F2F;}
-
 .react-calendar__navigation{
   margin-top: 2px;
   margin-inline: 2px;
 }
 
-.react-calendar__tile--active{color: #fff; font-weight: bold; background-color: #006edc;}
-.dark .react-calendar__tile--active{color: #fff;}
-
 .react-calendar__navigation button:enabled:hover,
 .react-calendar__navigation button:enabled:focus{
   @apply rounded-full transition duration-500
@@ -727,19 +713,13 @@ TODO: Responsive ===========================
   transition: all 500ms;
 }
 
-.dark .react-calendar__tile{background: #11131F;}
-
 .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;
-  border: 0.5px solid #E3E4FE; 
+  box-shadow: 0 0 0.5em 0 rgba(194, 194, 194, 0.2); 
-}
-
-.dark .reminder-select select {
-  border: 0.5px solid #25284F; 
 }
 
 .reminder-select select::-ms-expand {
@@ -757,35 +737,3 @@ TODO: Responsive ===========================
       padding: 5px\9;
   }
 }
-
-/* Date Picker */
-.react-date-picker__wrapper{
-  border: 0.5px solid #E3E4FE;
-  padding: 1.25rem;
-  background: #fafafa;
-  border-radius: 9999px;
-}
-
-.dark .react-date-picker__wrapper {border: 0.5px solid #25284F;}
-
-.dark .react-date-picker__wrapper{
-  background: #11131F;
-  color: #7B818D;
-}
-
-.dark .react-date-picker__button svg{stroke: #7B818D;}
-
-.react-date-picker__calendar .react-calendar{
-  min-height: 18.4rem;
-}
-
-.react-date-picker__calendar .react-calendar__tile{
-  height: 40px !important;
-}
-
-.react-date-picker__inputGroup__input,
-.react-date-picker__inputGroup__divider, 
-.react-date-picker__inputGroup__leadingZero{
-  cursor: pointer;
-  color: #374151;
-}