start time entry on click in recently tracked time entries dropdown

Bumps [codecov/codecov-action](https://github.com/codecov/codecov-action) from 4.5.0 to 5.1.2.
- [Release notes](https://github.com/codecov/codecov-action/releases)
- [Changelog](https://github.com/codecov/codecov-action/blob/main/CHANGELOG.md)
- [Commits](https://github.com/codecov/codecov-action/compare/v4.5.0...v5.1.2)

---
updated-dependencies:
- dependency-name: codecov/codecov-action
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

.eslintrc.cjs

@@ -1,13 +0,0 @@
-/* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution")
-
-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'],
-}

.github/workflows/phpunit.yml

@@ -63,7 +63,7 @@ jobs:
         run: php artisan test --stop-on-failure --coverage-text --coverage-clover=coverage.xml
 
       - name: "Upload coverage reports to Codecov"
-        uses: codecov/codecov-action@v4.5.0
+        uses: codecov/codecov-action@v5.1.2
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           slug: solidtime-io/solidtime

docker-compose.yml

@@ -109,7 +109,7 @@ services:
             - sail
             - reverse-proxy
     playwright:
-        image: mcr.microsoft.com/playwright:v1.46.1-jammy
+        image: mcr.microsoft.com/playwright:v1.50.0-jammy
         command: ['npx', 'playwright', 'test', '--ui-port=8080', '--ui-host=0.0.0.0']
         working_dir: /src
         extra_hosts:

e2e/time.spec.ts

@@ -191,7 +191,7 @@ test('test that updating a the start of an existing time entry in the overview w
         'time_entry_range_selector'
     );
     await timeEntryRangeElement.click();
-    await page.getByTestId('time_picker_input').first().fill('1');
+    await page.getByTestId('time_entry_range_start').first().fill('1');
     await Promise.all([
         page.waitForResponse(async (response) => {
             return (
@@ -204,10 +204,7 @@ test('test that updating a the start of an existing time entry in the overview w
                 (await response.json()).data.end !== null
             );
         }),
-        page
+        page.getByTestId('time_entry_range_end').press('Enter'),
-            .getByTestId('time_entry_range_end')
-            .getByTestId('time_picker_input')
-            .press('Enter'),
     ]);
 });
 

e2e/timetracker.spec.ts

@@ -152,7 +152,7 @@ test('test that starting and updating the time while running works', async ({
                     JSON.stringify([])
             );
         }),
-        page.getByTestId('time_entry_time').press('Tab'),
+        page.getByTestId('time_entry_time').press('Enter'),
     ]);
 
     await expect(page.getByTestId('time_entry_time')).toHaveValue(/00:20/);

eslint.config.mjs

@@ -0,0 +1,36 @@
+import eslint from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintPluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+import typescriptEslint from 'typescript-eslint';
+import unusedImports from "eslint-plugin-unused-imports";
+
+export default typescriptEslint.config(
+    { ignores: ['*.d.ts', '**/coverage', '**/dist'] },
+    {
+        extends: [
+            eslint.configs.recommended,
+            ...typescriptEslint.configs.recommended,
+            ...eslintPluginVue.configs['flat/recommended'],
+        ],
+        files: ['**/*.{ts,vue,js}'],
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            globals: globals.browser,
+            parserOptions: {
+                parser: typescriptEslint.parser,
+            },
+        },
+        plugins: {
+            "unused-imports": unusedImports,
+        },
+        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",
+        },
+    },
+    eslintConfigPrettier
+);

lang/en/importer.php

@@ -5,18 +5,20 @@ declare(strict_types=1);
 return [
     'clockify_time_entries' => [
         'name' => 'Clockify Time Entries',
-        'description' => '1. First make sure that you set the Date format to "MM/DD/YYYY" and the Time format to "12-hour" in the user settings.<br> '.
+        'description' => '1. First make sure that you set the Date format to "MM/DD/YYYY" and the Time format to "12-hour" in the user settings.<br>'.
-            '2. Go to REPORTS -> TIME -> Detailed in the navigation on the left. <br>'.
+            '2. In the same preferences page change the language of Clockfiy to English.<br>'.
-            '3. Now select the date range that you want to export in the right top. '.
+            '3. Go to REPORTS -> TIME -> Detailed in the navigation on the left. <br>'.
+            '4. Now select the date range that you want to export in the right top. '.
             'It is currently not possible to select more than one year. You can export each year separately and import them one after another .'.
             '<br> 4. Now click Export -> Save as CSV. The Export dropdown is in the header of the export table left of the printer symbol. '.
             '<br><br>Before you import make sure that the Timezone settings in Clockify are the same as in solidtime.',
     ],
     'clockify_projects' => [
         'name' => 'Clockify Projects',
-        'description' => '1. Go to PROJECTS in the navigation on the left.<br> '.
+        'description' => '1. Make sure to set the language of Clockify to English in "Preferences -> General".<br>'.
-            '2. Now click on the three dots on the right of the project that you want to export and select Export.<br> '.
+            '2. Go to PROJECTS in the navigation on the left.<br> '.
-            '3. Now click Export -> Save as CSV. The Export dropdown is in the header of the export table in the top right corner.',
+            '3. Now click on the three dots on the right of the project that you want to export and select Export.<br> '.
+            '4. Now click Export -> Save as CSV. The Export dropdown is in the header of the export table in the top right corner.',
     ],
     'toggl_data_importer' => [
         'name' => 'Toggl Data Importer',

package.json

@@ -4,53 +4,60 @@
     "scripts": {
         "dev": "vite",
         "build": "vite build",
-        "lint": "eslint --ext .js,.vue,.ts --ignore-path .gitignore resources/js",
+        "lint": "eslint resources/js",
-        "lint:fix": "eslint --fix --ext .js,.vue,.ts --ignore-path .gitignore resources/js",
+        "lint:fix": "eslint --fix resources/js",
         "type-check": "vue-tsc --noEmit",
         "test:e2e": "rm -rf test-results/.auth && npx playwright test",
         "zod:generate": "npx openapi-zod-client http://localhost:80/docs/api.json --output resources/js/packages/api/src/openapi.json.client.ts --base-url /api"
     },
     "devDependencies": {
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.19.0",
         "@inertiajs/vue3": "^1.0.0",
         "@playwright/test": "^1.41.1",
         "@tailwindcss/forms": "^0.5.9",
         "@tailwindcss/typography": "^0.5.15",
-        "@types/node": "^20.11.5",
+        "@types/node": "^22.10.10",
-        "@vitejs/plugin-vue": "^4.5.0",
+        "@vitejs/plugin-vue": "^5.2.1",
         "@vue/tsconfig": "^0.5.1",
         "autoprefixer": "^10.4.20",
         "axios": "^1.6.4",
-        "eslint-plugin-unused-imports": "^3.1.0",
+        "eslint-plugin-unused-imports": "^4.1.4",
         "laravel-vite-plugin": "^1.0.0",
         "openapi-zod-client": "^1.16.2",
         "postcss": "^8.4.47",
         "postcss-nesting": "^12.1.5",
         "tailwindcss": "^3.4.13",
-        "typescript": "^5.3.3",
+        "typescript": "^5.7.3",
-        "vite": "^5.0.0",
+        "vite": "^6.0.11",
-        "vite-plugin-checker": "^0.7.2",
+        "vite-plugin-checker": "^0.8.0",
-        "vue": "^3.4.0",
+        "vue": "^3.5.0",
-        "vue-tsc": "^2.0.28"
+        "vue-tsc": "^2.2.0"
     },
     "dependencies": {
         "@floating-ui/core": "^1.6.0",
         "@floating-ui/vue": "^1.0.6",
         "@heroicons/vue": "^2.1.1",
-        "@rushstack/eslint-patch": "^1.7.0",
+        "@rushstack/eslint-patch": "^1.10.5",
         "@tailwindcss/container-queries": "^0.1.1",
         "@tanstack/vue-query": "^5.56.2",
         "@tanstack/vue-query-devtools": "^5.58.0",
-        "@vue/eslint-config-prettier": "^9.0.0",
+        "@vue/eslint-config-prettier": "^10.2.0",
-        "@vue/eslint-config-typescript": "^13.0.0",
+        "@vue/eslint-config-typescript": "^14.3.0",
-        "@vueuse/core": "^10.11.0",
+        "@vueuse/core": "^12.5.0",
-        "@vueuse/integrations": "^11.1.0",
+        "@vueuse/integrations": "^12.5.0",
         "dayjs": "^1.11.11",
         "echarts": "^5.5.0",
         "focus-trap": "^7.6.0",
-        "parse-duration": "^1.1.0",
+        "parse-duration": "^2.0.1",
         "pinia": "^2.1.7",
         "radix-vue": "^1.9.6",
         "tailwind-merge": "^2.2.1",
-        "vue-echarts": "^6.7.2"
+        "vue-echarts": "^7.0.3"
+    },
+    "overrides": {
+        "vite-plugin-checker": {
+            "vue-tsc": "$vue-tsc"
+        }
     }
 }

resources/js/Components/Billing/BillingBanner.vue

@@ -112,7 +112,7 @@ const showBlackFridayBanner = computed(() => {
                         <span>Upgrade now</span>
                     </div>
                 </Link>
-                <button @click="hideBlackFridayBanner = true" class="p-1">
+                <button class="p-1" @click="hideBlackFridayBanner = true">
                     <XMarkIcon
                         class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
                 </button>
@@ -142,7 +142,7 @@ const showBlackFridayBanner = computed(() => {
                         <span>Upgrade now</span>
                     </div>
                 </Link>
-                <button @click="hideTrialBanner = true" class="p-1">
+                <button class="p-1" @click="hideTrialBanner = true">
                     <XMarkIcon
                         class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
                 </button>
@@ -174,7 +174,7 @@ const showBlackFridayBanner = computed(() => {
                         <span>Upgrade now</span>
                     </div>
                 </Link>
-                <button @click="hideBlockedBanner = true" class="p-1">
+                <button class="p-1" @click="hideBlockedBanner = true">
                     <XMarkIcon
                         class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
                 </button>
@@ -206,7 +206,7 @@ const showBlackFridayBanner = computed(() => {
                         <span>Upgrade now</span>
                     </div>
                 </Link>
-                <button @click="hideFreeUpgradeBanner = true" class="p-1">
+                <button class="p-1" @click="hideFreeUpgradeBanner = true">
                     <XMarkIcon
                         class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
                 </button>

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

@@ -45,10 +45,10 @@ useFocus(clientNameInput, { initialValue: true });
                         v-model="client.name"
                         type="text"
                         placeholder="Client Name"
-                        @keydown.enter="submit"
                         class="mt-1 block w-full"
                         required
-                        autocomplete="clientName" />
+                        autocomplete="clientName"
+                        @keydown.enter="submit" />
                 </div>
             </div>
         </template>

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

@@ -46,10 +46,10 @@ useFocus(clientNameInput, { initialValue: true });
                         v-model="clientBody.name"
                         type="text"
                         placeholder="Client Name"
-                        @keydown.enter="submit"
                         class="mt-1 block w-full"
                         required
-                        autocomplete="clientName" />
+                        autocomplete="clientName"
+                        @keydown.enter="submit" />
                 </div>
             </div>
         </template>

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

@@ -23,28 +23,28 @@ const props = defineProps<{
         <div class="min-w-[150px]">
             <button
                 v-if="canUpdateClients()"
-                @click="emit('edit')"
                 :aria-label="'Edit Client ' + props.client.name"
                 data-testid="client_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">
+                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"
+                @click="emit('edit')">
                 <PencilSquareIcon
                     class="w-5 text-icon-active"></PencilSquareIcon>
                 <span>Edit</span>
             </button>
             <button
-                @click.prevent="emit('archive')"
                 v-if="canUpdateClients()"
                 :aria-label="'Archive Client ' + props.client.name"
-                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="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"
+                @click.prevent="emit('archive')">
                 <ArchiveBoxIcon class="w-5 text-icon-active"></ArchiveBoxIcon>
                 <span>{{ client.is_archived ? 'Unarchive' : 'Archive' }}</span>
             </button>
             <button
                 v-if="canDeleteClients()"
-                @click="emit('delete')"
                 :aria-label="'Delete Client ' + props.client.name"
                 data-testid="client_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="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"
+                @click="emit('delete')">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>
             </button>

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

@@ -18,7 +18,7 @@ function getNameForItem(item: Client) {
 
 <template>
     <MultiselectDropdown
-        searchPlaceholder="Search for a Client..."
+        search-placeholder="Search for a Client..."
         :items="clients"
         :get-key-from-item="getKeyFromItem"
         :get-name-for-item="getNameForItem">

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

@@ -25,18 +25,18 @@ const createClient = ref(false);
                 style="grid-template-columns: 1fr 150px 200px 80px">
                 <ClientTableHeading></ClientTableHeading>
                 <div
-                    class="col-span-2 py-24 text-center"
+                    v-if="clients.length === 0"
-                    v-if="clients.length === 0">
+                    class="col-span-2 py-24 text-center">
                     <UserCircleIcon
                         class="w-8 text-icon-default inline pb-2"></UserCircleIcon>
                     <h3 class="text-white font-semibold">No clients found</h3>
-                    <p class="pb-5" v-if="canCreateClients()">
+                    <p v-if="canCreateClients()" class="pb-5">
                         Create your first client now!
                     </p>
                     <SecondaryButton
                         v-if="canCreateClients()"
-                        @click="createClient = true"
                         :icon="PlusIcon as Component"
+                        @click="createClient = true"
                         >Create your First Client
                     </SecondaryButton>
                 </div>

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

@@ -38,8 +38,8 @@ const showEditModal = ref(false);
 <template>
     <TableRow>
         <ClientEditModal
-            :client="client"
+            v-model:show="showEditModal"
-            v-model:show="showEditModal"></ClientEditModal>
+            :client="client"></ClientEditModal>
         <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>

resources/js/Components/Common/Invitation/InvitationMoreOptionsDropdown.vue

@@ -10,16 +10,16 @@ const emit = defineEmits<{
 <template>
     <MoreOptionsDropdown label="Actions for the invitation">
         <button
-            @click="emit('resend')"
             data-testid="invitation_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="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"
+            @click="emit('resend')">
             <ArrowPathIcon class="w-5 text-icon-active"></ArrowPathIcon>
             <span>Resend Invitation</span>
         </button>
         <button
-            @click="emit('delete')"
             data-testid="invitation_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="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"
+            @click="emit('delete')">
             <TrashIcon class="w-5 text-icon-active"></TrashIcon>
             <span>Delete</span>
         </button>

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

@@ -18,10 +18,10 @@ defineEmits<{
 
 <template>
     <BillableRateModal
-        @submit="$emit('submit')"
         v-model:show="show"
         v-model:saving="saving"
-        title="Update Member Billable Rate">
+        title="Update Member Billable Rate"
+        @submit="$emit('submit')">
         <p class="py-1 text-center">
             The billable rate of {{ memberName }} will be updated to
             <strong>{{

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

@@ -17,8 +17,8 @@ const model = defineModel<string>({
 
 const props = withDefaults(
     defineProps<{
-        hiddenMembers: ProjectMember[];
+        hiddenMembers?: ProjectMember[];
-        disabled: boolean;
+        disabled?: boolean;
     }>(),
     {
         hiddenMembers: () => [] as ProjectMember[],
@@ -76,7 +76,7 @@ const currentValue = computed(() => {
         :items="filteredMembers"
         :get-key-from-item="(member) => member.id"
         :get-name-for-item="(member) => member.name">
-        <template v-slot:trigger>
+        <template #trigger>
             <Badge
                 tag="button"
                 class="flex w-full text-base text-left space-x-3 px-3 text-text-secondary font-normal cursor py-1.5">
@@ -84,7 +84,7 @@ const currentValue = computed(() => {
                 <div v-if="currentValue" class="flex-1 truncate">
                     {{ currentValue }}
                 </div>
-                <div class="flex-1" v-else>Select a member...</div>
+                <div v-else class="flex-1">Select a member...</div>
                 <ChevronDownIcon class="w-4 text-muted"></ChevronDownIcon>
             </Badge>
         </template>

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

@@ -108,11 +108,11 @@ const roleDescription = computed(() => {
         v-model:saving="saving"
         v-model:show="showBillableRateModal"
         :member-name="member.name"
-        :newBillableRate="memberBody.billable_rate"
+        :new-billable-rate="memberBody.billable_rate"
         @submit="submitBillableRate"></MemberBillableRateModal>
     <MemberOwnershipTransferConfirmModal
-        :member-name="member.name"
         v-model:show="showOwnershipTransferConfirmModal"
+        :member-name="member.name"
         @submit="submit"></MemberOwnershipTransferConfirmModal>
     <DialogModal closeable :show="show" @close="show = false">
         <template #title>
@@ -127,9 +127,9 @@ const roleDescription = computed(() => {
                     <div>
                         <InputLabel for="role" value="Role" />
                         <MemberRoleSelect
+                            v-model="memberBody.role"
                             class="mt-2"
-                            name="role"
+                            name="role"></MemberRoleSelect>
-                            v-model="memberBody.role"></MemberRoleSelect>
                     </div>
                     <div class="flex-1 text-xs flex items-center pt-6">
                         <p>{{ roleDescription }}</p>
@@ -140,28 +140,28 @@ const roleDescription = computed(() => {
                         <div>
                             <InputLabel for="billableType" value="Billable" />
                             <MemberBillableSelect
-                                class="mt-2"
-                                name="billableType"
                                 v-model="
                                     billableRateSelect
-                                "></MemberBillableSelect>
+                                "
+                                class="mt-2"
+                                name="billableType"></MemberBillableSelect>
                         </div>
                         <div
-                            class="flex-1"
+                            v-if="billableRateSelect === 'custom-rate'"
-                            v-if="billableRateSelect === 'custom-rate'">
+                            class="flex-1">
                             <InputLabel
                                 for="memberBillableRate"
                                 class="mb-2"
                                 value="Billable Rate" />
                             <BillableRateInput
+                                v-model="
+                                    memberBody.billable_rate
+                                "
                                 focus
                                 class="w-full"
                                 :currency="getOrganizationCurrencyString()"
-                                @keydown.enter="saveWithChecks()"
                                 name="memberBillableRate"
-                                v-model="
+                                @keydown.enter="saveWithChecks()"></BillableRateInput>
-                                    memberBody.billable_rate
-                                "></BillableRateInput>
                         </div>
                     </div>
                 </div>

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

@@ -112,11 +112,11 @@ useFocus(clientNameInput, { initialValue: true });
                         v-if="isBillingActivated() && canManageBilling()"
                         href="/billing">
                         <PrimaryButton
-                            type="button"
-                            class="mt-6"
                             v-if="
                                 isBillingActivated() && canUpdateOrganization()
-                            ">
+                            "
+                            type="button"
+                            class="mt-6">
                             <CreditCardIcon class="w-5 h-5 me-2" />
                             Go to Billing
                         </PrimaryButton>
@@ -128,15 +128,15 @@ useFocus(clientNameInput, { initialValue: true });
                     <InputLabel for="email" value="Email" />
                     <TextInput
                         id="email"
-                        name="email"
                         ref="memberEmailInput"
                         v-model="addTeamMemberForm.email"
+                        name="email"
                         type="text"
                         placeholder="Member Email"
-                        @keydown.enter="submit"
                         class="mt-1 block w-full"
                         required
-                        autocomplete="memberName" />
+                        autocomplete="memberName"
+                        @keydown.enter="submit" />
                     <InputError :message="errors.email" class="mt-2" />
                 </div>
 

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

@@ -20,19 +20,19 @@ const props = defineProps<{
         <div class="min-w-[150px]">
             <button
                 v-if="canUpdateMembers()"
-                @click="emit('edit')"
                 :aria-label="'Edit Member ' + props.member.name"
-                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="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"
+                @click="emit('edit')">
                 <PencilSquareIcon
                     class="w-5 text-icon-active"></PencilSquareIcon>
                 <span>Edit</span>
             </button>
             <button
                 v-if="canDeleteMembers()"
-                @click="emit('delete')"
                 :aria-label="'Delete Member ' + props.member.name"
                 data-testid="member_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="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"
+                @click="emit('delete')">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>
             </button>

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

@@ -18,7 +18,7 @@ function getNameForItem(item: Member) {
 
 <template>
     <MultiselectDropdown
-        searchPlaceholder="Search for a Member..."
+        search-placeholder="Search for a Member..."
         :items="members"
         :get-key-from-item="getKeyFromItem"
         :get-name-for-item="getNameForItem">

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

@@ -36,9 +36,9 @@ const emit = defineEmits<{
             <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
             <PrimaryButton
                 class="ms-3"
-                @click="emit('submit')"
                 :class="{ 'opacity-25': saving }"
-                :disabled="saving">
+                :disabled="saving"
+                @click="emit('submit')">
                 Confirm Transfer
             </PrimaryButton>
         </template>

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

@@ -89,8 +89,8 @@ async function invitePlaceholder(id: string) {
                     member.is_placeholder === true &&
                     canInvitePlaceholderMembers()
                 "
-                @click="invitePlaceholder(member.id)"
                 size="small"
+                @click="invitePlaceholder(member.id)"
                 >Invite</SecondaryButton
             >
             <MemberMoreOptionsDropdown
@@ -99,8 +99,8 @@ async function invitePlaceholder(id: string) {
                 @delete="removeMember"></MemberMoreOptionsDropdown>
         </div>
         <MemberEditModal
-            :member="member"
+            v-model:show="showEditMemberModal"
-            v-model:show="showEditMemberModal"></MemberEditModal>
+            :member="member"></MemberEditModal>
     </TableRow>
 </template>
 

resources/js/Components/Common/Notification/Notification.vue

@@ -34,8 +34,8 @@
                     <div class="ml-4 flex flex-shrink-0">
                         <button
                             type="button"
-                            @click="show = false"
+                            class="inline-flex rounded-md bg-card-background text-muted hover:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                            class="inline-flex rounded-md bg-card-background text-muted hover:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                            @click="show = false">
                             <span class="sr-only">Close</span>
                             <XMarkIcon class="h-5 w-5" aria-hidden="true" />
                         </button>

resources/js/Components/Common/Organization/OrganizationBillableRateModal.vue

@@ -17,10 +17,10 @@ defineEmits<{
 
 <template>
     <BillableRateModal
-        @submit="$emit('submit')"
         v-model:show="show"
         v-model:saving="saving"
-        title="Update Organization Billable Rate">
+        title="Update Organization Billable Rate"
+        @submit="$emit('submit')">
         <p class="py-0.5 text-center">
             The organization billable rate will be updated to
             <strong>{{

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

@@ -40,7 +40,7 @@ const shownProjects = computed(() => {
 
 withDefaults(
     defineProps<{
-        border: boolean;
+        border?: boolean;
     }>(),
     {
         border: true,
@@ -123,17 +123,17 @@ function updateValue(project: Project) {
         <template #content>
             <ComboboxRoot
                 :open="open"
-                :modelValue="currentProject"
+                :model-value="currentProject"
-                @update:modelValue="updateValue"
+                :search-term="searchValue"
-                @update:searchTerm="(e) => console.log(e)"
+                class="relative"
-                :searchTerm="searchValue"
+                @update:model-value="updateValue"
-                class="relative">
+                @update:search-term="(e) => console.log(e)">
                 <ComboboxAnchor>
                     <ComboboxInput
-                        @keydown.enter="addProjectIfNoneExists"
                         ref="searchInput"
                         class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
-                        placeholder="Search for a project..." />
+                        placeholder="Search for a project..."
+                        @keydown.enter="addProjectIfNoneExists" />
                 </ComboboxAnchor>
                 <ComboboxContent>
                     <ComboboxViewport

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

@@ -90,8 +90,8 @@ async function submitBillableRate() {
                     <div class="text-center">
                         <InputLabel for="color" value="Color" />
                         <ProjectColorSelector
-                            class="mt-1"
+                            v-model="project.color"
-                            v-model="project.color"></ProjectColorSelector>
+                            class="mt-1"></ProjectColorSelector>
                     </div>
                 </div>
                 <div class="w-full">
@@ -102,18 +102,18 @@ async function submitBillableRate() {
                         v-model="project.name"
                         type="text"
                         placeholder="Project Name"
-                        @keydown.enter="submit()"
                         class="mt-1 block w-full"
                         required
-                        autocomplete="projectName" />
+                        autocomplete="projectName"
+                        @keydown.enter="submit()" />
                 </div>
                 <div class="">
                     <InputLabel for="client" value="Client" />
                     <ClientDropdown
-                        :createClient
+                        v-model="project.client_id"
+                        :create-client
                         :clients="clients"
-                        class="mt-1"
+                        class="mt-1">
-                        v-model="project.client_id">
                         <template #trigger>
                             <Badge
                                 class="bg-input-background cursor-pointer hover:bg-tertiary"
@@ -133,18 +133,18 @@ async function submitBillableRate() {
             <div class="lg:grid grid-cols-2 gap-12">
                 <div>
                     <ProjectEditBillableSection
-                        @submit="submit"
+                        v-model:is-billable="project.is_billable"
-                        :currency="getOrganizationCurrencyString()"
+                        v-model:billable-rate="
-                        v-model:isBillable="project.is_billable"
-                        v-model:billableRate="
                             project.billable_rate
-                        "></ProjectEditBillableSection>
+                        "
+                        :currency="getOrganizationCurrencyString()"
+                        @submit="submit"></ProjectEditBillableSection>
                 </div>
                 <div>
                     <EstimatedTimeSection
                         v-if="isAllowedToPerformPremiumAction()"
-                        @submit="submit()"
+                        v-model="project.estimated_time"
-                        v-model="project.estimated_time"></EstimatedTimeSection>
+                        @submit="submit()"></EstimatedTimeSection>
                 </div>
             </div>
         </template>
@@ -163,9 +163,9 @@ async function submitBillableRate() {
     <ProjectBillableRateModal
         v-model:show="showBillableRateModal"
         :currency="getOrganizationCurrencyString()"
-        @submit="submitBillableRate"
         :new-billable-rate="project.billable_rate"
-        :project-name="project.name"></ProjectBillableRateModal>
+        :project-name="project.name"
+        @submit="submitBillableRate"></ProjectBillableRateModal>
 </template>
 
 <style scoped></style>

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

@@ -21,29 +21,29 @@ const props = defineProps<{
     <MoreOptionsDropdown :label="'Actions for Project ' + props.project.name">
         <div class="min-w-[150px]">
             <button
-                @click.prevent="emit('edit')"
                 v-if="canUpdateProjects()"
                 :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">
+                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"
+                @click.prevent="emit('edit')">
                 <PencilSquareIcon
                     class="w-5 text-icon-active"></PencilSquareIcon>
                 <span>Edit</span>
             </button>
             <button
-                @click.prevent="emit('archive')"
                 v-if="canUpdateProjects()"
                 :aria-label="'Archive Project ' + props.project.name"
-                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="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"
+                @click.prevent="emit('archive')">
                 <ArchiveBoxIcon class="w-5 text-icon-active"></ArchiveBoxIcon>
                 <span>{{ project.is_archived ? 'Unarchive' : 'Archive' }}</span>
             </button>
             <button
-                @click.prevent="emit('delete')"
+                v-if="canDeleteProjects()"
                 :aria-label="'Delete Project ' + props.project.name"
                 data-testid="project_delete"
-                v-if="canDeleteProjects()"
+                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"
-                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">
+                @click.prevent="emit('delete')">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>
             </button>

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

@@ -18,7 +18,7 @@ function getNameForItem(item: Project) {
 
 <template>
     <MultiselectDropdown
-        searchPlaceholder="Search for a Project..."
+        search-placeholder="Search for a Project..."
         :items="projects"
         :get-key-from-item="getKeyFromItem"
         :get-name-for-item="getNameForItem">

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

@@ -44,12 +44,12 @@ import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 
 <template>
     <ProjectCreateModal
-        :createProject
+        v-model:show="showCreateProjectModal"
-        :createClient
+        :create-project
+        :create-client
         :currency="getOrganizationCurrencyString()"
         :clients="clients"
-        :enableEstimatedTime="isAllowedToPerformPremiumAction"
+        :enable-estimated-time="isAllowedToPerformPremiumAction"></ProjectCreateModal>
-        v-model:show="showCreateProjectModal"></ProjectCreateModal>
     <div class="flow-root max-w-[100vw] overflow-x-auto">
         <div class="inline-block min-w-full align-middle">
             <div
@@ -57,12 +57,12 @@ import { isAllowedToPerformPremiumAction } from '@/utils/billing';
                 class="grid min-w-full"
                 :style="gridTemplate">
                 <ProjectTableHeading
-                    :showBillableRate="
+                    :show-billable-rate="
                         props.showBillableRate
                     "></ProjectTableHeading>
                 <div
-                    class="col-span-5 py-24 text-center"
+                    v-if="projects.length === 0"
-                    v-if="projects.length === 0">
+                    class="col-span-5 py-24 text-center">
                     <FolderPlusIcon
                         class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
                     <h3 class="text-white font-semibold">
@@ -81,14 +81,14 @@ import { isAllowedToPerformPremiumAction } from '@/utils/billing';
                     </p>
                     <SecondaryButton
                         v-if="canCreateProjects()"
-                        @click="showCreateProjectModal = true"
                         :icon="PlusIcon"
+                        @click="showCreateProjectModal = true"
                         >Create your First Project
                     </SecondaryButton>
                 </div>
                 <template v-for="project in projects" :key="project.id">
                     <ProjectTableRow
-                        :showBillableRate="props.showBillableRate"
+                        :show-billable-rate="props.showBillableRate"
                         :project="project"></ProjectTableRow>
                 </template>
             </div>

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

@@ -19,8 +19,8 @@ defineProps<{
             Progress
         </div>
         <div
-            class="px-3 py-1.5 text-left font-semibold text-white"
+            v-if="showBillableRate"
-            v-if="showBillableRate">
+            class="px-3 py-1.5 text-left font-semibold text-white">
             Billable Rate
         </div>
         <div class="px-3 py-1.5 text-left font-semibold text-white">Status</div>

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

@@ -83,8 +83,8 @@ const showEditProjectModal = ref(false);
         </div>
         <div class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-muted">
             <div
-                class="overflow-ellipsis overflow-hidden"
+                v-if="project.client_id"
-                v-if="project.client_id">
+                class="overflow-ellipsis overflow-hidden">
                 {{ client?.name }}
             </div>
             <div v-else>No client</div>
@@ -106,8 +106,8 @@ const showEditProjectModal = ref(false);
             <span v-else> -- </span>
         </div>
         <div
-            class="whitespace-nowrap px-3 py-4 text-sm text-muted"
+            v-if="showBillableRate"
-            v-if="showBillableRate">
+            class="whitespace-nowrap px-3 py-4 text-sm text-muted">
             {{ billableRateInfo }}
         </div>
         <div

resources/js/Components/Common/ProjectMember/ProjectMemberBillableRateModal.vue

@@ -18,10 +18,10 @@ defineEmits<{
 
 <template>
     <BillableRateModal
-        @submit="$emit('submit')"
         v-model:show="show"
         v-model:saving="saving"
-        title="Update Project Member Billable Rate">
+        title="Update Project Member Billable Rate"
+        @submit="$emit('submit')">
         <p class="py-1 text-center">
             The billable rate of {{ memberName }} will be updated to
             <strong>{{

resources/js/Components/Common/ProjectMember/ProjectMemberCreateModal.vue

@@ -52,16 +52,16 @@ useFocus(projectNameInput, { initialValue: true });
             <div class="grid grid-cols-3 items-center space-x-4">
                 <div class="col-span-3 sm:col-span-2">
                     <MemberCombobox
-                        :hidden-members="props.existingMembers"
+                        v-model="projectMember.member_id"
-                        v-model="projectMember.member_id"></MemberCombobox>
+                        :hidden-members="props.existingMembers"></MemberCombobox>
                 </div>
                 <div class="col-span-3 sm:col-span-1 flex-1">
                     <BillableRateInput
-                        name="billable_rate"
-                        :currency="getOrganizationCurrencyString()"
                         v-model="
                             projectMember.billable_rate
-                        "></BillableRateInput>
+                        "
+                        name="billable_rate"
+                        :currency="getOrganizationCurrencyString()"></BillableRateInput>
                 </div>
             </div>
         </template>

resources/js/Components/Common/ProjectMember/ProjectMemberEditModal.vue

@@ -75,8 +75,8 @@ useFocus(projectNameInput, { initialValue: true });
 
         <template #content>
             <ProjectMemberBillableRateModal
-                :member-name="props.name"
                 v-model:show="showBillableRateModal"
+                :member-name="props.name"
                 :new-billable-rate="projectMemberBody.billable_rate"
                 @close="showBillableRateModal = false"
                 @submit="submitBillableRate"></ProjectMemberBillableRateModal>
@@ -92,12 +92,12 @@ useFocus(projectNameInput, { initialValue: true });
                         class="mb-2"
                         value="Billable Rate"></InputLabel>
                     <BillableRateInput
-                        @keydown.enter="submit"
-                        :currency="getOrganizationCurrencyString()"
-                        name="billable_rate"
                         v-model="
                             projectMemberBody.billable_rate
-                        "></BillableRateInput>
+                        "
+                        :currency="getOrganizationCurrencyString()"
+                        name="billable_rate"
+                        @keydown.enter="submit"></BillableRateInput>
                 </div>
             </div>
         </template>

resources/js/Components/Common/ProjectMember/ProjectMemberMoreOptionsDropdown.vue

@@ -27,17 +27,17 @@ const currentMember = computed(() => {
     <MoreOptionsDropdown
         :label="'Actions for Project Member ' + currentMember?.name">
         <button
-            @click.prevent="emit('edit')"
             :aria-label="'Edit Project Member ' + currentMember?.name"
-            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="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"
+            @click.prevent="emit('edit')">
             <PencilSquareIcon class="w-5 text-icon-active"></PencilSquareIcon>
             <span>Edit</span>
         </button>
         <button
-            @click.prevent="emit('delete')"
             :aria-label="'Delete Project Member ' + currentMember?.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="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"
+            @click.prevent="emit('delete')">
             <TrashIcon class="w-5 text-icon-active"></TrashIcon>
             <span>Remove from Team</span>
         </button>

resources/js/Components/Common/ProjectMember/ProjectMemberTable.vue

@@ -18,9 +18,9 @@ const createProjectMember = ref(false);
 
 <template>
     <ProjectMemberCreateModal
+        v-model:show="createProjectMember"
         :existing-members="projectMembers"
-        :project-id="projectId"
+        :project-id="projectId"></ProjectMemberCreateModal>
-        v-model:show="createProjectMember"></ProjectMemberCreateModal>
     <div class="flow-root">
         <div class="inline-block min-w-full align-middle">
             <div
@@ -29,15 +29,15 @@ const createProjectMember = ref(false);
                 style="grid-template-columns: 1fr 150px 150px 80px">
                 <ProjectMemberTableHeading></ProjectMemberTableHeading>
                 <div
-                    class="col-span-5 py-24 text-center"
+                    v-if="projectMembers.length === 0"
-                    v-if="projectMembers.length === 0">
+                    class="col-span-5 py-24 text-center">
                     <UserGroupIcon
                         class="w-8 text-icon-default inline pb-2"></UserGroupIcon>
                     <h3 class="text-white font-semibold">No project members</h3>
                     <p class="pb-5">Add the first project member!</p>
                     <SecondaryButton
-                        @click="createProjectMember = true"
                         :icon="PlusIcon"
+                        @click="createProjectMember = true"
                         >Add a new Project Member
                     </SecondaryButton>
                 </div>

resources/js/Components/Common/ProjectMember/ProjectMemberTableRow.vue

@@ -37,8 +37,8 @@ const showEditModal = ref(false);
 <template>
     <TableRow>
         <ProjectMemberEditModal
-            :name="member?.name"
             v-model:show="showEditModal"
+            :name="member?.name"
             :project-member="projectMember"></ProjectMemberEditModal>
         <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">

resources/js/Components/Common/Report/ReportCreateModal.vue

@@ -82,22 +82,22 @@ async function submit() {
                     <InputLabel for="name" value="Name" />
                     <TextInput
                         id="name"
-                        class="mt-1.5 w-full"
+                        v-model="report.name"
-                        v-model="report.name"></TextInput>
+                        class="mt-1.5 w-full"></TextInput>
                 </div>
                 <div>
                     <InputLabel for="description" value="Description" />
                     <TextInput
                         id="description"
-                        class="mt-1.5 w-full"
+                        v-model="report.description"
-                        v-model="report.description"></TextInput>
+                        class="mt-1.5 w-full"></TextInput>
                 </div>
                 <InputLabel value="Visibility" />
                 <div class="flex items-center space-x-12">
                     <div class="flex items-center space-x-3 px-2 py-3">
                         <Checkbox
-                            v-model:checked="report.is_public"
+                            id="is_public"
-                            id="is_public"></Checkbox>
+                            v-model:checked="report.is_public"></Checkbox>
                         <InputLabel for="is_public" value="Public" />
                     </div>
                     <div

resources/js/Components/Common/Report/ReportEditModal.vue

@@ -96,22 +96,22 @@ async function submit() {
                     <InputLabel for="name" value="Name" />
                     <TextInput
                         id="name"
-                        class="mt-1.5 w-full"
+                        v-model="report.name"
-                        v-model="report.name"></TextInput>
+                        class="mt-1.5 w-full"></TextInput>
                 </div>
                 <div>
                     <InputLabel for="description" value="Description" />
                     <TextInput
                         id="description"
-                        class="mt-1.5 w-full"
+                        v-model="report.description"
-                        v-model="report.description"></TextInput>
+                        class="mt-1.5 w-full"></TextInput>
                 </div>
                 <InputLabel value="Visibility" />
                 <div class="flex items-center space-x-12">
                     <div class="flex items-center space-x-2 px-2 py-3">
                         <Checkbox
-                            v-model:checked="report.is_public"
+                            id="is_public"
-                            id="is_public"></Checkbox>
+                            v-model:checked="report.is_public"></Checkbox>
                         <InputLabel for="is_public" value="Public" />
                     </div>
                     <div

resources/js/Components/Common/Report/ReportMoreOptionsDropdown.vue

@@ -17,19 +17,19 @@ const props = defineProps<{
     <MoreOptionsDropdown :label="'Actions for Project ' + props.report.name">
         <div class="min-w-[150px]">
             <button
-                @click.prevent="emit('edit')"
                 v-if="canUpdateReport()"
                 :aria-label="'Edit Report ' + props.report.name"
-                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="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"
+                @click.prevent="emit('edit')">
                 <PencilSquareIcon
                     class="w-5 text-icon-active"></PencilSquareIcon>
                 <span>Edit</span>
             </button>
             <button
-                @click.prevent="emit('delete')"
-                :aria-label="'Delete Report ' + props.report.name"
                 v-if="canDeleteReport()"
-                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">
+                :aria-label="'Delete Report ' + props.report.name"
+                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"
+                @click.prevent="emit('delete')">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>
             </button>

resources/js/Components/Common/Report/ReportSaveButton.vue

@@ -27,8 +27,8 @@ function onSaveReportClick() {
 
 <template>
     <ReportCreateModal
-        :properties="reportProperties"
+        v-model:show="showCreateReportModal"
-        v-model:show="showCreateReportModal"></ReportCreateModal>
+        :properties="reportProperties"></ReportCreateModal>
     <UpgradeModal v-model:show="showPremiumModal">
         <strong>Sharable Reports</strong> is only available in solidtime
         Professional.

resources/js/Components/Common/Report/ReportTable.vue

@@ -27,19 +27,19 @@ const gridTemplate = computed(() => {
                 :style="gridTemplate">
                 <ReportTableHeading></ReportTableHeading>
                 <div
-                    class="col-span-5 py-24 text-center"
+                    v-if="reports.length === 0"
-                    v-if="reports.length === 0">
+                    class="col-span-5 py-24 text-center">
                     <FolderPlusIcon
                         class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
                     <h3 class="text-white font-semibold">
                         No shared reports found
                     </h3>
-                    <p class="pb-5" v-if="canCreateProjects()">
+                    <p v-if="canCreateProjects()" class="pb-5">
                         Create your first project now!
                     </p>
                     <SecondaryButton
-                        @click="router.visit(route('reporting'))"
                         :icon="PlusIcon"
+                        @click="router.visit(route('reporting'))"
                         >Go to the overview to create a report
                     </SecondaryButton>
                 </div>

resources/js/Components/Common/Report/ReportTableRow.vue

@@ -87,7 +87,7 @@ async function deleteReport() {
                     <span v-else>Copied!</span>
                 </SecondaryButton>
                 <button
-                    class="outline-0 focus-visible:ring-2 w-6 h-6 flex items-center justify-center rounded focus-visible:ring-white/80"
+                    class="outline-0 focus-visible:ring-2 w-6 h-6 flex items-center justify-center rounded focus-visible:ring-ring"
                     @click="openSharableLink">
                     <ArrowTopRightOnSquareIcon
                         class="w-4 text-text-tertiary hover:text-text-secondary transition"></ArrowTopRightOnSquareIcon>

resources/js/Components/Common/Reporting/ReportingChart.vue

@@ -157,7 +157,7 @@ const option = ref({
             :autoresize="true"
             class="chart"
             :option="option" />
-        <div class="chart flex flex-col items-center justify-center" v-else>
+        <div v-else class="chart flex flex-col items-center justify-center">
             <p class="text-lg text-white font-semibold">
                 No time entries found
             </p>

resources/js/Components/Common/Reporting/ReportingExportModal.vue

@@ -22,10 +22,10 @@ function downloadCurrentExport() {
     <Modal
         closeable
         max-width="lg"
-        @close="showExportModal = false"
+        :show="showExportModal"
-        :show="showExportModal">
+        @close="showExportModal = false">
         <button
-            class="text-text-tertiary w-6 mx-auto absolute focus-visible:outline-none focus-visible:ring-2 rounded-full focus-visible:ring-white/80 transition focus-visible:text-text-primary hover:text-text-primary top-2 right-2">
+            class="text-text-tertiary w-6 mx-auto absolute focus-visible:outline-none focus-visible:ring-2 rounded-full focus-visible:ring-ring transition focus-visible:text-text-primary hover:text-text-primary top-2 right-2">
             <XMarkIcon @click="showExportModal = false"></XMarkIcon>
         </button>
         <div class="text-center text-text-primary py-6">

resources/js/Components/Common/Reporting/ReportingFilterBadge.vue

@@ -21,6 +21,7 @@ const activeClass = computed(() => {
 <template>
     <Badge
         size="large"
+        tag="button"
         :class="
             twMerge(
                 'cursor-pointer hover:bg-card-background transition flex',

resources/js/Components/Common/Reporting/ReportingGroupBySelect.vue

@@ -23,7 +23,7 @@ const title = computed(() => {
         :get-key-from-item="(item) => item.value"
         :get-name-for-item="(item) => item.label"
         :items="groupByOptions">
-        <template v-slot:trigger>
+        <template #trigger>
             <Badge
                 size="large"
                 class="cursor-pointer hover:bg-card-background transition space-x-5 flex">

resources/js/Components/Common/Reporting/ReportingRow.vue

@@ -35,9 +35,9 @@ const expanded = ref(false);
                 )
             ">
             <GroupedItemsCountButton
+                v-if="entry.grouped_data && entry.grouped_data?.length > 0"
                 :expanded="expanded"
-                @click="expanded = !expanded"
+                @click="expanded = !expanded">
-                v-if="entry.grouped_data && entry.grouped_data?.length > 0">
                 {{ entry.grouped_data?.length }}
             </GroupedItemsCountButton>
             <span>
@@ -52,13 +52,13 @@ const expanded = ref(false);
         </div>
     </div>
     <div
+        v-if="expanded && entry.grouped_data"
         class="col-span-3 grid bg-quaternary"
-        style="grid-template-columns: 1fr 150px 150px"
+        style="grid-template-columns: 1fr 150px 150px">
-        v-if="expanded && entry.grouped_data">
         <ReportingRow
-            indent
             v-for="subEntry in entry.grouped_data"
             :key="subEntry.description ?? 'none'"
+            indent
             :entry="subEntry"></ReportingRow>
     </div>
 </template>

resources/js/Components/Common/Reporting/ReportingTabNavbar.vue

@@ -10,18 +10,18 @@ defineProps<{
 <template>
     <TabBar>
         <TabBarItem
-            @click="router.visit(route('reporting'))"
             :active="active === 'reporting'"
+            @click="router.visit(route('reporting'))"
             >Overview</TabBarItem
         >
         <TabBarItem
-            @click="router.visit(route('reporting.detailed'))"
             :active="active === 'detailed'"
+            @click="router.visit(route('reporting.detailed'))"
             >Detailed</TabBarItem
         >
         <TabBarItem
-            @click="router.visit(route('reporting.shared'))"
             :active="active === 'shared'"
+            @click="router.visit(route('reporting.shared'))"
             >Shared</TabBarItem
         >
     </TabBar>

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

@@ -14,10 +14,10 @@ const props = defineProps<{
 <template>
     <MoreOptionsDropdown :label="'Actions for Tag ' + props.tag.name">
         <button
-            @click="emit('delete')"
             :aria-label="'Delete Tag ' + props.tag.name"
             data-testid="tag_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="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"
+            @click="emit('delete')">
             <TrashIcon class="w-5 text-icon-active"></TrashIcon>
             <span>Delete</span>
         </button>

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

@@ -19,8 +19,8 @@ const showCreateTagModal = ref(false);
 
 <template>
     <TagCreateModal
-        :createTag
+        v-model:show="showCreateTagModal"
-        v-model:show="showCreateTagModal"></TagCreateModal>
+        :create-tag></TagCreateModal>
     <div class="flow-root">
         <div class="inline-block min-w-full align-middle">
             <div
@@ -29,18 +29,18 @@ const showCreateTagModal = ref(false);
                 style="grid-template-columns: 1fr 80px">
                 <TagTableHeading></TagTableHeading>
                 <div
-                    class="col-span-5 py-24 text-center"
+                    v-if="tags.length === 0"
-                    v-if="tags.length === 0">
+                    class="col-span-5 py-24 text-center">
                     <FolderPlusIcon
                         class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
                     <h3 class="text-white font-semibold">No tags found</h3>
-                    <p class="pb-5" v-if="canCreateTags()">
+                    <p v-if="canCreateTags()" class="pb-5">
                         Create your first tag now!
                     </p>
                     <SecondaryButton
                         v-if="canCreateTags()"
-                        @click="showCreateTagModal = true"
                         :icon="PlusIcon"
+                        @click="showCreateTagModal = true"
                         >Create your First Tag</SecondaryButton
                     >
                 </div>

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

@@ -53,19 +53,19 @@ useFocus(taskNameInput, { initialValue: true });
                         v-model="taskName"
                         type="text"
                         placeholder="Task Name"
-                        @keydown.enter="submit()"
                         class="mt-1 block w-full"
                         required
-                        autocomplete="taskName" />
+                        autocomplete="taskName"
+                        @keydown.enter="submit()" />
                 </div>
                 <div class="col-span-6 sm:col-span-4">
-                    <ProjectDropdown :modelValue="projectId"></ProjectDropdown>
+                    <ProjectDropdown :model-value="projectId"></ProjectDropdown>
                 </div>
             </div>
             <EstimatedTimeSection
                 v-if="isAllowedToPerformPremiumAction()"
-                @submit="submit()"
+                v-model="estimatedTime"
-                v-model="estimatedTime"></EstimatedTimeSection>
+                @submit="submit()"></EstimatedTimeSection>
         </template>
         <template #footer>
             <SecondaryButton @click="show = false"> Cancel </SecondaryButton>

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

@@ -50,16 +50,16 @@ useFocus(taskNameInput, { initialValue: true });
                         v-model="taskBody.name"
                         type="text"
                         placeholder="Task Name"
-                        @keydown.enter="submit()"
                         class="mt-1 block w-full"
                         required
-                        autocomplete="taskName" />
+                        autocomplete="taskName"
+                        @keydown.enter="submit()" />
                 </div>
             </div>
             <EstimatedTimeSection
                 v-if="isAllowedToPerformPremiumAction()"
-                @submit="submit()"
+                v-model="taskBody.estimated_time"
-                v-model="taskBody.estimated_time"></EstimatedTimeSection>
+                @submit="submit()"></EstimatedTimeSection>
         </template>
         <template #footer>
             <SecondaryButton @click="show = false"> Cancel </SecondaryButton>

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

@@ -21,30 +21,30 @@ const props = defineProps<{
     <MoreOptionsDropdown :label="'Actions for Task ' + props.task.name">
         <div class="min-w-[150px]">
             <button
-                @click="emit('edit')"
                 v-if="canUpdateTasks()"
                 :aria-label="'Edit Task ' + props.task.name"
                 data-testid="task_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">
+                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"
+                @click="emit('edit')">
                 <PencilSquareIcon
                     class="w-5 text-icon-active"></PencilSquareIcon>
                 <span>Edit</span>
             </button>
             <button
-                @click="emit('done')"
                 v-if="canUpdateTasks()"
                 :aria-label="'Mark Task ' + props.task.name + ' as done'"
-                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="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"
+                @click="emit('done')">
                 <CheckCircleIcon class="w-5 text-icon-active"></CheckCircleIcon>
                 <span v-if="props.task.is_done">Mark as active</span>
                 <span v-else>Mark as done</span>
             </button>
             <button
-                @click="emit('delete')"
-                :aria-label="'Delete Task ' + props.task.name"
                 v-if="canDeleteTasks()"
+                :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">
+                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"
+                @click="emit('delete')">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>
             </button>

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

@@ -18,7 +18,7 @@ function getNameForItem(item: Task) {
 
 <template>
     <MultiselectDropdown
-        searchPlaceholder="Search for a Task..."
+        search-placeholder="Search for a Task..."
         :items="tasks"
         :get-key-from-item="getKeyFromItem"
         :get-name-for-item="getNameForItem">

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

@@ -19,8 +19,8 @@ const createTask = ref(false);
 
 <template>
     <TaskCreateModal
-        :project-id="props.projectId"
+        v-model:show="createTask"
-        v-model:show="createTask"></TaskCreateModal>
+        :project-id="props.projectId"></TaskCreateModal>
     <div class="flow-root">
         <div class="inline-block min-w-full align-middle">
             <div
@@ -37,18 +37,18 @@ const createTask = ref(false);
                 ">
                 <TaskTableHeading></TaskTableHeading>
                 <div
-                    class="col-span-5 py-24 text-center"
+                    v-if="tasks.length === 0"
-                    v-if="tasks.length === 0">
+                    class="col-span-5 py-24 text-center">
                     <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" v-if="canCreateTasks()">
+                    <p v-if="canCreateTasks()" class="pb-5">
                         Create your first task now!
                     </p>
                     <SecondaryButton
                         v-if="canCreateTasks()"
-                        @click="createTask = true"
                         :icon="PlusIcon"
+                        @click="createTask = true"
                         >Create your First Task
                     </SecondaryButton>
                 </div>

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

@@ -75,8 +75,8 @@ const showTaskEditModal = ref(false);
                 @delete="deleteTask"></TaskMoreOptionsDropdown>
         </div>
         <TaskEditModal
-            :task="task"
+            v-model:show="showTaskEditModal"
-            v-model:show="showTaskEditModal"></TaskEditModal>
+            :task="task"></TaskEditModal>
     </TableRow>
 </template>
 

resources/js/Components/Common/UpgradeBadge.vue

@@ -11,8 +11,8 @@ const showUpgradeModal = ref(false);
         solidtime Professional.
     </UpgradeModal>
     <button
-        @click.prevent="showUpgradeModal = true"
+        class="inline-flex bg-secondary hover:bg-tertiary px-2 py-1 rounded border border-border-secondary hover:border-border-tertiary items-center space-x-1"
-        class="inline-flex bg-secondary hover:bg-tertiary px-2 py-1 rounded border border-border-secondary hover:border-border-tertiary items-center space-x-1">
+        @click.prevent="showUpgradeModal = true">
         <LockClosedIcon class="w-3 text-text-tertiary"></LockClosedIcon>
         <span class="text-xs text-text-secondary font-semibold"> Upgrade </span>
     </button>

resources/js/Components/Common/UpgradeModal.vue

@@ -50,12 +50,12 @@ const show = defineModel('show', { default: false });
                         v-if="isBillingActivated() && canManageBilling()"
                         href="/billing">
                         <PrimaryButton
-                            type="button"
-                            class="mt-6"
-                            :icon="CreditCardIcon"
                             v-if="
                                 isBillingActivated() && canUpdateOrganization()
-                            ">
+                            "
+                            type="button"
+                            class="mt-6"
+                            :icon="CreditCardIcon">
                             Go to Billing
                         </PrimaryButton>
                     </Link>

resources/js/Components/CurrentSidebarTimer.vue

@@ -32,8 +32,8 @@ const isRunningInDifferentOrganization = computed(() => {
 <template>
     <div class="pt-3 pb-2.5 px-2 flex justify-between items-center relative">
         <div
-            class="absolute w-full h-full backdrop-blur-sm z-10 flex items-center justify-center"
+            v-if="isRunningInDifferentOrganization"
-            v-if="isRunningInDifferentOrganization">
+            class="absolute w-full h-full backdrop-blur-sm z-10 flex items-center justify-center">
             <div
                 class="w-full h-[calc(100%+10px)] absolute bg-default-background opacity-75 backdrop-blur-sm"></div>
             <div class="flex space-x-3 items-center w-full z-20 justify-center">
@@ -50,7 +50,7 @@ const isRunningInDifferentOrganization = computed(() => {
         </div>
         <TimeTrackerStartStop
             :active="isActive"
-            @changed="setActiveState"
+            size="base"
-            size="base"></TimeTrackerStartStop>
+            @changed="setActiveState"></TimeTrackerStartStop>
     </div>
 </template>

resources/js/Components/Dashboard/LastSevenDaysCard.vue

@@ -15,8 +15,8 @@ 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"
+            :class="last7Days.length === 7 ? 'last:border-0 first:pt-3' : ''"
             :date="day.date"
             :history="day.history"
             :duration="day.duration"></DayOverviewCardEntry>

resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue

@@ -20,8 +20,8 @@ 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"
+            :class="props.latestTasks.length === 4 ? 'last:border-0' : ''"
             :project_id="lastTask.project_id"
             :task_id="lastTask.id"
             :title="lastTask.name"></RecentlyTrackedTasksCardEntry>

resources/js/Components/NavigationSidebarItem.vue

@@ -29,14 +29,14 @@ const open = useSessionStorage('nav-collapse-state-' + props.title, true);
             :icon
             :current
             :href></NavigationSidebarLink>
-        <CollapsibleRoot v-model:open="open" v-else
+        <CollapsibleRoot v-else v-model:open="open"
             ><CollapsibleTrigger class="w-full group py-0.5">
                 <div
                     class="text-muted group-hover:text-white group-hover:bg-menu-active group flex gap-x-2 rounded-md transition leading-6 py-1 px-2 font-medium text-sm items-center justify-between">
                     <div class="flex items-center gap-x-2">
                         <component
-                            v-if="icon"
                             :is="icon"
+                            v-if="icon"
                             :class="[
                                 current
                                     ? 'text-icon-active'
@@ -59,8 +59,8 @@ const open = useSessionStorage('nav-collapse-state-' + props.title, true);
             <CollapsibleContent class="CollapsibleContent">
                 <div class="px-3.5">
                     <ul
-                        class="flex min-w-0 flex-col border-l border-border-secondary px-3 w-full my-0.5"
+                        v-if="subItems"
-                        v-if="subItems">
+                        class="flex min-w-0 flex-col border-l border-border-secondary px-3 w-full my-0.5">
                         <li
                             v-for="subItem in subItems"
                             :key="subItem.title"

resources/js/Components/NavigationSidebarLink.vue

@@ -19,8 +19,8 @@ defineProps<{
                 'group flex gap-x-2 rounded-md transition leading-6 py-1 px-2 font-medium text-sm items-center',
             ]">
             <component
-                v-if="icon"
                 :is="icon"
+                v-if="icon"
                 :class="[
                     current
                         ? 'text-icon-active'

resources/js/Components/NotificationContainer.vue

@@ -5,8 +5,8 @@
         <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
             <Notification
                 v-for="notification in notifications"
-                :type="notification.type"
                 :key="notification.uuid"
+                :type="notification.type"
                 :title="notification.title"
                 :message="notification.message"></Notification>
         </div>

resources/js/Components/TimeTracker.vue

@@ -110,29 +110,29 @@ const { tags } = storeToRefs(useTagsStore());
     <CardTitle title="Time Tracker" :icon="ClockIcon"></CardTitle>
     <div class="relative">
         <TimeTrackerRunningInDifferentOrganizationOverlay
-            @switchOrganization="switchToTimeEntryOrganization"
             v-if="
                 isRunningInDifferentOrganization
-            "></TimeTrackerRunningInDifferentOrganizationOverlay>
+            "
+            @switch-organization="switchToTimeEntryOrganization"></TimeTrackerRunningInDifferentOrganizationOverlay>
 
         <TimeTrackerControls
-            :createProject
+            v-model:current-time-entry="currentTimeEntry"
-            :enableEstimatedTime="isAllowedToPerformPremiumAction()"
+            v-model:live-timer="now"
-            :canCreateProject="canCreateProjects()"
+            :create-project
-            :createClient
+            :enable-estimated-time="isAllowedToPerformPremiumAction()"
+            :can-create-project="canCreateProjects()"
+            :create-client
             :clients
             :tags
             :tasks
             :projects
-            :createTag
+            :create-tag
-            :isActive
+            :is-active
             :currency="getOrganizationCurrencyString()"
-            v-model:currentTimeEntry="currentTimeEntry"
+            @start-live-timer="startLiveTimer"
-            v-model:liveTimer="now"
+            @stop-live-timer="stopLiveTimer"
-            @startLiveTimer="startLiveTimer"
+            @start-timer="setActiveState(true)"
-            @stopLiveTimer="stopLiveTimer"
+            @stop-timer="setActiveState(false)"
-            @startTimer="setActiveState(true)"
+            @update-time-entry="updateTimeEntry"></TimeTrackerControls>
-            @stopTimer="setActiveState(false)"
-            @updateTimeEntry="updateTimeEntry"></TimeTrackerControls>
     </div>
 </template>

resources/js/Components/UpdateSidebarNotification.vue

@@ -12,7 +12,7 @@ function openDesktopGithubRepo() {
 </script>
 
 <template>
-    <div class="py-4 hidden lg:block" v-if="showReleaseInfo">
+    <div v-if="showReleaseInfo" class="py-4 hidden lg:block">
         <div
             class="rounded-lg px-2.5 py-2 bg-card-background border border-border-secondary">
             <div class="flex items-start justify-between">
@@ -23,8 +23,8 @@ function openDesktopGithubRepo() {
                 </div>
                 <button>
                     <XMarkIcon
-                        @click="showReleaseInfo = false"
+                        class="w-3.5 text-text-tertiary hover:text-text-secondary"
-                        class="w-3.5 text-text-tertiary hover:text-text-secondary"></XMarkIcon>
+                        @click="showReleaseInfo = false"></XMarkIcon>
                 </button>
             </div>
 
@@ -34,9 +34,9 @@ function openDesktopGithubRepo() {
                 now.
             </p>
             <SecondaryButton
-                @click="openDesktopGithubRepo"
                 size="small"
                 class="w-full text-center justify-center mt-1.5"
+                @click="openDesktopGithubRepo"
                 >Download now</SecondaryButton
             >
         </div>

resources/js/Layouts/AppLayout.vue

@@ -85,8 +85,8 @@ const page = usePage<{
                     class="border-b border-default-background-separator pb-2 flex justify-between">
                     <OrganizationSwitcher class="w-full"></OrganizationSwitcher>
                     <XMarkIcon
-                        @click="showSidebarMenu = false"
+                        class="w-8 lg:hidden"
-                        class="w-8 lg:hidden"></XMarkIcon>
+                        @click="showSidebarMenu = false"></XMarkIcon>
                 </div>
                 <div class="border-b border-default-background-separator">
                     <CurrentSidebarTimer></CurrentSidebarTimer>
@@ -162,8 +162,8 @@ const page = usePage<{
                                     route('clients')
                                 "></NavigationSidebarItem>
                             <NavigationSidebarItem
-                                title="Members"
                                 v-if="canViewMembers()"
+                                title="Members"
                                 :icon="UserGroupIcon"
                                 :current="route().current('members')"
                                 :href="
@@ -238,8 +238,8 @@ const page = usePage<{
             <div
                 class="lg:hidden w-full px-3 py-1 border-b border-b-default-background-separator text-muted flex justify-between items-center">
                 <Bars3Icon
-                    @click="showSidebarMenu = !showSidebarMenu"
+                    class="w-7 text-muted"
-                    class="w-7 text-muted"></Bars3Icon>
+                    @click="showSidebarMenu = !showSidebarMenu"></Bars3Icon>
                 <OrganizationSwitcher></OrganizationSwitcher>
             </div>
 

resources/js/Pages/Auth/Register.vue

@@ -151,7 +151,7 @@ const page = usePage<{
                 </InputLabel>
             </div>
 
-            <div class="mt-4" v-if="page.props.newsletter_consent">
+            <div v-if="page.props.newsletter_consent" class="mt-4">
                 <InputLabel for="newsletter_consent">
                     <div class="flex items-center">
                         <Checkbox

resources/js/Pages/Dashboard.vue

@@ -74,7 +74,7 @@ function refreshDashboardData() {
         <MainContainer
             class="grid gap-5 sm:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pt-3 sm:pt-5 pb-4 sm:pb-6 border-b border-default-background-separator items-stretch">
             <RecentlyTrackedTasksCard
-                :latestTasks="props.latestTasks"></RecentlyTrackedTasksCard>
+                :latest-tasks="props.latestTasks"></RecentlyTrackedTasksCard>
             <LastSevenDaysCard
                 :last7-days="props.lastSevenDays"></LastSevenDaysCard>
             <ActivityGraphCard
@@ -84,13 +84,13 @@ function refreshDashboardData() {
             <TeamActivityCard
                 v-if="canViewMembers()"
                 class="flex lg:hidden xl:flex"
-                :latestTeamActivity="
+                :latest-team-activity="
                     props.latestTeamActivity
                 "></TeamActivityCard>
         </MainContainer>
         <MainContainer class="py-5">
             <ThisWeekOverview
-                :weeklyProjectOverview="props.weeklyProjectOverview"
+                :weekly-project-overview="props.weeklyProjectOverview"
                 :total-weekly-billable-amount="props.totalWeeklyBillableAmount"
                 :total-weekly-billable-time="props.totalWeeklyBillableTime"
                 :total-weekly-time="props.totalWeeklyTime"

resources/js/Pages/Members.vue

@@ -52,8 +52,8 @@ function isActiveTab(tab: string) {
                 >Invite member</SecondaryButton
             >
             <MemberInviteModal
-                :available-roles="availableRoles"
                 v-model:show="inviteMember"
+                :available-roles="availableRoles"
                 @close="activeTab = 'invitations'"></MemberInviteModal>
         </MainContainer>
         <MemberTable v-if="activeTab === 'all'"></MemberTable>

resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue

@@ -204,9 +204,9 @@ const page = usePage<{
             <div class="col-span-6 sm:col-span-4">
                 <InputLabel for="timezone" value="Timezone" />
                 <select
-                    name="timezone"
                     id="timezone"
                     v-model="form.timezone"
+                    name="timezone"
                     required
                     class="mt-1 block w-full border-input-border bg-input-background text-white focus:border-input-border-active rounded-md shadow-sm">
                     <option value="" disabled>Select a Timezone</option>
@@ -225,9 +225,9 @@ const page = usePage<{
             <div class="col-span-6 sm:col-span-4">
                 <InputLabel for="week_start" value="Start of the week" />
                 <select
-                    name="week_start"
                     id="week_start"
                     v-model="form.week_start"
+                    name="week_start"
                     required
                     class="mt-1 block w-full border-input-border bg-input-background text-white focus:border-input-border-active rounded-md shadow-sm">
                     <option value="" disabled>Select a week day</option>

resources/js/Pages/ProjectShow.vue

@@ -129,15 +129,15 @@ const shownTasks = computed(() => {
             </nav>
             <div>
                 <SecondaryButton
+                    v-if="canCreateProjects()"
                     :icon="PencilSquareIcon"
-                    @click="showEditProjectModal = true"
+                    @click="showEditProjectModal = true">
-                    v-if="canCreateProjects()">
                     Edit Project
                 </SecondaryButton>
                 <ProjectEditModal
                     v-if="project"
-                    :originalProject="project"
+                    v-model:show="showEditProjectModal"
-                    v-model:show="showEditProjectModal"></ProjectEditModal>
+                    :original-project="project"></ProjectEditModal>
             </div>
         </MainContainer>
         <MainContainer>
@@ -168,8 +168,8 @@ const shownTasks = computed(() => {
                                     >Create Task
                                 </SecondaryButton>
                                 <TaskCreateModal
-                                    :project-id="projectId"
+                                    v-model:show="createTask"
-                                    v-model:show="createTask"></TaskCreateModal>
+                                    :project-id="projectId"></TaskCreateModal>
                             </div>
                         </template>
                     </CardTitle>
@@ -188,11 +188,11 @@ const shownTasks = computed(() => {
                                 Add Member
                             </SecondaryButton>
                             <ProjectMemberCreateModal
-                                :project-id="projectId"
-                                :existing-members="projectMembers"
                                 v-model:show="
                                     createProjectMember
-                                "></ProjectMemberCreateModal>
+                                "
+                                :project-id="projectId"
+                                :existing-members="projectMembers"></ProjectMemberCreateModal>
                         </template>
                     </CardTitle>
                     <Card>

resources/js/Pages/Projects.vue

@@ -94,13 +94,13 @@ const showBillableRate = computed(() => {
                 >Create Project
             </SecondaryButton>
             <ProjectCreateModal
-                :createProject
+                v-model:show="showCreateProjectModal"
-                :enableEstimatedTime="isAllowedToPerformPremiumAction"
+                :create-project
-                :createClient
+                :enable-estimated-time="isAllowedToPerformPremiumAction"
+                :create-client
                 :currency="getOrganizationCurrencyString()"
                 :clients="clients"
-                @submit="createProject"
+                @submit="createProject"></ProjectCreateModal>
-                v-model:show="showCreateProjectModal"></ProjectCreateModal>
         </MainContainer>
         <ProjectTable
             :show-billable-rate="showBillableRate"

resources/js/Pages/Reporting.vue

@@ -281,7 +281,7 @@ const tableData = computed(() => {
         class="overflow-hidden">
         <ReportingExportModal
             v-model:show="showExportModal"
-            :exportUrl="exportUrl"></ReportingExportModal>
+            :export-url="exportUrl"></ReportingExportModal>
         <MainContainer
             class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-3 sm:space-x-6">
@@ -292,7 +292,7 @@ const tableData = computed(() => {
                 <ReportingExportButton
                     :download="downloadExport"></ReportingExportButton>
                 <ReportSaveButton
-                    :reportProperties="reportProperties"></ReportSaveButton>
+                    :report-properties="reportProperties"></ReportSaveButton>
             </div>
         </MainContainer>
         <div class="py-2.5 w-full border-b border-default-background-separator">
@@ -302,9 +302,9 @@ const tableData = computed(() => {
                     class="flex flex-wrap items-center space-y-2 sm:space-y-0 space-x-4">
                     <div class="text-sm font-medium">Filters</div>
                     <MemberMultiselectDropdown
-                        @submit="updateReporting"
+                        v-model="selectedMembers"
-                        v-model="selectedMembers">
+                        @submit="updateReporting">
-                        <template v-slot:trigger>
+                        <template #trigger>
                             <ReportingFilterBadge
                                 :count="selectedMembers.length"
                                 :active="selectedMembers.length > 0"
@@ -313,9 +313,9 @@ const tableData = computed(() => {
                         </template>
                     </MemberMultiselectDropdown>
                     <ProjectMultiselectDropdown
-                        @submit="updateReporting"
+                        v-model="selectedProjects"
-                        v-model="selectedProjects">
+                        @submit="updateReporting">
-                        <template v-slot:trigger>
+                        <template #trigger>
                             <ReportingFilterBadge
                                 :count="selectedProjects.length"
                                 :active="selectedProjects.length > 0"
@@ -324,9 +324,9 @@ const tableData = computed(() => {
                         </template>
                     </ProjectMultiselectDropdown>
                     <TaskMultiselectDropdown
-                        @submit="updateReporting"
+                        v-model="selectedTasks"
-                        v-model="selectedTasks">
+                        @submit="updateReporting">
-                        <template v-slot:trigger>
+                        <template #trigger>
                             <ReportingFilterBadge
                                 :count="selectedTasks.length"
                                 :active="selectedTasks.length > 0"
@@ -335,20 +335,20 @@ const tableData = computed(() => {
                         </template>
                     </TaskMultiselectDropdown>
                     <ClientMultiselectDropdown
-                        @submit="updateReporting"
+                        v-model="selectedClients"
-                        v-model="selectedClients">
+                        @submit="updateReporting">
-                        <template v-slot:trigger>
+                        <template #trigger>
                             <ReportingFilterBadge
                                 title="Clients"
                                 :icon="FolderIcon"></ReportingFilterBadge>
                         </template>
                     </ClientMultiselectDropdown>
                     <TagDropdown
-                        @submit="updateReporting"
-                        :createTag
                         v-model="selectedTags"
-                        :tags="tags">
+                        :create-tag
-                        <template v-slot:trigger>
+                        :tags="tags"
+                        @submit="updateReporting">
+                        <template #trigger>
                             <ReportingFilterBadge
                                 :count="selectedTags.length"
                                 :active="selectedTags.length > 0"
@@ -358,7 +358,6 @@ const tableData = computed(() => {
                     </TagDropdown>
 
                     <SelectDropdown
-                        @changed="updateReporting"
                         v-model="billable"
                         :get-key-from-item="(item) => item.value"
                         :get-name-for-item="(item) => item.label"
@@ -375,8 +374,9 @@ const tableData = computed(() => {
                                 label: 'Non Billable',
                                 value: 'false',
                             },
-                        ]">
+                        ]"
-                        <template v-slot:trigger>
+                        @changed="updateReporting">
+                        <template #trigger>
                             <ReportingFilterBadge
                                 :active="billable !== null"
                                 :title="
@@ -399,8 +399,8 @@ const tableData = computed(() => {
         <MainContainer>
             <div class="pt-10 w-full px-3 relative">
                 <ReportingChart
-                    :groupedType="aggregatedGraphTimeEntries?.grouped_type"
+                    :grouped-type="aggregatedGraphTimeEntries?.grouped_type"
-                    :groupedData="
+                    :grouped-data="
                         aggregatedGraphTimeEntries?.grouped_data
                     "></ReportingChart>
             </div>
@@ -413,18 +413,18 @@ const tableData = computed(() => {
                         class="text-sm flex text-white items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3">
                         <span>Group by</span>
                         <ReportingGroupBySelect
+                            v-model="group"
                             :group-by-options="groupByOptions"
-                            @changed="updateTableReporting"
+                            @changed="updateTableReporting"></ReportingGroupBySelect>
-                            v-model="group"></ReportingGroupBySelect>
                         <span>and</span>
                         <ReportingGroupBySelect
+                            v-model="subGroup"
                             :group-by-options="
                                 groupByOptions.filter(
                                     (el) => el.value !== group
                                 )
                             "
-                            @changed="updateTableReporting"
+                            @changed="updateTableReporting"></ReportingGroupBySelect>
-                            v-model="subGroup"></ReportingGroupBySelect>
                     </div>
                     <div
                         class="grid items-center"
@@ -473,8 +473,8 @@ const tableData = computed(() => {
                             </div>
                         </template>
                         <div
-                            class="chart flex flex-col items-center justify-center py-12 col-span-3"
+                            v-else
-                            v-else>
+                            class="chart flex flex-col items-center justify-center py-12 col-span-3">
                             <p class="text-lg text-white font-semibold">
                                 No time entries found
                             </p>

resources/js/Pages/ReportingDetailed.vue

@@ -252,7 +252,7 @@ async function downloadExport(format: ExportFormat) {
         class="overflow-hidden">
         <ReportingExportModal
             v-model:show="showExportModal"
-            :exportUrl="exportUrl"></ReportingExportModal>
+            :export-url="exportUrl"></ReportingExportModal>
         <MainContainer
             class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-3 sm:space-x-6">
@@ -270,9 +270,9 @@ async function downloadExport(format: ExportFormat) {
                     class="flex flex-wrap items-center space-y-2 sm:space-y-0 space-x-4">
                     <div class="text-sm font-medium">Filters</div>
                     <MemberMultiselectDropdown
-                        @submit="updateFilteredTimeEntries"
+                        v-model="selectedMembers"
-                        v-model="selectedMembers">
+                        @submit="updateFilteredTimeEntries">
-                        <template v-slot:trigger>
+                        <template #trigger>
                             <ReportingFilterBadge
                                 :count="selectedMembers.length"
                                 :active="selectedMembers.length > 0"
@@ -281,9 +281,9 @@ async function downloadExport(format: ExportFormat) {
                         </template>
                     </MemberMultiselectDropdown>
                     <ProjectMultiselectDropdown
-                        @submit="updateFilteredTimeEntries"
+                        v-model="selectedProjects"
-                        v-model="selectedProjects">
+                        @submit="updateFilteredTimeEntries">
-                        <template v-slot:trigger>
+                        <template #trigger>
                             <ReportingFilterBadge
                                 :count="selectedProjects.length"
                                 :active="selectedProjects.length > 0"
@@ -292,9 +292,9 @@ async function downloadExport(format: ExportFormat) {
                         </template>
                     </ProjectMultiselectDropdown>
                     <TaskMultiselectDropdown
-                        @submit="updateFilteredTimeEntries"
+                        v-model="selectedTasks"
-                        v-model="selectedTasks">
+                        @submit="updateFilteredTimeEntries">
-                        <template v-slot:trigger>
+                        <template #trigger>
                             <ReportingFilterBadge
                                 :count="selectedTasks.length"
                                 :active="selectedTasks.length > 0"
@@ -303,20 +303,20 @@ async function downloadExport(format: ExportFormat) {
                         </template>
                     </TaskMultiselectDropdown>
                     <ClientMultiselectDropdown
-                        @submit="updateFilteredTimeEntries"
+                        v-model="selectedClients"
-                        v-model="selectedClients">
+                        @submit="updateFilteredTimeEntries">
-                        <template v-slot:trigger>
+                        <template #trigger>
                             <ReportingFilterBadge
                                 title="Clients"
                                 :icon="FolderIcon"></ReportingFilterBadge>
                         </template>
                     </ClientMultiselectDropdown>
                     <TagDropdown
-                        @submit="updateFilteredTimeEntries"
-                        :createTag
                         v-model="selectedTags"
-                        :tags="tags">
+                        :create-tag
-                        <template v-slot:trigger>
+                        :tags="tags"
+                        @submit="updateFilteredTimeEntries">
+                        <template #trigger>
                             <ReportingFilterBadge
                                 :count="selectedTags.length"
                                 :active="selectedTags.length > 0"
@@ -326,7 +326,6 @@ async function downloadExport(format: ExportFormat) {
                     </TagDropdown>
 
                     <SelectDropdown
-                        @changed="updateFilteredTimeEntries"
                         v-model="billable"
                         :get-key-from-item="(item) => item.value"
                         :get-name-for-item="(item) => item.label"
@@ -343,8 +342,9 @@ async function downloadExport(format: ExportFormat) {
                                 label: 'Non Billable',
                                 value: 'false',
                             },
-                        ]">
+                        ]"
-                        <template v-slot:trigger>
+                        @changed="updateFilteredTimeEntries">
+                        <template #trigger>
                             <ReportingFilterBadge
                                 :active="billable !== null"
                                 :title="
@@ -366,12 +366,9 @@ async function downloadExport(format: ExportFormat) {
         </div>
         <TimeEntryMassActionRow
             :selected-time-entries="selectedTimeEntries"
-            :canCreateProject="canCreateProjects()"
+            :can-create-project="canCreateProjects()"
-            :enableEstimatedTime="isAllowedToPerformPremiumAction()"
+            :enable-estimated-time="isAllowedToPerformPremiumAction()"
-            @submit="clearSelectionAndState"
             :delete-selected="deleteSelected"
-            @select-all="selectedTimeEntries = [...timeEntries]"
-            @unselect-all="selectedTimeEntries = []"
             :all-selected="selectedTimeEntries.length === timeEntries.length"
             :projects="projects"
             :tasks="tasks"
@@ -387,34 +384,37 @@ async function downloadExport(format: ExportFormat) {
             "
             :create-project="createProject"
             :create-client="createClient"
-            :createTag="createTag"></TimeEntryMassActionRow>
+            :create-tag="createTag"
+            @submit="clearSelectionAndState"
+            @select-all="selectedTimeEntries = [...timeEntries]"
+            @unselect-all="selectedTimeEntries = []"></TimeEntryMassActionRow>
         <div class="w-full relative">
             <div v-for="entry in timeEntries" :key="entry.id">
                 <TimeEntryRow
                     :selected="selectedTimeEntries.includes(entry)"
-                    @selected="selectedTimeEntries.push(entry)"
+                    :can-create-project="canCreateProjects()"
-                    :canCreateProject="canCreateProjects()"
+                    :create-client
-                    @unselected="
+                    :create-project
-                        selectedTimeEntries = selectedTimeEntries.filter(
+                    :enable-estimated-time="isAllowedToPerformPremiumAction()"
-                            (item) => item.id !== entry.id
-                        )
-                    "
-                    :createClient
-                    :createProject
-                    :enableEstimatedTime="isAllowedToPerformPremiumAction()"
                     :projects="projects"
                     :tasks="tasks"
                     :tags="tags"
                     :clients
-                    :createTag
+                    :create-tag
-                    :updateTimeEntry
+                    :update-time-entry
-                    :onStartStopClick="() => startTimeEntryFromExisting(entry)"
+                    :on-start-stop-click="() => startTimeEntryFromExisting(entry)"
-                    :deleteTimeEntry="() => deleteTimeEntries([entry])"
+                    :delete-time-entry="() => deleteTimeEntries([entry])"
                     :currency="getOrganizationCurrencyString()"
                     :members="members"
-                    showDate
+                    show-date
-                    showMember
+                    show-member
-                    :time-entry="entry"></TimeEntryRow>
+                    :time-entry="entry"
+                    @selected="selectedTimeEntries.push(entry)"
+                    @unselected="
+                        selectedTimeEntries = selectedTimeEntries.filter(
+                            (item) => item.id !== entry.id
+                        )
+                    "></TimeEntryRow>
             </div>
             <div v-if="timeEntries.length === 0">
                 <div class="text-center pt-12">
@@ -431,10 +431,10 @@ async function downloadExport(format: ExportFormat) {
         </div>
 
         <PaginationRoot
+            v-model:page="currentPage"
             :total="totalPages"
             :items-per-page="pageLimit"
             class="flex justify-center items-center py-8"
-            v-model:page="currentPage"
             :sibling-count="1"
             show-edges>
             <PaginationList
@@ -485,13 +485,13 @@ async function downloadExport(format: ExportFormat) {
 </template>
 <style lang="postcss">
 .navigation-item {
-    @apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-white/80;
+    @apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
 }
 
 .pagination-item {
-    @apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-white/80;
+    @apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
 }
 .pagination-item[data-selected] {
-    @apply text-white bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-white/80 transition ease-in-out duration-150;
+    @apply text-white bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-ring transition ease-in-out duration-150;
 }
 </style>

resources/js/Pages/ReportingShared.vue

@@ -101,12 +101,12 @@ watch(currentPage, () => {
                         v-if="isBillingActivated() && canManageBilling()"
                         href="/billing">
                         <PrimaryButton
-                            type="button"
-                            class="mt-6"
-                            :icon="CreditCardIcon"
                             v-if="
                                 isBillingActivated() && canUpdateOrganization()
-                            ">
+                            "
+                            type="button"
+                            class="mt-6"
+                            :icon="CreditCardIcon">
                             Go to Billing
                         </PrimaryButton>
                     </Link>
@@ -120,10 +120,10 @@ watch(currentPage, () => {
 
         <PaginationRoot
             v-if="reports.length > 0 || isAllowedToPerformPremiumAction()"
+            v-model:page="currentPage"
             :total="totalPages"
             :items-per-page="pageLimit"
             class="flex justify-center items-center py-8"
-            v-model:page="currentPage"
             :sibling-count="1"
             show-edges>
             <PaginationList
@@ -174,13 +174,13 @@ watch(currentPage, () => {
 </template>
 <style lang="postcss">
 .navigation-item {
-    @apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-white/80;
+    @apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
 }
 
 .pagination-item {
-    @apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-white/80;
+    @apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
 }
 .pagination-item[data-selected] {
-    @apply text-white bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-white/80 transition ease-in-out duration-150;
+    @apply text-white bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-ring transition ease-in-out duration-150;
 }
 </style>

resources/js/Pages/SharedReport.vue

@@ -151,8 +151,8 @@ function getGroupLabel(key: string) {
         <MainContainer>
             <div class="pt-10 w-full px-3 relative">
                 <ReportingChart
-                    :groupedType="aggregatedGraphTimeEntries?.grouped_type"
+                    :grouped-type="aggregatedGraphTimeEntries?.grouped_type"
-                    :groupedData="
+                    :grouped-data="
                         aggregatedGraphTimeEntries?.grouped_data
                     "></ReportingChart>
             </div>
@@ -217,8 +217,8 @@ function getGroupLabel(key: string) {
                             </div>
                         </template>
                         <div
-                            class="chart flex flex-col items-center justify-center py-12 col-span-3"
+                            v-else
-                            v-else>
+                            class="chart flex flex-col items-center justify-center py-12 col-span-3">
                             <p class="text-lg text-white font-semibold">
                                 No time entries found
                             </p>

resources/js/Pages/Tags.vue

@@ -31,9 +31,9 @@ async function createTag(tag: string) {
                 >Create Tag
             </SecondaryButton>
             <TagCreateModal
-                :createTag="createTag"
+                v-model:show="showCreateTagModal"
-                v-model:show="showCreateTagModal"></TagCreateModal>
+                :create-tag="createTag"></TagCreateModal>
         </MainContainer>
-        <TagTable :createTag="createTag"></TagTable>
+        <TagTable :create-tag="createTag"></TagTable>
     </AppLayout>
 </template>

resources/js/Pages/Teams/Partials/ImportData.vue

@@ -191,9 +191,9 @@ const showResultModal = ref(false);
                 <div>
                     <InputLabel for="importType" value="Import Type" />
                     <select
-                        name="importType"
                         id="importType"
                         v-model="importType"
+                        name="importType"
                         class="mt-1 block w-full border-input-border bg-input-background text-white focus:border-input-border-active rounded-md shadow-sm">
                         <option :value="null" selected disabled>
                             Select an import type to get instructions...
@@ -206,8 +206,8 @@ const showResultModal = ref(false);
                         </option>
                     </select>
                     <div
-                        class="py-3 text-white"
+                        v-if="currentImporterDescription"
-                        v-if="currentImporterDescription">
+                        class="py-3 text-white">
                         <div class="font-semibold text-muted py-1">
                             Instructions:
                         </div>
@@ -233,12 +233,12 @@ const showResultModal = ref(false);
                                     >Upload a Toggl/Clockify Export</span
                                 >
                                 <input
-                                    ref="importFile"
                                     id="file-upload"
+                                    ref="importFile"
                                     name="file-upload"
-                                    v-on:change="updateFiles"
                                     type="file"
-                                    class="sr-only" />
+                                    class="sr-only"
+                                    @change="updateFiles" />
                             </label>
                         </div>
                         <p class="text-xs leading-5 text-muted">

resources/js/Pages/Teams/Partials/OrganizationBillableRate.vue

@@ -62,10 +62,10 @@ function checkForConfirmationModal() {
         <template #form>
             <OrganizationBillableRateModal
                 v-model:show="showConfirmationModal"
-                @submit="submit"
                 :new-billable-rate="
                     organizationBody.billable_rate
-                "></OrganizationBillableRateModal>
+                "
+                @submit="submit"></OrganizationBillableRateModal>
             <!-- Organization Owner Information -->
             <div class="col-span-6">
                 <div class="col-span-6 sm:col-span-4">
@@ -75,8 +75,8 @@ function checkForConfirmationModal() {
                         value="Organization Billable Rate" />
                     <BillableRateInput
                         v-if="organization"
-                        :currency="getOrganizationCurrencyString()"
                         v-model="organizationBody.billable_rate"
+                        :currency="getOrganizationCurrencyString()"
                         name="organizationBillableRate"></BillableRateInput>
                 </div>
             </div>
@@ -86,10 +86,10 @@ function checkForConfirmationModal() {
                     <div class="flex items-center space-x-2">
                         <Checkbox
                             v-if="organization"
+                            id="organizationShowBillableRatesToEmployees"
                             v-model:checked="
                                 organizationBody.employees_can_see_billable_rates
-                            "
+                            "></Checkbox>
-                            id="organizationShowBillableRatesToEmployees"></Checkbox>
                         <InputLabel
                             for="organizationShowBillableRatesToEmployees"
                             value="Show Billable Rates to Employees" />

resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue

@@ -89,9 +89,9 @@ const updateTeamName = () => {
             <div class="col-span-6 sm:col-span-4">
                 <InputLabel for="currency" value="Currency" />
                 <select
-                    name="currency"
                     id="currency"
                     v-model="form.currency"
+                    name="currency"
                     :disabled="!permissions.canUpdateTeam"
                     class="mt-1 block w-full border-input-border bg-input-background text-white focus:border-input-border-active rounded-md shadow-sm">
                     <option value="" disabled>Select a currency</option>

resources/js/Pages/Time.vue

@@ -120,16 +120,16 @@ function deleteSelected() {
 
 <template>
     <TimeEntryCreateModal
-        :enableEstimatedTime="isAllowedToPerformPremiumAction()"
+        v-model:show="showManualTimeEntryModal"
-        :createProject="createProject"
+        :enable-estimated-time="isAllowedToPerformPremiumAction()"
-        :createClient="createClient"
+        :create-project="createProject"
-        :createTag="createTag"
+        :create-client="createClient"
-        :createTimeEntry="createTimeEntry"
+        :create-tag="createTag"
+        :create-time-entry="createTimeEntry"
         :projects
         :tasks
         :tags
-        :clients
+        :clients></TimeEntryCreateModal>
-        v-model:show="showManualTimeEntryModal"></TimeEntryCreateModal>
     <AppLayout title="Dashboard" data-testid="time_view">
         <MainContainer
             class="pt-5 lg:pt-8 pb-4 lg:pb-6 border-b border-default-background-separator">
@@ -141,8 +141,8 @@ function deleteSelected() {
                 <div class="pb-2 pt-2 lg:pt-0 lg:pl-4 flex justify-center">
                     <SecondaryButton
                         class="w-full text-center flex justify-center"
-                        @click="showManualTimeEntryModal = true"
                         :icon="PlusIcon"
+                        @click="showManualTimeEntryModal = true"
                         >Manual time entry
                     </SecondaryButton>
                 </div>
@@ -150,12 +150,9 @@ function deleteSelected() {
         </MainContainer>
         <TimeEntryMassActionRow
             :selected-time-entries="selectedTimeEntries"
-            :enableEstimatedTime="isAllowedToPerformPremiumAction()"
+            :enable-estimated-time="isAllowedToPerformPremiumAction()"
-            :canCreateProject="canCreateProjects()"
+            :can-create-project="canCreateProjects()"
-            @submit="clearSelectionAndState"
             :all-selected="selectedTimeEntries.length === timeEntries.length"
-            @select-all="selectedTimeEntries = [...timeEntries]"
-            @unselect-all="selectedTimeEntries = []"
             :delete-selected="deleteSelected"
             :projects="projects"
             :tasks="tasks"
@@ -171,23 +168,26 @@ function deleteSelected() {
             "
             :create-project="createProject"
             :create-client="createClient"
-            :createTag="createTag"></TimeEntryMassActionRow>
+            :create-tag="createTag"
+            @submit="clearSelectionAndState"
+            @select-all="selectedTimeEntries = [...timeEntries]"
+            @unselect-all="selectedTimeEntries = []"></TimeEntryMassActionRow>
         <TimeEntryGroupedTable
             v-model:selected="selectedTimeEntries"
-            :createProject
+            :create-project
-            :enableEstimatedTime="isAllowedToPerformPremiumAction()"
+            :enable-estimated-time="isAllowedToPerformPremiumAction()"
-            :canCreateProject="canCreateProjects()"
+            :can-create-project="canCreateProjects()"
             :clients
-            :createClient
+            :create-client
-            :updateTimeEntry
+            :update-time-entry
-            :updateTimeEntries
+            :update-time-entries
-            :deleteTimeEntries
+            :delete-time-entries
-            :createTimeEntry="startTimeEntry"
+            :create-time-entry="startTimeEntry"
-            :createTag
+            :create-tag
             :projects="projects"
             :tasks="tasks"
             :currency="getOrganizationCurrencyString()"
-            :timeEntries="timeEntries"
+            :time-entries="timeEntries"
             :tags="tags"></TimeEntryGroupedTable>
         <div v-if="timeEntries.length === 0" class="text-center pt-12">
             <ClockIcon class="w-8 text-icon-default inline pb-2"></ClockIcon>

resources/js/packages/ui/package.json

@@ -57,13 +57,13 @@
     "peerDependencies": {
         "@floating-ui/vue": "^1.1.4",
         "@heroicons/vue": "^2.1.5",
-        "@vueuse/core": "^10.11.0",
+        "@vueuse/core": "^12.5.0",
         "@zodios/core": "^10.9.6",
         "dayjs": "^1.11.13",
-        "parse-duration": "^1.1.0",
+        "parse-duration": "^2.0.1",
         "tailwind-merge": "^2.5.2",
         "tailwindcss": "^3.1.0",
-        "vue": "^3.4.38",
+        "vue": "^3.5.0",
-        "vue-tsc": "^2.0.29"
+        "vue-tsc": "^2.2.0"
     }
 }

resources/js/packages/ui/src/Badge.vue

@@ -4,11 +4,11 @@ import { computed } from 'vue';
 
 const props = withDefaults(
     defineProps<{
-        size: 'base' | 'large' | 'xlarge';
+        size?: 'base' | 'large' | 'xlarge';
-        tag: string;
+        tag?: string;
         class?: string;
-        color: string;
+        color?: string;
-        border: boolean;
+        border?: boolean;
     }>(),
     {
         size: 'base',
@@ -30,6 +30,13 @@ const borderClasses = computed(() => {
     }
     return '';
 });
+
+const tagClasses = computed(() => {
+    if (props.tag === 'button') {
+        return 'hover:bg-tertiary';
+    }
+    return '';
+});
 </script>
 
 <template>
@@ -37,9 +44,10 @@ const borderClasses = computed(() => {
         :is="tag"
         :class="
             twMerge(
+                tagClasses,
                 badgeClasses[size],
                 borderClasses,
-                'rounded inline-flex items-center font-semibold text-white disabled:text-text-quaternary outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80',
+                'rounded transition inline-flex items-center font-semibold text-white disabled:text-text-quaternary outline-0  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                 props.class
             )
         ">

resources/js/packages/ui/src/Buttons/PrimaryButton.vue

@@ -6,9 +6,9 @@ import { twMerge } from 'tailwind-merge';
 
 const props = withDefaults(
     defineProps<{
-        type: HtmlButtonType;
+        type?: HtmlButtonType;
         icon?: Component;
-        loading: boolean;
+        loading?: boolean;
     }>(),
     {
         type: 'submit',
@@ -21,15 +21,15 @@ const props = withDefaults(
     <button
         :type="type"
         :disabled="loading"
-        class="inline-flex items-center px-2 sm:px-3 py-1 sm:py-2 bg-accent-300/10 border border-accent-300/20 rounded-md font-medium text-xs sm:text-sm text-white hover:bg-accent-300/20 active:bg-accent-300/20 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
+        class="inline-flex items-center px-2 sm:px-3 py-1 sm:py-2 bg-accent-300/10 border border-accent-300/20 rounded-md font-medium text-xs sm:text-sm text-white hover:bg-accent-300/20 active:bg-accent-300/20 focus:outline-none focus-visible:ring-2 focus-visible:border-transparent focus-visible:ring-ring transition ease-in-out duration-150">
         <span
             :class="
                 twMerge('flex items-center ', props.icon ? 'space-x-1.5' : '')
             ">
             <LoadingSpinner v-if="loading"></LoadingSpinner>
             <component
-                v-if="props.icon && !loading"
                 :is="props.icon"
+                v-if="props.icon && !loading"
                 class="text-text-secondary w-4 -ml-0.5 mr-1"></component>
             <span>
                 <slot />

resources/js/packages/ui/src/Buttons/SecondaryButton.vue

@@ -6,10 +6,10 @@ import LoadingSpinner from '../LoadingSpinner.vue';
 
 const props = withDefaults(
     defineProps<{
-        type: HtmlButtonType;
+        type?: HtmlButtonType;
         icon?: Component;
-        size: 'small' | 'base';
+        size?: 'small' | 'base';
-        loading: boolean;
+        loading?: boolean;
         class?: string;
     }>(),
     {
@@ -31,7 +31,7 @@ const sizeClasses = {
         :disabled="loading"
         :class="
             twMerge(
-                'bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover shadow-sm transition text-white rounded-lg font-semibold inline-flex items-center space-x-1.5 focus-visible:border-input-border-active focus:outline-none focus:ring-0 disabled:opacity-25 ease-in-out',
+                'bg-button-secondary-background border border-button-secondary-border hover:bg-button-secondary-background-hover shadow-sm transition text-white rounded-lg font-semibold inline-flex items-center space-x-1.5 focus-visible:outline-none focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring focus:border-transparent disabled:opacity-25 ease-in-out',
                 sizeClasses[props.size],
                 props.class
             )
@@ -42,8 +42,8 @@ const sizeClasses = {
             ">
             <LoadingSpinner v-if="loading"></LoadingSpinner>
             <component
-                v-if="props.icon && !loading"
                 :is="props.icon"
+                v-if="props.icon && !loading"
                 class="text-text-tertiary w-4 -ml-0.5 mr-1"></component>
             <span>
                 <slot />

resources/js/packages/ui/src/CardTitle.vue

@@ -12,8 +12,8 @@ defineProps<{
         <h3
             class="text-white font-bold text-sm lg:text-base flex items-center space-x-2 lg:space-x-2.5">
             <component
-                v-if="icon"
                 :is="icon"
+                v-if="icon"
                 class="w-5 lg:w-6 text-icon-default"></component>
             <span>
                 {{ title }}

resources/js/packages/ui/src/Client/ClientDropdown.vue

@@ -127,28 +127,28 @@ const highlightedItem = computed(() => {
 </script>
 
 <template>
-    <Dropdown width="120" v-model="open" :closeOnContentClick="true">
+    <Dropdown v-model="open" width="120" :close-on-content-click="true">
         <template #trigger>
             <slot name="trigger"></slot>
         </template>
         <template #content>
             <input
+                ref="searchInput"
                 :value="searchValue"
+                data-testid="client_dropdown_search"
+                class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
+                placeholder="Search for a client..."
                 @input="updateSearchValue"
                 @keydown.enter="addClientIfNoneExists"
-                data-testid="client_dropdown_search"
                 @keydown.up.prevent="moveHighlightUp"
-                @keydown.down.prevent="moveHighlightDown"
+                @keydown.down.prevent="moveHighlightDown" />
-                ref="searchInput"
-                class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
-                placeholder="Search for a client..." />
             <div ref="dropdownViewport" class="w-60 max-h-60 overflow-y-scroll">
                 <div
                     v-if="
                         searchValue.length > 0 && filteredClients.length === 0
                     "
-                    @click="addClientIfNoneExists"
+                    class="bg-card-background-active"
-                    class="bg-card-background-active">
+                    @click="addClientIfNoneExists">
                     <div
                         class="flex space-x-3 items-center px-4 py-3 text-xs text-white font-medium border-t rounded-b-lg border-card-background-separator">
                         <PlusCircleIcon
@@ -170,8 +170,8 @@ const highlightedItem = computed(() => {
                     :data-client-id="client.id">
                     <ClientDropdownItem
                         :selected="isClientSelected(client.id)"
-                        @click="updateClient(client.id)"
+                        :name="client.name"
-                        :name="client.name"></ClientDropdownItem>
+                        @click="updateClient(client.id)"></ClientDropdownItem>
                 </div>
             </div>
         </template>

resources/js/packages/ui/src/EstimatedTimeSection.vue

@@ -14,9 +14,9 @@ const emit = defineEmits(['submit']);
             <InputLabel for="billable" value="Time Estimated" />
         </div>
         <DurationInput
-            @submit="emit('submit')"
             v-model="model"
-            class="max-w-[150px]"></DurationInput>
+            class="max-w-[150px]"
+            @submit="emit('submit')"></DurationInput>
     </div>
 </template>
 

resources/js/packages/ui/src/GroupedItemsCountButton.vue

@@ -5,7 +5,7 @@ import { computed } from 'vue';
 const props = withDefaults(
     defineProps<{
         expanded?: boolean;
-        size: string;
+        size?: string;
     }>(),
     {
         expanded: false,
@@ -17,7 +17,7 @@ const expandedStatusClasses = computed(() => {
     if (props.expanded) {
         return 'border-card-border border bg-card-background-active text-white';
     }
-    return 'border-card-border border bg-card-background text-muted';
+    return 'border-card-border border bg-card-background hover:bg-card-background-active hover:text-text-primary transition text-muted';
 });
 </script>
 
@@ -25,7 +25,7 @@ const expandedStatusClasses = computed(() => {
     <button
         :class="
             twMerge(
-                'font-medium rounded flex items-center transition justify-center',
+                'font-medium rounded flex items-center transition justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent',
                 expandedStatusClasses,
                 props.size
             )

resources/js/packages/ui/src/Input/BillableRateInput.vue

@@ -77,13 +77,13 @@ const inputValue = ref(formatValue(model.value));
             :id="name"
             ref="billableRateInput"
             v-model="inputValue"
-            @blur="updateRate($event.target.value)"
-            @keydown.enter="updateRate($event.target.value)"
             type="text"
             :name="name"
             placeholder="Billable Rate"
             class="block w-full"
-            autocomplete="teamMemberRate" />
+            autocomplete="teamMemberRate"
+            @blur="updateRate($event.target.value)"
+            @keydown.enter="updateRate($event.target.value)" />
         <div
             class="absolute top-0 right-0 h-full flex items-center px-4 font-medium pointer-events-none">
             <span>

resources/js/packages/ui/src/Input/BillableToggleButton.vue

@@ -11,7 +11,7 @@ function toggleBillable() {
 
 const props = withDefaults(
     defineProps<{
-        size: 'small' | 'base';
+        size?: 'small' | 'base';
     }>(),
     {
         size: 'base',
@@ -35,19 +35,19 @@ const iconSizeClasses = computed(() => {
 });
 
 const iconSizeWrapperClasses =
-    props.size === 'small' ? 'w-6 sm:w-8 h-6 sm:h-8' : 'w-11 h-11';
+    props.size === 'small' ? 'w-6 sm:w-8 h-6 sm:h-8' : 'w-10 h-10';
 </script>
 
 <template>
     <button
-        @click="toggleBillable"
         :class="
             twMerge(
                 iconColorClasses,
                 iconSizeWrapperClasses,
-                'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center'
+                'flex-shrink-0 ring-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center'
             )
-        ">
+        "
+        @click="toggleBillable">
         <BillableIcon :class="iconSizeClasses"></BillableIcon>
     </button>
 </template>

resources/js/packages/ui/src/Input/Checkbox.vue

@@ -31,9 +31,9 @@ const proxyChecked = computed({
 
 <template>
     <input
+        :id="id"
         v-model="proxyChecked"
         type="checkbox"
-        :id="id"
         :value="value"
-        class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:ring-accent-500/80" />
+        class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:outline-none focus:ring-ring/50 focus-visible:outline-none focus-visible:ring-ring/50" />
 </template>

resources/js/packages/ui/src/Input/DatePicker.vue

@@ -48,10 +48,8 @@ const emit = defineEmits(['changed']);
 <template>
     <div class="flex items-center text-muted">
         <input
+            id="start"
             ref="datePicker"
-            @change="updateTempValue"
-            @blur="updateDate"
-            @keydown.enter="updateDate"
             :class="
                 twMerge(
                     'bg-input-background border text-white border-input-border focus-visible:outline-0 focus-visible:border-input-border-active focus-visible:ring-0 rounded-md',
@@ -59,9 +57,11 @@ const emit = defineEmits(['changed']);
                 )
             "
             type="date"
-            id="start"
             name="trip-start"
-            :value="tempDate" />
+            :value="tempDate"
+            @change="updateTempValue"
+            @blur="updateDate"
+            @keydown.enter="updateDate" />
     </div>
 </template>
 

resources/js/packages/ui/src/Input/Dropdown.vue

@@ -4,7 +4,6 @@ import {
     flip,
     limitShift,
     type Placement,
-    type ReferenceElement,
     shift,
     useFloating,
 } from '@floating-ui/vue';
@@ -15,8 +14,8 @@ import { isLastLayer, layers } from '@/packages/ui/src/utils/dismissableLayer';
 
 const props = withDefaults(
     defineProps<{
-        align: Placement;
+        align?: Placement;
-        closeOnContentClick: boolean;
+        closeOnContentClick?: boolean;
     }>(),
     {
         align: 'bottom-start',
@@ -45,6 +44,11 @@ watch(open, (value) => {
         layers.value.push(id);
     } else {
         layers.value = layers.value.filter((layer) => layer !== id);
+        reference.value
+            ?.querySelector<HTMLElement>(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            )
+            ?.focus();
     }
 });
 
@@ -69,7 +73,7 @@ function onBackgroundClick() {
     open.value = false;
 }
 
-const reference = ref<null | ReferenceElement>(null);
+const reference = ref<null | HTMLElement>(null);
 const floating = ref(null);
 const { floatingStyles } = useFloating(reference, floating, {
     placement: props.align,
@@ -90,7 +94,7 @@ const { floatingStyles } = useFloating(reference, floating, {
 
 <template>
     <div class="min-w-0 isolate">
-        <div @click.prevent="toggleOpen" ref="reference" class="min-w-0">
+        <div ref="reference" class="min-w-0" @click.prevent="toggleOpen">
             <slot name="trigger" />
         </div>
 
@@ -109,8 +113,8 @@ const { floatingStyles } = useFloating(reference, floating, {
                 leave-to-class="transform opacity-0 scale-95">
                 <div
                     v-if="open"
-                    class="z-50"
                     ref="floating"
+                    class="z-50"
                     :style="floatingStyles"
                     @click="onContentClick">
                     <div