From 3d9ed4a4e5acfe0fc9617dc7b86d9a036d161750 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Thu, 18 Apr 2024 01:13:26 +0200
Subject: [PATCH 1/7] fix last tracked tasks empty state

---
 .../Common/Project/ProjectBadge.vue           |  1 +
 .../Common/Task/TaskCreateModal.vue           |  1 +
 .../js/Components/Dashboard/DashboardCard.vue |  5 ++-
 .../Dashboard/RecentlyTrackedTasksCard.vue    | 29 ++++++++++++++-
 .../RecentlyTrackedTasksCardEntry.vue         | 37 +++++++++++++++++--
 5 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/resources/js/Components/Common/Project/ProjectBadge.vue b/resources/js/Components/Common/Project/ProjectBadge.vue
index 3e60a323..cd84fc87 100644
--- a/resources/js/Components/Common/Project/ProjectBadge.vue
+++ b/resources/js/Components/Common/Project/ProjectBadge.vue
@@ -12,6 +12,7 @@ const props = withDefaults(
         border: boolean;
     }>(),
     {
+        name: '',
         size: 'base',
         tag: 'div',
         color: 'var(--theme-color-icon-default)',
diff --git a/resources/js/Components/Common/Task/TaskCreateModal.vue b/resources/js/Components/Common/Task/TaskCreateModal.vue
index 1f0c7e8a..52133b40 100644
--- a/resources/js/Components/Common/Task/TaskCreateModal.vue
+++ b/resources/js/Components/Common/Task/TaskCreateModal.vue
@@ -24,6 +24,7 @@ async function submit() {
         project_id: props.projectId,
     });
     show.value = false;
+    taskName.value = '';
 }
 
 const taskNameInput = ref<HTMLInputElement | null>(null);
diff --git a/resources/js/Components/Dashboard/DashboardCard.vue b/resources/js/Components/Dashboard/DashboardCard.vue
index e690398f..3bf5eebd 100644
--- a/resources/js/Components/Dashboard/DashboardCard.vue
+++ b/resources/js/Components/Dashboard/DashboardCard.vue
@@ -3,8 +3,9 @@
         <CardTitle :title="title" :icon="icon"></CardTitle>
 
         <div
-            class="rounded-lg bg-card-background border border-card-border flex-1 flex items-center">
-            <div class="divide-y divide-card-background-separator w-full">
+            class="rounded-lg bg-card-background border border-card-border flex-1 flex items-stretch">
+            <div
+                class="divide-y divide-card-background-separator w-full flex flex-col">
                 <slot></slot>
             </div>
         </div>
diff --git a/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue b/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
index 35195a24..c39d91fd 100644
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
+++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
@@ -2,6 +2,10 @@
 import RecentlyTrackedTasksCardEntry from '@/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue';
 import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
 import { CheckCircleIcon } from '@heroicons/vue/20/solid';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import { PlusCircleIcon } from '@heroicons/vue/24/solid';
+import { router } from '@inertiajs/vue3';
+
 const props = defineProps<{
     latestTasks: {
         id: string;
@@ -17,7 +21,30 @@ const props = defineProps<{
         <RecentlyTrackedTasksCardEntry
             v-for="lastTask in props.latestTasks"
             :key="lastTask.id"
-            :project="lastTask.project_name"
+            :project_id="lastTask.project_id"
+            :task_id="lastTask.id"
             :title="lastTask.name"></RecentlyTrackedTasksCardEntry>
+        <div v-if="props.latestTasks.length === 0" class="text-center">
+            <PlusCircleIcon
+                class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
+            <h3 class="text-white font-semibold">No recent tasks found</h3>
+            <p class="pb-5">Create tasks inside of a project!</p>
+            <SecondaryButton @click="router.visit(route('projects'))"
+                >Go to Projects
+            </SecondaryButton>
+        </div>
+        <div
+            v-if="props.latestTasks.length === 1"
+            class="text-center flex flex-1 justify-center items-center">
+            <div>
+                <PlusCircleIcon
+                    class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
+                <h3 class="text-white font-semibold">Add more tasks</h3>
+                <p class="pb-5">Create tasks inside of a project!</p>
+                <SecondaryButton @click="router.visit(route('projects'))"
+                    >Go to Projects
+                </SecondaryButton>
+            </div>
+        </div>
     </DashboardCard>
 </template>
diff --git a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
index 8a562987..94c8cf52 100644
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
+++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
@@ -1,11 +1,37 @@
 <script setup lang="ts">
 import ProjectBadge from '@/Components/Common/Project/ProjectBadge.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
+import { useProjectsStore } from '@/utils/useProjects';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import dayjs from 'dayjs';
+import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 
-defineProps<{
+const props = defineProps<{
     title: string;
-    project: string;
+    project_id: string;
+    task_id: string;
 }>();
+
+const { projects } = storeToRefs(useProjectsStore());
+
+const project = computed(() => {
+    return projects.value.find((project) => project.id === props.project_id);
+});
+
+const { currentTimeEntry } = storeToRefs(useCurrentTimeEntryStore());
+const { stopTimer, startTimer } = useCurrentTimeEntryStore();
+
+async function startTaskTimer() {
+    if (currentTimeEntry.value.id) {
+        await stopTimer();
+    }
+    currentTimeEntry.value.project_id = props.project_id;
+    currentTimeEntry.value.task_id = props.task_id;
+    currentTimeEntry.value.start = dayjs().utc().format();
+    await startTimer();
+    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
+}
 </script>
 
 <template>
@@ -14,10 +40,13 @@ defineProps<{
             <p class="font-semibold text-white text-sm pb-1">
                 {{ title }}
             </p>
-            <ProjectBadge :name="project"></ProjectBadge>
+            <ProjectBadge
+                :name="project?.name"
+                :color="project?.color"></ProjectBadge>
         </div>
         <div class="flex items-center justify-center">
-            <TimeTrackerStartStop></TimeTrackerStartStop>
+            <TimeTrackerStartStop
+                @changed="startTaskTimer"></TimeTrackerStartStop>
         </div>
     </div>
 </template>

From 4a89f22885215414c2dbdb1b1d49abf60dcd71e5 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Thu, 18 Apr 2024 23:39:04 +0200
Subject: [PATCH 2/7] fix/refactor dashboard card separators

---
 .../js/Components/Dashboard/DashboardCard.vue |  4 +---
 .../Dashboard/DayOverviewCardEntry.vue        |  3 ++-
 .../Dashboard/LastSevenDaysCard.vue           |  1 +
 .../Dashboard/RecentlyTrackedTasksCard.vue    | 23 ++++++++++++-------
 .../RecentlyTrackedTasksCardEntry.vue         |  3 ++-
 .../Components/Dashboard/TeamActivityCard.vue |  1 +
 .../Dashboard/TeamActivityCardEntry.vue       |  5 ++--
 7 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/resources/js/Components/Dashboard/DashboardCard.vue b/resources/js/Components/Dashboard/DashboardCard.vue
index 3bf5eebd..e492657f 100644
--- a/resources/js/Components/Dashboard/DashboardCard.vue
+++ b/resources/js/Components/Dashboard/DashboardCard.vue
@@ -1,11 +1,9 @@
 <template>
     <section class="flex flex-col">
         <CardTitle :title="title" :icon="icon"></CardTitle>
-
         <div
             class="rounded-lg bg-card-background border border-card-border flex-1 flex items-stretch">
-            <div
-                class="divide-y divide-card-background-separator w-full flex flex-col">
+            <div class="w-full flex flex-col">
                 <slot></slot>
             </div>
         </div>
diff --git a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
index dc5e24eb..8854a71e 100644
--- a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
+++ b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
@@ -10,7 +10,8 @@ import {
 </script>
 
 <template>
-    <div class="px-3.5 py-2 flex justify-between @container">
+    <div
+        class="px-3.5 py-2 flex justify-between @container border-b border-card-background-separator">
         <div class="flex items-center">
             <p class="font-semibold text-sm text-white">
                 {{ formatHumanReadableDate(date) }}
diff --git a/resources/js/Components/Dashboard/LastSevenDaysCard.vue b/resources/js/Components/Dashboard/LastSevenDaysCard.vue
index 123f00a8..66c35272 100644
--- a/resources/js/Components/Dashboard/LastSevenDaysCard.vue
+++ b/resources/js/Components/Dashboard/LastSevenDaysCard.vue
@@ -15,6 +15,7 @@ defineProps<{
     <DashboardCard title="Last 7 Days" :icon="CalendarIcon">
         <DayOverviewCardEntry
             v-for="day in last7Days"
+            :class="last7Days.length === 7 ? 'last:border-0' : ''"
             :key="day.date"
             :date="day.date"
             :duration="day.duration"></DayOverviewCardEntry>
diff --git a/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue b/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
index c39d91fd..6421ce42 100644
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
+++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
@@ -20,18 +20,25 @@ const props = defineProps<{
     <DashboardCard title="Recently Tracked Tasks" :icon="CheckCircleIcon">
         <RecentlyTrackedTasksCardEntry
             v-for="lastTask in props.latestTasks"
+            :class="props.latestTasks.length === 4 ? 'last:border-0' : ''"
             :key="lastTask.id"
             :project_id="lastTask.project_id"
             :task_id="lastTask.id"
             :title="lastTask.name"></RecentlyTrackedTasksCardEntry>
-        <div v-if="props.latestTasks.length === 0" class="text-center">
-            <PlusCircleIcon
-                class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
-            <h3 class="text-white font-semibold">No recent tasks found</h3>
-            <p class="pb-5">Create tasks inside of a project!</p>
-            <SecondaryButton @click="router.visit(route('projects'))"
-                >Go to Projects
-            </SecondaryButton>
+        <div
+            v-if="props.latestTasks.length === 0"
+            class="text-center flex flex-1 justify-center items-center">
+            <div>
+                <PlusCircleIcon
+                    class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
+                <h3 class="text-white font-semibold text-sm">
+                    No recent tasks found
+                </h3>
+                <p class="pb-5 text-sm">Create tasks inside of a project!</p>
+                <SecondaryButton @click="router.visit(route('projects'))"
+                    >Go to Projects
+                </SecondaryButton>
+            </div>
         </div>
         <div
             v-if="props.latestTasks.length === 1"
diff --git a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
index 94c8cf52..7bb60520 100644
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
+++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
@@ -35,7 +35,8 @@ async function startTaskTimer() {
 </script>
 
 <template>
-    <div class="px-3.5 py-2 grid grid-cols-5">
+    <div
+        class="px-3.5 py-2 grid grid-cols-5 border-b border-b-card-background-separator">
         <div class="col-span-4">
             <p class="font-semibold text-white text-sm pb-1">
                 {{ title }}
diff --git a/resources/js/Components/Dashboard/TeamActivityCard.vue b/resources/js/Components/Dashboard/TeamActivityCard.vue
index 9f262cd7..f6da7773 100644
--- a/resources/js/Components/Dashboard/TeamActivityCard.vue
+++ b/resources/js/Components/Dashboard/TeamActivityCard.vue
@@ -20,6 +20,7 @@ defineProps<{
         <TeamActivityCardEntry
             v-for="activity in latestTeamActivity"
             :key="activity.user_id"
+            :class="latestTeamActivity.length === 4 ? 'last:border-0' : ''"
             :name="activity.name"
             :description="activity.description"
             :working="activity.status"></TeamActivityCardEntry>
diff --git a/resources/js/Components/Dashboard/TeamActivityCardEntry.vue b/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
index e9480ea3..81fdb6b1 100644
--- a/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
+++ b/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-    <div class="px-4 py-2 2xl:py-3">
+    <div class="px-4 py-2 2xl:py-3 border-b border-card-background-separator">
         <div class="col-span-2">
             <div class="flex justify-between">
                 <p class="font-semibold text-sm text-white">
@@ -29,7 +29,8 @@ defineProps<{
                     </span>
                 </div>
             </div>
-            <div class="text-muted text-sm font-medium">
+            <div
+                class="text-muted text-sm font-medium text-ellipsis whitespace-nowrap max-w-full overflow-hidden">
                 {{ description }}
             </div>
         </div>

From 5d95dd4fae98390e561dc706207af4edbaebff2a Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Fri, 19 Apr 2024 00:14:04 +0200
Subject: [PATCH 3/7] add dynamic charts to last 7 days card

---
 .../Dashboard/DayOverviewCardChart.vue        | 77 +++++++++++++++++++
 .../Dashboard/DayOverviewCardEntry.vue        | 68 +---------------
 .../Dashboard/LastSevenDaysCard.vue           |  1 +
 3 files changed, 82 insertions(+), 64 deletions(-)
 create mode 100644 resources/js/Components/Dashboard/DayOverviewCardChart.vue

diff --git a/resources/js/Components/Dashboard/DayOverviewCardChart.vue b/resources/js/Components/Dashboard/DayOverviewCardChart.vue
new file mode 100644
index 00000000..845e3f2b
--- /dev/null
+++ b/resources/js/Components/Dashboard/DayOverviewCardChart.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import VChart from 'vue-echarts';
+import { ref } from 'vue';
+
+const props = defineProps<{
+    history: number[];
+}>();
+
+const seriesData = props.history.map((el) => {
+    return {
+        value: Math.max(el, 10),
+        ...{
+            itemStyle: {
+                borderWidth: 1,
+                borderColor: 'rgba(125,156,188,1)',
+                borderRadius: [2, 2, 0, 0],
+                color: 'rgba(125,156,188,1)',
+            },
+        },
+    };
+});
+const option = ref({
+    grid: {
+        top: 0,
+        right: 0,
+        left: 0,
+        bottom: 0,
+    },
+    backgroundColor: 'transparent',
+    xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        markLine: {
+            lineStyle: {
+                color: 'rgba(125,156,188,0.1)',
+                type: 'dashed',
+            },
+        },
+        axisLine: {
+            lineStyle: {
+                color: 'transparent', // Set desired color here
+            },
+        },
+        axisLabel: {
+            fontSize: 16,
+            fontWeight: 600,
+            margin: 24,
+            fontFamily: 'Outfit, sans-serif',
+        },
+        axisTick: {
+            lineStyle: {
+                color: 'transparent', // Set desired color here
+            },
+        },
+    },
+    yAxis: {
+        type: 'value',
+        splitLine: {
+            lineStyle: {
+                color: 'transparent', // Set desired color here
+            },
+        },
+    },
+    series: [
+        {
+            data: seriesData,
+            type: 'bar',
+        },
+    ],
+});
+</script>
+
+<template>
+    <v-chart style="height: 20px; width: 80px" class="chart" :option="option" />
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
index 8854a71e..e6c7a8da 100644
--- a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
+++ b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import DayOverviewCardChart from '@/Components/Dashboard/DayOverviewCardChart.vue';
+
 defineProps<{
     date: string;
     duration: number;
+    history: number[];
 }>();
 import {
     formatHumanReadableDate,
@@ -18,70 +21,7 @@ import {
             </p>
         </div>
         <div class="items-center justify-center flex-1 hidden @2xs:flex">
-            <svg
-                class="w-20 opacity-70 transition hover:opacity-100"
-                viewBox="0 0 42 10"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <rect
-                    y="9.28572"
-                    width="4.18367"
-                    height="0.714286"
-                    rx="0.357143"
-                    fill="#B0D7FF"
-                    fill-opacity="0.9" />
-                <rect
-                    x="5.37939"
-                    y="7.85715"
-                    width="4.18367"
-                    height="2.14286"
-                    rx="0.714286"
-                    fill="#B0D7FF"
-                    fill-opacity="0.9" />
-                <rect
-                    x="10.7578"
-                    y="4.28572"
-                    width="4.18367"
-                    height="5.71429"
-                    rx="0.714286"
-                    fill="#B0D7FF"
-                    fill-opacity="0.9" />
-                <rect
-                    x="16.1372"
-                    width="4.18367"
-                    height="10"
-                    rx="0.714286"
-                    fill="#B0D7FF"
-                    fill-opacity="0.9" />
-                <rect
-                    width="4.18367"
-                    height="6.42857"
-                    rx="0.714286"
-                    transform="matrix(1 0 0 -1 21.5161 10)"
-                    fill="#B0D7FF"
-                    fill-opacity="0.9" />
-                <rect
-                    width="4.18367"
-                    height="5"
-                    rx="0.714286"
-                    transform="matrix(1 0 0 -1 26.8955 10)"
-                    fill="#B0D7FF"
-                    fill-opacity="0.9" />
-                <rect
-                    width="4.18367"
-                    height="0.714286"
-                    rx="0.357143"
-                    transform="matrix(1 0 0 -1 32.2739 10)"
-                    fill="#B0D7FF"
-                    fill-opacity="0.9" />
-                <rect
-                    width="4.18367"
-                    height="0.714286"
-                    rx="0.357143"
-                    transform="matrix(1 0 0 -1 37.6533 10)"
-                    fill="#B0D7FF"
-                    fill-opacity="0.9" />
-            </svg>
+            <DayOverviewCardChart :history="history"></DayOverviewCardChart>
         </div>
         <div
             class="flex text-sm items-center justify-center text-muted font-semibold">
diff --git a/resources/js/Components/Dashboard/LastSevenDaysCard.vue b/resources/js/Components/Dashboard/LastSevenDaysCard.vue
index 66c35272..c594742b 100644
--- a/resources/js/Components/Dashboard/LastSevenDaysCard.vue
+++ b/resources/js/Components/Dashboard/LastSevenDaysCard.vue
@@ -18,6 +18,7 @@ defineProps<{
             :class="last7Days.length === 7 ? 'last:border-0' : ''"
             :key="day.date"
             :date="day.date"
+            :history="day.history"
             :duration="day.duration"></DayOverviewCardEntry>
     </DashboardCard>
 </template>

From 1cba8c39defba9044516594313a5f4c708d3f9e1 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Fri, 19 Apr 2024 02:33:18 +0200
Subject: [PATCH 4/7] add empty state for members activity, fix organization
 switch data loading problem

---
 .../Components/Dashboard/TeamActivityCard.vue   | 17 +++++++++++++++++
 .../js/Components/OrganizationSwitcher.vue      |  4 ++++
 resources/js/Layouts/AppLayout.vue              | 16 ++--------------
 resources/js/Pages/Time.vue                     |  2 +-
 resources/js/utils/init.ts                      | 17 +++++++++++++++++
 5 files changed, 41 insertions(+), 15 deletions(-)
 create mode 100644 resources/js/utils/init.ts

diff --git a/resources/js/Components/Dashboard/TeamActivityCard.vue b/resources/js/Components/Dashboard/TeamActivityCard.vue
index f6da7773..e2827d25 100644
--- a/resources/js/Components/Dashboard/TeamActivityCard.vue
+++ b/resources/js/Components/Dashboard/TeamActivityCard.vue
@@ -2,6 +2,8 @@
 import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
 import TeamActivityCardEntry from '@/Components/Dashboard/TeamActivityCardEntry.vue';
 import { UserGroupIcon } from '@heroicons/vue/20/solid';
+import { router } from '@inertiajs/vue3';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
 
 defineProps<{
     latestTeamActivity: {
@@ -24,5 +26,20 @@ defineProps<{
             :name="activity.name"
             :description="activity.description"
             :working="activity.status"></TeamActivityCardEntry>
+        <div
+            v-if="latestTeamActivity.length <= 2"
+            class="text-center flex flex-1 justify-center items-center">
+            <div>
+                <UserGroupIcon
+                    class="w-8 text-icon-default inline pb-2"></UserGroupIcon>
+                <h3 class="text-white font-semibold text-sm">
+                    Invite your co-workers
+                </h3>
+                <p class="pb-5 text-sm">You can invite your entire team.</p>
+                <SecondaryButton @click="router.visit(route('members'))"
+                    >Go to Members
+                </SecondaryButton>
+            </div>
+        </div>
     </DashboardCard>
 </template>
diff --git a/resources/js/Components/OrganizationSwitcher.vue b/resources/js/Components/OrganizationSwitcher.vue
index 55717e6a..db43be99 100644
--- a/resources/js/Components/OrganizationSwitcher.vue
+++ b/resources/js/Components/OrganizationSwitcher.vue
@@ -5,6 +5,7 @@ import DropdownLink from '@/Components/DropdownLink.vue';
 import { router, usePage } from '@inertiajs/vue3';
 import type { Organization, User } from '@/types/models';
 import { isBillingActivated } from '@/utils/billing';
+import { initializeStores } from '@/utils/init';
 
 const page = usePage<{
     jetstream: {
@@ -28,6 +29,9 @@ const switchToTeam = (team: Organization) => {
         },
         {
             preserveState: false,
+            onSuccess: () => {
+                initializeStores();
+            },
         }
     );
 };
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 8705db74..039ad327 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -19,14 +19,8 @@ import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
 import UserSettingsIcon from '@/Components/UserSettingsIcon.vue';
 import MainContainer from '@/Pages/MainContainer.vue';
 import { onMounted, ref } from 'vue';
-import { useProjectsStore } from '@/utils/useProjects';
-import { useTagsStore } from '@/utils/useTags';
-import { useTasksStore } from '@/utils/useTasks';
-import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
-import { useClientsStore } from '@/utils/useClients';
-import { useMembersStore } from '@/utils/useMembers';
 import NotificationContainer from '@/Components/NotificationContainer.vue';
-import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+import { initializeStores } from '@/utils/init';
 
 defineProps({
     title: String,
@@ -38,13 +32,7 @@ onMounted(async () => {
     // make sure that the initial requests are only loaded once, this can be removed once we move away from inertia
     if (window.initialDataLoaded !== true) {
         window.initialDataLoaded = true;
-        useProjectsStore().fetchProjects();
-        useTasksStore().fetchTasks();
-        useTagsStore().fetchTags();
-        useCurrentTimeEntryStore().fetchCurrentTimeEntry();
-        useClientsStore().fetchClients();
-        useMembersStore().fetchMembers();
-        useTimeEntriesStore().fetchTimeEntries();
+        initializeStores();
     }
 });
 </script>
diff --git a/resources/js/Pages/Time.vue b/resources/js/Pages/Time.vue
index a3a0da9a..20556e82 100644
--- a/resources/js/Pages/Time.vue
+++ b/resources/js/Pages/Time.vue
@@ -92,7 +92,7 @@ const groupedTimeEntries = computed(() => {
             </div>
             <div
                 v-else-if="allTimeEntriesLoaded"
-                class="flex justify-center items-center py-5 text-white font-medium">
+                class="flex justify-center items-center py-5 text-muted font-medium">
                 All time entries are loaded!
             </div>
         </div>
diff --git a/resources/js/utils/init.ts b/resources/js/utils/init.ts
new file mode 100644
index 00000000..d97838e1
--- /dev/null
+++ b/resources/js/utils/init.ts
@@ -0,0 +1,17 @@
+import { useProjectsStore } from '@/utils/useProjects';
+import { useTasksStore } from '@/utils/useTasks';
+import { useTagsStore } from '@/utils/useTags';
+import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
+import { useClientsStore } from '@/utils/useClients';
+import { useMembersStore } from '@/utils/useMembers';
+import { useTimeEntriesStore } from '@/utils/useTimeEntries';
+
+export function initializeStores() {
+    useProjectsStore().fetchProjects();
+    useTasksStore().fetchTasks();
+    useTagsStore().fetchTags();
+    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
+    useClientsStore().fetchClients();
+    useMembersStore().fetchMembers();
+    useTimeEntriesStore().fetchTimeEntries();
+}

From 0650480246d170da574f849da6e64607c81738f2 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Sat, 20 Apr 2024 01:09:23 +0200
Subject: [PATCH 5/7] add project edit modal

---
 e2e/projects.spec.ts                          |   2 +
 .../Common/Project/ProjectEditModal.vue       | 112 ++++++++++++++++++
 .../Project/ProjectMoreOptionsDropdown.vue    |  14 ++-
 .../Common/Project/ProjectTableRow.vue        |   9 +-
 resources/js/utils/api.ts                     |   5 +
 resources/js/utils/useProjects.ts             |  35 +++++-
 6 files changed, 172 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/Components/Common/Project/ProjectEditModal.vue

diff --git a/e2e/projects.spec.ts b/e2e/projects.spec.ts
index 8b2c2463..36e52569 100644
--- a/e2e/projects.spec.ts
+++ b/e2e/projects.spec.ts
@@ -63,3 +63,5 @@ test('test that creating and deleting a new project via the modal works', async
 // Test that project task count is displayed correctly
 
 // Test that active / archive / all filter works (once implemented)
+
+// Edit Project Modal Test
diff --git a/resources/js/Components/Common/Project/ProjectEditModal.vue b/resources/js/Components/Common/Project/ProjectEditModal.vue
new file mode 100644
index 00000000..1ea033ea
--- /dev/null
+++ b/resources/js/Components/Common/Project/ProjectEditModal.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import TextInput from '@/Components/TextInput.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import DialogModal from '@/Components/DialogModal.vue';
+import { computed, ref } from 'vue';
+import type { CreateProjectBody, Project } from '@/utils/api';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import { useProjectsStore } from '@/utils/useProjects';
+import { useFocus } from '@vueuse/core';
+import ClientDropdown from '@/Components/Common/Client/ClientDropdown.vue';
+import { twMerge } from 'tailwind-merge';
+import Badge from '@/Components/Common/Badge.vue';
+import { useClientsStore } from '@/utils/useClients';
+import { storeToRefs } from 'pinia';
+
+const { updateProject } = useProjectsStore();
+const { clients } = storeToRefs(useClientsStore());
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+const props = defineProps<{
+    originalProject: Project;
+}>();
+
+const project = ref<CreateProjectBody>({
+    name: props.originalProject.name,
+    color: props.originalProject.color,
+    client_id: props.originalProject.client_id,
+    billable_rate: props.originalProject.billable_rate,
+});
+
+async function submit() {
+    await updateProject(props.originalProject.id, project.value);
+    show.value = false;
+}
+
+const projectNameInput = ref<HTMLInputElement | null>(null);
+
+useFocus(projectNameInput, { initialValue: true });
+
+const currentClientName = computed(() => {
+    if (project.value.client_id) {
+        return clients.value.find(
+            (client) => client.id === project.value.client_id
+        )?.name;
+    }
+    return 'No Client';
+});
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Edit Project {{ props.originalProject.name }} </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="flex items-center space-x-4">
+                <div class="px-3">
+                    <div
+                        :style="{
+                            backgroundColor: project.color,
+                            boxShadow: `var(--tw-ring-inset) 0 0 0 calc(5px + var(--tw-ring-offset-width)) ${project.color}30`,
+                        }"
+                        class="w-4 h-4 rounded-full"></div>
+                </div>
+                <div class="col-span-6 sm:col-span-4 flex-1">
+                    <TextInput
+                        id="projectName"
+                        ref="projectNameInput"
+                        v-model="project.name"
+                        type="text"
+                        placeholder="Project Name"
+                        @keydown.enter="submit()"
+                        class="mt-1 block w-full"
+                        required
+                        autocomplete="projectName" />
+                </div>
+                <div class="col-span-6 sm:col-span-4">
+                    <ClientDropdown v-model="project.client_id">
+                        <template #trigger>
+                            <Badge size="large">
+                                <div
+                                    :class="
+                                        twMerge('inline-block rounded-full')
+                                    "></div>
+                                <span>
+                                    {{ currentClientName }}
+                                </span>
+                            </Badge>
+                        </template>
+                    </ClientDropdown>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
+
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Update Project
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue b/resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue
index d4d7ff93..1e94baff 100644
--- a/resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue
+++ b/resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import Dropdown from '@/Components/Dropdown.vue';
-import { TrashIcon } from '@heroicons/vue/20/solid';
+import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
 import type { Project } from '@/utils/api';
 const emit = defineEmits<{
     delete: [];
+    edit: [];
 }>();
 const props = defineProps<{
     project: Project;
@@ -33,10 +34,19 @@ const props = defineProps<{
                 @click.prevent="emit('delete')"
                 :aria-label="'Delete Project ' + props.project.name"
                 data-testid="project_delete"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                class="border-b border-card-background-separator flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>
             </button>
+            <button
+                @click.prevent="emit('edit')"
+                :aria-label="'Edit Project ' + props.project.name"
+                data-testid="project_edit"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <PencilSquareIcon
+                    class="w-5 text-icon-active"></PencilSquareIcon>
+                <span>Edit</span>
+            </button>
         </template>
     </Dropdown>
 </template>
diff --git a/resources/js/Components/Common/Project/ProjectTableRow.vue b/resources/js/Components/Common/Project/ProjectTableRow.vue
index 3dd74760..33bb0d67 100644
--- a/resources/js/Components/Common/Project/ProjectTableRow.vue
+++ b/resources/js/Components/Common/Project/ProjectTableRow.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import ProjectMoreOptionsDropdown from '@/Components/Common/Project/ProjectMoreOptionsDropdown.vue';
 import type { Project } from '@/utils/api';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { CheckCircleIcon } from '@heroicons/vue/20/solid';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
 import { useTasksStore } from '@/utils/useTasks';
 import { useProjectsStore } from '@/utils/useProjects';
 import TableRow from '@/Components/TableRow.vue';
+import ProjectEditModal from '@/Components/Common/Project/ProjectEditModal.vue';
 
 const { clients } = storeToRefs(useClientsStore());
 const { tasks } = storeToRefs(useTasksStore());
@@ -30,9 +31,14 @@ const projectTasksCount = computed(() => {
 function deleteProject() {
     useProjectsStore().deleteProject(props.project.id);
 }
+
+const showEditProjectModal = ref(false);
 </script>
 
 <template>
+    <ProjectEditModal
+        :original-project="project"
+        :show="showEditProjectModal"></ProjectEditModal>
     <TableRow :href="route('projects.show', { project: project.id })">
         <div
             class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
@@ -65,6 +71,7 @@ function deleteProject() {
             class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <ProjectMoreOptionsDropdown
                 :project="project"
+                @edit="showEditProjectModal = true"
                 @delete="deleteProject"></ProjectMoreOptionsDropdown>
         </div>
     </TableRow>
diff --git a/resources/js/utils/api.ts b/resources/js/utils/api.ts
index 92c0c399..024bc341 100644
--- a/resources/js/utils/api.ts
+++ b/resources/js/utils/api.ts
@@ -33,6 +33,11 @@ export type CreateProjectBody = ZodiosBodyByAlias<
     'createProject'
 >;
 
+export type UpdateProjectBody = ZodiosBodyByAlias<
+    SolidTimeApi,
+    'updateProject'
+>;
+
 export type ProjectMemberResponse = ZodiosResponseByAlias<
     SolidTimeApi,
     'getProjectMembers'
diff --git a/resources/js/utils/useProjects.ts b/resources/js/utils/useProjects.ts
index b33e6215..a3bcc14c 100644
--- a/resources/js/utils/useProjects.ts
+++ b/resources/js/utils/useProjects.ts
@@ -1,7 +1,12 @@
 import { defineStore } from 'pinia';
 import { api } from '../../../openapi.json.client';
 import { computed, ref } from 'vue';
-import type { CreateProjectBody, Project, ProjectResponse } from '@/utils/api';
+import type {
+    CreateProjectBody,
+    Project,
+    ProjectResponse,
+    UpdateProjectBody,
+} from '@/utils/api';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
 
@@ -60,9 +65,35 @@ export const useProjectsStore = defineStore('projects', () => {
         }
     }
 
+    async function updateProject(
+        projectId: string,
+        updateProjectBody: UpdateProjectBody
+    ) {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId) {
+            await handleApiRequestNotifications(
+                api.updateProject(updateProjectBody, {
+                    params: {
+                        organization: organizationId,
+                        project: projectId,
+                    },
+                }),
+                'Project deleted successfully',
+                'Failed to delete project'
+            );
+            await fetchProjects();
+        }
+    }
+
     const projects = computed<Project[]>(
         () => projectResponse.value?.data || []
     );
 
-    return { projects, fetchProjects, createProject, deleteProject };
+    return {
+        projects,
+        fetchProjects,
+        createProject,
+        deleteProject,
+        updateProject,
+    };
 });

From 20c7a7a1946cbee38f4c482828c188d5fa64ef51 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Sat, 20 Apr 2024 01:11:18 +0200
Subject: [PATCH 6/7] last 7 days dashboard card design fixes

---
 resources/js/Components/Dashboard/DayOverviewCardChart.vue | 2 +-
 resources/js/Components/Dashboard/LastSevenDaysCard.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/Dashboard/DayOverviewCardChart.vue b/resources/js/Components/Dashboard/DayOverviewCardChart.vue
index 845e3f2b..858bd053 100644
--- a/resources/js/Components/Dashboard/DayOverviewCardChart.vue
+++ b/resources/js/Components/Dashboard/DayOverviewCardChart.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 
 const seriesData = props.history.map((el) => {
     return {
-        value: Math.max(el, 10),
+        value: el,
         ...{
             itemStyle: {
                 borderWidth: 1,
diff --git a/resources/js/Components/Dashboard/LastSevenDaysCard.vue b/resources/js/Components/Dashboard/LastSevenDaysCard.vue
index c594742b..11abaf9d 100644
--- a/resources/js/Components/Dashboard/LastSevenDaysCard.vue
+++ b/resources/js/Components/Dashboard/LastSevenDaysCard.vue
@@ -15,7 +15,7 @@ defineProps<{
     <DashboardCard title="Last 7 Days" :icon="CalendarIcon">
         <DayOverviewCardEntry
             v-for="day in last7Days"
-            :class="last7Days.length === 7 ? 'last:border-0' : ''"
+            :class="last7Days.length === 7 ? 'last:border-0 first:pt-3' : ''"
             :key="day.date"
             :date="day.date"
             :history="day.history"

From b44e8ef45744a1d20cfefd5401519f72bbe037d2 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Sat, 20 Apr 2024 01:41:02 +0200
Subject: [PATCH 7/7] add billable rates to projects

---
 e2e/projects.spec.ts                          |  4 +++
 .../Common/Project/ProjectCreateModal.vue     | 15 +++++++----
 .../Common/Project/ProjectEditModal.vue       | 26 ++++++++++---------
 .../Common/Project/ProjectTableRow.vue        | 11 +++++---
 4 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/e2e/projects.spec.ts b/e2e/projects.spec.ts
index 36e52569..937ce670 100644
--- a/e2e/projects.spec.ts
+++ b/e2e/projects.spec.ts
@@ -65,3 +65,7 @@ test('test that creating and deleting a new project via the modal works', async
 // Test that active / archive / all filter works (once implemented)
 
 // Edit Project Modal Test
+
+// Add Project with billable rate
+
+// Edit Project with billable rate
diff --git a/resources/js/Components/Common/Project/ProjectCreateModal.vue b/resources/js/Components/Common/Project/ProjectCreateModal.vue
index 96fd2069..682cc381 100644
--- a/resources/js/Components/Common/Project/ProjectCreateModal.vue
+++ b/resources/js/Components/Common/Project/ProjectCreateModal.vue
@@ -14,6 +14,7 @@ import Badge from '@/Components/Common/Badge.vue';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
 import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue';
+import BillableRateInput from '@/Components/Common/BillableRateInput.vue';
 
 const { createProject } = useProjectsStore();
 const { clients } = storeToRefs(useClientsStore());
@@ -59,10 +60,11 @@ const currentClientName = computed(() => {
         </template>
 
         <template #content>
-            <div class="flex items-center space-x-4">
-                <ProjectColorSelector
-                    v-model="project.color"></ProjectColorSelector>
-                <div class="col-span-6 sm:col-span-4 flex-1">
+            <div
+                class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4">
+                <div class="flex-1 flex items-center">
+                    <ProjectColorSelector
+                        v-model="project.color"></ProjectColorSelector>
                     <TextInput
                         id="projectName"
                         ref="projectNameInput"
@@ -74,7 +76,10 @@ const currentClientName = computed(() => {
                         required
                         autocomplete="projectName" />
                 </div>
-                <div class="col-span-6 sm:col-span-4">
+                <div class="sm:max-w-[120px]">
+                    <BillableRateInput v-model="project.billable_rate" />
+                </div>
+                <div>
                     <ClientDropdown v-model="project.client_id">
                         <template #trigger>
                             <Badge size="large">
diff --git a/resources/js/Components/Common/Project/ProjectEditModal.vue b/resources/js/Components/Common/Project/ProjectEditModal.vue
index 1ea033ea..fe45bb8e 100644
--- a/resources/js/Components/Common/Project/ProjectEditModal.vue
+++ b/resources/js/Components/Common/Project/ProjectEditModal.vue
@@ -12,6 +12,8 @@ import { twMerge } from 'tailwind-merge';
 import Badge from '@/Components/Common/Badge.vue';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
+import BillableRateInput from '@/Components/Common/BillableRateInput.vue';
+import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue';
 
 const { updateProject } = useProjectsStore();
 const { clients } = storeToRefs(useClientsStore());
@@ -57,16 +59,13 @@ const currentClientName = computed(() => {
         </template>
 
         <template #content>
-            <div class="flex items-center space-x-4">
-                <div class="px-3">
-                    <div
-                        :style="{
-                            backgroundColor: project.color,
-                            boxShadow: `var(--tw-ring-inset) 0 0 0 calc(5px + var(--tw-ring-offset-width)) ${project.color}30`,
-                        }"
-                        class="w-4 h-4 rounded-full"></div>
-                </div>
-                <div class="col-span-6 sm:col-span-4 flex-1">
+            <div
+                class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4">
+                <div class="flex-1 flex items-center">
+                    <div class="px-3">
+                        <ProjectColorSelector
+                            v-model="project.color"></ProjectColorSelector>
+                    </div>
                     <TextInput
                         id="projectName"
                         ref="projectNameInput"
@@ -78,7 +77,10 @@ const currentClientName = computed(() => {
                         required
                         autocomplete="projectName" />
                 </div>
-                <div class="col-span-6 sm:col-span-4">
+                <div class="sm:max-w-[120px]">
+                    <BillableRateInput v-model="project.billable_rate" />
+                </div>
+                <div class="">
                     <ClientDropdown v-model="project.client_id">
                         <template #trigger>
                             <Badge size="large">
@@ -96,7 +98,7 @@ const currentClientName = computed(() => {
             </div>
         </template>
         <template #footer>
-            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
 
             <PrimaryButton
                 class="ms-3"
diff --git a/resources/js/Components/Common/Project/ProjectTableRow.vue b/resources/js/Components/Common/Project/ProjectTableRow.vue
index 33bb0d67..3e975394 100644
--- a/resources/js/Components/Common/Project/ProjectTableRow.vue
+++ b/resources/js/Components/Common/Project/ProjectTableRow.vue
@@ -9,6 +9,7 @@ import { useTasksStore } from '@/utils/useTasks';
 import { useProjectsStore } from '@/utils/useProjects';
 import TableRow from '@/Components/TableRow.vue';
 import ProjectEditModal from '@/Components/Common/Project/ProjectEditModal.vue';
+import { formatCents } from '@/utils/money';
 
 const { clients } = storeToRefs(useClientsStore());
 const { tasks } = storeToRefs(useTasksStore());
@@ -37,8 +38,8 @@ const showEditProjectModal = ref(false);
 
 <template>
     <ProjectEditModal
-        :original-project="project"
-        :show="showEditProjectModal"></ProjectEditModal>
+        v-model:show="showEditProjectModal"
+        :original-project="project"></ProjectEditModal>
     <TableRow :href="route('projects.show', { project: project.id })">
         <div
             class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
@@ -60,7 +61,11 @@ const showEditProjectModal = ref(false);
             <div v-else>No client</div>
         </div>
         <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
-            {{ project.billable_rate ?? '--' }}
+            {{
+                project.billable_rate
+                    ? formatCents(project.billable_rate)
+                    : '--'
+            }}
         </div>
         <div
             class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">