restricted employee on client details page

app/javascript/src/components/Clients/List/Header.tsx

@@ -1,11 +1,15 @@
 import * as React from "react";
 import { MagnifyingGlass, Plus } from "phosphor-react";
 
-const Header = ({ setnewClient }) => (
-  <div className="sm:flex mt-6 mb-3 sm:items-center sm:justify-between">
-    <h2 className="header__title">
-            Clients
-    </h2>
+const Header = ({ setnewClient, isAdminUser }) => (
+  <div
+    className={
+      isAdminUser
+        ? "sm:flex mt-6 mb-3 sm:items-center sm:justify-between"
+        : "sm:flex mt-6 mb-3 sm:items-center"
+    }
+  >
+    <h2 className="header__title">Clients</h2>
     <div className="header__searchWrap">
       <div className="header__searchInnerWrapper">
         <input
@@ -18,16 +22,18 @@ const Header = ({ setnewClient }) => (
         </button>
       </div>
     </div>
-    <div className="flex">
-      <button
-        type="button"
-        className="header__button"
-        onClick={() => setnewClient(true)}
-      >
-        <Plus weight="fill" size={16} />
-        <span className="ml-2 inline-block">NEW CLIENT</span>
-      </button>
-    </div>
+    {isAdminUser && (
+      <div className="flex">
+        <button
+          type="button"
+          className="header__button"
+          onClick={() => setnewClient(true)}
+        >
+          <Plus weight="fill" size={16} />
+          <span className="ml-2 inline-block">NEW CLIENT</span>
+        </button>
+      </div>
+    )}
   </div>
 );
 

app/javascript/src/components/Clients/List/index.tsx

@@ -17,7 +17,7 @@ import NewClient from "../Modals/NewClient";
 const getTableData = (clients) => {
   if (clients) {
     return clients.map((client) => {
-      const hours = client.minutes/60;
+      const hours = client.minutes / 60;
       return {
         col1: <div className="text-base text-miru-dark-purple-1000">{client.name}</div>,
         col2: <div className="text-base text-miru-dark-purple-1000 text-right">{client.email}</div>,
@@ -107,9 +107,9 @@ const Clients = ({ isAdminUser }) => {
   return (
     <>
       <ToastContainer />
-      <Header setnewClient={setnewClient} />
+      <Header isAdminUser={isAdminUser} setnewClient={setnewClient} />
       <div>
-        { isAdminUser && <div className="bg-miru-gray-100 py-10 px-10">
+        {isAdminUser && <div className="bg-miru-gray-100 py-10 px-10">
           <div className="flex justify-end">
             <select onChange={handleSelectChange} className="px-3
                 py-1.5
@@ -123,32 +123,32 @@ const Clients = ({ isAdminUser }) => {
                 focus:outline-none
                 text-miru-han-purple-1000">
               <option className="text-miru-dark-purple-600" value="week">
-                    THIS WEEK
+                THIS WEEK
               </option>
               <option className="text-miru-dark-purple-600" value="month">
-                    This MONTH
+                This MONTH
               </option>
               <option className="text-miru-dark-purple-600" value="year">
-                    THIS YEAR
+                THIS YEAR
               </option>
             </select>
           </div>
           {clientData && <ChartBar data={clientData} totalMinutes={totalMinutes} />}
-          <AmountBoxContainer amountBox = {amountBox} />
+          <AmountBoxContainer amountBox={amountBox} />
         </div>
         }
         <div className="flex flex-col">
           <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
               <div className="overflow-hidden">
-                { clientData && <Table
+                {clientData && <Table
                   handleEditClick={handleEditClick}
                   handleDeleteClick={handleDeleteClick}
-                  hasRowIcons={true}
+                  hasRowIcons={isAdminUser}
                   tableHeader={tableHeader}
                   tableRowArray={tableData}
-                  rowOnClick={handleRowClick}
-                /> }
+                  rowOnClick={isAdminUser ? handleRowClick : () => { }}// eslint-disable-line
+                />}
               </div>
             </div>
           </div>
@@ -169,8 +169,8 @@ const Clients = ({ isAdminUser }) => {
       {newClient && (
         <NewClient
           setnewClient={setnewClient}
-          setClientData = {setClientData}
-          clientData = {clientData}
+          setClientData={setClientData}
+          clientData={clientData}
         />
       )}
     </>

app/javascript/src/components/Projects/List/Header.tsx

@@ -1,11 +1,15 @@
 import * as React from "react";
 import { Funnel, MagnifyingGlass, Plus } from "phosphor-react";
 
-const Header = ({ setShowProjectModal }) => (
-  <div className="sm:flex mt-6 mb-3 sm:items-center sm:justify-between">
-    <h2 className="header__title">
-            Projects
-    </h2>
+const Header = ({ setShowProjectModal, isAdminUser }) => (
+  <div
+    className={
+      isAdminUser
+        ? "sm:flex mt-6 mb-3 sm:items-center sm:justify-between"
+        : "sm:flex mt-6 mb-3 sm:items-center"
+    }
+  >
+    <h2 className="header__title">Projects</h2>
     <React.Fragment>
       <div className="header__searchWrap">
         <div className="header__searchInnerWrapper">
@@ -18,17 +22,21 @@ const Header = ({ setShowProjectModal }) => (
             <MagnifyingGlass size={12} />
           </button>
         </div>
-        <button className="ml-7">
-          <Funnel size={16} />
-        </button>
+        {isAdminUser && (
+          <button className="ml-7">
+            <Funnel size={16} />
+          </button>
+        )}
       </div>
-      <button
-        className="flex header__button"
-        onClick={()=>setShowProjectModal(true)}
-      >
-        <Plus weight="fill" size={16} />
-        <span className="ml-2 inline-block">NEW PROJECT</span>
-      </button>
+      {isAdminUser && (
+        <button
+          className="flex header__button"
+          onClick={() => setShowProjectModal(true)}
+        >
+          <Plus weight="fill" size={16} />
+          <span className="ml-2 inline-block">NEW PROJECT</span>
+        </button>
+      )}
     </React.Fragment>
 
     {/* {

app/javascript/src/components/Projects/List/index.tsx

@@ -36,6 +36,7 @@ export const ProjectList = ({ isAdminUser }) => {
       <ToastContainer />
       <Header
         setShowProjectModal={setShowProjectModal}
+        isAdminUser={isAdminUser}
       />
       <div className="flex flex-col">
         <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">

app/javascript/src/components/Projects/List/project.tsx

@@ -38,7 +38,7 @@ export const Project = ({
       className={`last:border-b-0 ${grayColor}`}
       onMouseLeave={handleMouseLeave}
       onMouseEnter={handleMouseEnter}
-      onClick={() => projectClickHandler(id)}>
+      onClick={() =>{isAdminUser && projectClickHandler(id);}}>
       <td className="table__cell text-base">
         {name}
       </td>