Sriram TimeLogger for BMdashboard

src/actions/bmdashboard/projectMemberAction.js

@@ -0,0 +1,31 @@
+import axios from "axios";
+
+import { ENDPOINTS } from "utils/URL";
+import GET_BM_PROJECT_MEMBERS from "constants/bmdashboard/projectMemberConstants";
+import { GET_ERRORS } from "constants/errors";
+
+export const fetchBMProjectMembers = projectId => {
+  return async dispatch => {
+    axios.get(ENDPOINTS.BM_PROJECT_MEMBERS(projectId))
+    .then(res => {
+      dispatch(setProjectMembers(res.data))
+    })
+    .catch(err => {
+      dispatch(setErrors(err))
+    })
+  } 
+}
+
+export const setProjectMembers = payload => {
+  return {
+    type: GET_BM_PROJECT_MEMBERS,
+    payload
+  }
+}
+
+export const setErrors = payload => {
+  return { 
+    type: GET_ERRORS,
+    payload
+  }
+}

src/actions/bmdashboard/timeLoggerActions.js

@@ -0,0 +1,98 @@
+import axios from 'axios';
+import { ENDPOINTS } from '../../utils/URL';
+import { GET_ERRORS } from '../../constants/errors';
+import {
+  START_TIME_LOG,
+  PAUSE_TIME_LOG,
+  STOP_TIME_LOG,
+  GET_CURRENT_TIME_LOG,
+} from '../../constants/bmdashboard/timeLoggerConstants';
+
+// Start Time Log Action
+export const startTimeLog = (projectId, memberId, task) => {
+  return async dispatch => {
+    try {
+      const response = await axios.post(ENDPOINTS.TIME_LOGGER_START(projectId, memberId), {
+        task,
+      });
+
+      dispatch({
+        type: START_TIME_LOG,
+        payload: { ...response.data.timeLog, memberId, projectId },
+      });
+    } catch (error) {
+      dispatch({
+        type: GET_ERRORS,
+        payload: error.response ? error.response.data : { message: 'Error starting time log' },
+      });
+    }
+  };
+};
+
+// Pause Time Log Action
+export const pauseTimeLog = (projectId, timeLogId, memberId) => {
+  return async dispatch => {
+    try {
+      const response = await axios.post(ENDPOINTS.TIME_LOGGER_PAUSE(projectId, memberId), {
+        timeLogId,
+      });
+
+      dispatch({
+        type: PAUSE_TIME_LOG,
+        payload: { ...response.data.timeLog, memberId, projectId },
+      });
+    } catch (error) {
+      dispatch({
+        type: GET_ERRORS,
+        payload: error.response ? error.response.data : { message: 'Error pausing time log' },
+      });
+    }
+  };
+};
+
+// Stop Time Log Action
+export const stopTimeLog = (projectId, timeLogId, memberId) => {
+  return async dispatch => {
+    try {
+      const response = await axios.post(ENDPOINTS.TIME_LOGGER_STOP(projectId, memberId), {
+        timeLogId,
+      });
+
+      dispatch({
+        type: STOP_TIME_LOG,
+        payload: { ...response.data.timeLog, memberId, projectId },
+      });
+    } catch (error) {
+      dispatch({
+        type: GET_ERRORS,
+        payload: error.response ? error.response.data : { message: 'Error stopping time log' },
+      });
+    }
+  };
+};
+
+// Get Current Time Log Action
+export const getCurrentTimeLog = (projectId, memberId) => {
+  return async dispatch => {
+    try {
+      const response = await axios.get(ENDPOINTS.TIME_LOGGER_LOGS(projectId, memberId));
+
+      // Find the ongoing or paused time log
+      const currentTimeLog = response.data.find(
+        log => log.status === 'ongoing' || log.status === 'paused',
+      );
+
+      dispatch({
+        type: GET_CURRENT_TIME_LOG,
+        payload: { currentTimeLog, memberId, projectId } || null,
+      });
+    } catch (error) {
+      dispatch({
+        type: GET_ERRORS,
+        payload: error.response
+          ? error.response.data
+          : { message: 'Error fetching current time log' },
+      });
+    }
+  };
+};

src/components/BMDashboard/BMTimeLogger/BMTimeLogCard.css

@@ -0,0 +1,213 @@
+.bm-timelogger__header h1 {
+  font-size: 1.5em;
+  text-align: left;
+  margin-top: 2em;
+}
+
+.bm-dashboard__button.btn.btn-secondary {
+  background-color: #2e5061;
+}
+
+@media (min-width: 650px) {
+  .bm-dashboard__button.btn.btn-secondary {
+    padding-left: 0;
+    padding-right: 0;
+    max-height: 38px;
+  }
+}
+
+.member-card-container {
+  width: 100%;
+  display: flex;
+}
+
+
+.member-card {
+  width: 100%;
+  align-items: center;
+}
+
+.member-card-header {
+  width: 100%;
+  align-items: center;
+}
+
+.member-card-name {
+  text-align: center;
+  color: white;
+}
+
+.stopwatch-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+}
+
+.member-stopwatch {
+  background-color: #4b5055 !important;
+  border-radius: 15px !important;
+  height: 3rem;
+  font-size: 1.5rem !important;
+  text-align: center;
+  color: white;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+
+.font-color-gray {  
+  color: #4b5055;
+}
+
+.member-start {
+  background-color: #01987a !important;  
+  border-radius: 10px !important;    
+  width: 5rem;
+}
+
+.member-pause {
+  background-color: #168dc0 !important;  
+  border-radius: 10px !important;    
+  width: 5rem;
+}
+
+
+.member-stop {
+  background-color: #980101 !important;  
+  border-radius: 10px !important;    
+  width: 5rem;  
+}
+
+.member-clear {
+  background-color: #a9b7be !important;    
+  border-radius: 10px !important;  
+  width: 5rem;  
+}
+/* project summaries */
+.projects-list {
+  width: 80%;
+  list-style-type: none;
+  max-height: 80vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding:0;
+}
+
+.project-summary {
+  background-color: #e8f4f9;
+  min-height: 20vh;
+  height: auto;
+  margin-bottom: 2em;
+  padding: 1em;
+  border-radius: 5px;
+}
+
+.project-summary_header {
+  font-size: clamp(0.8em, 3vw, 1.3em);
+  font-weight: bold;
+  text-align: center;
+  justify-content: center;
+  /* color: #3ea0cb; */
+}
+
+.project-summary_content {
+  display: block;
+  flex-wrap: wrap;
+  text-align: start;
+  margin: 0;
+  font-size: clamp(0.9em, 2.5vw, 1em);
+}
+
+.project-summary_item {
+  padding: 8px;
+  align-items: center;
+}
+
+.project-summary_label {
+  margin-right: 1px;
+}
+
+.display-inline {
+  display: inline-block;
+  white-space: no-wrap;
+}
+
+/* error page */
+
+.bm-error-page {
+  width: 100%;
+  max-width: 1536px;
+  margin: 1rem auto;
+  padding: 0 1rem;
+}
+
+.bm-error-page section {
+  margin-top: 2rem;
+}
+
+/* forms */
+
+.inv-form-page-container {
+  width: 100%;
+  max-width: 800px;
+  margin: 1rem auto;
+  padding: 2rem;
+  border: 1px solid #ccc;
+  border-radius: 40px;
+}
+
+.inv-form {
+  margin: 2rem auto;
+}
+
+.inv-form-info {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin: 1rem 0;
+}
+
+.inv-form-group {
+  margin: 1.5rem auto;
+}
+
+.inv-form input,
+.inv-form select,
+.inv-form textarea {
+  background-color: rgb(249, 249, 249);
+}
+
+.inv-form-btn-group {
+  display: flex;
+  gap: 1rem;
+  margin: 4rem auto 2rem;
+}
+
+.inv-form-btn-group button {
+  width: 50%;
+}
+
+.inv-form-required::after {
+  content: '*';
+  color: red;
+}
+
+@media screen and (max-width: 800px) {
+  .inv-form-page-container {
+    width: 95%;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .inv-form-page-container h2 {
+    font-size: 1.7rem;
+  }
+}
+
+.form-footer {
+font-size: 0.875em;
+margin-top:3px;
+}