From 87eb879c7ff3400db2824f7d3ed46d5ff235fe7c Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Tue, 5 Nov 2024 00:47:47 +0100
Subject: [PATCH] finishes profile page

---
 web/src/lib/components/base/calendar.svelte   |  34 +-
 .../lib/components/base/multi_select.svelte   |  83 +++++
 .../summit_log/summit_log_table.svelte        |  55 ++-
 .../summit_log/summit_log_table_row.svelte    |  42 ++-
 .../trail/trail_filter_panel.svelte           |   4 +-
 web/src/lib/i18n/locales/de.json              |  39 ++-
 web/src/lib/i18n/locales/en.json              |   5 +
 web/src/lib/i18n/locales/fr.json              |   5 +
 web/src/lib/i18n/locales/hu.json              |   5 +
 web/src/lib/i18n/locales/it.json              |   5 +
 web/src/lib/i18n/locales/nl.json              |   5 +
 web/src/lib/i18n/locales/pl.json              |   5 +
 web/src/lib/i18n/locales/pt.json              |   5 +
 web/src/lib/i18n/locales/zh.json              |   5 +
 web/src/lib/models/summit_log.ts              |   7 +-
 web/src/lib/stores/summit_log_store.ts        |  42 ++-
 web/src/lib/util/format_util.ts               |  18 +-
 web/src/routes/api/v1/summit-log/+server.ts   |   5 +-
 web/src/routes/profile/+page.svelte           | 331 ++++++++++++------
 web/src/routes/profile/+page.ts               |  28 +-
 20 files changed, 541 insertions(+), 187 deletions(-)
 create mode 100644 web/src/lib/components/base/multi_select.svelte

diff --git a/web/src/lib/components/base/calendar.svelte b/web/src/lib/components/base/calendar.svelte
index 6647dcc2..6de3ecd2 100644
--- a/web/src/lib/components/base/calendar.svelte
+++ b/web/src/lib/components/base/calendar.svelte
@@ -2,7 +2,7 @@
 	import type { SummitLog } from "$lib/models/summit_log";
 	import { createEventDispatcher } from "svelte";
 	import { isSameDay, isToday } from "../../util/date_util";
-
+	import { _ } from "svelte-i18n";
 	export let logs: SummitLog[] = [];
 	export let colorMap: Record<string, string> = {};
 
@@ -15,6 +15,7 @@
 			start: Date;
 			end: Date;
 		};
+		click: Date;
 	}>();
 
 	const weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
@@ -74,9 +75,11 @@
 					i + 1 - firstDay,
 				);
 				const today = isToday(date);
+
 				const logAtDate = logs.find((l) =>
 					isSameDay(date, new Date(l.date)),
 				);
+
 				a.push({ date: date, today: today, log: logAtDate });
 			}
 		}
@@ -108,6 +111,21 @@
 			end: new Date(currentYear, currentMonth + 1, 0),
 		});
 	}
+
+	function colorKey(i: number) {
+		return $_(
+			currentMonthArray[i]?.log?.expand.trails_via_summit_logs?.at(0)
+				?.expand?.category?.name ?? "",
+		);
+	}
+
+	function handleDateClick(date?: Date) {
+		if (!date) {
+			return;
+		}
+
+		dispatch("click", date);
+	}
 </script>
 
 <div class="calendar-header w-full flex items-center justify-between mb-6">
@@ -134,18 +152,14 @@
 	</div>
 	<div class="grid grid-cols-7 grid-rows-6" style="aspect-ratio: 1.17/1">
 		{#each { length: 42 } as _, i}
-			<div
-				class="calendar-day flex items-center justify-center rounded-xl cursor-pointer"
+			<button
+				class="calendar-day flex items-center justify-center rounded-xl"
+				on:click={() => handleDateClick(currentMonthArray[i]?.date)}
 				class:today={currentMonthArray[i]?.today}
-				style="background-color: {colorMap[
-					currentMonthArray[
-						i
-					]?.log?.expand.trails_via_summit_logs?.at(0)?.expand
-						?.category?.name ?? ''
-				] ?? ''}"
+				style="background-color: {colorMap[colorKey(i)] ?? ''}"
 			>
 				{currentMonthArray[i]?.date?.getDate() ?? ""}
-			</div>
+			</button>
 		{/each}
 	</div>
 </div>
diff --git a/web/src/lib/components/base/multi_select.svelte b/web/src/lib/components/base/multi_select.svelte
new file mode 100644
index 00000000..a7ea3720
--- /dev/null
+++ b/web/src/lib/components/base/multi_select.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+    import { writable } from "svelte/store";
+    import type { SelectItem } from "./select.svelte";
+    import { createEventDispatcher } from "svelte";
+
+    export let items: SelectItem[] = [];
+    export let value: SelectItem[] = [];
+    export let label: string = "";
+    export let name: string = "";
+    export let placeholder: string = "";
+
+    let showDropdown = false;
+    let dropdownRef;
+
+    const dispatch = createEventDispatcher();
+
+    function toggleItem(item: SelectItem) {
+        if (value.includes(item)) {
+            value = value.filter((i) => i !== item);
+        } else {
+            value = [...value, item];
+        }
+
+        dispatch("change", value);
+    }
+
+    function removeItem(item: SelectItem) {
+        value = value.filter((i) => i !== item);
+        dispatch("change", value);
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="relative max-w-full">
+    {#if label.length}
+        <label for={name} class="text-sm font-medium pb-1 block">
+            {label}
+        </label>
+    {/if}
+    <button
+        class="min-w-44 flex flex-wrap items-center gap-2 border bg-input-background min-h-[50px] p-3 rounded-md transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0"
+        on:click={() => (showDropdown = !showDropdown)}
+    >
+        {#if value.length === 0}
+            <span class="text-gray-400">{placeholder}</span>
+        {/if}
+        {#each value as item}
+            <div
+                class="bg-primary text-white px-2 py-1 rounded-full flex items-center gap-1"
+            >
+                <span class="text-sm">{item.text}</span>
+                <button
+                    on:click|stopPropagation={() => removeItem(item)}
+                    class="text-white hover:bg-primary-hover rounded-full w-4 h-4 flex items-center justify-center"
+                >
+                    <i class="fa fa-close"></i>
+                </button>
+            </div>
+        {/each}
+    </button>
+
+    <!-- Dropdown menu -->
+    {#if showDropdown}
+        <div
+            bind:this={dropdownRef}
+            class="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded shadow-lg max-h-40 overflow-y-auto"
+        >
+            {#each items as item}
+                <button
+                    on:click={() => toggleItem(item)}
+                    class="px-3 py-2 hover:bg-blue-100 cursor-pointer flex justify-between items-center w-full"
+                >
+                    <span>{item.text}</span>
+                    {#if value.includes(item)}
+                        <div class="ml-auto">
+                            <i class="fa fa-check"></i>
+                        </div>
+                    {/if}
+                </button>
+            {/each}
+        </div>
+    {/if}
+</div>
diff --git a/web/src/lib/components/summit_log/summit_log_table.svelte b/web/src/lib/components/summit_log/summit_log_table.svelte
index ad1b7cac..0fb1a737 100644
--- a/web/src/lib/components/summit_log/summit_log_table.svelte
+++ b/web/src/lib/components/summit_log/summit_log_table.svelte
@@ -5,24 +5,28 @@
     import Modal from "../base/modal.svelte";
     import SummitLogTableRow from "./summit_log_table_row.svelte";
 
-    import type { Map } from "leaflet";
-    import { gpx } from "$lib/vendor/toGeoJSON/toGeoJSON";
-    import { endIcon, startIcon } from "$lib/util/leaflet_util";
-    import { _ } from "svelte-i18n";
-    import MapWithElevation from "../trail/map_with_elevation.svelte";
     import type { Trail } from "$lib/models/trail";
     import { gpx2trail } from "$lib/util/gpx_util";
+    import type { Map } from "leaflet";
+    import { _ } from "svelte-i18n";
+    import MapWithElevation from "../trail/map_with_elevation.svelte";
 
     export let summitLogs: SummitLog[];
     export let showCategory: boolean = false;
+    export let showTrail: boolean = false;
 
-    let openModal: () => void;
-    let closeModal: () => void;
+    let openMapModal: () => void;
+    let closeMapModal: () => void;
+
+    let openTextModal: () => void;
+    let closeTextModal: () => void;
 
     let map: Map;
 
     let trail: Trail | null = null;
 
+    let currentText: string = "";
+
     onMount(async () => {
         // L = (await import("leaflet")).default;
         // map = L.map("summit-log-table-map");
@@ -42,12 +46,17 @@
         trail = (await gpx2trail(log.expand.gpx_data)).trail;
         trail.expand.gpx_data = log.expand.gpx_data;
 
-        openModal();
+        openMapModal();
         await tick();
 
         map.invalidateSize();
         return;
     }
+
+    async function openText(log: SummitLog) {
+        currentText = log.text ?? "";
+        openTextModal();
+    }
 </script>
 
 <table class="w-full">
@@ -64,7 +73,12 @@
                     {$_("category")}
                 </th>
             {/if}
-            <th></th>
+            {#if showTrail}
+                <th>
+                    {$_("trail", { values: { n: 1 } })}
+                </th>
+            {/if}
+            <th>{$_("description")}</th>
         </tr>
     </thead>
     <tbody>
@@ -72,24 +86,37 @@
             <SummitLogTableRow
                 index={i}
                 {log}
-                on:open={() => openMap(log)}
+                on:open={(e) => openMap(e.detail)}
+                on:text={(e) => openText(e.detail)}
                 {showCategory}
+                {showTrail}
             ></SummitLogTableRow>
         {/each}
     </tbody>
 </table>
-
+{#if !summitLogs.length}
+    <p class="text-center w-full my-8 text-gray-500 text-sm">{$_("no-data")}</p>
+{/if}
 <Modal
-    id="summit-log-table-modal"
+    id="summit-log-table-map-modal"
     size="max-w-4xl"
     title=""
-    bind:openModal
-    bind:closeModal
+    bind:openModal={openMapModal}
+    bind:closeModal={closeMapModal}
 >
     <div slot="content" id="summit-log-table-map" class="h-[32rem]">
         <MapWithElevation {trail} bind:map></MapWithElevation>
     </div>
 </Modal>
+<Modal
+    id="summit-log-table-text-modal"
+    size="max-w-xl"
+    title={$_("description")}
+    bind:openModal={openTextModal}
+    bind:closeModal={closeTextModal}
+>
+    <p slot="content" class="whitespace-pre-wrap">{currentText}</p>
+</Modal>
 
 <style>
     th {
diff --git a/web/src/lib/components/summit_log/summit_log_table_row.svelte b/web/src/lib/components/summit_log/summit_log_table_row.svelte
index 46f5c404..88758c29 100644
--- a/web/src/lib/components/summit_log/summit_log_table_row.svelte
+++ b/web/src/lib/components/summit_log/summit_log_table_row.svelte
@@ -15,11 +15,10 @@
     export let index: number;
     export let log: SummitLog;
     export let showCategory: boolean = false;
+    export let showTrail: boolean = false;
 
     let map: Map;
 
-    let showText: boolean = false;
-
     const dispatch = createEventDispatcher();
 
     onMount(async () => {
@@ -59,6 +58,20 @@
     function openMap() {
         dispatch("open", log);
     }
+
+    function openText() {
+        dispatch("text", log);
+    }
+
+    function colCount() {
+        if (showCategory && showTrail) {
+            return 9;
+        } else if (showCategory || showTrail) {
+            return 8;
+        }
+
+        return 7;
+    }
 </script>
 
 <tr class="text-center">
@@ -100,23 +113,24 @@
             )}
         </td>
     {/if}
+    {#if showTrail}
+        <td>
+            <a
+                class="btn-icon aspect-square"
+                href="/trail/view/{log.expand.trails_via_summit_logs?.at(0)
+                    ?.id ?? ''}"
+                ><i class="fa fa-arrow-up-right-from-square px-[3px]"></i></a
+            >
+        </td>
+    {/if}
     <td>
         {#if log.text}
-            <button on:click={() => (showText = !showText)} class="btn-icon"
-                ><i class="fa{showText ? '' : '-regular'} fa-message text-gray-500"
-                ></i></button
+            <button on:click={openText} class="btn-icon"
+                ><i class="fa-regular fa-message"></i></button
             >
         {/if}
     </td>
 </tr>
-{#if showText}
-    <tr
-        ><td
-            class="text-left text-sm whitespace-pre-wrap pb-4"
-            colspan={showCategory ? 8 : 7}>{log.text}</td
-        ></tr
-    >
-{/if}
 <tr>
-    <td colspan={showCategory ? 8 : 7}> <hr class="border-input-border" /> </td>
+    <td colspan={colCount()}> <hr class="border-input-border" /> </td>
 </tr>
diff --git a/web/src/lib/components/trail/trail_filter_panel.svelte b/web/src/lib/components/trail/trail_filter_panel.svelte
index cffb97e5..ed65393a 100644
--- a/web/src/lib/components/trail/trail_filter_panel.svelte
+++ b/web/src/lib/components/trail/trail_filter_panel.svelte
@@ -243,13 +243,13 @@
             <div class="space-y-2">
                 <Datepicker
                     name="startDate"
-                    label="After"
+                    label={$_('after')}
                     bind:value={filter.startDate}
                     on:change={update}
                 ></Datepicker>
                 <Datepicker
                     name="endDate"
-                    label="Before"
+                    label={$_('before')}
                     bind:value={filter.endDate}
                     on:change={update}
                 ></Datepicker>
diff --git a/web/src/lib/i18n/locales/de.json b/web/src/lib/i18n/locales/de.json
index c79e4640..1273177e 100644
--- a/web/src/lib/i18n/locales/de.json
+++ b/web/src/lib/i18n/locales/de.json
@@ -7,18 +7,21 @@
   "Walking": "Laufen",
   "about": "Über",
   "account-delete-confirm": "Du bist dabei, dein Konto zu löschen. Alle deine Routen werden ebenfalls gelöscht. Möchtest du fortfahren?",
-  "activity": "",
+  "activity": "{n, plural, =1 {Aktivität} other {Aktivitäten}}",
   "add-entry": "Eintrag hinzufügen",
   "add-to-list": "Zu Liste hinzufügen",
   "add-waypoint": "Wegpunkt hinzufügen",
   "added-trail-to": "Route hinzugefügt zu",
-  "all-activities": "",
+  "after": "Nach",
+  "all-activities": "Alle Aktivitäten",
   "alphabetical": "Alphabetisch",
   "already-account": "Du hast bereits ein Konto?",
   "altitude": "Höhe",
   "api-documentation": "API Dokumentation",
   "avatar": "Avatar",
+  "average-speed": "Durschn. Geschwindigkeit",
   "basic-info": "Basisinformation",
+  "before": "Vor",
   "can": "kann",
   "cancel": "Abbrechen",
   "card": "{n, plural, =1 {Karte} other {Karten}}",
@@ -33,9 +36,9 @@
   "comment": "{n, plural, =1 {Kommentar} other {Kommentare}}",
   "completed": "Abgeschlossen",
   "completion-status": "Abschlussstatus",
-  "confirm": "",
-  "confirm-deletion": "",
-  "confirm-share": "",
+  "confirm": "Bestätigen",
+  "confirm-deletion": "Löschen bestätigen",
+  "confirm-share": "Teilen bestätigen",
   "contribute": "Mitwirken",
   "copy-link": "Link kopieren",
   "create-new-list": "Neue Liste erstellen",
@@ -61,15 +64,15 @@
   "documentation": "Dokumentation",
   "draw-a-route": "Route zeichnen",
   "driving": "Auto",
-  "duration": "",
+  "duration": "Dauer",
   "dutch": "Niederländisch",
   "easy": "Einfach",
   "edit": "Bearbeiten",
   "edit-entry": "Eintrag bearbeiten",
   "edit-list": "Liste bearbeiten",
   "edit-waypoint": "Wegpunkt bearbeiten",
-  "elevation-gain": "Höhenunterschied",
-  "elevation-loss": "",
+  "elevation-gain": "Höhenunterschied (aufw.)",
+  "elevation-loss": "Höhenunterschied (abw.)",
   "email": "Email",
   "english": "Englisch",
   "entry": "Eintrag",
@@ -78,8 +81,8 @@
   "error-exporting-trail": "Fehler beim Exportieren des Trails",
   "error-printing-map": "Fehler beim Drucken der Karte",
   "error-reading-file": "Fehler beim Lesen der Datei",
-  "error-saving-list": "",
-  "error-saving-trail": "Fehler bei Speichern der Route",
+  "error-saving-list": "Fehler beim Speichern der Liste",
+  "error-saving-trail": "Fehler beim Speichern der Route",
   "error-updating-password": "Fehler beim Aktualisieren des Passworts",
   "est-duration": "Gesch. Dauer",
   "explore": "Erkunden",
@@ -88,6 +91,7 @@
   "export-all-trails": "Alle Routen exportieren",
   "features": "Features",
   "file-format": "Dateiformat",
+  "filter-categories": "Kategorien filtern",
   "focus-map-on": "Karte fokussieren auf",
   "french": "Französisch",
   "german": "Deutsch",
@@ -114,10 +118,10 @@
   "license": "Lizenz",
   "link-copied": "Link kopiert",
   "list": "{n, plural, =1 {Liste} other {Listen}}",
-  "list-not-shared": "",
-  "list-saved-successfully": "",
-  "list-share-warning": "",
-  "list-share-warning-update": "",
+  "list-not-shared": "Mit niemandem geteilt",
+  "list-saved-successfully": "Liste gespeichert",
+  "list-share-warning": "Durch das Teilen einer Liste werden automatisch alle darin enthaltenen Routen freigegeben.",
+  "list-share-warning-update": "Hinzugefügte Routen werden mit allen geteilt, die Zugriff auf diese Liste haben.",
   "location": "Standort",
   "login": "Login",
   "login-details": "Login Details",
@@ -142,6 +146,7 @@
   "new-password": "Neues Passwort",
   "new-trail": "Neue Route",
   "no-account": "Du hast noch kein Konto?",
+  "no-data": "Keine Daten",
   "no-preference": "Keine Präferenz",
   "no-results": "Keine Ergebnisse gefunden",
   "not-a-valid-email-address": "Keine gültige Email-Adresse",
@@ -160,12 +165,12 @@
   "profile": "Profil",
   "public": "Öffentlich",
   "radius": "Radius",
-  "read-more": "",
+  "read-more": "Mehr Info",
   "register": "Registrieren",
   "removed-trail-from": "Route entfernt aus",
   "required": "Pflichtfeld",
   "save": "Speichern",
-  "save-list": "",
+  "save-list": "Liste speichern",
   "save-trail": "Route speichern",
   "save-your-trail-first": "Route zuerst speichern",
   "search-cities": "Städte suchen",
@@ -174,7 +179,7 @@
   "select-list": "Liste auswählen",
   "settings": "Einstellungen",
   "share": "Teilen",
-  "share-this-list": "",
+  "share-this-list": "Diese Liste teilen",
   "share-this-trail": "Diese Route teilen",
   "shared-by": "Geteilt von",
   "shared-with": "Geteilt mit",
diff --git a/web/src/lib/i18n/locales/en.json b/web/src/lib/i18n/locales/en.json
index d0a02594..154a38f2 100644
--- a/web/src/lib/i18n/locales/en.json
+++ b/web/src/lib/i18n/locales/en.json
@@ -12,13 +12,16 @@
   "add-to-list": "Add to list",
   "add-waypoint": "Add Waypoint",
   "added-trail-to": "Added trail to",
+  "after": "After",
   "all-activities": "All activities",
   "alphabetical": "Alphabetical",
   "already-account": "Already have an account?",
   "altitude": "Altitude",
   "api-documentation": "API Documentation",
   "avatar": "Avatar",
+  "average-speed": "Avg. Speed",
   "basic-info": "Basic Info",
+  "before": "Before",
   "can": "can",
   "cancel": "Cancel",
   "card": "{n, plural, =1 {Card} other {Cards}}",
@@ -88,6 +91,7 @@
   "export-all-trails": "Export all trails",
   "features": "Features",
   "file-format": "File format",
+  "filter-categories": "Filter categories",
   "focus-map-on": "Focus map on",
   "french": "French",
   "german": "German",
@@ -142,6 +146,7 @@
   "new-password": "New password",
   "new-trail": "New Trail",
   "no-account": "Don't have an account?",
+  "no-data": "No data",
   "no-preference": "No preference",
   "no-results": "No results found",
   "not-a-valid-email-address": "Not a valid email address",
diff --git a/web/src/lib/i18n/locales/fr.json b/web/src/lib/i18n/locales/fr.json
index 79fb36f0..92017f77 100644
--- a/web/src/lib/i18n/locales/fr.json
+++ b/web/src/lib/i18n/locales/fr.json
@@ -12,13 +12,16 @@
   "add-to-list": "Ajouter à une liste",
   "add-waypoint": "Ajouter un point de repère",
   "added-trail-to": "Ajouter un itinéraire à",
+  "after": "",
   "all-activities": "",
   "alphabetical": "Alphabétique",
   "already-account": "Déjà un compte ?",
   "altitude": "Altitude",
   "api-documentation": "Documentation API",
   "avatar": "Avatar",
+  "average-speed": "",
   "basic-info": "Informations de base",
+  "before": "",
   "can": "",
   "cancel": "Annuler",
   "card": "{n, plural, =1 {Carte} other {Cartes}}",
@@ -88,6 +91,7 @@
   "export-all-trails": "",
   "features": "Fonctionnalités",
   "file-format": "",
+  "filter-categories": "",
   "focus-map-on": "",
   "french": "Français",
   "german": "Allemand",
@@ -142,6 +146,7 @@
   "new-password": "",
   "new-trail": "Nouvel itinéraire",
   "no-account": "Pas encore de compte ?",
+  "no-data": "",
   "no-preference": "Pas de préférence",
   "no-results": "Pas de résultat",
   "not-a-valid-email-address": "Adresse email invalide",
diff --git a/web/src/lib/i18n/locales/hu.json b/web/src/lib/i18n/locales/hu.json
index 73bfe422..cebabf87 100644
--- a/web/src/lib/i18n/locales/hu.json
+++ b/web/src/lib/i18n/locales/hu.json
@@ -12,13 +12,16 @@
   "add-to-list": "Hozzáadás a listához",
   "add-waypoint": "Útvonalpont hozzáadása",
   "added-trail-to": "Hozzáadott nyomvonal a",
+  "after": "",
   "all-activities": "",
   "alphabetical": "Betűrendben",
   "already-account": "Már rendelkezik fiókkal?",
   "altitude": "Magasság",
   "api-documentation": "API Dokumentáció",
   "avatar": "Avatar",
+  "average-speed": "",
   "basic-info": "Alap információk",
+  "before": "",
   "can": "",
   "cancel": "Mégsem",
   "card": "{n, plural, =1 {Kártya} other {Kártyák}}",
@@ -88,6 +91,7 @@
   "export-all-trails": "",
   "features": "Jellemzők",
   "file-format": "",
+  "filter-categories": "",
   "focus-map-on": "",
   "french": "Francia",
   "german": "Német",
@@ -142,6 +146,7 @@
   "new-password": "",
   "new-trail": "Új útvonal",
   "no-account": "Nincs még fiókja?",
+  "no-data": "",
   "no-preference": "Nincs preferált",
   "no-results": "Nincs eredmény",
   "not-a-valid-email-address": "Érvénytelen e-mail cím",
diff --git a/web/src/lib/i18n/locales/it.json b/web/src/lib/i18n/locales/it.json
index c88c130f..ff94fb33 100644
--- a/web/src/lib/i18n/locales/it.json
+++ b/web/src/lib/i18n/locales/it.json
@@ -12,13 +12,16 @@
   "add-to-list": "Aggiungi alla lista",
   "add-waypoint": "Aggiungere un waypoint",
   "added-trail-to": "Percorso aggiunto a",
+  "after": "",
   "all-activities": "",
   "alphabetical": "Alfabetico",
   "already-account": "Hai già un account?",
   "altitude": "Altitudine",
   "api-documentation": "Documentazione API",
   "avatar": "Avatar",
+  "average-speed": "",
   "basic-info": "Informazioni di base",
+  "before": "",
   "can": "può",
   "cancel": "Annulla",
   "card": "{n, plural, =1 {Carta} other {Carte}}",
@@ -88,6 +91,7 @@
   "export-all-trails": "",
   "features": "Caratteristiche",
   "file-format": "Formato del file",
+  "filter-categories": "",
   "focus-map-on": "",
   "french": "Francese",
   "german": "Tedesco",
@@ -142,6 +146,7 @@
   "new-password": "",
   "new-trail": "Nuovo percorso",
   "no-account": "Non hai ancora un account?",
+  "no-data": "",
   "no-preference": "Nessuna preferenza",
   "no-results": "Nessun risultato trovato",
   "not-a-valid-email-address": "Indirizzo email non valido",
diff --git a/web/src/lib/i18n/locales/nl.json b/web/src/lib/i18n/locales/nl.json
index 68473545..8a7d5c95 100644
--- a/web/src/lib/i18n/locales/nl.json
+++ b/web/src/lib/i18n/locales/nl.json
@@ -12,13 +12,16 @@
   "add-to-list": "Toevoegen aan lijst",
   "add-waypoint": "Routepunt toevoegen",
   "added-trail-to": "Wandelroute toegevoegd aan",
+  "after": "",
   "all-activities": "",
   "alphabetical": "Alfabetisch",
   "already-account": "Heb je al een account?",
   "altitude": "Hoogte",
   "api-documentation": "API-documentatie",
   "avatar": "Profielfoto",
+  "average-speed": "",
   "basic-info": "Algemene informatie",
+  "before": "",
   "can": "",
   "cancel": "Annuleren",
   "card": "{n, plural, =1 {kaart} other {kaarten}}",
@@ -88,6 +91,7 @@
   "export-all-trails": "",
   "features": "Kenmerken",
   "file-format": "",
+  "filter-categories": "",
   "focus-map-on": "",
   "french": "Frans",
   "german": "Duits",
@@ -142,6 +146,7 @@
   "new-password": "",
   "new-trail": "Nieuwe wandelroute",
   "no-account": "Heb je nog geen account?",
+  "no-data": "",
   "no-preference": "Geen voorkeur",
   "no-results": "Er zijn geen zoekresultaten",
   "not-a-valid-email-address": "Het e-mailadres is ongeldig",
diff --git a/web/src/lib/i18n/locales/pl.json b/web/src/lib/i18n/locales/pl.json
index 357b2d4b..20ce7f24 100644
--- a/web/src/lib/i18n/locales/pl.json
+++ b/web/src/lib/i18n/locales/pl.json
@@ -12,13 +12,16 @@
   "add-to-list": "Dodaj do listy",
   "add-waypoint": "Dodaj Punkt",
   "added-trail-to": "Dodaj ścieżkę do",
+  "after": "",
   "all-activities": "",
   "alphabetical": "Alfabetyczne",
   "already-account": "Czy masz już konto?",
   "altitude": "Wysokość",
   "api-documentation": "Dokumentacja API",
   "avatar": "Awatar",
+  "average-speed": "",
   "basic-info": "Podstawowe informacje",
+  "before": "",
   "can": "",
   "cancel": "Anuluj",
   "card": "{n, plural, =1 {Karta} other {Karty}}",
@@ -88,6 +91,7 @@
   "export-all-trails": "",
   "features": "Funkcje",
   "file-format": "",
+  "filter-categories": "",
   "focus-map-on": "",
   "french": "Francuski",
   "german": "Niemiecki",
@@ -142,6 +146,7 @@
   "new-password": "",
   "new-trail": "Nowa ścieżka",
   "no-account": "Nie masz konta?",
+  "no-data": "",
   "no-preference": "Brak preferencji",
   "no-results": "Brak wyników",
   "not-a-valid-email-address": "Nieprawidłowy adres email",
diff --git a/web/src/lib/i18n/locales/pt.json b/web/src/lib/i18n/locales/pt.json
index c71db46c..0414fdc0 100644
--- a/web/src/lib/i18n/locales/pt.json
+++ b/web/src/lib/i18n/locales/pt.json
@@ -12,13 +12,16 @@
   "add-to-list": "Adicionar à lista",
   "add-waypoint": "Adicionar ponto de vista",
   "added-trail-to": "Trilha adicionada para",
+  "after": "",
   "all-activities": "",
   "alphabetical": "Alfabético",
   "already-account": "Já tem uma conta?",
   "altitude": "Altitude",
   "api-documentation": "Documentação da API",
   "avatar": "Avatar",
+  "average-speed": "",
   "basic-info": "Informações básicas",
+  "before": "",
   "can": "",
   "cancel": "Cancelar",
   "card": "{n, plural, =1 {Cartão} other {cartãos}}",
@@ -88,6 +91,7 @@
   "export-all-trails": "",
   "features": "Características",
   "file-format": "",
+  "filter-categories": "",
   "focus-map-on": "",
   "french": "Francês",
   "german": "Alemão",
@@ -142,6 +146,7 @@
   "new-password": "",
   "new-trail": "Nova trilha",
   "no-account": "Não tem uma conta?",
+  "no-data": "",
   "no-preference": "Nenhuma preferência",
   "no-results": "Nenhum resultado encontrado",
   "not-a-valid-email-address": "Não um endereço de e-mail válido",
diff --git a/web/src/lib/i18n/locales/zh.json b/web/src/lib/i18n/locales/zh.json
index 3572188c..f4a486a7 100644
--- a/web/src/lib/i18n/locales/zh.json
+++ b/web/src/lib/i18n/locales/zh.json
@@ -12,13 +12,16 @@
   "add-to-list": "添加到列表",
   "add-waypoint": "添加坐标",
   "added-trail-to": "添加路线到",
+  "after": "",
   "all-activities": "",
   "alphabetical": "字母",
   "already-account": "已注册账户？",
   "altitude": "海拔",
   "api-documentation": "API 文档",
   "avatar": "头像",
+  "average-speed": "",
   "basic-info": "基本信息",
+  "before": "",
   "can": "",
   "cancel": "取消",
   "card": "{n, plural, =1 {卡片} other {卡片}}",
@@ -88,6 +91,7 @@
   "export-all-trails": "",
   "features": "特性",
   "file-format": "",
+  "filter-categories": "",
   "focus-map-on": "",
   "french": "法语",
   "german": "德语",
@@ -142,6 +146,7 @@
   "new-password": "",
   "new-trail": "创建新路线",
   "no-account": "还未注册？",
+  "no-data": "",
   "no-preference": "尚未规划",
   "no-results": "没有找到结果",
   "not-a-valid-email-address": "无效电子邮箱地址",
diff --git a/web/src/lib/models/summit_log.ts b/web/src/lib/models/summit_log.ts
index d82e7aeb..a34a115e 100644
--- a/web/src/lib/models/summit_log.ts
+++ b/web/src/lib/models/summit_log.ts
@@ -26,5 +26,10 @@ class SummitLog {
   }
 }
 
+interface SummitLogFilter {
+  category: string[],
+  startDate?: string;
+  endDate?: string;
+}
 
-export { SummitLog };
+export { SummitLog, type SummitLogFilter };
diff --git a/web/src/lib/stores/summit_log_store.ts b/web/src/lib/stores/summit_log_store.ts
index 01b60e7f..e14e5499 100644
--- a/web/src/lib/stores/summit_log_store.ts
+++ b/web/src/lib/stores/summit_log_store.ts
@@ -1,13 +1,18 @@
-import { SummitLog } from "$lib/models/summit_log";
+import { SummitLog, type SummitLogFilter } from "$lib/models/summit_log";
 import { pb } from "$lib/pocketbase";
 import { ClientResponseError } from "pocketbase";
 import { writable, type Writable } from "svelte/store";
+import { fetchGPX } from "./trail_store";
 
 export const summitLog: Writable<SummitLog> = writable(new SummitLog(new Date().toISOString().substring(0, 10)));
 export const summitLogs: Writable<SummitLog[]> = writable([]);
 
-export async function summit_logs_index(f: (url: RequestInfo | URL, config?: RequestInit) => Promise<Response> = fetch) {
-    const r = await f('/api/v1/summit-log?', {
+export async function summit_logs_index(filter?: SummitLogFilter, f: (url: RequestInfo | URL, config?: RequestInit) => Promise<Response> = fetch) {
+    const filterText = filter ? buildFilterText(filter) : "";
+
+    const r = await f('/api/v1/summit-log?' + new URLSearchParams({
+        filter: filterText,
+    }), {
         method: 'GET',
     })
 
@@ -17,6 +22,18 @@ export async function summit_logs_index(f: (url: RequestInfo | URL, config?: Req
 
     const fetchedSummitLogs: SummitLog[] = await r.json();
 
+    for (const log of fetchedSummitLogs) {
+        if (!log.gpx) {
+            continue
+        }
+        const gpxData: string = await fetchGPX(log as any, f);
+
+        if (!log.expand) {
+            log.expand = {};
+        }
+        log.expand.gpx_data = gpxData;
+    }
+
     summitLogs.set(fetchedSummitLogs);
 
     return fetchedSummitLogs;
@@ -94,4 +111,23 @@ export async function summit_logs_delete(summitLog: SummitLog) {
     } else {
         throw new ClientResponseError(await r.json())
     }
+}
+
+function buildFilterText(filter: SummitLogFilter,): string {
+    let filterText: string = "";
+
+    if (filter.category.length > 0) {
+        filterText += `trails_via_summit_logs.category != null && '${filter.category.join(",")}' ~ trails_via_summit_logs.category`;
+    }
+
+    if (filter.startDate) {
+        filterText += `${filter.category.length ? ' && ' : ''}date >= '${filter.startDate}'`
+    }
+
+    if (filter.endDate) {
+        filterText += `${filter.category.length || filter.startDate ? ' && ' : ''} date <= '${filter.endDate}'`
+    }
+
+    return filterText;
+
 }
\ No newline at end of file
diff --git a/web/src/lib/util/format_util.ts b/web/src/lib/util/format_util.ts
index e8da7d65..82999284 100644
--- a/web/src/lib/util/format_util.ts
+++ b/web/src/lib/util/format_util.ts
@@ -13,7 +13,7 @@ export function formatTimeHHMM(minutes?: number) {
     return (h < 10 ? "0" : "") + h.toString() + "h " + (Math.round(m) < 10 ? "0" : "") + Math.round(m).toString() + "m";
 }
 
-export function formatDistance(meters?: number) {
+export function formatDistance(meters?: number) {    
     if (meters === undefined) {
         return "-";
     }
@@ -50,6 +50,22 @@ export function formatElevation(meters?: number) {
     }
 }
 
+export function formatSpeed(speed?: number) {
+    if (speed === undefined) {
+        return "-";
+    }
+
+    const unit = get(page).data.settings?.unit ?? "metric";
+
+    if (unit == "metric") {
+        return `${Math.round(speed)} km/h`
+    } else {
+        const mph = speed * 0.621371;
+
+        return `${Math.round(mph)} mp/h`;
+    }
+}
+
 export function formatTimeSince(date: Date) {
 
     var seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
diff --git a/web/src/routes/api/v1/summit-log/+server.ts b/web/src/routes/api/v1/summit-log/+server.ts
index b5d56897..54962d2e 100644
--- a/web/src/routes/api/v1/summit-log/+server.ts
+++ b/web/src/routes/api/v1/summit-log/+server.ts
@@ -3,10 +3,13 @@ import { pb } from '$lib/pocketbase';
 import { error, json, type RequestEvent } from '@sveltejs/kit';
 
 export async function GET(event: RequestEvent) {
+    const filter = event.url.searchParams.get('filter') ?? ""
+
     try {
         const r: SummitLog[] = await pb.collection('summit_logs').getFullList<SummitLog>({
             expand: "trails_via_summit_logs.category",
-            sort: "+date"
+            sort: "+date",
+            filter: filter
         })
         return json(r)
     } catch (e: any) {
diff --git a/web/src/routes/profile/+page.svelte b/web/src/routes/profile/+page.svelte
index 0f06ad54..e6ddf041 100644
--- a/web/src/routes/profile/+page.svelte
+++ b/web/src/routes/profile/+page.svelte
@@ -1,15 +1,23 @@
 <script lang="ts">
+    import { page } from "$app/stores";
     import Calendar from "$lib/components/base/calendar.svelte";
+    import Datepicker from "$lib/components/base/datepicker.svelte";
+    import MultiSelect from "$lib/components/base/multi_select.svelte";
     import Select, {
         type SelectItem,
     } from "$lib/components/base/select.svelte";
     import SummitLogTable from "$lib/components/summit_log/summit_log_table.svelte";
-    import { summitLogs } from "$lib/stores/summit_log_store";
+    import { categories } from "$lib/stores/category_store.js";
+    import {
+        summit_logs_index,
+        summitLogs,
+    } from "$lib/stores/summit_log_store";
     import { currentUser } from "$lib/stores/user_store";
     import { getFileURL } from "$lib/util/file_util";
     import {
         formatDistance,
         formatElevation,
+        formatSpeed,
         formatTimeHHMM,
     } from "$lib/util/format_util";
     import {
@@ -25,6 +33,8 @@
     import { Bar, Pie } from "svelte-chartjs";
     import { _ } from "svelte-i18n";
 
+    export let data;
+
     ChartJS.register(
         Title,
         Tooltip,
@@ -35,6 +45,13 @@
         BarElement,
     );
 
+    const filter = data.filter;
+
+    const categorySelectItems: SelectItem[] = $categories.map((c) => ({
+        value: c.id,
+        text: c.name,
+    }));
+
     const barChartSelectItems: SelectItem[] = [
         {
             text: $_("distance"),
@@ -65,7 +82,13 @@
         "#ffafcc",
     ];
 
-    $: categories = $summitLogs.reduce(
+    const conversionFactors = {
+        distance: 0.621371,
+        elevation_gain: 3.28084,
+        elevation_loss: 3.28084,
+    };
+
+    $: logCategories = $summitLogs.reduce(
         (acc, log) => {
             const cat =
                 log.expand.trails_via_summit_logs?.at(0)?.expand.category
@@ -76,8 +99,8 @@
         {} as Record<string, number>,
     );
 
-    $: categoryLabels = Object.keys(categories).sort();
-    $: categoryValues = Object.values(categories);
+    $: categoryLabels = Object.keys(logCategories).sort();
+    $: categoryValues = Object.values(logCategories);
     $: categoryColorMap = Object.fromEntries(
         categoryLabels.map((label, index) => [
             label,
@@ -95,12 +118,19 @@
         ],
     };
 
-    $: barChartUnit =
-        barChartSelectedValue == "duration"
-            ? "min"
-            : barChartSelectedValue == "distance"
-              ? "km"
-              : "m";
+    function barChartUnit() {
+        const unit = $page.data.settings?.unit ?? "metric";
+
+        switch (barChartSelectedValue) {
+            case "duration":
+                return "min";
+            case "elevation_gain":
+            case "elevation_loss":
+                return unit == "metric" ? "m" : "ft";
+            case "distance":
+                return unit == "metric" ? "km" : "mi";
+        }
+    }
 
     $: barChartDataByDate = $summitLogs.reduce(
         (acc, log) => {
@@ -115,6 +145,11 @@
             if (barChartSelectedValue === "distance") {
                 acc[date] = acc[date] / 1000;
             }
+            if ($page.data.settings?.unit !== "metric") {
+                acc[date] =
+                    acc[date] *
+                    (conversionFactors as any)[barChartSelectedValue];
+            }
             return acc;
         },
         {} as Record<string, number>,
@@ -156,11 +191,60 @@
         (sum, log) => sum + (log.elevation_loss ?? 0),
         0,
     );
+
+    $: averageSpeed =
+        totalDuration > 0 ? totalDistance / totalDuration : undefined;
+
+    function updateFilterCategory(categories: SelectItem[]) {
+        filter.category = categories.map((c) => c.value);
+        loadSummitLogs();
+    }
+
+    function handleDateClick(date: Date) {
+        const datePlusN = new Date();
+        datePlusN.setDate(date.getDate() + 1);
+        filter.startDate = datePlusN.toISOString().slice(0, 10);
+        datePlusN.setDate(date.getDate() + 2);
+        filter.endDate = datePlusN.toISOString().slice(0, 10);
+        loadSummitLogs();
+    }
+
+    async function loadSummitLogs() {
+        const logs = await summit_logs_index(filter);
+        summitLogs.set(logs);
+    }
 </script>
 
-<div class="grid grid-cols-5 gap-4 items-start max-w-6xl mx-auto">
+<svelte:head>
+    <title>{$_("profile")} | wanderer</title>
+</svelte:head>
+
+
+<div
+    class="grid grid-cols-1 md:grid-cols-[356px_minmax(0,_1fr)] gap-y-4 items-start max-w-6xl mx-auto"
+>
     <div
-        class="border border-input-border rounded-xl p-6 col-span-2 row-span-2 space-y-6"
+        class="flex flex-wrap md:flex-nowrap col-start-1 md:col-start-2 gap-x-4 justify-end"
+    >
+        <MultiSelect
+            on:change={(e) => updateFilterCategory(e.detail)}
+            label={$_("categories")}
+            items={categorySelectItems}
+            placeholder={`${$_("filter-categories")}...`}
+        ></MultiSelect>
+        <Datepicker
+            on:change={loadSummitLogs}
+            bind:value={filter.startDate}
+            label={$_("after")}
+        ></Datepicker>
+        <Datepicker
+            on:change={loadSummitLogs}
+            bind:value={filter.endDate}
+            label={$_("before")}
+        ></Datepicker>
+    </div>
+    <div
+        class="border border-input-border rounded-xl p-6 lg:row-span-3 space-y-6 grow-0 md:mr-4"
     >
         {#if $currentUser}
             <div class="flex items-center gap-x-6">
@@ -188,119 +272,146 @@
                 </div>
             </div>
         {/if}
-        <Calendar logs={$summitLogs} colorMap={categoryColorMap}></Calendar>
+        <Calendar
+            on:click={(e) => handleDateClick(e.detail)}
+            logs={$summitLogs}
+            colorMap={categoryColorMap}
+        ></Calendar>
     </div>
-    <div
-        class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
-    >
-        <span class="text-gray-500 font-semibold text-lg self-start"
-            ><i class="fa fa-hashtag mr-3"></i>{$_("activity", {
-                values: { n: 2 },
-            })}</span
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div
+            class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
         >
-        <p class="text-4xl font-bold">{$summitLogs.length}</p>
-    </div>
-    <div
-        class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
-    >
-        <span class="text-gray-500 font-semibold text-lg self-start"
-            ><i class="fa fa-left-right mr-3"></i>{$_("distance")}</span
-        >
-        <p class="text-4xl font-bold">{formatDistance(totalDistance)}</p>
-    </div>
-
-    <div
-        class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
-    >
-        <span class="text-gray-500 font-semibold text-lg self-start"
-            ><i class="fa fa-clock mr-3"></i>{$_("duration")}</span
-        >
-        <p class="text-4xl font-bold">{formatTimeHHMM(totalDuration)}</p>
-    </div>
-    <div
-        class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
-    >
-        <span class="text-gray-500 font-semibold text-lg self-start"
-            ><i class="fa fa-arrow-trend-up mr-3"></i>{$_(
-                "elevation-gain",
-            )}</span
-        >
-        <p class="text-4xl font-bold">{formatElevation(totalElevationGain)}</p>
-    </div>
-    <div
-        class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
-    >
-        <span class="text-gray-500 font-semibold text-lg self-start"
-            ><i class="fa fa-arrow-trend-down mr-3"></i>{$_(
-                "elevation-loss",
-            )}</span
-        >
-        <p class="text-4xl font-bold">{formatElevation(totalElevationLoss)}</p>
-    </div>
-    <div
-        class="col-start-1 col-span-1 border border-input-border rounded-xl p-6 space-y-4"
-    >
-        <span class="text-gray-500 font-semibold text-lg"
-            ><i class="fa fa-person-hiking mr-3"></i>{$_("categories")}</span
-        >
-        <Pie
-            data={categoryChartData}
-            options={{
-                responsive: true,
-                plugins: {
-                    legend: {
-                        position: "bottom",
-                    },
-                },
-            }}
-        />
-    </div>
-    <div
-        class="h-full col-span-3 space-y-2 border border-input-border rounded-xl p-6"
-    >
-        <div class="flex justify-between">
-            <span class="text-gray-500 font-semibold text-lg"
-                ><i class="fa fa-calendar mr-3"></i>{$_("activity", {
-                    values: { n: 1 },
+            <span class="text-gray-500 font-semibold text-lg self-start"
+                ><i class="fa fa-hashtag mr-3"></i>{$_("activity", {
+                    values: { n: 2 },
                 })}</span
             >
-            <Select
-                bind:value={barChartSelectedValue}
-                items={barChartSelectItems}
-            ></Select>
+            <p class="text-4xl font-bold">{$summitLogs.length}</p>
+        </div>
+        <div
+            class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
+        >
+            <span class="text-gray-500 font-semibold text-lg self-start"
+                ><i class="fa fa-left-right mr-3"></i>{$_("distance")}</span
+            >
+            <p class="text-4xl font-bold">{formatDistance(totalDistance)}</p>
         </div>
 
-        <Bar
-            data={barChartData}
-            options={{
-                plugins: {
-                    legend: {
-                        display: false,
-                    },
-                    tooltip: {
-                        callbacks: {
-                            label: (item) =>
-                                `${item.dataset.label}: ${item.formattedValue} ${barChartUnit}`,
+        <div
+            class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
+        >
+            <span class="text-gray-500 font-semibold text-lg self-start"
+                ><i class="fa fa-clock mr-3"></i>{$_("duration")}</span
+            >
+            <p class="text-4xl font-bold">{formatTimeHHMM(totalDuration)}</p>
+        </div>
+        <div
+            class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
+        >
+            <span class="text-gray-500 font-semibold text-lg self-start"
+                ><i class="fa fa-arrow-trend-up mr-3"></i>{$_(
+                    "elevation-gain",
+                )}</span
+            >
+            <p class="text-4xl font-bold">
+                {formatElevation(totalElevationGain)}
+            </p>
+        </div>
+        <div
+            class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
+        >
+            <span class="text-gray-500 font-semibold text-lg self-start"
+                ><i class="fa fa-arrow-trend-down mr-3"></i>{$_(
+                    "elevation-loss",
+                )}</span
+            >
+            <p class="text-4xl font-bold">
+                {formatElevation(totalElevationLoss)}
+            </p>
+        </div>
+        <div
+            class="flex flex-col items-center gap-6 border border-input-border rounded-xl p-6"
+        >
+            <span class="text-gray-500 font-semibold text-lg self-start"
+                ><i class="fa fa-arrow-trend-down mr-3"></i>{$_(
+                    "average-speed",
+                )}</span
+            >
+            <p class="text-4xl font-bold">{formatSpeed(averageSpeed)}</p>
+        </div>
+        <div
+            class="col-start-1 col-span-1 border border-input-border rounded-xl p-6 space-y-4"
+        >
+            <span class="text-gray-500 font-semibold text-lg"
+                ><i class="fa fa-person-hiking mr-3"></i>{$_(
+                    "categories",
+                )}</span
+            >
+            <Pie
+                data={categoryChartData}
+                options={{
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: "bottom",
                         },
                     },
-                },
-                scales: {
-                    y: {
-                        ticks: {
-                            callback: function (value, index, ticks) {
-                                return value + " " + barChartUnit;
+                }}
+            />
+        </div>
+        <div
+            class="h-full md:col-span-2 space-y-2 border border-input-border rounded-xl p-6"
+        >
+            <div class="flex justify-between">
+                <span class="text-gray-500 font-semibold text-lg"
+                    ><i class="fa fa-calendar mr-3"></i>{$_("activity", {
+                        values: { n: 1 },
+                    })}</span
+                >
+                <Select
+                    bind:value={barChartSelectedValue}
+                    items={barChartSelectItems}
+                ></Select>
+            </div>
+
+            <Bar
+                data={barChartData}
+                options={{
+                    plugins: {
+                        legend: {
+                            display: false,
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: (item) =>
+                                    `${item.dataset.label}: ${item.formattedValue} ${barChartUnit()}`,
                             },
                         },
                     },
-                },
-            }}
-        ></Bar>
+                    scales: {
+                        y: {
+                            ticks: {
+                                callback: function (value, index, ticks) {
+                                    return value + " " + barChartUnit();
+                                },
+                            },
+                        },
+                    },
+                }}
+            ></Bar>
+        </div>
     </div>
 
-    <div class="col-span-5 border border-input-border rounded-xl p-6 space-y-6">
+    <div
+        class="col-span-1 md:col-span-2 border border-input-border rounded-xl p-6 space-y-6"
+    >
         <span class="text-gray-500 font-semibold text-lg"
             ><i class="fa fa-table mr-3"></i>{$_("all-activities")}</span
         >
-        <SummitLogTable summitLogs={$summitLogs} showCategory></SummitLogTable>
+        <div class=" overflow-x-scroll">
+            <SummitLogTable summitLogs={$summitLogs} showCategory showTrail
+            ></SummitLogTable>
+        </div>
     </div>
 </div>
diff --git a/web/src/routes/profile/+page.ts b/web/src/routes/profile/+page.ts
index 477e8b09..ac5b84ce 100644
--- a/web/src/routes/profile/+page.ts
+++ b/web/src/routes/profile/+page.ts
@@ -1,23 +1,23 @@
-import { summit_logs_index, summitLogs } from "$lib/stores/summit_log_store";
+import type { SummitLogFilter } from "$lib/models/summit_log";
+import { categories_index } from "$lib/stores/category_store";
+import { summit_logs_index } from "$lib/stores/summit_log_store";
 import { fetchGPX } from "$lib/stores/trail_store";
 import { type ServerLoad } from "@sveltejs/kit";
-import { get } from "svelte/store";
 
 export const load: ServerLoad = async ({ params, locals, fetch }) => {
-    const logs = await summit_logs_index(fetch);
 
-    for (const log of logs) {
-        if (!log.gpx) {
-            continue
-        }
-        const gpxData: string = await fetchGPX(log as any, fetch);
+    const date = new Date(), y = date.getFullYear(), m = date.getMonth();
+    const firstDay = new Date(y, m, 1);
+    const lastDay = new Date(y, m + 1, 0);
 
-        if (!log.expand) {
-            log.expand = {};
-        }
-        log.expand.gpx_data = gpxData;
+    const categories = await categories_index(fetch)
+
+    const filter: SummitLogFilter = {
+        startDate: firstDay.toISOString().slice(0, 10),
+        endDate: lastDay.toISOString().slice(0, 10),
+        category: []
     }
+    const logs = await summit_logs_index(filter, fetch);
 
-    console.log(logs);
-    
+    return {filter}
 };
\ No newline at end of file