From 03a4b19b2aeec15984bc81e9d451c663e8e328b1 Mon Sep 17 00:00:00 2001
From: wajeht <58354193+wajeht@users.noreply.github.com>
Date: Fri, 19 Aug 2022 02:31:38 -0400
Subject: [PATCH] feat: scaffold exercise history with chart

---
 package.json                                  |   2 +-
 .../api/v1/exercises/exercises.controller.js  |  20 +-
 .../api/v1/exercises/exercises.queries.js     |  37 ++++
 src/apps/api/v1/exercises/exercises.router.js |  12 ++
 .../api/v1/exercises/exercises.validation.js  |  27 ++-
 src/apps/ui/App.vue                           |  18 +-
 .../components/dashboard/SessionDetails.vue   |  81 ++++---
 .../ui/components/dashboard/VideoDetails.vue  |  49 +++--
 src/apps/ui/components/shared/Signup.vue      |   2 +-
 src/apps/ui/pages/dashboard/Block.vue         |  20 ++
 src/apps/ui/pages/dashboard/Community.vue     |  56 ++---
 src/apps/ui/pages/dashboard/Exercise.vue      | 199 ++++++++++++++++++
 src/apps/ui/router.vue.js                     |  33 ++-
 13 files changed, 467 insertions(+), 89 deletions(-)
 create mode 100644 src/apps/ui/pages/dashboard/Block.vue
 create mode 100644 src/apps/ui/pages/dashboard/Exercise.vue

diff --git a/package.json b/package.json
index 17a7f4f9..9a8f3fd5 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "release:alpha": "npm run release -- --prerelease alpha",
     "rmds": "find . -name '.DS_Store' -delete",
     "prepare": "husky install",
-    "commit": "cz"
+    "commit": "git add -A && cz"
   },
   "bin": {
     "gains": "./src/bin/gains.js"
diff --git a/src/apps/api/v1/exercises/exercises.controller.js b/src/apps/api/v1/exercises/exercises.controller.js
index c43a3115..dccb6dea 100644
--- a/src/apps/api/v1/exercises/exercises.controller.js
+++ b/src/apps/api/v1/exercises/exercises.controller.js
@@ -7,6 +7,24 @@ import * as ExercisesQueries from './exercises.queries.js';
 import * as ExerciseCategoriesQueries from '../exercise-categories/exercise-categories.queries.js';
 import { omit } from 'lodash-es';
 
+/**
+ * It gets the exercise history for a given exercise id
+ * @param req - The request object.
+ * @param res - The response object.
+ * @returns The exercise history for a specific exercise.
+ */
+export async function getExerciseHistory(req, res) {
+  const exercise_id = req.params.exercise_id;
+  const exercise = await ExercisesQueries.getExerciseHistoryByExerciseId(exercise_id);
+
+  return res.status(StatusCodes.OK).json({
+    status: 'success',
+    request_url: req.originalUrl,
+    message: 'The resource was returned successfully!',
+    data: exercise,
+  });
+}
+
 /**
  * It gets an exercise by its id
  * @param req - The request object.
@@ -18,7 +36,7 @@ export async function getExercise(req, res) {
 
   const exercise = await ExercisesQueries.getExerciseById(eid);
 
-  if (!exercise.length) throw new CustomError.BadRequestError(`There are no exercise available for exercise id ${eid}!`); // prettier-ignore
+  // if (!exercise.length) throw new CustomError.BadRequestError(`There are no exercise available for exercise id ${eid}!`); // prettier-ignore
 
   return res.status(StatusCodes.OK).json({
     status: 'success',
diff --git a/src/apps/api/v1/exercises/exercises.queries.js b/src/apps/api/v1/exercises/exercises.queries.js
index d15d02d8..b9e2600d 100644
--- a/src/apps/api/v1/exercises/exercises.queries.js
+++ b/src/apps/api/v1/exercises/exercises.queries.js
@@ -19,6 +19,43 @@ export function getExerciseById(id) {
   return db.select('*').from('exercises').where({ id }).andWhere({ deleted: false });
 }
 
+/**
+ * Get all the sets for a given exercise, ordered by the date they were created.
+ * @param id - the id of the exercise you want to get the history for
+ * @returns An array of objects
+ */
+export async function getExerciseHistoryByExerciseId(id) {
+  const { rows } = await db.raw(
+    `
+    select
+	    s.reps,
+	    s.weight,
+	    s.rpe as "rpe",
+      s.notes as "notes",
+	    s.created_at as "created_at",
+	    e."name" as "exercise_name",
+	    ec."name" as "category_name",
+	    e.id as "exercise_id",
+	    ec.id as "category_id",
+	    s.id as "set_id",
+	    s.session_id as "session_id",
+	    s.log_id as "log_id",
+      e.user_id as "user_id"
+    from
+	    exercises e
+	    inner join sets s on s.exercise_id = e.id
+	    inner join exercise_categories ec on ec.id = e.exercise_category_id
+    where
+	    e.deleted = false
+	    and e.id = ?
+    order by
+	    s.created_at desc
+  `,
+    [id],
+  );
+  return rows;
+}
+
 /**
  * Get all exercises from the database where the user_id matches the uid passed in and where the
  * deleted column is false.
diff --git a/src/apps/api/v1/exercises/exercises.router.js b/src/apps/api/v1/exercises/exercises.router.js
index e6eff91f..38e1f5e3 100644
--- a/src/apps/api/v1/exercises/exercises.router.js
+++ b/src/apps/api/v1/exercises/exercises.router.js
@@ -42,6 +42,18 @@ exercises.get(
   catchAsyncErrors(ExercisesController.getExercise),
 );
 
+/**
+ * GET /api/v1/exercises/{exercise_id}/history
+ * @tags exercises
+ * @summary get history of a exercises
+ * @param {number} exercise_id.path.required - the exercise id - application/x-www-form-urlencoded
+ */
+exercises.get(
+  '/:exercise_id/history',
+  validator(ExercisesValidation.getExerciseHistory),
+  catchAsyncErrors(ExercisesController.getExerciseHistory),
+);
+
 /**
  * POST /api/v1/exercises
  * @tags exercises
diff --git a/src/apps/api/v1/exercises/exercises.validation.js b/src/apps/api/v1/exercises/exercises.validation.js
index 6728479f..c2ac4b01 100644
--- a/src/apps/api/v1/exercises/exercises.validation.js
+++ b/src/apps/api/v1/exercises/exercises.validation.js
@@ -15,6 +15,12 @@ export const getExercise = [
     .isNumeric()
     .withMessage('exercise id must be an number!')
     .bail()
+    .toInt()
+    .custom(async (eid) => {
+      const exercise = await ExercisesQueries.getExerciseById(eid);
+      if (exercise.length === 0) throw new Error('exercise does not exist!');
+      return true;
+    })
     .toInt(),
 ];
 
@@ -47,7 +53,8 @@ export const getExercises = [
       const user = await ExerciseCategoriesQueries.getExerciseCategoriesById(ecid);
       if (user.length === 0) throw new Error('category_id does not exist!');
       return true;
-    }),
+    })
+    .toInt(),
 ];
 
 export const postExercise = [
@@ -147,3 +154,21 @@ export const patchExerciseNote = [
       return true;
     }),
 ];
+
+export const getExerciseHistory = [
+  param('exercise_id')
+    .trim()
+    .notEmpty()
+    .withMessage('exercise id must not be empty!')
+    .bail()
+    .isNumeric()
+    .withMessage('exercise id must be an number!')
+    .bail()
+    .toInt()
+    .custom(async (exercise_id) => {
+      const exercise = await ExercisesQueries.getExerciseById(exercise_id);
+      if (exercise.length === 0) throw new Error('exercise does not exist!');
+      return true;
+    })
+    .toInt(),
+];
diff --git a/src/apps/ui/App.vue b/src/apps/ui/App.vue
index 6f202b85..3c942455 100644
--- a/src/apps/ui/App.vue
+++ b/src/apps/ui/App.vue
@@ -1,6 +1,10 @@
 <template>
-  <component :is="layout"
-    :class="{ 'dashboard-layout-style': layout === 'DashboardLayout' || layout === 'EmptyDashboardLayout' }" />
+  <component
+    :is="layout"
+    :class="{
+      'dashboard-layout-style': layout === 'DashboardLayout' || layout === 'EmptyDashboardLayout',
+    }"
+  />
 </template>
 
 <script>
@@ -25,7 +29,7 @@ export default {
       if (to.meta.layout === 'DashboardLayout' || to.meta.layout === 'EmptyDashboardLayout') {
         document.body.style.backgroundColor = 'black';
       } else {
-        document.body.style.backgroundColor = ''
+        document.body.style.backgroundColor = '';
       }
 
       // set layout by route meta
@@ -40,6 +44,14 @@ export default {
 </script>
 
 <style>
+.btn-group-xs > .btn,
+.btn-xs {
+  padding: 0.25rem 0.4rem;
+  font-size: 0.875rem;
+  line-height: 0.5;
+  border-radius: 0.2rem;
+}
+
 .dashboard-layout-style {
   max-width: 540px;
   margin: 0 auto;
diff --git a/src/apps/ui/components/dashboard/SessionDetails.vue b/src/apps/ui/components/dashboard/SessionDetails.vue
index 8462d5c3..a1e17621 100644
--- a/src/apps/ui/components/dashboard/SessionDetails.vue
+++ b/src/apps/ui/components/dashboard/SessionDetails.vue
@@ -1026,7 +1026,11 @@ function clearAndDismissDeleteALogModal() {
                   <!-- block -->
                   <span v-if="currentSessionDetails.block_name">
                     <i class="bi bi-clipboard2-data-fill me-1"></i>Block:
-                    <span class="fw-light">{{ currentSessionDetails.block_name }}</span>
+                    <router-link
+                      :to="`/dashboard/blocks/${currentSessionDetails.block_id}`"
+                      class="fw-light fst-italic link-dark"
+                      >{{ currentSessionDetails.block_name }}</router-link
+                    >
                   </span>
                 </small>
               </div>
@@ -1034,48 +1038,52 @@ function clearAndDismissDeleteALogModal() {
           </div>
 
           <!-- footer -->
-          <small class="card-footer text-muted d-flex justify-content-between align-items-center">
-            <!-- date -->
-            <!-- left -->
-            <small>
-              <font-awesome-icon icon="fa-calendar " class="me-1" /><span class="fw-light">{{
-                gainsDateDisplay(currentSessionDetails.created_at)
-              }}</span>
-            </small>
-
-            <!-- right -->
-            <span class="d-flex justify-content-between align-items-center gap-2">
-              <!-- incomplete or progress -->
-              <small
-                v-if="!currentSessionDetails.end_date"
-                class="fst-italic d-flex align-items-center"
-              >
-                <!-- danger -->
-                <!-- prettier-ignore -->
+          <div class="card-footer">
+            <span class="d-flex justify-content-between text-muted">
+              <!-- left -->
+              <span class="d-flex justify-content-between align-items-center gap-2">
+                <!-- date -->
+                <small>
+                  <i class="bi bi-calendar-check me-1"></i
+                  >{{ dayjs(currentSessionDetails.created_at).format('YYYY/MM/DD') }}
+                </small>
+              </span>
+
+              <!-- right -->
+              <span class="d-flex justify-content-between align-items-center gap-2">
+                <!-- incomplete or progress -->
                 <span
+                  v-if="!currentSessionDetails.end_date"
+                  class="fst-italic d-flex align-items-center"
+                >
+                  <!-- danger -->
+                  <!-- prettier-ignore -->
+                  <small
                 v-if="currentSessionDetails.end_date === null && dayjs(currentSessionDetails.start_date).format('YYYY/MM/DD') === today"
                 class="text-warning">
                 <font-awesome-icon icon="fa-refresh" class="me-1" /> in progress
-              </span>
+              </small>
 
-                <!-- danger -->
-                <!-- prettier-ignore -->
-                <span
+                  <!-- danger -->
+                  <!-- prettier-ignore -->
+                  <small
                 v-if="currentSessionDetails.end_date === null && dayjs(currentSessionDetails.start_date).format('YYYY/MM/DD') < today"
                 class="text-danger">
                 <i class="bi bi-exclamation-triangle-fill text-danger"></i> incomplete
-              </span>
               </small>
+                </span>
 
-              <!-- videos view -->
-              <router-link
-                class="fw-light link-secondary text-decoration-none"
-                :to="`/dashboard/videos/${currentSessionDetails.id}`"
-              >
-                <small> <i class="bi bi-play-circle-fill"></i> Video view </small>
-              </router-link>
+                <!-- videos view -->
+                <small>
+                  <router-link
+                    class="link-secondary text-decoration-none"
+                    :to="`/dashboard/videos/${currentSessionDetails.id}`"
+                    ><i class="bi bi-play-circle-fill me-1"></i>Video view
+                  </router-link>
+                </small>
+              </span>
             </span>
-          </small>
+          </div>
         </div>
 
         <!-- exercise logs -->
@@ -1383,10 +1391,17 @@ function clearAndDismissDeleteALogModal() {
 
                 <!-- right -->
                 <span class="d-flex justify-content-between gap-2">
+                  <!-- chart -->
                   <button class="btn btn-sm btn-outline-dark" type="button" disabled>
                     <i class="bi bi-bar-chart"></i>
                   </button>
-                  <button class="btn btn-sm btn-outline-dark" type="button" disabled>
+
+                  <!-- history -->
+                  <button
+                    @click="router.push(`/dashboard/exercises/${log.exercise_id}`)"
+                    class="btn btn-sm btn-outline-dark"
+                    type="button"
+                  >
                     <i class="bi bi-journal-text"></i>
                   </button>
                 </span>
diff --git a/src/apps/ui/components/dashboard/VideoDetails.vue b/src/apps/ui/components/dashboard/VideoDetails.vue
index b1dc0a45..2842910e 100644
--- a/src/apps/ui/components/dashboard/VideoDetails.vue
+++ b/src/apps/ui/components/dashboard/VideoDetails.vue
@@ -294,38 +294,43 @@ async function postAComment() {
 
           <!-- footer -->
           <div class="card-footer">
-            <small class="d-flex justify-content-between text-muted">
+            <span class="d-flex justify-content-between text-muted">
               <!-- left -->
-              <span class="d-flex gap-3">
-                <!-- block -->
-                <span v-if="currentSessionDetails.block_name">
-                  <i class="bi bi-clipboard2-data me-1"></i>Block:
-                  <span class="fw-light">{{ currentSessionDetails.block_name }}</span>
-                </span>
-
+              <span class="d-flex align-items-center gap-2">
                 <!-- date -->
-                <span><i class="bi bi-calendar-check me-1"></i> 2020-01-01</span>
+                <small
+                  ><i class="bi bi-calendar-check me-1"></i
+                  >{{ dayjs(currentSessionDetails.created_at).format('YYYY/MM/DD') }}</small
+                >
+
+                <!-- block -->
+                <small v-if="currentSessionDetails.block_name">
+                  <router-link
+                    :to="`/dashboard/blocks/${currentSessionDetails.block_id}`"
+                    class="link-secondary text-decoration-none"
+                  >
+                    <i class="bi bi-journal-text me-1"></i>{{ currentSessionDetails.block_name }}
+                  </router-link>
+                </small>
               </span>
 
               <!-- right -->
-              <div class="d-flex gap-2">
+              <div class="d-flex align-items-center gap-2">
                 <!-- session -->
-                <router-link
-                  v-if="userStore.user.id === currentSessionDetails.user_id"
-                  class="link-secondary text-decoration-none"
-                  :to="`/dashboard/sessions/${currentSessionDetails.id}`"
-                  ><i class="bi bi-journal-text me-1"> </i>
-                  <span>
+                <small>
+                  <router-link
+                    v-if="userStore.user.id === currentSessionDetails.user_id"
+                    class="link-secondary text-decoration-none"
+                    :to="`/dashboard/sessions/${currentSessionDetails.id}`"
+                    ><i class="bi bi-journal-text"></i>
                     {{ currentSessionDetails.id }}
-                  </span>
-                </router-link>
+                  </router-link>
+                </small>
 
                 <!-- comment -->
-                <span
-                  ><i class="bi bi-chat me-1"></i><span>{{ comments.length || 0 }}</span></span
-                >
+                <small><i class="bi bi-chat me-1"></i>{{ comments.length || 0 }}</small>
               </div>
-            </small>
+            </span>
           </div>
         </div>
 
diff --git a/src/apps/ui/components/shared/Signup.vue b/src/apps/ui/components/shared/Signup.vue
index b85ecfb7..caab1155 100644
--- a/src/apps/ui/components/shared/Signup.vue
+++ b/src/apps/ui/components/shared/Signup.vue
@@ -78,7 +78,7 @@
         and our
         <a
           href="#"
-          class="btn btn-sm p-0 m-0"
+          class="btn btn-xs p-0 m-0"
           style="text-decoration: underline"
           :class="{ disabled: loading === true }"
           @click="$router.push('/privacy')"
diff --git a/src/apps/ui/pages/dashboard/Block.vue b/src/apps/ui/pages/dashboard/Block.vue
new file mode 100644
index 00000000..09ad5352
--- /dev/null
+++ b/src/apps/ui/pages/dashboard/Block.vue
@@ -0,0 +1,20 @@
+<script setup>
+import Backheader from '../../components/dashboard/headers/Backheader.vue';
+</script>
+
+<template>
+  <!-- header -->
+  <Backheader />
+
+  <div class="container px-3 animate__animated animate__fadeIn animate__faster">
+    <div class="my-3 d-flex flex-column gap-3">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">Block</h5>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/apps/ui/pages/dashboard/Community.vue b/src/apps/ui/pages/dashboard/Community.vue
index 7b858e9a..265653ef 100644
--- a/src/apps/ui/pages/dashboard/Community.vue
+++ b/src/apps/ui/pages/dashboard/Community.vue
@@ -196,41 +196,49 @@ async function getSessions() {
 
               <!-- footer -->
               <div class="card-footer">
-                <small class="d-flex justify-content-between text-muted">
+                <span class="d-flex justify-content-between text-muted">
                   <!-- left -->
-                  <span class="d-flex gap-3">
-                    <!-- block -->
-                    <span v-if="s.block_name">
-                      <i class="bi bi-clipboard2-data me-1"></i>Block:
-                      <span class="fw-light">{{ s.block_name }}</span>
-                    </span>
-
+                  <span class="d-flex gap-2">
                     <!-- date -->
-                    <span><i class="bi bi-calendar-check me-1"></i> 2020-01-01</span>
+                    <small
+                      ><i class="bi bi-calendar-check me-1"></i
+                      >{{ dayjs(s.created_at).format('YYYY/MM/DD') }}</small
+                    >
+
+                    <!-- block -->
+                    <small v-if="s.block_name">
+                      <router-link
+                        :to="`/dashboard/blocks/${s.block_id}`"
+                        class="link-secondary text-decoration-none"
+                      >
+                        <i class="bi bi-journal-text me-1"></i>{{ s.block_name }}
+                      </router-link>
+                    </small>
                   </span>
 
                   <!-- right -->
                   <div class="d-flex gap-2">
                     <!-- session -->
-                    <router-link
-                      v-if="userStore.user.id === s.user_id"
-                      class="link-secondary text-decoration-none"
-                      :to="`/dashboard/sessions/${s.id}`"
-                      ><i class="bi bi-journal-text me-1"> </i>
-                      <span>
+                    <small>
+                      <router-link
+                        v-if="userStore.user.id === s.user_id"
+                        class="link-secondary text-decoration-none"
+                        :to="`/dashboard/sessions/${s.id}`"
+                        ><i class="bi bi-journal-text"> </i>
                         {{ s.id }}
-                      </span>
-                    </router-link>
+                      </router-link>
+                    </small>
 
                     <!-- comment -->
-                    <router-link
-                      :to="`/dashboard/videos/${s.id}`"
-                      class="link-secondary text-decoration-none"
-                      ><i class="bi bi-chat me-1"></i
-                      ><span>{{ s.counts_of_comments }}</span></router-link
-                    >
+                    <small>
+                      <router-link
+                        :to="`/dashboard/videos/${s.id}`"
+                        class="link-secondary text-decoration-none"
+                        ><i class="bi bi-chat me-1"></i>{{ s.counts_of_comments }}</router-link
+                      >
+                    </small>
                   </div>
-                </small>
+                </span>
               </div>
             </span>
           </lazy-component>
diff --git a/src/apps/ui/pages/dashboard/Exercise.vue b/src/apps/ui/pages/dashboard/Exercise.vue
new file mode 100644
index 00000000..51f5bd95
--- /dev/null
+++ b/src/apps/ui/pages/dashboard/Exercise.vue
@@ -0,0 +1,199 @@
+<script setup>
+import Backheader from '../../components/dashboard/headers/Backheader.vue';
+import api from '../../../../utils/fetch-with-style.js';
+import dayjs from 'dayjs';
+
+import useUserStore from '../../store/user.store.js';
+import { useRouter } from 'vue-router';
+
+import { reactive, ref, onMounted } from 'vue';
+
+const useStore = useUserStore();
+const router = useRouter();
+
+const props = defineProps({
+  exercise_id: Number,
+});
+
+const alert = reactive({
+  type: '',
+  msg: '',
+});
+
+const setsHistory = ref(null);
+let exerciseDetails = reactive({});
+
+onMounted(async () => {
+  const data = await getExerciseDetails();
+
+  // unauthorized access deny
+  if (data.length) {
+    const user_id = data[0]?.user_id;
+    if (user_id !== useStore.user.id) {
+      return router.push('/dashboard/unauthorized');
+    }
+  }
+
+  const first = data[0];
+
+  Object.assign(exerciseDetails, {
+    exercise_id: first.exercise_id,
+    category_id: first.exercise_id,
+    exercise_name: first.exercise_name,
+    category_name: first.category_name,
+  });
+
+  setsHistory.value = data;
+});
+
+async function getExerciseDetails() {
+  try {
+    const res = await api.get(`/api/v1/exercises/${props.exercise_id}/history`);
+    const json = await res.json();
+
+    if (!res.ok) {
+      if (json.errors) {
+        throw json.errors;
+      } else {
+        throw json.message;
+      }
+    }
+
+    return json.data;
+  } catch (e) {
+    alert.type = 'danger';
+    if (Array.isArray(e)) {
+      alert.msg = e.map((cur) => cur.msg).join(' ');
+      return;
+    } else {
+      alert.msg = e;
+    }
+  }
+}
+</script>
+
+<template>
+  <!-- header -->
+  <Backheader />
+
+  <div class="container px-3 animate__animated animate__fadeIn animate__faster">
+    <div class="my-3 d-flex flex-column gap-3">
+      <!-- alert -->
+      <div v-if="alert.type" :class="`alert-${alert.type}`" class="mb-0 alert" v-auto-animate>
+        <span>{{ alert.msg }}</span>
+      </div>
+
+      <!-- card  -->
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">{{ exerciseDetails.exercise_name }}</h5>
+          <p class="card-text">{{ exerciseDetails.category_name }}</p>
+          <span>highest max: 111</span>
+        </div>
+      </div>
+
+      <!-- table -->
+      <div class="card">
+        <div class="card-header">
+          <span class="d-flex justify-content-between">
+            <!-- right -->
+            <span class="d-flex justify-content-between align-items-center gap-2">
+              <!-- title -->
+              <h5 class="card-title my-2">{{ exerciseDetails.exercise_name }}</h5>
+
+              <!-- badge -->
+              <small class="bg-success rounded text-white px-1 py-0">{{
+                exerciseDetails.category_name
+              }}</small>
+            </span>
+
+            <!-- left -->
+            <span class="d-flex justify-content-between align-items-center gap-2">
+              <!--  -->
+              <button class="btn btn-sm btn-outline-dark d-block">
+                <i class="bi bi-journal-text"></i>
+              </button>
+
+              <!-- download -->
+              <button class="btn btn-sm btn-outline-dark">
+                <i class="bi bi-download"></i>
+              </button>
+
+              <!-- setting -->
+              <button class="btn btn-sm btn-outline-dark">
+                <i class="bi bi-gear-fill"></i>
+              </button>
+            </span>
+          </span>
+        </div>
+        <div class="card-body">
+          <div class="table-responsive">
+            <small>
+              <table class="table table-striped table-hover table-sm p-0 m-0">
+                <thead>
+                  <tr>
+                    <th class="align-middle text-center" scope="col">#</th>
+                    <th class="align-middle text-center" scope="col">Reps</th>
+                    <th class="align-middle text-center" scope="col">Weight</th>
+                    <th class="align-middle text-center" scope="col">Rpe</th>
+                    <th class="align-middle text-center" scope="col">Session</th>
+                    <th class="align-middle text-center" scope="col">Video</th>
+                    <th class="align-middle text-center" scope="col">Date</th>
+                    <th class="align-middle text-center" scope="col">Notes</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(s, index) in setsHistory" :key="s.id">
+                    <th class="align-middle text-center" scope="row">
+                      <input class="form-check-input" type="checkbox" :value="s.id" />
+                    </th>
+                    <td class="align-middle text-center">{{ s.reps }}</td>
+                    <td class="align-middle text-center">{{ s.weight }}</td>
+                    <td class="align-middle text-center">@{{ s.rpe }}</td>
+                    <td class="align-middle text-center">
+                      <router-link
+                        :to="`/dashboard/sessions/${s.session_id}`"
+                        class="link-secondary text-decoration-none"
+                      >
+                        <i class="bi bi-journal-text"></i> {{ s.session_id }}
+                      </router-link>
+                    </td>
+                    <td class="align-middle text-center">
+                      <router-link
+                        :to="`/dashboard/videos/${s.session_id}`"
+                        class="link-secondary text-decoration-none"
+                      >
+                        <i class="bi bi-play-circle-fill"></i>
+                      </router-link>
+                    </td>
+                    <td class="align-middle text-center">
+                      {{ dayjs(s.created_at).format('MM/DD') }}
+                    </td>
+                    <td class="align-middle text-center">{{ s.notes }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </small>
+          </div>
+        </div>
+        <div class="card-footer">
+          <nav aria-label="Page navigation example">
+            <ul class="pagination pagination-sm justify-content-center my-2">
+              <li class="page-item disabled">
+                <a class="page-link">Previous</a>
+              </li>
+              <li class="page-item active"><a class="page-link" href="#">1</a></li>
+              <li class="page-item"><a class="page-link" href="#">2</a></li>
+              <li class="page-item"><a class="page-link" href="#">3</a></li>
+              <li class="page-item">
+                <a class="page-link" href="#">Next</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/apps/ui/router.vue.js b/src/apps/ui/router.vue.js
index 90df37a0..e3d9a0bd 100644
--- a/src/apps/ui/router.vue.js
+++ b/src/apps/ui/router.vue.js
@@ -31,6 +31,9 @@ import Blocks from './pages/dashboard/sessions/Blocks.vue';
 import Categories from './pages/dashboard/sessions/Categories.vue';
 import Exercises from './pages/dashboard/sessions/Exercises.vue';
 
+import Exercise from './pages/dashboard/Exercise.vue';
+import Block from './pages/dashboard/Block.vue';
+
 // --- settings ---
 import Settings from './pages/dashboard/settings/Settings.vue';
 
@@ -425,13 +428,37 @@ const routes = [
       requiredAuth: true,
     },
   },
+  {
+    path: '/dashboard/exercises/:exercise_id',
+    name: 'Exercise',
+    component: Exercise,
+    props: (route) => ({
+      exercise_id: Number(route.params.exercise_id),
+    }),
+    meta: {
+      layout: 'DashboardLayout',
+      requiredAuth: true,
+    },
+  },
+  {
+    path: '/dashboard/blocks/:block_id',
+    name: 'Block',
+    component: Block,
+    props: (route) => ({
+      block_id: Number(route.params.block_id),
+    }),
+    meta: {
+      layout: 'DashboardLayout',
+      requiredAuth: true,
+    },
+  },
   {
     path: '/dashboard/sessions/:sid',
     name: 'SessionDetails',
     component: SessionDetails,
-    props: (sid) => {
-      return Number(sid);
-    },
+    props: (route) => ({
+      sid: Number(route.params.sid),
+    }),
     meta: {
       layout: 'DashboardLayout',
       requiredAuth: true,