Merge pull request #81 from ctc-uci/68_Kaitlin_Sindhuja

68 kaitlin sindhuja

client/src/App.jsx

@@ -30,6 +30,7 @@ import { AuthProvider } from "./contexts/AuthContext";
 import { BackendProvider } from "./contexts/BackendContext";
 import { RoleProvider } from "./contexts/RoleContext";
 import { Home } from "./components/home/Home";
+import { EditBooking } from "./components/bookings/EditBooking";
 import { ArchivedPrograms } from "./components/programs/ArchivedPrograms";
 import { Settings } from "./components/settings/Settings";
 
@@ -131,6 +132,10 @@ const App = () => {
                   path="*"
                   element={<ProtectedRoute element={<CatchAll />} />}
                 />
+                <Route
+                  path="/bookings/edit/:id"
+                  element={<ProtectedRoute element={<EditBooking />} />}
+                />
                 <Route
                   path='/programs/archived'
                   element={<ProtectedRoute element={<ArchivedPrograms/>} />}

client/src/assets/ArchiveIcon.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 export const ArchiveIcon = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", verticalAlign: "middle" }}>
-        <path d="M2.5 7.30371V16.835C2.5 17.4151 2.73047 17.9715 3.1407 18.3818C3.55094 18.792 4.10734 19.0225 4.6875 19.0225H15.3125C15.8927 19.0225 16.4491 18.792 16.8593 18.3818C17.2695 17.9715 17.5 17.4151 17.5 16.835V7.30371C17.5 7.26227 17.4835 7.22253 17.4542 7.19323C17.4249 7.16392 17.3852 7.14746 17.3438 7.14746H2.65625C2.61481 7.14746 2.57507 7.16392 2.54576 7.19323C2.51646 7.22253 2.5 7.26227 2.5 7.30371ZM12.9297 13.2268L10.4418 15.7143C10.3246 15.8314 10.1657 15.8972 10 15.8972C9.83431 15.8972 9.6754 15.8314 9.5582 15.7143L7.07031 13.2268C6.83242 12.9889 6.81055 12.6018 7.03711 12.3525C7.09398 12.2899 7.16298 12.2394 7.23993 12.2042C7.31688 12.1691 7.40018 12.1499 7.48477 12.1478C7.56936 12.1458 7.65348 12.1609 7.73204 12.1923C7.8106 12.2238 7.88196 12.2708 7.9418 12.3307L9.375 13.7635V9.66504C9.375 9.32871 9.63359 9.04004 9.96992 9.02324C10.0544 9.01917 10.1389 9.0323 10.2182 9.06183C10.2974 9.09136 10.3699 9.13668 10.4312 9.19505C10.4924 9.25341 10.5412 9.3236 10.5745 9.40137C10.6078 9.47914 10.625 9.56286 10.625 9.64746V13.7635L12.0582 12.3307C12.118 12.2708 12.1894 12.2238 12.268 12.1923C12.3465 12.1609 12.4306 12.1458 12.5152 12.1478C12.5998 12.1499 12.6831 12.1691 12.7601 12.2042C12.837 12.2394 12.906 12.2899 12.9629 12.3525C13.1895 12.6014 13.1676 12.9889 12.9297 13.2268Z" fill="#474849"/>
-        <path d="M17.5 2.77246H2.5C1.80964 2.77246 1.25 3.3321 1.25 4.02246V4.64746C1.25 5.33782 1.80964 5.89746 2.5 5.89746H17.5C18.1904 5.89746 18.75 5.33782 18.75 4.64746V4.02246C18.75 3.3321 18.1904 2.77246 17.5 2.77246Z" fill="#474849"/>
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <path d="M2.5 6.40625V15.9375C2.5 16.5177 2.73047 17.0741 3.1407 17.4843C3.55094 17.8945 4.10734 18.125 4.6875 18.125H15.3125C15.8927 18.125 16.4491 17.8945 16.8593 17.4843C17.2695 17.0741 17.5 16.5177 17.5 15.9375V6.40625C17.5 6.36481 17.4835 6.32507 17.4542 6.29576C17.4249 6.26646 17.3852 6.25 17.3438 6.25H2.65625C2.61481 6.25 2.57507 6.26646 2.54576 6.29576C2.51646 6.32507 2.5 6.36481 2.5 6.40625ZM12.9297 12.3293L10.4418 14.8168C10.3246 14.9339 10.1657 14.9997 10 14.9997C9.83431 14.9997 9.6754 14.9339 9.5582 14.8168L7.07031 12.3293C6.83242 12.0914 6.81055 11.7043 7.03711 11.4551C7.09398 11.3924 7.16298 11.342 7.23993 11.3068C7.31688 11.2716 7.40018 11.2524 7.48477 11.2503C7.56936 11.2483 7.65348 11.2635 7.73204 11.2949C7.8106 11.3263 7.88196 11.3734 7.9418 11.4332L9.375 12.866V8.76758C9.375 8.43125 9.63359 8.14258 9.96992 8.12578C10.0544 8.12171 10.1389 8.13484 10.2182 8.16437C10.2974 8.1939 10.3699 8.23922 10.4312 8.29759C10.4924 8.35595 10.5412 8.42614 10.5745 8.50391C10.6078 8.58167 10.625 8.6654 10.625 8.75V12.866L12.0582 11.4332C12.118 11.3734 12.1894 11.3263 12.268 11.2949C12.3465 11.2635 12.4306 11.2483 12.5152 11.2503C12.5998 11.2524 12.6831 11.2716 12.7601 11.3068C12.837 11.342 12.906 11.3924 12.9629 11.4551C13.1895 11.7039 13.1676 12.0914 12.9297 12.3293Z" fill="#474849"/>
+      <path d="M17.5 1.875H2.5C1.80964 1.875 1.25 2.43464 1.25 3.125V3.75C1.25 4.44036 1.80964 5 2.5 5H17.5C18.1904 5 18.75 4.44036 18.75 3.75V3.125C18.75 2.43464 18.1904 1.875 17.5 1.875Z" fill="#474849"/>
     </svg>
   );
-};
+};

client/src/assets/DeleteIcon.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const DeleteIcon = () => {
+  return (
+   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
+    <path d="M12.7008 3.60083L12.945 5.29167H16.25C16.4158 5.29167 16.5747 5.35751 16.6919 5.47472C16.8092 5.59193 16.875 5.75091 16.875 5.91667C16.875 6.08243 16.8092 6.2414 16.6919 6.35861C16.5747 6.47582 16.4158 6.54167 16.25 6.54167H15.6092L14.8817 15.0292C14.8375 15.5458 14.8017 15.9708 14.7442 16.3142C14.6858 16.6717 14.5967 16.9917 14.4225 17.2883C14.149 17.7543 13.7424 18.1278 13.255 18.3608C12.945 18.5083 12.6183 18.5692 12.2567 18.5975C11.9092 18.625 11.4833 18.625 10.965 18.625H9.035C8.51667 18.625 8.09083 18.625 7.74333 18.5975C7.38167 18.5692 7.055 18.5083 6.745 18.3608C6.25757 18.1278 5.85098 17.7543 5.5775 17.2883C5.4025 16.9917 5.315 16.6717 5.25583 16.3142C5.19833 15.97 5.1625 15.5458 5.11833 15.0292L4.39083 6.54167H3.75C3.58424 6.54167 3.42527 6.47582 3.30806 6.35861C3.19085 6.2414 3.125 6.08243 3.125 5.91667C3.125 5.75091 3.19085 5.59193 3.30806 5.47472C3.42527 5.35751 3.58424 5.29167 3.75 5.29167H7.055L7.29917 3.60083L7.30833 3.55C7.46 2.89167 8.025 2.375 8.73333 2.375H11.2667C11.975 2.375 12.54 2.89167 12.6917 3.55L12.7008 3.60083ZM8.3175 5.29167H11.6817L11.4683 3.81167C11.4283 3.6725 11.3267 3.625 11.2658 3.625H8.73417C8.67333 3.625 8.57167 3.6725 8.53167 3.81167L8.3175 5.29167ZM9.375 9.25C9.375 9.08424 9.30915 8.92527 9.19194 8.80806C9.07473 8.69085 8.91576 8.625 8.75 8.625C8.58424 8.625 8.42527 8.69085 8.30806 8.80806C8.19085 8.92527 8.125 9.08424 8.125 9.25V13.4167C8.125 13.5824 8.19085 13.7414 8.30806 13.8586C8.42527 13.9758 8.58424 14.0417 8.75 14.0417C8.91576 14.0417 9.07473 13.9758 9.19194 13.8586C9.30915 13.7414 9.375 13.5824 9.375 13.4167V9.25ZM11.875 9.25C11.875 9.08424 11.8092 8.92527 11.6919 8.80806C11.5747 8.69085 11.4158 8.625 11.25 8.625C11.0842 8.625 10.9253 8.69085 10.8081 8.80806C10.6908 8.92527 10.625 9.08424 10.625 9.25V13.4167C10.625 13.5824 10.6908 13.7414 10.8081 13.8586C10.9253 13.9758 11.0842 14.0417 11.25 14.0417C11.4158 14.0417 11.5747 13.9758 11.6919 13.8586C11.8092 13.7414 11.875 13.5824 11.875 13.4167V9.25Z" fill="#767778"/>
+    </svg>
+  );
+};

client/src/assets/DeleteIconRed.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const DeleteIconRed = () => {
+  return (
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M12.7008 3.10083L12.945 4.79167H16.25C16.4158 4.79167 16.5747 4.85751 16.6919 4.97472C16.8092 5.09193 16.875 5.25091 16.875 5.41667C16.875 5.58243 16.8092 5.7414 16.6919 5.85861C16.5747 5.97582 16.4158 6.04167 16.25 6.04167H15.6092L14.8817 14.5292C14.8375 15.0458 14.8017 15.4708 14.7442 15.8142C14.6858 16.1717 14.5967 16.4917 14.4225 16.7883C14.149 17.2543 13.7424 17.6278 13.255 17.8608C12.945 18.0083 12.6183 18.0692 12.2567 18.0975C11.9092 18.125 11.4833 18.125 10.965 18.125H9.035C8.51667 18.125 8.09083 18.125 7.74333 18.0975C7.38167 18.0692 7.055 18.0083 6.745 17.8608C6.25757 17.6278 5.85098 17.2543 5.5775 16.7883C5.4025 16.4917 5.315 16.1717 5.25583 15.8142C5.19833 15.47 5.1625 15.0458 5.11833 14.5292L4.39083 6.04167H3.75C3.58424 6.04167 3.42527 5.97582 3.30806 5.85861C3.19085 5.7414 3.125 5.58243 3.125 5.41667C3.125 5.25091 3.19085 5.09193 3.30806 4.97472C3.42527 4.85751 3.58424 4.79167 3.75 4.79167H7.055L7.29917 3.10083L7.30833 3.05C7.46 2.39167 8.025 1.875 8.73333 1.875H11.2667C11.975 1.875 12.54 2.39167 12.6917 3.05L12.7008 3.10083ZM8.3175 4.79167H11.6817L11.4683 3.31167C11.4283 3.1725 11.3267 3.125 11.2658 3.125H8.73417C8.67333 3.125 8.57167 3.1725 8.53167 3.31167L8.3175 4.79167ZM9.375 8.75C9.375 8.58424 9.30915 8.42527 9.19194 8.30806C9.07473 8.19085 8.91576 8.125 8.75 8.125C8.58424 8.125 8.42527 8.19085 8.30806 8.30806C8.19085 8.42527 8.125 8.58424 8.125 8.75V12.9167C8.125 13.0824 8.19085 13.2414 8.30806 13.3586C8.42527 13.4758 8.58424 13.5417 8.75 13.5417C8.91576 13.5417 9.07473 13.4758 9.19194 13.3586C9.30915 13.2414 9.375 13.0824 9.375 12.9167V8.75ZM11.875 8.75C11.875 8.58424 11.8092 8.42527 11.6919 8.30806C11.5747 8.19085 11.4158 8.125 11.25 8.125C11.0842 8.125 10.9253 8.19085 10.8081 8.30806C10.6908 8.42527 10.625 8.58424 10.625 8.75V12.9167C10.625 13.0824 10.6908 13.2414 10.8081 13.3586C10.9253 13.4758 11.0842 13.5417 11.25 13.5417C11.4158 13.5417 11.5747 13.4758 11.6919 13.3586C11.8092 13.2414 11.875 13.0824 11.875 12.9167V8.75Z" fill="#90080F"/>
+</svg>
+  );
+};
+

client/src/assets/DuplicateIcon.jsx

@@ -0,0 +1,12 @@
+
+
+import React from 'react';
+
+export const DuplicateIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="19" viewBox="0 0 16 19" fill="none">
+  <path d="M13.8333 0.666504C14.2754 0.666504 14.6993 0.842099 15.0118 1.15466C15.3244 1.46722 15.5 1.89114 15.5 2.33317V12.3332C15.5 12.7752 15.3244 13.1991 15.0118 13.5117C14.6993 13.8242 14.2754 13.9998 13.8333 13.9998H12.1667V15.6665C12.1667 16.1085 11.9911 16.5325 11.6785 16.845C11.3659 17.1576 10.942 17.3332 10.5 17.3332H2.16667C1.72464 17.3332 1.30072 17.1576 0.988155 16.845C0.675595 16.5325 0.5 16.1085 0.5 15.6665V5.6665C0.5 5.22448 0.675595 4.80055 0.988155 4.48799C1.30072 4.17543 1.72464 3.99984 2.16667 3.99984H3.83333V2.33317C3.83333 1.89114 4.00893 1.46722 4.32149 1.15466C4.63405 0.842099 5.05797 0.666504 5.5 0.666504H13.8333ZM6.33333 11.4998H4.66667C4.45427 11.5001 4.24997 11.5814 4.09553 11.7272C3.94108 11.873 3.84814 12.0723 3.83569 12.2843C3.82324 12.4964 3.89223 12.7052 4.02855 12.868C4.16488 13.0309 4.35825 13.1356 4.56917 13.1607L4.66667 13.1665H6.33333C6.54573 13.1663 6.75003 13.0849 6.90447 12.9391C7.05892 12.7933 7.15186 12.594 7.16431 12.382C7.17676 12.17 7.10777 11.9612 6.97145 11.7983C6.83512 11.6354 6.64175 11.5308 6.43083 11.5057L6.33333 11.4998ZM13.8333 2.33317H5.5V3.99984H10.5C10.942 3.99984 11.3659 4.17543 11.6785 4.48799C11.9911 4.80055 12.1667 5.22448 12.1667 5.6665V12.3332H13.8333V2.33317ZM8 8.1665H4.66667C4.44565 8.1665 4.23369 8.2543 4.07741 8.41058C3.92113 8.56686 3.83333 8.77882 3.83333 8.99984C3.83333 9.22085 3.92113 9.43281 4.07741 9.58909C4.23369 9.74537 4.44565 9.83317 4.66667 9.83317H8C8.22101 9.83317 8.43297 9.74537 8.58926 9.58909C8.74554 9.43281 8.83333 9.22085 8.83333 8.99984C8.83333 8.77882 8.74554 8.56686 8.58926 8.41058C8.43297 8.2543 8.22101 8.1665 8 8.1665Z" fill="#767778"/>
+</svg>
+  );
+};
+

client/src/assets/EditIcon.jsx

@@ -0,0 +1,12 @@
+
+
+import React from 'react';
+
+export const EditIcon = () => {
+  return (
+   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+<path d="M3.33333 17.5C3.09722 17.5 2.89944 17.42 2.74 17.26C2.58056 17.1 2.50056 16.9022 2.5 16.6667V14.6458C2.5 14.4236 2.54167 14.2117 2.625 14.01C2.70833 13.8083 2.82639 13.6314 2.97917 13.4792L13.5 2.97917C13.6667 2.82639 13.8508 2.70833 14.0525 2.625C14.2542 2.54167 14.4658 2.5 14.6875 2.5C14.9092 2.5 15.1244 2.54167 15.3333 2.625C15.5422 2.70833 15.7228 2.83333 15.875 3L17.0208 4.16667C17.1875 4.31944 17.3089 4.5 17.385 4.70833C17.4611 4.91667 17.4994 5.125 17.5 5.33333C17.5 5.55556 17.4617 5.7675 17.385 5.96917C17.3083 6.17083 17.1869 6.35472 17.0208 6.52083L6.52083 17.0208C6.36806 17.1736 6.19083 17.2917 5.98917 17.375C5.7875 17.4583 5.57583 17.5 5.35417 17.5H3.33333ZM14.6667 6.5L15.8333 5.33333L14.6667 4.16667L13.5 5.33333L14.6667 6.5Z" fill="#767778"/>
+</svg>
+  );
+};
+

client/src/assets/InfoIconPurple.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const InfoIconPurple  = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path d="M7.99992 14.6668C11.6818 14.6668 14.6666 11.6821 14.6666 8.00016C14.6666 4.31826 11.6818 1.3335 7.99992 1.3335C4.31802 1.3335 1.33325 4.31826 1.33325 8.00016C1.33325 11.6821 4.31802 14.6668 7.99992 14.6668Z" stroke="#4441C8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M8 10.6668V8.00016M8 5.3335H8.00667" stroke="#4441C8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+};

client/src/assets/InfoIconRed.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const InfoIconRed  = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path d="M7.99992 14.6668C11.6818 14.6668 14.6666 11.6821 14.6666 8.00016C14.6666 4.31826 11.6818 1.3335 7.99992 1.3335C4.31802 1.3335 1.33325 4.31826 1.33325 8.00016C1.33325 11.6821 4.31802 14.6668 7.99992 14.6668Z" stroke="#90080F" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M8 10.6668V8.00016M8 5.3335H8.00667" stroke="#90080F" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+};

client/src/assets/ProfileIcon.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const ProfileIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <path d="M3.75 17.5C3.75 17.5 2.5 17.5 2.5 16.25C2.5 15 3.75 11.25 10 11.25C16.25 11.25 17.5 15 17.5 16.25C17.5 17.5 16.25 17.5 16.25 17.5H3.75ZM10 10C10.9946 10 11.9484 9.60491 12.6517 8.90165C13.3549 8.19839 13.75 7.24456 13.75 6.25C13.75 5.25544 13.3549 4.30161 12.6517 3.59835C11.9484 2.89509 10.9946 2.5 10 2.5C9.00544 2.5 8.05161 2.89509 7.34835 3.59835C6.64509 4.30161 6.25 5.25544 6.25 6.25C6.25 7.24456 6.64509 8.19839 7.34835 8.90165C8.05161 9.60491 9.00544 10 10 10Z" fill="#767778"/>
+    </svg>
+  );
+};

client/src/assets/ReactivateIcon.jsx

@@ -0,0 +1,12 @@
+
+
+import React from 'react';
+
+export const ReactivateIcon = () => {
+  return (
+   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.3334 17.0148C16.2945 14.5259 14.484 13.1137 12.9017 12.7782C11.3195 12.4426 9.81314 12.3919 8.38258 12.6261V17.0832L1.66675 9.81025L8.38258 2.9165V7.15275C11.0279 7.17359 13.2767 8.12262 15.1292 9.99984C16.9815 11.8771 18.0495 14.2154 18.3334 17.0148Z" fill="#767778" stroke="#767778" stroke-width="2" stroke-linejoin="round"/>
+</svg>
+
+  );
+};