add projects detail page, task create / delete

.eslintrc.cjs

@@ -5,5 +5,9 @@ module.exports = {
     extends: ['plugin:vue/vue3-essential', '@vue/eslint-config-typescript/recommended', '@vue/eslint-config-prettier'],
     rules: {
         'vue/multi-word-component-names': 'off',
-    }
+        "@typescript-eslint/no-unused-vars": "off",
+        "unused-imports/no-unused-imports": "error",
+        "unused-imports/no-unused-vars": "error",
+    },
+    plugins: ['unused-imports'],
 }

e2e/tasks.spec.ts

@@ -0,0 +1,109 @@
+import { expect, Page } from '@playwright/test';
+import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
+import { test } from '../playwright/fixtures';
+
+async function goToProjectsOverview(page: Page) {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
+}
+
+// Create new project via modal
+test('test that creating and deleting a new tag in a new project works', async ({
+    page,
+}) => {
+    const newProjectName =
+        'New Project ' + Math.floor(1 + Math.random() * 10000);
+    await goToProjectsOverview(page);
+    await page.getByRole('button', { name: 'Create Project' }).click();
+    await page.getByPlaceholder('Project Name').fill(newProjectName);
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Project' }).nth(1).click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/projects') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201 &&
+                (await response.json()).data.id !== null &&
+                (await response.json()).data.color !== null &&
+                (await response.json()).data.client_id === null &&
+                (await response.json()).data.name === newProjectName
+        ),
+    ]);
+
+    await expect(page.getByTestId('project_table')).toContainText(
+        newProjectName
+    );
+
+    await page.getByText(newProjectName).click();
+
+    const newTaskName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
+
+    await page.getByRole('button', { name: 'Create Task' }).click();
+    await page.getByPlaceholder('Task Name').fill(newTaskName);
+
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Task' }).nth(1).click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/tasks') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201 &&
+                (await response.json()).data.id !== null &&
+                (await response.json()).data.project_id !== null &&
+                (await response.json()).data.name === newTaskName
+        ),
+    ]);
+
+    await expect(page.getByTestId('task_table')).toContainText(newTaskName);
+
+    const taskMoreButton = page.locator(
+        "[aria-label='Actions for Task " + newTaskName + "']"
+    );
+    taskMoreButton.click();
+    const taskDeleteButton = page.locator(
+        "[aria-label='Delete Task " + newTaskName + "']"
+    );
+
+    await Promise.all([
+        taskDeleteButton.click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/tasks') &&
+                response.request().method() === 'DELETE' &&
+                response.status() === 204
+        ),
+    ]);
+    await expect(page.getByTestId('task_table')).not.toContainText(newTaskName);
+
+    await goToProjectsOverview(page);
+
+    const moreButton = page.locator(
+        "[aria-label='Actions for Project " + newProjectName + "']"
+    );
+    moreButton.click();
+    const deleteButton = page.locator(
+        "[aria-label='Delete Project " + newProjectName + "']"
+    );
+
+    await Promise.all([
+        deleteButton.click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/projects') &&
+                response.request().method() === 'DELETE' &&
+                response.status() === 204
+        ),
+    ]);
+    await expect(page.getByTestId('project_table')).not.toContainText(
+        newProjectName
+    );
+});
+
+// Create new project with new Client
+
+// Create new project with existing Client
+
+// Delete project via More Options
+
+// Test that project task count is displayed correctly
+
+// Test that active / archive / all filter works (once implemented)

package-lock.json

@@ -31,6 +31,7 @@
                 "@vue/tsconfig": "^0.5.1",
                 "autoprefixer": "^10.4.7",
                 "axios": "^1.6.4",
+                "eslint-plugin-unused-imports": "^3.1.0",
                 "laravel-vite-plugin": "^1.0.0",
                 "openapi-zod-client": "^1.16.2",
                 "postcss": "^8.4.14",
@@ -2859,6 +2860,27 @@
                 }
             }
         },
+        "node_modules/eslint-plugin-unused-imports": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-3.1.0.tgz",
+            "integrity": "sha512-9l1YFCzXKkw1qtAru1RWUtG2EVDZY0a0eChKXcL+EZ5jitG7qxdctu4RnvhOJHv4xfmUf7h+JJPINlVpGhZMrw==",
+            "dev": true,
+            "dependencies": {
+                "eslint-rule-composer": "^0.3.0"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "peerDependencies": {
+                "@typescript-eslint/eslint-plugin": "6 - 7",
+                "eslint": "8"
+            },
+            "peerDependenciesMeta": {
+                "@typescript-eslint/eslint-plugin": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/eslint-plugin-vue": {
             "version": "9.24.0",
             "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.24.0.tgz",
@@ -2894,6 +2916,15 @@
                 "node": ">=4"
             }
         },
+        "node_modules/eslint-rule-composer": {
+            "version": "0.3.0",
+            "resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz",
+            "integrity": "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==",
+            "dev": true,
+            "engines": {
+                "node": ">=4.0.0"
+            }
+        },
         "node_modules/eslint-scope": {
             "version": "7.2.2",
             "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",

package.json

@@ -20,6 +20,7 @@
         "@vue/tsconfig": "^0.5.1",
         "autoprefixer": "^10.4.7",
         "axios": "^1.6.4",
+        "eslint-plugin-unused-imports": "^3.1.0",
         "laravel-vite-plugin": "^1.0.0",
         "openapi-zod-client": "^1.16.2",
         "postcss": "^8.4.14",

resources/js/Components/Common/Client/ClientTable.vue

@@ -20,7 +20,7 @@ const createClient = ref(false);
         <div class="inline-block min-w-full align-middle">
             <div
                 data-testid="client_table"
-                class="grid min-w-full divide-y divide-row-separator border-b border-row-separator"
+                class="grid min-w-full"
                 style="grid-template-columns: 1fr 150px 80px">
                 <ClientTableHeading></ClientTableHeading>
                 <div

resources/js/Components/Common/Client/ClientTableHeading.vue

@@ -1,18 +1,20 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import TableHeading from '@/Components/Common/TableHeading.vue';
+</script>
 
 <template>
-    <div
-        class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 bg-row-heading-background border-t border-row-heading-border">
-        Name
-    </div>
-    <div
-        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
-        Status
-    </div>
-    <div
-        class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
-        <span class="sr-only">Edit</span>
-    </div>
+    <TableHeading>
+        <div
+            class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            Name
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Status
+        </div>
+        <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
+            <span class="sr-only">Edit</span>
+        </div>
+    </TableHeading>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Client/ClientTableRow.vue

@@ -6,6 +6,7 @@ import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
 import ClientMoreOptionsDropdown from '@/Components/Common/Client/ClientMoreOptionsDropdown.vue';
 import { useProjectsStore } from '@/utils/useProjects';
+import TableRow from '@/Components/TableRow.vue';
 
 const { projects } = storeToRefs(useProjectsStore());
 
@@ -25,24 +26,26 @@ const projectCount = computed(() => {
 </script>
 
 <template>
-    <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">
-        <span>
-            {{ client.name }}
-        </span>
-        <span class="text-muted"> {{ projectCount }} Projects </span>
-    </div>
-    <div
-        class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
-        <CheckCircleIcon class="w-5"></CheckCircleIcon>
-        <span>Active</span>
-    </div>
-    <div
-        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">
-        <ClientMoreOptionsDropdown
-            :client="client"
-            @delete="deleteClient"></ClientMoreOptionsDropdown>
-    </div>
+    <TableRow>
+        <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">
+            <span>
+                {{ client.name }}
+            </span>
+            <span class="text-muted"> {{ projectCount }} Projects </span>
+        </div>
+        <div
+            class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
+            <CheckCircleIcon class="w-5"></CheckCircleIcon>
+            <span>Active</span>
+        </div>
+        <div
+            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">
+            <ClientMoreOptionsDropdown
+                :client="client"
+                @delete="deleteClient"></ClientMoreOptionsDropdown>
+        </div>
+    </TableRow>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Member/MemberTable.vue

@@ -16,7 +16,7 @@ const createClient = ref(false);
         <div class="inline-block min-w-full align-middle">
             <div
                 data-testid="client_table"
-                class="grid min-w-full divide-y divide-row-separator border-b border-row-separator"
+                class="grid min-w-full"
                 style="grid-template-columns: 1fr 1fr 180px 180px 150px 80px">
                 <MemberTableHeading></MemberTableHeading>
                 <template v-for="member in members" :key="member.id">

resources/js/Components/Common/Member/MemberTableHeading.vue

@@ -1,30 +1,30 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import TableHeading from '@/Components/Common/TableHeading.vue';
+</script>
 
 <template>
-    <div
-        class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 bg-row-heading-background border-t border-row-heading-border">
-        Name
-    </div>
-    <div
-        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
-        Email
-    </div>
-    <div
-        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
-        Role
-    </div>
-    <div
-        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
-        Billable Rate
-    </div>
-    <div
-        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
-        Status
-    </div>
-    <div
-        class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
-        <span class="sr-only">Edit</span>
-    </div>
+    <TableHeading>
+        <div
+            class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            Name
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Email
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Role
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Billable Rate
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Status
+        </div>
+        <div
+            class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
+            <span class="sr-only">Edit</span>
+        </div>
+    </TableHeading>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Member/MemberTableRow.vue

@@ -3,6 +3,7 @@ import type { Member } from '@/utils/api';
 import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/20/solid';
 import { useClientsStore } from '@/utils/useClients';
 import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
+import TableRow from '@/Components/TableRow.vue';
 
 const props = defineProps<{
     member: Member;
@@ -18,38 +19,40 @@ function capitalizeFirstLetter(string: string) {
 </script>
 
 <template>
-    <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">
-        <span>
-            {{ member.name }}
-        </span>
-    </div>
-    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
-        {{ member.email }}
-    </div>
-    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
-        {{ capitalizeFirstLetter(member.role) }}
-    </div>
-    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
-        {{ member.billable_rate ?? '--' }}
-    </div>
-    <div
-        class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
-        <CheckCircleIcon
-            v-if="member.is_placeholder === false"
-            class="w-5"></CheckCircleIcon>
-        <span v-if="member.is_placeholder === false">Active</span>
-        <UserCircleIcon
-            v-if="member.is_placeholder === true"
-            class="w-5"></UserCircleIcon>
-        <span v-if="member.is_placeholder === true">Inactive</span>
-    </div>
-    <div
-        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">
-        <MemberMoreOptionsDropdown
-            :member="member"
-            @delete="removeMember"></MemberMoreOptionsDropdown>
-    </div>
+    <TableRow>
+        <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">
+            <span>
+                {{ member.name }}
+            </span>
+        </div>
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            {{ member.email }}
+        </div>
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            {{ capitalizeFirstLetter(member.role) }}
+        </div>
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            {{ member.billable_rate ?? '--' }}
+        </div>
+        <div
+            class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
+            <CheckCircleIcon
+                v-if="member.is_placeholder === false"
+                class="w-5"></CheckCircleIcon>
+            <span v-if="member.is_placeholder === false">Active</span>
+            <UserCircleIcon
+                v-if="member.is_placeholder === true"
+                class="w-5"></UserCircleIcon>
+            <span v-if="member.is_placeholder === true">Inactive</span>
+        </div>
+        <div
+            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">
+            <MemberMoreOptionsDropdown
+                :member="member"
+                @delete="removeMember"></MemberMoreOptionsDropdown>
+        </div>
+    </TableRow>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Project/ProjectCreateModal.vue

@@ -69,6 +69,7 @@ const currentClientName = computed(() => {
                         v-model="project.name"
                         type="text"
                         placeholder="Project Name"
+                        @keydown.enter="submit()"
                         class="mt-1 block w-full"
                         required
                         autocomplete="projectName" />

resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue

@@ -30,7 +30,7 @@ const props = defineProps<{
         </template>
         <template #content>
             <button
-                @click="emit('delete')"
+                @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">

resources/js/Components/Common/Project/ProjectTable.vue

@@ -20,7 +20,7 @@ const createProject = ref(false);
         <div class="inline-block min-w-full align-middle">
             <div
                 data-testid="project_table"
-                class="grid min-w-full divide-y divide-row-separator border-b border-row-separator"
+                class="grid min-w-full"
                 style="grid-template-columns: 1fr 150px 150px 150px 80px">
                 <ProjectTableHeading></ProjectTableHeading>
                 <div

resources/js/Components/Common/Project/ProjectTableHeading.vue

@@ -1,26 +1,26 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import TableHeading from '@/Components/Common/TableHeading.vue';
+</script>
 
 <template>
-    <div
-        class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 bg-row-heading-background border-t border-row-heading-border">
-        Name
-    </div>
-    <div
-        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
-        Client
-    </div>
-    <div
-        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
-        Team
-    </div>
-    <div
-        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
-        Status
-    </div>
-    <div
-        class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
-        <span class="sr-only">Edit</span>
-    </div>
+    <TableHeading>
+        <div
+            class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            Name
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Client
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Team
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Status
+        </div>
+        <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
+            <span class="sr-only">Edit</span>
+        </div>
+    </TableHeading>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Project/ProjectTableRow.vue

@@ -7,6 +7,7 @@ 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';
 
 const { clients } = storeToRefs(useClientsStore());
 const { tasks } = storeToRefs(useTasksStore());
@@ -32,56 +33,58 @@ function deleteProject() {
 </script>
 
 <template>
-    <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">
+    <TableRow :href="route('projects.show', { project: project.id })">
         <div
-            :style="{
-                backgroundColor: project.color,
-                boxShadow: `var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) ${project.color}30`,
-            }"
-            class="w-3 h-3 rounded-full"></div>
-        <span>
-            {{ project.name }}
-        </span>
-        <span class="text-muted"> {{ projectTasksCount }} Tasks </span>
-    </div>
-    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
-        <div v-if="project.client_id">
-            {{ client?.name }}
+            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">
+            <div
+                :style="{
+                    backgroundColor: project.color,
+                    boxShadow: `var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) ${project.color}30`,
+                }"
+                class="w-3 h-3 rounded-full"></div>
+            <span>
+                {{ project.name }}
+            </span>
+            <span class="text-muted"> {{ projectTasksCount }} Tasks </span>
         </div>
-        <div v-else>mem No client</div>
-    </div>
-    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
-        <div class="isolate flex -space-x-1 opacity-50">
-            <img
-                class="relative z-30 inline-block h-6 w-6 rounded-full ring-4 ring-card-background"
-                src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                alt="" />
-            <img
-                class="relative z-20 inline-block h-6 w-6 rounded-full ring-4 ring-card-background"
-                src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                alt="" />
-            <img
-                class="relative z-10 inline-block h-6 w-6 rounded-full ring-4 ring-card-background"
-                src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
-                alt="" />
-            <img
-                class="relative z-0 inline-block h-6 w-6 rounded-full ring-4 ring-card-background"
-                src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                alt="" />
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            <div v-if="project.client_id">
+                {{ client?.name }}
+            </div>
+            <div v-else>No client</div>
         </div>
-    </div>
-    <div
-        class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
-        <CheckCircleIcon class="w-5"></CheckCircleIcon>
-        <span>Active</span>
-    </div>
-    <div
-        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"
-            @delete="deleteProject"></ProjectMoreOptionsDropdown>
-    </div>
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            <div class="isolate flex -space-x-1 opacity-50">
+                <img
+                    class="relative z-30 inline-block h-6 w-6 rounded-full ring-4 ring-card-background"
+                    src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    alt="" />
+                <img
+                    class="relative z-20 inline-block h-6 w-6 rounded-full ring-4 ring-card-background"
+                    src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    alt="" />
+                <img
+                    class="relative z-10 inline-block h-6 w-6 rounded-full ring-4 ring-card-background"
+                    src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
+                    alt="" />
+                <img
+                    class="relative z-0 inline-block h-6 w-6 rounded-full ring-4 ring-card-background"
+                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                    alt="" />
+            </div>
+        </div>
+        <div
+            class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
+            <CheckCircleIcon class="w-5"></CheckCircleIcon>
+            <span>Active</span>
+        </div>
+        <div
+            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"
+                @delete="deleteProject"></ProjectMoreOptionsDropdown>
+        </div>
+    </TableRow>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/TableHeading.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div
+        class="contents [&>*]:border-row-separator [&>*]:border-b [&>*]:border-t [&>*]:bg-row-heading-background">
+        <slot></slot>
+    </div>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Tag/TagCreateModal.vue

@@ -39,6 +39,7 @@ useFocus(tagNameInput, { initialValue: true });
                         id="tagName"
                         ref="tagNameInput"
                         v-model="tag.name"
+                        @keydown.enter="submit"
                         type="text"
                         placeholder="Tag Name"
                         class="mt-1 block w-full"

resources/js/Components/Common/Tag/TagTable.vue

@@ -19,7 +19,7 @@ const createTag = ref(false);
         <div class="inline-block min-w-full align-middle">
             <div
                 data-testid="tag_table"
-                class="grid min-w-full divide-y divide-row-separator border-b border-row-separator"
+                class="grid min-w-full"
                 style="grid-template-columns: 1fr 80px">
                 <TagTableHeading></TagTableHeading>
                 <div

resources/js/Components/Common/Tag/TagTableHeading.vue

@@ -1,14 +1,17 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import TableHeading from '@/Components/Common/TableHeading.vue';
+</script>
 
 <template>
-    <div
-        class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 bg-row-heading-background border-t border-row-heading-border">
-        Name
-    </div>
-    <div
-        class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
-        <span class="sr-only">Edit</span>
-    </div>
+    <TableHeading>
+        <div
+            class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            Name
+        </div>
+        <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
+            <span class="sr-only">Edit</span>
+        </div>
+    </TableHeading>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Tag/TagTableRow.vue

@@ -2,6 +2,7 @@
 import type { Tag } from '@/utils/api';
 import { useTagsStore } from '@/utils/useTags';
 import TagMoreOptionsDropdown from '@/Components/Common/Tag/TagMoreOptionsDropdown.vue';
+import TableRow from '@/Components/TableRow.vue';
 
 const props = defineProps<{
     tag: Tag;
@@ -13,18 +14,20 @@ function deleteTag() {
 </script>
 
 <template>
-    <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">
-        <span>
-            {{ tag.name }}
-        </span>
-    </div>
-    <div
-        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">
-        <TagMoreOptionsDropdown
-            :tag="tag"
-            @delete="deleteTag"></TagMoreOptionsDropdown>
-    </div>
+    <TableRow>
+        <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">
+            <span>
+                {{ tag.name }}
+            </span>
+        </div>
+        <div
+            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">
+            <TagMoreOptionsDropdown
+                :tag="tag"
+                @delete="deleteTag"></TagMoreOptionsDropdown>
+        </div>
+    </TableRow>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Task/TaskCreateModal.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import TextInput from '@/Components/TextInput.vue';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import DialogModal from '@/Components/DialogModal.vue';
+import { ref } from 'vue';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import { useFocus } from '@vueuse/core';
+import { useTasksStore } from '@/utils/useTasks';
+import ProjectDropdown from '@/Components/Common/Project/ProjectDropdown.vue';
+
+const { createTask } = useTasksStore();
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+const taskName = ref('');
+
+const props = defineProps<{
+    projectId: string;
+}>();
+
+async function submit() {
+    await createTask({
+        name: taskName.value,
+        project_id: props.projectId,
+    });
+    show.value = false;
+}
+
+const taskNameInput = ref<HTMLInputElement | null>(null);
+
+useFocus(taskNameInput, { initialValue: true });
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Create Task </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="flex items-center space-x-4">
+                <div class="col-span-6 sm:col-span-4 flex-1">
+                    <TextInput
+                        id="taskName"
+                        ref="taskNameInput"
+                        v-model="taskName"
+                        type="text"
+                        placeholder="Task Name"
+                        @keydown.enter="submit()"
+                        class="mt-1 block w-full"
+                        required
+                        autocomplete="taskName" />
+                </div>
+                <div class="col-span-6 sm:col-span-4">
+                    <ProjectDropdown :modelValue="projectId"></ProjectDropdown>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel </SecondaryButton>
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Create Task
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Task/TaskMoreOptionsDropdown.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import Dropdown from '@/Components/Dropdown.vue';
+import { TrashIcon } from '@heroicons/vue/20/solid';
+import type { Task } from '@/utils/api';
+const emit = defineEmits<{
+    delete: [];
+}>();
+const props = defineProps<{
+    task: Task;
+}>();
+</script>
+
+<template>
+    <Dropdown>
+        <template #trigger>
+            <svg
+                data-testid="task_actions"
+                :aria-label="'Actions for Task ' + props.task.name"
+                class="h-10 w-10 p-2 rounded-full hover:bg-card-background opacity-20 group-hover:opacity-100 transition"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="1.5"
+                    d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
+            </svg>
+        </template>
+        <template #content>
+            <button
+                @click="emit('delete')"
+                :aria-label="'Delete Task ' + props.task.name"
+                data-testid="task_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">
+                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                <span>Delete</span>
+            </button>
+        </template>
+    </Dropdown>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Task/TaskTable.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import { PlusCircleIcon } from '@heroicons/vue/24/solid';
+import { PlusIcon } from '@heroicons/vue/16/solid';
+import { computed, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useTasksStore } from '@/utils/useTasks';
+import TaskTableRow from '@/Components/Common/Task/TaskTableRow.vue';
+import TaskTableHeading from '@/Components/Common/Task/TaskTableHeading.vue';
+import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
+
+const { tasks } = storeToRefs(useTasksStore());
+
+const props = defineProps<{
+    projectId: string;
+}>();
+
+const projectTasks = computed(() => {
+    return tasks.value.filter((task) => task.project_id === props.projectId);
+});
+
+const createTask = ref(false);
+</script>
+
+<template>
+    <TaskCreateModal
+        :project-id="props.projectId"
+        v-model:show="createTask"></TaskCreateModal>
+    <div class="flow-root">
+        <div class="inline-block min-w-full align-middle">
+            <div
+                data-testid="task_table"
+                class="grid min-w-full"
+                style="grid-template-columns: 1fr 150px 80px">
+                <TaskTableHeading></TaskTableHeading>
+                <div
+                    class="col-span-5 py-24 text-center"
+                    v-if="projectTasks.length === 0">
+                    <PlusCircleIcon
+                        class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
+                    <h3 class="text-white font-semibold">No tasks found</h3>
+                    <p class="pb-5">Create your first task now!</p>
+                    <SecondaryButton @click="createTask = true" :icon="PlusIcon"
+                        >Create your First Task
+                    </SecondaryButton>
+                </div>
+                <template v-for="task in projectTasks" :key="task.id">
+                    <TaskTableRow :task="task"></TaskTableRow>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

resources/js/Components/Common/Task/TaskTableHeading.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import TableHeading from '@/Components/Common/TableHeading.vue';
+</script>
+
+<template>
+    <TableHeading>
+        <div
+            class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            Task Name
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Status
+        </div>
+        <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
+            <span class="sr-only">Edit</span>
+        </div>
+    </TableHeading>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Task/TaskTableRow.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Task } from '@/utils/api';
+import { CheckCircleIcon } from '@heroicons/vue/20/solid';
+import { useTasksStore } from '@/utils/useTasks';
+import TaskMoreOptionsDropdown from '@/Components/Common/Task/TaskMoreOptionsDropdown.vue';
+import TableRow from '@/Components/TableRow.vue';
+
+const props = defineProps<{
+    task: Task;
+}>();
+
+function deleteTask() {
+    useTasksStore().deleteTask(props.task.id);
+}
+</script>
+
+<template>
+    <TableRow>
+        <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">
+            <span>
+                {{ task.name }}
+            </span>
+        </div>
+        <div
+            class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
+            <CheckCircleIcon class="w-5"></CheckCircleIcon>
+            <span>Active</span>
+        </div>
+        <div
+            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">
+            <TaskMoreOptionsDropdown
+                :task="task"
+                @delete="deleteTask"></TaskMoreOptionsDropdown>
+        </div>
+    </TableRow>
+</template>
+
+<style scoped></style>

resources/js/Components/Dropdown.vue

@@ -80,7 +80,7 @@ function onBackgroundClick() {
 
 <template>
     <div class="relative">
-        <div @click="toggleOpen">
+        <div @click.prevent="toggleOpen">
             <slot name="trigger" />
         </div>
 
@@ -88,7 +88,7 @@ function onBackgroundClick() {
         <div
             v-show="open"
             class="fixed inset-0 z-40"
-            @click="onBackgroundClick" />
+            @click.prevent="onBackgroundClick" />
 
         <transition
             enter-active-class="transition ease-out duration-200"

resources/js/Components/TableRow.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { twMerge } from 'tailwind-merge';
+
+defineProps<{
+    href?: string;
+}>();
+</script>
+
+<template>
+    <Component
+        :is="href ? Link : 'div'"
+        :href="href"
+        :class="
+            twMerge(
+                'contents [&>*]:hover:bg-white/5 [&>*]:transition [&>*]:cursor-pointer [&>*]:border-row-separator [&>*]:border-b',
+                href ? '[&>*]:cursor-pointer' : ''
+            )
+        ">
+        <slot></slot>
+    </Component>
+</template>
+
+<style scoped></style>

resources/js/Pages/ProjectShow.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import MainContainer from '@/Pages/MainContainer.vue';
+import AppLayout from '@/Layouts/AppLayout.vue';
+import { FolderIcon, PlusIcon } from '@heroicons/vue/16/solid';
+import SecondaryButton from '@/Components/SecondaryButton.vue';
+import { computed, ref } from 'vue';
+import { useProjectsStore } from '@/utils/useProjects';
+import { storeToRefs } from 'pinia';
+import { ChevronRightIcon } from '@heroicons/vue/20/solid';
+import { Link } from '@inertiajs/vue3';
+import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
+import TaskTable from '@/Components/Common/Task/TaskTable.vue';
+const { projects } = storeToRefs(useProjectsStore());
+
+const project = computed(() => {
+    return (
+        projects.value.find(
+            (project) => project.id === route().params.project
+        ) ?? null
+    );
+});
+const createTask = ref(false);
+
+const projectId: string = route().params.project;
+</script>
+
+<template>
+    <AppLayout title="Projects" data-testid="projects_view">
+        <MainContainer
+            class="py-5 border-b border-default-background-separator flex justify-between items-center">
+            <nav class="flex" aria-label="Breadcrumb">
+                <ol role="list" class="flex items-center space-x-2">
+                    <li>
+                        <div class="flex items-center space-x-6">
+                            <Link
+                                :href="route('projects')"
+                                class="flex items-center space-x-2.5">
+                                <FolderIcon
+                                    class="w-6 text-icon-default"></FolderIcon>
+                                <span> Projects </span>
+                            </Link>
+                        </div>
+                    </li>
+                    <li>
+                        <div
+                            class="flex items-center space-x-3 text-white font-bold text-base">
+                            <ChevronRightIcon
+                                class="h-5 w-5 flex-shrink-0 text-muted"
+                                aria-hidden="true" />
+                            <div class="flex space-x-3 items-center">
+                                <div
+                                    :style="{
+                                        backgroundColor: project?.color,
+                                        boxShadow: `var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) ${project?.color}30`,
+                                    }"
+                                    class="w-3 h-3 rounded-full"></div>
+                                <span>{{ project?.name }}</span>
+                            </div>
+                        </div>
+                    </li>
+                </ol>
+            </nav>
+            <SecondaryButton :icon="PlusIcon" @click="createTask = true"
+                >Create Task
+            </SecondaryButton>
+            <TaskCreateModal
+                :project-id="projectId"
+                v-model:show="createTask"></TaskCreateModal>
+        </MainContainer>
+        <TaskTable :project-id="projectId"></TaskTable>
+    </AppLayout>
+</template>

resources/js/utils/api.ts

@@ -24,6 +24,8 @@ export type CreateProjectBody = ZodiosBodyByAlias<
     'createProject'
 >;
 
+export type CreateTaskBody = ZodiosBodyByAlias<SolidTimeApi, 'createTask'>;
+
 export type CreateClientBody = ZodiosBodyByAlias<SolidTimeApi, 'createClient'>;
 
 export type TagIndexResponse = ZodiosResponseByAlias<SolidTimeApi, 'getTags'>;

resources/js/utils/useTasks.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { api } from '../../../openapi.json.client';
 import { reactive, ref } from 'vue';
-import type { Task } from '@/utils/api';
+import type { CreateTaskBody, Task } from '@/utils/api';
 
 export const useTasksStore = defineStore('tasks', () => {
     const tasks = ref<Task[]>(reactive([]));
@@ -31,7 +31,7 @@ export const useTasksStore = defineStore('tasks', () => {
         }
     }
 
-    async function createTask(task: Task) {
+    async function createTask(task: CreateTaskBody) {
         const organizationId = getCurrentOrganizationId();
         if (organizationId) {
             await api.createTask(task, {

routes/web.php

@@ -40,6 +40,10 @@ Route::middleware([
         return Inertia::render('Projects');
     })->name('projects');
 
+    Route::get('/projects/{project}', function () {
+        return Inertia::render('ProjectShow');
+    })->name('projects.show');
+
     Route::get('/clients', function () {
         return Inertia::render('Clients');
     })->name('clients');

vite-module-loader.js

@@ -2,44 +2,56 @@ import fs from 'fs/promises';
 import path from 'path';
 
 async function collectModuleAssetsPaths(paths, modulesPath) {
-  modulesPath = path.join(__dirname, modulesPath);
+    modulesPath = path.join(__dirname, modulesPath);
 
-  const moduleStatusesPath = path.join(__dirname, 'modules_statuses.json');
+    const moduleStatusesPath = path.join(__dirname, 'modules_statuses.json');
 
-  try {
-    // Read module_statuses.json
-    const moduleStatusesContent = await fs.readFile(moduleStatusesPath, 'utf-8');
-    const moduleStatuses = JSON.parse(moduleStatusesContent);
+    try {
+        // Read module_statuses.json
+        const moduleStatusesContent = await fs.readFile(
+            moduleStatusesPath,
+            'utf-8'
+        );
+        const moduleStatuses = JSON.parse(moduleStatusesContent);
 
-    // Read module directories
-    const moduleDirectories = await fs.readdir(modulesPath);
+        // Read module directories
+        const moduleDirectories = await fs.readdir(modulesPath);
 
-    for (const moduleDir of moduleDirectories) {
-      if (moduleDir === '.DS_Store') {
-        // Skip .DS_Store directory
-        continue;
-      }
+        for (const moduleDir of moduleDirectories) {
+            if (moduleDir === '.DS_Store') {
+                // Skip .DS_Store directory
+                continue;
+            }
 
-      // Check if the module is enabled (status is true)
-      if (moduleStatuses[moduleDir] === true) {
-        const viteConfigPath = path.join(modulesPath, moduleDir, 'vite.config.js');
-        const stat = await fs.stat(viteConfigPath);
+            // Check if the module is enabled (status is true)
+            if (moduleStatuses[moduleDir] === true) {
+                const viteConfigPath = path.join(
+                    modulesPath,
+                    moduleDir,
+                    'vite.config.js'
+                );
+                const stat = await fs.stat(viteConfigPath);
 
-        if (stat.isFile()) {
-          // Import the module-specific Vite configuration
-          const moduleConfig = await import(viteConfigPath);
+                if (stat.isFile()) {
+                    // Import the module-specific Vite configuration
+                    const moduleConfig = await import(viteConfigPath);
 
-          if (moduleConfig.paths && Array.isArray(moduleConfig.paths)) {
-            paths.push(...moduleConfig.paths);
-          }
+                    if (
+                        moduleConfig.paths &&
+                        Array.isArray(moduleConfig.paths)
+                    ) {
+                        paths.push(...moduleConfig.paths);
+                    }
+                }
+            }
         }
-      }
+    } catch (error) {
+        console.error(
+            `Error reading module statuses or module configurations: ${error}`
+        );
     }
-  } catch (error) {
-    console.error(`Error reading module statuses or module configurations: ${error}`);
-  }
 
-  return paths;
+    return paths;
 }
 
 export default collectModuleAssetsPaths;