feat: manage Project

src/app/components/buttonBar/index.tsx

@@ -3,17 +3,20 @@ import TimeRangeSwitch from 'app/components/timeRangeSwitch';
 
 import './index.scss';
 import { GetProject } from 'app/api/project';
+import { useNavigate } from 'react-router-dom';
 interface Props{
   weekly: boolean,
   setWeekly: (week:boolean)=>void
   project: GetProject | null
+  workspaceName: string | undefined
 
 }
-const ButtonBar:React.FC<Props> = ({weekly, setWeekly, project}) => {
+const ButtonBar:React.FC<Props> = ({weekly, setWeekly, project, workspaceName}) => {
+  const navigate= useNavigate()
   return (
     <div className='project-upper-cont'>
       <div className='button-bar'>
-        <button className='back-btn'>&larr; Back</button>
+        <button className='back-btn' onClick={()=>navigate(`/workspace/${workspaceName}`)} >&larr; Back</button>
         <TimeRangeSwitch weekly={weekly} setWeekly={setWeekly} />
       </div>
      { project&&<>

src/app/components/timeRangeSwitch/index.tsx

@@ -1,28 +1,32 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { timeRangeModel } from 'features/project/components/contributorCard/types';
 import { weekAction, monthAction } from './timeRangeSlice';
 import './index.scss';
+import { clearConfigCache } from 'prettier';
 
 interface Props {
   weekly: boolean;
   setWeekly: (bool: boolean) => void;
 }
 
 const TimeRangeSwitch: React.FC<Props> = ({ weekly, setWeekly }) => {
-  const dispatch = useDispatch();
-  const isWeekly = useSelector((state: timeRangeModel) => state.isWeekly.value);
-
+  // const dispatch = useDispatch();
+  // const isWeekly = useSelector((state: timeRangeModel) => state.isWeekly.value);
+ useEffect(()=>{
+   console.log(weekly)
+ },[weekly, setWeekly])
   return (
     <div className='timerange-cont'>
       <button
-        onClick={() => setWeekly(!weekly)}
-        className={weekly ? 'active' : ''}
+        onClick={() => setWeekly(true)}
+        className={weekly ? 'active' :''}
+        // className={'active'}
       >
         Weekly{' '}
       </button>
       <button
-        onClick={() => setWeekly(!weekly)}
+        onClick={() => setWeekly(false)}
         className={weekly ? '' : 'active'}
       >
         Monthly{' '}

src/app/routes/BasicRoutes.tsx

@@ -12,12 +12,14 @@ import EditWorkspace from 'features/EditWorkspace';
 import EditProject from 'features/EditProject';
 import WorkspaceMembers from 'features/workspace-members ';
 import WorkspaceAddMember from 'features/WorkspaceAddMember';
+import ProjectMembers from 'features/project-members ';
+import ProjectAddMember from 'features/ProjectAddMember ';
 
 const BasicRoutes = () => {
   return (
     <Routes>
       <Route path={'/'} element={<WorkspaceView />} />
-      <Route path={'/projects/:spaceName/:projectName'} element={<ProjectPage />} />
+      <Route path={'/project/:spaceName/:projectName'} element={<ProjectPage />} />
       <Route path={'/addproject/:spaceName'} element={<AddProject />} />
       <Route path={'/workspace/:spaceName'} element={<Workspace />} />
       <Route path={'/login'} element={<Login />} />
@@ -26,6 +28,8 @@ const BasicRoutes = () => {
       <Route path={'/editProject/:spaceName/:projectName'} element={<EditProject/>}/>
       <Route path={'/workspaceMembers/:spaceName'} element={<WorkspaceMembers/>}/>
       <Route path={"/workspaceAddMembers/:spaceName"} element={<WorkspaceAddMember/>} />
+      <Route path={"/projectMembers/:spaceName/:projectName"} element={<ProjectMembers/>}/>
+      <Route path='/projectAddMembers/:spaceName/:projectName' element={<ProjectAddMember/>} />
       <Route path={'/*'} element={<Error />} />
       {/* <Route path={'/testing'} element={<ProjectMembers />} /> */}
     </Routes>

src/features/AddWorkspace/index.tsx

@@ -8,6 +8,8 @@ import { uploadIcon } from 'app/api/file';
 
 import './index.scss';
 import UserContext from 'app/context/user/userContext';
+import { AVATAR_URL } from 'app/constants/api';
+import { AVATAR_API } from 'envConstants';
 
 const AddWorkspace = () => {
   const navigate = useNavigate();
@@ -244,7 +246,7 @@ const AddWorkspace = () => {
               <div className='member-card' key={index}>
                 <img
                   className='member-avatar'
-                  src='https://api.multiavatar.com/Binx.png'
+                  src={AVATAR_URL+"/"+member+".png?apikey="+AVATAR_API}
                 />{' '}
                 <p className='member-name'>{member}</p>{' '}
                 <button

src/features/ProjectAddMember /index.scss

@@ -0,0 +1,164 @@
+
+
+$breakpoint-tablet: 768px;
+.main_aworkspace_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: max-content;
+  padding: 2rem;
+  .addworkspace-form-container {
+    background: linear-gradient(110.51deg, #141432 0.9%, #2a2a4b 101.51%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 2rem 1rem;
+    border-radius: 1.25rem;
+    gap: 2rem;
+    .submit {
+      display: flex;
+      padding: 1rem 2rem;
+      align-self: flex-end;
+      font-size: 1.5rem;
+      border-radius: 0.875rem;
+      background: #402aa4;
+      color: white;
+      outline: none;
+      border: none;
+    }
+  }
+
+  .single-form-element-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    .label {
+      color: #8181ff;
+      font-size: 1.5rem;
+      font-weight: 900;
+    }
+  }
+}
+
+.custom-input {
+  box-sizing: border-box;
+  border: 0.8px solid #402aa4;
+  border-radius: 14px;
+  background-color: transparent;
+  align-items: flex-start;
+  color: rgba(173, 173, 255, 0.75);
+  padding: 1.5rem 1rem;
+  font-size: 1.25rem;
+  font-family: 'Poppins';
+  outline: none;
+}
+
+.custom-input::placeholder {
+  color: rgba(173, 173, 255, 0.75);
+  font-family: Poppins;
+  font-size: 1.25rem;
+  font-weight: 100;
+  line-height: normal;
+}
+
+.file-input-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 30rem;
+  padding: 2rem;
+  border-radius: 1.25rem;
+  background: linear-gradient(
+    138deg,
+    rgba(20, 20, 50, 0.7) 5.19%,
+    rgba(20, 20, 50, 0.7) 97.11%
+  );
+  backdrop-filter: blur(25px);
+
+  .custom-file-input {
+    visibility: hidden;
+  }
+  .file-label {
+    width: fit-content;
+    padding: 0.4375rem 0.5625rem;
+    border-radius: 1.75rem;
+    background: #402aa4;
+    color: white;
+  }
+}
+
+.add-member-container {
+  position: relative;
+  box-sizing: border-box;
+  border: 0.8px solid #402aa4;
+  border-radius: 14px;
+  display: flex;
+  flex-direction: row;
+  outline: #141432;
+  .custom-input {
+    display: flex;
+    width: 100%;
+    border: none;
+    outline: none;
+  }
+  button {
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.25rem;
+    margin: 0.75rem 1rem;
+    color: white;
+    width: 7rem;
+    font-weight: 100 !important;
+    border-radius: 2.3125rem;
+    background: #402aa4;
+  }
+}
+
+.added-members {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+  flex-wrap: wrap;
+  width: 100%;
+  .member-card {
+    display: inline-flex;
+    padding: 0.4375rem 0.875rem 0.625rem 0.875rem;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5625rem;
+    color: #8989ce;
+    border-radius: 0.75rem;
+    background: #26264e;
+    .member-avatar {
+      width: 40px;
+      height: 40px;
+    }
+    .btn-cross {
+      appearance: none;
+      border: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: transparent;
+    }
+  }
+}
+
+@media (min-width: $breakpoint-tablet) {
+  .main_aworkspace_container {
+    padding: 2rem 5rem;
+    .addworkspace-form-container {
+      padding: 2rem 5rem;
+    }
+  }
+}