Add 'Machine vs Free Weight' & 'Compound vs Isolation' breakdowns for workouts

app.py

@@ -1,7 +1,7 @@
 from datetime import date
 import os
 from flask import Flask, abort, render_template, redirect, request, url_for
-from flask_login import LoginManager, login_required
+from flask_login import LoginManager, login_required, current_user
 import jinja_partials
 from jinja2_fragments import render_block
 from decorators import (validate_person, validate_topset, validate_workout, 
@@ -200,27 +200,57 @@ def get_person_name(person_id):
 @ app.route("/exercise", methods=['POST'])
 def create_exercise():
     name = request.form.get("name")
-    new_exercise_id = db.create_exercise(name)
-    return render_template('partials/exercise.html', exercise_id=new_exercise_id, name=name)
+    attribute_ids = request.form.getlist('attribute_ids')
+    exercise = db.create_exercise(name, attribute_ids)
+    return render_template('partials/exercise.html', 
+                           exercise_id=exercise['exercise_id'], 
+                           name=exercise['name'],
+                           attributes=exercise['attributes'])
 
 
 @ app.route("/exercise/<int:exercise_id>", methods=['GET'])
 def get_exercise(exercise_id):
     exercise = db.get_exercise(exercise_id)
-    return render_template('partials/exercise.html', exercise_id=exercise_id, name=exercise.name)
+    return render_template('partials/exercise.html', 
+                           exercise_id=exercise_id, 
+                           name=exercise['name'],
+                           attributes=exercise['attributes'])
 
 
 @ app.route("/exercise/<int:exercise_id>/edit_form", methods=['GET'])
 def get_exercise_edit_form(exercise_id):
     exercise = db.get_exercise(exercise_id)
-    return render_template('partials/exercise.html', exercise_id=exercise_id, name=exercise['name'], is_edit=True)
+    all_attributes = db.exercises.get_attributes_by_category()
+    
+    # Format options for custom_select
+    formatted_options = {}
+    ex_attr_ids = [a['attribute_id'] for a in exercise['attributes']]
+    for cat, attrs in all_attributes.items():
+        formatted_options[cat] = [
+            {
+                "id": a['attribute_id'], 
+                "name": a['name'],
+                "selected": a['attribute_id'] in ex_attr_ids
+            } for a in attrs
+        ]
+
+    return render_template('partials/exercise.html',
+                           exercise_id=exercise_id,
+                           name=exercise['name'],
+                           attributes=exercise['attributes'],
+                           all_attributes=formatted_options,
+                           is_edit=True)
 
 
 @ app.route("/exercise/<int:exercise_id>/update", methods=['PUT'])
 def update_exercise(exercise_id):
     new_name = request.form.get('name')
-    db.update_exercise(exercise_id, new_name)
-    return render_template('partials/exercise.html', exercise_id=exercise_id, name=new_name)
+    attribute_ids = request.form.getlist('attribute_ids')
+    exercise = db.update_exercise(exercise_id, new_name, attribute_ids)
+    return render_template('partials/exercise.html', 
+                           exercise_id=exercise_id, 
+                           name=exercise['name'],
+                           attributes=exercise['attributes'])
 
 
 """ @ app.route("/exercise/<int:exercise_id>/delete", methods=['DELETE'])
@@ -230,12 +260,24 @@ def delete_exercise(exercise_id):
 
 
 @ app.route("/settings")
+@ login_required
 def settings():
+    # check if user is admin
+    if current_user.id != 1007:
+        return redirect(url_for('dashboard'))
     people = db.get_people()
     exercises = db.get_all_exercises()
+    all_attributes = db.exercises.get_attributes_by_category()
+    
+    # Format options for custom_select
+    formatted_options = {}
+    for cat, attrs in all_attributes.items():
+        formatted_options[cat] = [{"id": a['attribute_id'], "name": a['name']} for a in attrs]
+
     if htmx:
-        return render_block(app.jinja_env, "settings.html", "content", people=people, exercises=exercises), 200, {"HX-Trigger": "updatedPeople"}
-    return render_template('settings.html', people=people, exercises=exercises)
+        return render_block(app.jinja_env, "settings.html", "content", 
+                          people=people, exercises=exercises, all_attributes=formatted_options), 200, {"HX-Trigger": "updatedPeople"}
+    return render_template('settings.html', people=people, exercises=exercises, all_attributes=formatted_options)
 
 
 # Routes moved to routes/tags.py blueprint

db.py

@@ -66,22 +66,17 @@ class DataBase():
 
 
     def get_exercise(self, exercise_id):
-        exercise = self.execute(
-            'SELECT exercise_id, name FROM exercise WHERE exercise_id=%s LIMIT 1', [exercise_id], one=True)
-        return exercise
+        return self.exercises.get_exercise(exercise_id)
 
-    def create_exercise(self, name):
-        new_exercise = self.execute('INSERT INTO exercise (name) VALUES (%s) RETURNING exercise_id AS "ExerciseId"',
-                                    [name], commit=True, one=True)
-        return new_exercise['ExerciseId']
+    def create_exercise(self, name, attribute_ids=None):
+        return self.exercises.add_exercise(name, attribute_ids)
 
     def delete_exercise(self, exercise_id):
         self.execute('DELETE FROM exercise WHERE exercise_id=%s', [
             exercise_id], commit=True)
 
-    def update_exercise(self, exercise_id, name):
-        self.execute('UPDATE Exercise SET Name=%s WHERE exercise_id=%s', [
-            name, exercise_id], commit=True)
+    def update_exercise(self, exercise_id, name, attribute_ids=None):
+        return self.exercises.update_exercise(exercise_id, name, attribute_ids)
 
     def get_people(self):
         people = self.execute(
@@ -382,9 +377,7 @@ class DataBase():
             return (topset.get('repetitions'), topset.get('weight'), topset['exercise_name'])
     
     def get_all_exercises(self):
-        exercises = self.execute(
-            'SELECT exercise_id, name FROM exercise')
-        return exercises
+        return self.exercises.get("")
     
     def get_exercise_progress_for_user(self, person_id, exercise_id, min_date=None, max_date=None, epoch='all', degree=1):
         today = datetime.now()

features/exercises.py

@@ -5,25 +5,119 @@ class Exercises:
     def get(self, query):
         # Add wildcards to the query
         search_query = f"%{query}%"
+        # We need to fetch exercises with their attributes. 
+        # Since an exercise can have many attributes, we'll fetch basic info first or use a join.
+        # But wait, the settings page just lists names. We can fetch attributes separately for each row or do a group_concat-like join.
+        # However, for the settings list, we want to show the tags.
+        
+        # Let's use a simpler approach: fetch exercises and then for each one (or via a single join) get attributes.
         exercises = self.execute("SELECT exercise_id, name FROM exercise WHERE LOWER(name) LIKE LOWER(%s) ORDER BY name ASC;", [search_query])
+        
+        for ex in exercises:
+            ex['attributes'] = self.get_exercise_attributes(ex['exercise_id'])
+        
         return exercises
     
     def get_exercise(self, exercise_id):
         exercise = self.execute("SELECT exercise_id, name FROM exercise WHERE exercise_id=%s;", [exercise_id], one=True)
+        if exercise:
+            exercise['attributes'] = self.get_exercise_attributes(exercise_id)
         return exercise
     
-    def update_exercise_name(self, exercise_id, updated_name):
-        self.execute("UPDATE exercise SET name = %s WHERE exercise_id = %s;", [updated_name, exercise_id], commit=True)
-        updated_exercise = self.get_exercise(exercise_id)
-        return updated_exercise
+    def get_exercise_attributes(self, exercise_id):
+        query = """
+            SELECT cat.name as category_name, attr.attribute_id, attr.name as attribute_name
+            FROM exercise_to_attribute eta
+            JOIN exercise_attribute attr ON eta.attribute_id = attr.attribute_id
+            JOIN exercise_attribute_category cat ON attr.category_id = cat.category_id
+            WHERE eta.exercise_id = %s
+            ORDER BY cat.name, attr.name
+        """
+        return self.execute(query, [exercise_id])
+
+    def get_all_attribute_categories(self):
+        return self.execute("SELECT category_id, name FROM exercise_attribute_category ORDER BY name")
+
+    def get_attributes_by_category(self):
+        # Returns a dict: { category_name: [ {id, name}, ... ] }
+        categories = self.get_all_attribute_categories()
+        all_attrs = self.execute("SELECT attribute_id, name, category_id FROM exercise_attribute ORDER BY name")
+        
+        result = {}
+        for cat in categories:
+            result[cat['name']] = [a for a in all_attrs if a['category_id'] == cat['category_id']]
+        return result
+
+    def update_exercise(self, exercise_id, name, attribute_ids=None):
+        self.execute("UPDATE exercise SET name = %s WHERE exercise_id = %s;", [name, exercise_id], commit=True)
+        
+        # Update attributes: simple delete and re-insert for now
+        self.execute("DELETE FROM exercise_to_attribute WHERE exercise_id = %s", [exercise_id], commit=True)
+        
+        if attribute_ids:
+            for attr_id in attribute_ids:
+                if attr_id:
+                    self.execute("INSERT INTO exercise_to_attribute (exercise_id, attribute_id) VALUES (%s, %s)", 
+                                 [exercise_id, attr_id], commit=True)
+        
+        return self.get_exercise(exercise_id)
     
     def delete_exercise(self, exercise_id):
         self.execute('DELETE FROM exercise WHERE exercise_id=%s', [
             exercise_id], commit=True)
     
-    def add_exercise(self, name):
+    def add_exercise(self, name, attribute_ids=None):
         result = self.execute('INSERT INTO exercise (name) VALUES (%s) RETURNING exercise_id', [name], commit=True, one=True)
         exercise_id = result['exercise_id']
-        new_exercise = self.get_exercise(exercise_id)
-        return new_exercise
+        
+        if attribute_ids:
+            for attr_id in attribute_ids:
+                if attr_id:
+                    self.execute("INSERT INTO exercise_to_attribute (exercise_id, attribute_id) VALUES (%s, %s)", 
+                                 [exercise_id, attr_id], commit=True)
+                                 
+        return self.get_exercise(exercise_id)
+
+    def get_workout_attribute_distribution(self, workout_id, category_name):
+        query = """
+            SELECT attr.name as attribute_name, COUNT(*) as count
+            FROM topset t
+            JOIN exercise e ON t.exercise_id = e.exercise_id
+            JOIN exercise_to_attribute eta ON e.exercise_id = eta.exercise_id
+            JOIN exercise_attribute attr ON eta.attribute_id = attr.attribute_id
+            JOIN exercise_attribute_category cat ON attr.category_id = cat.category_id
+            WHERE t.workout_id = %s AND cat.name = %s
+            GROUP BY attr.name
+            ORDER BY count DESC
+        """
+        distribution = self.execute(query, [workout_id, category_name])
+        
+        # Calculate percentages and SVG parameters
+        total_counts = sum(item['count'] for item in distribution)
+        accumulated_percentage = 0
+        
+        # Color palette for segments
+        colors = [
+            "#3b82f6", # blue-500
+            "#06b6d4", # cyan-500
+            "#8b5cf6", # violet-500
+            "#ec4899", # pink-500
+            "#f59e0b", # amber-500
+            "#10b981", # emerald-500
+            "#6366f1", # indigo-500
+            "#f43f5e", # rose-500
+            "#84cc16", # lime-500
+            "#0ea5e9", # sky-500
+        ]
+
+        if total_counts > 0:
+            for i, item in enumerate(distribution):
+                percentage = (item['count'] / total_counts) * 100
+                item['percentage'] = round(percentage)
+                item['dasharray'] = f"{percentage} 100"
+                item['dashoffset'] = -accumulated_percentage
+                item['color'] = colors[i % len(colors)]
+                accumulated_percentage += percentage
+        
+        return distribution
 

routes/workout.py

@@ -124,6 +124,11 @@ def _get_workout_view_model(person_id, workout_id):
     # Sort tags alphabetically by name for consistent display
     workout_data["tags"].sort(key=lambda x: x.get('tag_name', ''))
 
+    # Add multi-category breakdowns
+    workout_data["muscle_distribution"] = db.exercises.get_workout_attribute_distribution(workout_id, 'Muscle Group')
+    workout_data["equipment_distribution"] = db.exercises.get_workout_attribute_distribution(workout_id, 'Machine vs Free Weight')
+    workout_data["movement_distribution"] = db.exercises.get_workout_attribute_distribution(workout_id, 'Compound vs Isolation')
+
     return workout_data
 
 
@@ -179,6 +184,16 @@ def get_workout_start_date(person_id, workout_id):
     start_date = workout.get('start_date') if workout else None
     return render_template('partials/start_date.html', person_id=person_id, workout_id=workout_id, start_date=start_date)
 
+@workout_bp.route("/person/<int:person_id>/workout/<int:workout_id>/distribution", methods=['GET'])
+def get_workout_distribution(person_id, workout_id):
+    category = request.args.get('category', 'Muscle Group')
+    distribution = db.exercises.get_workout_attribute_distribution(workout_id, category)
+    return render_template('partials/workout_breakdown.html', 
+                           person_id=person_id, 
+                           workout_id=workout_id, 
+                           distribution=distribution,
+                           category_name=category)
+
 @workout_bp.route("/person/<int:person_id>/workout/<int:workout_id>/topset/<int:topset_id>/achievements", methods=['GET'])
 @validate_topset
 def get_topset_achievements(person_id, workout_id, topset_id):

templates/partials/exercise.html

@@ -1,5 +1,5 @@
 <tr>
-    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
+    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900 w-1/5">
         {% if is_edit|default(false, true) == false %}
         {{ name }}
         {% else %}
@@ -8,7 +8,35 @@
             type="text" name="name" value="{{ name }}">
         {% endif %}
     </td>
-    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900 float-right">
+    <td class="p-4 text-sm text-gray-900 w-3/5">
+        {% if is_edit|default(false, true) == false %}
+        <div class="flex flex-wrap gap-2">
+            {% for attr in attributes %}
+            <span
+                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
+                title="{{ attr.category_name }}">
+                {{ attr.attribute_name }}
+            </span>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {% for cat_name, options in all_attributes.items() %}
+            <div>
+                <label class="block text-xs font-semibold text-gray-500 uppercase mb-1">{{ cat_name }}</label>
+                {{ render_partial('partials/custom_select.html',
+                name='attribute_ids',
+                options=options,
+                multiple=true,
+                search=true,
+                placeholder='Select ' ~ cat_name
+                )}}
+            </div>
+            {% endfor %}
+        </div>
+        {% endif %}
+    </td>
+    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900 w-1/5 float-right">
         {% if is_edit|default(false, true) == false %}
         <button
             class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"

templates/partials/workout_breakdown.html

@@ -0,0 +1,64 @@
+{% set distribution = distribution or muscle_distribution %}
+{% set category_name = category_name or 'Muscle Group' %}
+{% set breakdown_id = category_name.lower().replace(' ', '-') %}
+
+{% if distribution %}
+<div class="px-4 py-3 bg-white relative" id="{{ breakdown_id }}-breakdown"
+    hx-get="{{ url_for('workout.get_workout_distribution', person_id=person_id, workout_id=workout_id, category=category_name) }}"
+    hx-trigger="topsetAdded from:body" hx-swap="outerHTML">
+
+    <!-- Shared Popover Container (managed by Hyperscript) -->
+    <div id="popover-{{ breakdown_id }}"
+        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30 hidden bg-white border border-gray-200 shadow-2xl rounded-xl p-4 min-w-[200px] animate-in fade-in zoom-in duration-200"
+        _="on click from elsewhere add .hidden to me">
+        <div id="content-{{ breakdown_id }}"></div>
+        <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
+            _="on click add .hidden to #popover-{{ breakdown_id }}">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+        </button>
+    </div>
+
+    <div class="flex items-center justify-between mb-2">
+        <h4 class="text-[9px] font-black text-gray-400 uppercase tracking-[0.25em]">{{ category_name }} Distribution
+        </h4>
+    </div>
+
+    <!-- Sleek Performance Bar -->
+    <div class="w-full h-8 flex overflow-hidden rounded-lg bg-gray-100 shadow-inner p-0.5 cursor-pointer">
+        {% for item in distribution %}
+        <div class="h-full transition-all duration-700 ease-in-out flex items-center justify-center relative group first:rounded-l-md last:rounded-r-md"
+            style="width: {{ item.percentage }}%; background-color: {{ item.color }};" _="on click 
+                halt the event 
+                put '<div class=\'flex flex-col gap-1\'>
+                        <div class=\'flex items-center gap-2\'>
+                            <div class=\'w-3 h-3 rounded-full\' style=\'background-color: {{ item.color }}\'></div>
+                            <span class=\'font-black text-sm uppercase\'>{{ item.attribute_name }}</span>
+                        </div>
+                        <div class=\'text-2xl font-black text-gray-900\'>{{ item.percentage }}%</div>
+                        <div class=\'text-[10px] font-bold text-gray-400 uppercase tracking-wider\'>{{ item.count }} Sets Targeted</div>
+                     </div>' into #content-{{ breakdown_id }}
+                remove .hidden from #popover-{{ breakdown_id }}"
+            title="{{ item.attribute_name }}: {{ item.percentage }}%">
+
+            <!-- Labels (Name & Percentage grouped and centered) -->
+            <div
+                class="flex items-center justify-center gap-1.5 leading-none text-white pointer-events-none px-1 overflow-hidden">
+                {% if item.percentage > 18 %}
+                <span class="text-[9px] font-black uppercase tracking-tighter truncate drop-shadow-sm">{{
+                    item.attribute_name }}</span>
+                <span class="text-[9px] font-bold opacity-90 whitespace-nowrap drop-shadow-sm">{{ item.percentage
+                    }}%</span>
+                {% elif item.percentage > 8 %}
+                <span class="text-[9px] font-black drop-shadow-sm">{{ item.percentage }}%</span>
+                {% endif %}
+            </div>
+
+            <!-- Enhanced Hover State -->
+            <div class="absolute inset-0 bg-white/15 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+{% endif %}

templates/settings.html

@@ -107,11 +107,15 @@
                             <thead class="bg-gray-50">
                                 <tr>
                                     <th scope="col"
-                                        class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/4">
+                                        class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/5">
                                         Name
                                     </th>
                                     <th scope="col"
-                                        class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-3/4">
+                                        class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-3/5">
+                                        Attributes
+                                    </th>
+                                    <th scope="col"
+                                        class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/5">
                                         <div class="relative">
                                             <div
                                                 class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
@@ -139,7 +143,7 @@
                                 hx-swap="outerHTML swap:0.5s">
                                 {% for exercise in exercises %}
                                 {{ render_partial('partials/exercise.html', exercise_id=exercise.exercise_id,
-                                name=exercise.name)}}
+                                name=exercise.name, attributes=exercise.attributes)}}
                                 {% endfor %}
                             </tbody>
                         </table>
@@ -155,12 +159,27 @@
                 then reset() me">
             <div class="flex flex-wrap -mx-3 mb-2">
                 <div class="grow px-3">
-                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
+                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
                         New exercise
                     </label>
                     <input
-                        class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-                        type="text" name="name">
+                        class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 mb-4"
+                        type="text" name="name" placeholder="Exercise Name">
+
+                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                        {% for cat_name, options in all_attributes.items() %}
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 uppercase mb-1">{{ cat_name }}</label>
+                            {{ render_partial('partials/custom_select.html',
+                            name='attribute_ids',
+                            options=options,
+                            multiple=true,
+                            search=true,
+                            placeholder='Select ' ~ cat_name
+                            )}}
+                        </div>
+                        {% endfor %}
+                    </div>
                 </div>
 
                 <div class="flex flex-row pt-6 px-3 w-36">

templates/workout.html

@@ -45,105 +45,103 @@
 <div class='p-0 md:p-4 m-0 md:m-2'>
     <div class="relative w-full h-full">
         <!-- Modal content -->
-        <div class="relative bg-white rounded-lg shadow">
+        <div class="relative bg-white rounded-lg shadow overflow-hidden">
             <!-- Modal header -->
-            <div class="flex items-start justify-between p-2 md:p-4 border-0 md:border-b rounded-t">
-                <div class="flex flex-col w-full">
-                    <div class="flex items-center justify-between">
-                        <div class="w-full">
-                            <h3 class="text-xl font-bold text-gray-900">{{ person_name }}</h3>
+            <div class="p-4 md:p-6 border-b relative">
+                <div class="flex flex-col w-full pr-8">
+                    <h3 class="text-2xl font-black text-gray-900 leading-tight">{{ person_name }}</h3>
+                    {{ render_partial('partials/workout_tags.html', person_id=person_id, workout_id=workout_id,
+                    tags=tags) }}
 
-                            {{ render_partial('partials/workout_tags.html', person_id=person_id, workout_id=workout_id,
-                            tags=tags) }}
-
-                        </div>
-
-                    </div>
-                    <div class="grid grid-cols-1 lg:grid-cols-2">
-                        {{ render_partial('partials/start_date.html', person_id=person_id,
-                        workout_id=workout_id,
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                        {{ render_partial('partials/start_date.html', person_id=person_id, workout_id=workout_id,
                         start_date=start_date) }}
-
-
-                        {{ render_partial('partials/workout_note.html', person_id=person_id,
-                        workout_id=workout_id,
+                        {{ render_partial('partials/workout_note.html', person_id=person_id, workout_id=workout_id,
                         note=note) }}
-
                     </div>
-
                 </div>
 
                 <button type="button"
-                    class="absolute right-0 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white mr-2"
+                    class="absolute top-4 right-4 text-gray-400 bg-transparent hover:bg-gray-100 hover:text-gray-900 rounded-lg text-sm p-2 transition-colors inline-flex items-center"
                     hx-get="{{ url_for('workout.delete_workout', person_id=person_id, workout_id=workout_id) }}"
                     hx-confirm="Are you sure you wish to delete this workout?" hx-push-url="true"
                     hx-target="#container">
                     <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
-                        xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill=""
-                        style="--darkreader-inline-fill:currentColor;">
+                        xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd"
                             d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                             clip-rule="evenodd"></path>
                     </svg>
-                    <span class="sr-only">Close modal</span>
+                    <span class="sr-only">Delete workout</span>
                 </button>
             </div>
 
-        </div>
+            <!-- Multi-Category Breakdown Stripes -->
+            <div class="bg-gray-50/50 border-b divide-y divide-gray-100">
+                {{ render_partial('partials/workout_breakdown.html', person_id=person_id, workout_id=workout_id,
+                distribution=muscle_distribution, category_name='Muscle Group') }}
 
-        <div class="relative bg-white rounded-lg shadow mt-4">
-            <div class="p-2 md:p-4 border-0 md:border-b rounded-t">
-                <!-- Modal footer -->
-                <div class="flex items-center p-1 md:p-2 rounded-b dark:border-gray-600">
-                    {{ render_partial('partials/new_set_form.html', person_id=person_id,
-                    workout_id=workout_id,
-                    exercises=exercises,
-                    has_value=False) }}
-                </div>
+                {{ render_partial('partials/workout_breakdown.html', person_id=person_id, workout_id=workout_id,
+                distribution=equipment_distribution, category_name='Machine vs Free Weight') }}
 
-                <!-- Modal body -->
-                <div class="p-3 md:p-6 space-y-6">
-                    <table class="items-center w-full bg-transparent border-collapse table-fixed">
-                        <thead>
-                            <tr>
-                                <th
-                                    class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap">
-                                    Exercise</th>
-                                <th
-                                    class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap">
-                                    Top Set</th>
-                                <th
-                                    class="bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap w-9 sm:w-20">
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody class="divide-y divide-gray-100" id="new-workout" hx-target="closest tr"
-                            hx-swap="outerHTML swap:0.5s">
-                            {% for top_set in top_sets %}
-                            {{ render_partial('partials/topset.html', person_id=person_id,
-                            workout_id=workout_id, **top_set) }}
-                            {% endfor %}
-                        </tbody>
-                    </table>
+                {{ render_partial('partials/workout_breakdown.html', person_id=person_id, workout_id=workout_id,
+                distribution=movement_distribution, category_name='Compound vs Isolation') }}
+            </div>
 
-                    {% if top_sets|length == 0 %}
-                    <div class="bg-purple-100 rounded-lg py-5 px-6 mb-4 text-base text-purple-700 mb-3" role="alert"
-                        id="no-workouts">
-                        No top_sets found.
+            <!-- Workout Content Card -->
+            <div class="p-0">
+                <div class="p-2 md:p-4 border-0 md:border-b">
+                    <!-- Modal footer / New Set Form -->
+                    <div class="flex items-center p-1 md:p-2 rounded-b">
+                        {{ render_partial('partials/new_set_form.html', person_id=person_id,
+                        workout_id=workout_id,
+                        exercises=exercises,
+                        has_value=False) }}
                     </div>
-                    {% endif %}
-                </div>
 
-                <div id="exercise-progress" class="mx-0 md:mx-5">
-                </div>
+                    <!-- Modal body / Top Sets Table -->
+                    <div class="p-3 md:p-6 space-y-6">
+                        <table class="items-center w-full bg-transparent border-collapse table-fixed">
+                            <thead>
+                                <tr>
+                                    <th
+                                        class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap">
+                                        Exercise</th>
+                                    <th
+                                        class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap">
+                                        Top Set</th>
+                                    <th
+                                        class="bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap w-9 sm:w-20">
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-100" id="new-workout" hx-target="closest tr"
+                                hx-swap="outerHTML swap:0.5s">
+                                {% for top_set in top_sets %}
+                                {{ render_partial('partials/topset.html', person_id=person_id,
+                                workout_id=workout_id, **top_set) }}
+                                {% endfor %}
+                            </tbody>
+                        </table>
 
+                        {% if top_sets|length == 0 %}
+                        <div class="bg-purple-100 rounded-lg py-5 px-6 mb-4 text-base text-purple-700 mb-3" role="alert"
+                            id="no-workouts">
+                            No sets recorded for this session.
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <div id="exercise-progress" class="mx-0 md:mx-5">
+                    </div>
+                </div>
             </div>
         </div>
-
     </div>
+</div>
 
-    <div class="hidden" hx-get="{{ url_for('get_stats') }}" hx-vals='{"person_id": "{{ person_id }}"}' hx-trigger="load"
-        hx-target="#stats" hx-swap="innerHTML">
-    </div>
+<div class="hidden" hx-get="{{ url_for('get_stats') }}" hx-vals='{"person_id": "{{ person_id }}"}' hx-trigger="load"
+    hx-target="#stats" hx-swap="innerHTML">
+</div>
 
-    {% endblock %}
+{% endblock %}