Merge pull request #46 from solidtime-io/feature/dashboard_empty_states

Feature/dashboard empty states
2026-08-08 08:12:17 +01:00 · 2024-04-20 02:31:45 +02:00
parent db9c0de05b b44e8ef457
commit c5a6608211
19 changed files with 342 additions and 104 deletions
--- a/e2e/projects.spec.ts
+++ b/e2e/projects.spec.ts
@@ -63,3 +63,9 @@ 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
+
+// Add Project with billable rate
+
+// Edit Project with billable rate
--- 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">
--- a/resources/js/Components/Common/Project/ProjectEditModal.vue
+++ b/resources/js/Components/Common/Project/ProjectEditModal.vue
@@ -0,0 +1,114 @@
+<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';
+import BillableRateInput from '@/Components/Common/BillableRateInput.vue';
+import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue';
+
+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="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"
+                        v-model="project.name"
+                        type="text"
+                        placeholder="Project Name"
+                        @keydown.enter="submit()"
+                        class="mt-1 block w-full"
+                        required
+                        autocomplete="projectName" />
+                </div>
+                <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">
+                                <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>
--- 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>
--- a/resources/js/Components/Common/Project/ProjectTableRow.vue
+++ b/resources/js/Components/Common/Project/ProjectTableRow.vue
@@ -1,13 +1,15 @@
 <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';
+import { formatCents } from '@/utils/money';

 const { clients } = storeToRefs(useClientsStore());
 const { tasks } = storeToRefs(useTasksStore());
@@ -30,9 +32,14 @@ const projectTasksCount = computed(() => {
 function deleteProject() {
    useProjectsStore().deleteProject(props.project.id);
 }
+
+const showEditProjectModal = ref(false);
 </script>

 <template>
+    <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">
@@ -54,7 +61,11 @@ function deleteProject() {
            <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">
@@ -65,6 +76,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>
--- a/resources/js/Components/Dashboard/DashboardCard.vue
+++ b/resources/js/Components/Dashboard/DashboardCard.vue
@@ -1,11 +1,10 @@
 <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">
+                class="w-full flex flex-col">
                <slot></slot>
            </div>
        </div>
--- a/resources/js/Components/Dashboard/DayOverviewCardChart.vue
+++ 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: el,
+        ...{
+            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>
--- 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,
@@ -10,77 +13,15 @@ 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) }}
            </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">
--- a/resources/js/Components/Dashboard/LastSevenDaysCard.vue
+++ b/resources/js/Components/Dashboard/LastSevenDaysCard.vue
@@ -15,8 +15,10 @@ defineProps<{
    <DashboardCard title="Last 7 Days" :icon="CalendarIcon">
        <DayOverviewCardEntry
            v-for="day in last7Days"
+            :class="last7Days.length === 7 ? 'last:border-0 first:pt-3' : ''"
            :key="day.date"
            :date="day.date"
+            :history="day.history"
            :duration="day.duration"></DayOverviewCardEntry>
    </DashboardCard>
 </template>
--- 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"
--- 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 }}
--- 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: {
@@ -20,8 +22,24 @@ 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>
+        <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>
--- 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>
--- 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();
+            },
        }
    );
 };
--- 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>
--- 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>
--- 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'
--- a/resources/js/utils/init.ts
+++ 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();
+}
--- 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,
+    };
 });