Merge branch 'apiserver' into 'master'

comments field propagation stopped

See merge request !47

src/components/dateRangePicker/DateRangePicker.jsx

@@ -23,10 +23,10 @@ const DateRangePicker = ({getReports}) => {
 
   return (
     <div>
-      <label htmlFor="start" className="font-bold">From:</label>
-      <input type="date" id="start" name="start" onChange={(e)=>handleStartChange(e.target.value)} />
-      <label htmlFor="end"  className="font-bold">To:</label>
-      <input type="date" id="end" name="end" onChange={(e)=>handleEndChange(e.target.value)}/>
+      <label htmlFor="start" className="font-bold ps-2">From:</label>
+      <input type="date" id="start" name="start"  placeholder="MM-DD-YYYY" className="rounded-md font-semibold ms-1 ps-2 text-[#555]" onChange={(e)=>handleStartChange(e.target.value)} />
+      <label htmlFor="end"  className="font-bold ps-2">To:</label>
+      <input type="date" id="end" name="end" placeholder="MM-DD-YYYY" className="rounded-md font-semibold ms-1 ps-2 text-[#555]" onChange={(e)=>handleEndChange(e.target.value)}/>
 
     </div>
   )

src/components/modal/index.jsx

@@ -29,6 +29,7 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
   }
 
   const handleComments=(e)=>{
+    // e.stopPropagation()
     setActivityData({...activityData,comments:e.target.value})
   }
 
@@ -100,7 +101,22 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
 
               <div className="flex items-center my-5">
               <label htmlFor="comments" className="block w-3/12 mb-20 text-sm font-medium text-gray-900 dark:text-white">Comments :</label>
-              <textarea id="comments" rows="4" className="block ml-2 p-2.5 w-9/12 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="activity comments" onChange={(e)=>handleComments(e)}></textarea>
+              <textarea id="comments" rows="4" className="block ml-2 p-2.5 w-9/12 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="activity comments" onChange={(e)=>handleComments(e)}
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={(e) => {
+                  // Prevent propagation of space key press
+                  if (e.key === " ") {
+                    // e.preventDefault()
+                    e.stopPropagation();
+                  }
+                }}
+                onKeyUp={(e) => {
+                  // Prevent propagation of space key release
+                  if (e.key === " ") {
+                    e.preventDefault()
+                    e.stopPropagation();
+                  }
+                }}></textarea>
               </div>
               <div className="flex items-center justify-end mb-3">
             <button onClick={onClose} className="px-3 py-2 bg-gray-700 text-white rounded">Cancel</button>

src/components/modal/modalButton.jsx

@@ -6,7 +6,7 @@ export default function ModalButton({type,handleAddActivity}) {
  
   const handleOnClose = () => setShowMyModal(false);
   return (
-    <div className="bg-blue-400 bg-opacity-30">
+    <div className="bg-blue-400 bg-opacity-30" onClick={(e) => e.stopPropagation()}>
           <button
           onClick={() => setShowMyModal(true)}
           className="bg-blue-400 text-white px-2 py-1 rounded hover:scale-95 transition text-sm">

src/components/table/index.jsx

@@ -5,7 +5,7 @@ function Table({headers, data,loading, maxHeight}) {
   if(loading) return <Loading/>
   if(data?.length)
   return (
-    <div className={` overflow-x-auto sm:rounded-lg p-4 max-h-[${maxHeight}vh]`}>
+    <div className={` overflow-x-auto sm:rounded-lg p-4 max-h-[${maxHeight}vh] bg-gray-100`}>
       <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 bg-transparent justify-center border-separate border-spacing-y-2">
         <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700  dark:text-white">
           <tr className="mb-2">
@@ -37,7 +37,7 @@ function Table({headers, data,loading, maxHeight}) {
   );
   else
   return <div className="w-full h-full">
-     <p className="text-center align-middle pt-14 pb-14 text-blue-500">No records to display</p>
+     <p className="text-center align-middle pt-14 pb-14 text-blue-500  font-bold">No records to display</p>
   </div>
 }
 

src/pages/dashboard/index.jsx

@@ -64,7 +64,7 @@ function Dashboard() {
   ]
 
   return (
-     <div>
+     <div className="max-h-[87vh] ">  
         <Table headers={headers} data={reportees} loading={loading} maxHeight={88}/>    
      </div>
   )

src/pages/reports/index.jsx

@@ -152,7 +152,7 @@ return (
 );
 else
 return  <div className="w-full h-full">
-<p className="text-center align-middle pt-14 pb-14 text-blue-500">The Employee data you are trying to access <br/> is not under you reportees so data is hidden.</p>
+<p className="text-center align-middle pt-14 pb-14 text-blue-500 font-bold">Employee Details Not Found</p>
 </div>
 }