add set end time functionality to timetracker component

when enabled users are blocked from creating or editing new time entries that are overlapping with other time entries

.env.example

@@ -80,8 +80,7 @@ GOTENBERG_URL=http://gotenberg:3000
 # Local setup
 NGINX_HOST_NAME=solidtime.test
 NETWORK_NAME=reverse-proxy-docker-traefik_routing
-FORWARD_DB_PORT=5432
-FORWARD_WEB_PORT=8083
+FORWARD_DB_PORT=54329
 VITE_HOST_NAME=vite.solidtime.test
 VITE_APP_NAME="${APP_NAME}"
 #SAIL_XDEBUG_MODE=develop,debug,coverage

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,8 +1,11 @@
-<!--
-This project is early stage. The structure and APIs are still subject to change and not stable.
-Therefore, we do not currently accept any contributions, unless you are a member of the team.
+## What does this PR do?
 
-As soon as we feel comfortable enough that the application structure is stable enough, we will open up the project for contributions.
+<!-- Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
 
-We do accept contributions in the [documentation repository](https://github.com/solidtime-io/docs) f.e. to add new self-hosting guides.
--->
+- Fixes #XXXX (GitHub issue number)
+
+## Checklist (DO NOT REMOVE)
+
+- [ ] I read the [contributing guide](https://github.com/solidtime-io/solidtime/blob/main/CONTRIBUTING.md)
+- [ ] I signed the [Contributor License Agreement](https://cla-assistant.io/solidtime-io/solidtime).
+- [ ] I commented my code, particularly in hard-to-understand areas

.github/workflows/build-onpremise.yml

@@ -0,0 +1,216 @@
+on:
+  push:
+    branches:
+      - main
+      - develop
+    tags:
+      - '*'
+  pull_request:
+    paths:
+      - '.github/workflows/build-onpremise.yml'
+      - 'docker/prod/**'
+  workflow_dispatch:
+
+permissions:
+  packages: write
+  contents: read
+  attestations: write
+  id-token: write
+
+env:
+  DOCKER_REPO: registry.on-premise.solidtime.io/solidtime/solidtime
+
+name: Build - On Premise
+jobs:
+  build:
+    strategy:
+      matrix:
+        include:
+          - runs-on: "ubuntu-24.04-arm"
+            platform: "linux/arm64"
+          - runs-on: "ubuntu-24.04"
+            platform: "linux/amd64"
+    runs-on: ${{ matrix.runs-on }}
+    timeout-minutes: 90
+
+    steps:
+      - name: "Check out code"
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Required for WyriHaximus/github-action-get-previous-tag
+
+      - name: "Get build"
+        id: release-build
+        run: echo "build=$(git rev-parse --short=8 HEAD)" >> "$GITHUB_OUTPUT"
+
+      - name: "Get Previous tag (normal push)"
+        id: previoustag
+        if: ${{ !startsWith(github.ref, 'refs/tags/v') }}
+        uses: "WyriHaximus/github-action-get-previous-tag@v1"
+        with:
+          prefix: "v"
+
+      - name: "Get version"
+        id: release-version
+        run: |
+          if ${{ !startsWith(github.ref, 'refs/tags/v') }}; then
+            if ${{ startsWith(steps.previoustag.outputs.tag, 'v') }}; then
+              version=$(echo "${{ steps.previoustag.outputs.tag }}" | cut -c 2-)
+              echo "app_version=${version}" >> "$GITHUB_OUTPUT"
+            else
+              echo "ERROR: No previous tag found";
+              exit 1;
+            fi
+          else
+            version=$(echo "${{ github.ref }}" | cut -c 12-)
+            echo "app_version=${version}" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: "Copy .env template for production"
+        run: |
+          cp .env.production .env
+          rm .env.production .env.ci .env.example
+
+      - name: "Add version to .env"
+        run: sed -i 's/APP_VERSION=0.0.0/APP_VERSION=${{ steps.release-version.outputs.app_version }}/g' .env
+
+      - name: "Add build to .env"
+        run: sed -i 's/APP_BUILD=0/APP_BUILD=${{ steps.release-build.outputs.build }}/g' .env
+
+      - name: "Output .env"
+        run: cat .env
+
+      - name: "Setup PHP with PECL extension"
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.3'
+          extensions: mbstring, dom, fileinfo, pgsql
+
+      - name: "Install dependencies"
+        run: composer install --no-dev --no-ansi --no-interaction --prefer-dist --ignore-platform-reqs --classmap-authoritative
+        if: steps.cache-vendor.outputs.cache-hit != 'true' # Skip if cache hit
+
+      - name: "Use Node.js"
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - name: "Checkout invoicing extension"
+        uses: actions/checkout@v4
+        with:
+          repository: solidtime-io/extension-invoicing
+          path: extensions/Invoicing
+          ssh-key: ${{ secrets.SSH_PRIVATE_KEY_INVOICING_EXTENSION }}
+
+      - name: "Install composer dependencies in invoicing extension"
+        run: cd extensions/Invoicing && composer install --no-dev --no-ansi --no-interaction --prefer-dist --ignore-platform-reqs --classmap-authoritative
+
+      - name: "Install npm dependencies in invoicing extension"
+        run: cd extensions/Invoicing && npm ci
+
+      - name: "Activate invoicing extension"
+        run: php artisan module:enable Invoicing
+
+      - name: "Install npm dependencies"
+        run: npm ci
+
+      - name: "Build"
+        run: npm run build
+
+      - name: "Prepare"
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+
+      - name: "Docker meta"
+        id: "meta"
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ${{ env.DOCKER_REPO }}
+
+      - name: "Login to solidtime OnPremise Registry"
+        uses: docker/login-action@v3
+        with:
+          registry: registry.on-premise.solidtime.io
+          username: ${{ secrets.ONPREMISE_USERNAME }}
+          password: ${{ secrets.ONPREMISE_TOKEN }}
+
+      - name: "Set up QEMU"
+        uses: docker/setup-qemu-action@v3
+
+      - name: "Set up Docker Buildx"
+        uses: docker/setup-buildx-action@v3
+
+      - name: "Build and push by digest"
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: docker/prod/Dockerfile
+          build-args: |
+            DOCKER_FILES_BASE_PATH=docker/prod/
+          platforms: ${{ matrix.platform }}
+          labels: ${{ steps.meta.outputs.labels }}
+          outputs: type=image,"name=${{ env.DOCKER_REPO }}",push-by-digest=true,name-canonical=true,push=true
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: "Export digest"
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+
+      - name: "Upload digest"
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+    timeout-minutes: 90
+    needs:
+      - build
+    steps:
+      - name: "Download digests"
+        uses: actions/download-artifact@v4
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - name: "Login to solidtime OnPremise Registry"
+        uses: docker/login-action@v3
+        with:
+          registry: registry.on-premise.solidtime.io
+          username: ${{ secrets.ONPREMISE_USERNAME }}
+          password: ${{ secrets.ONPREMISE_TOKEN }}
+
+      - name: "Set up Docker Buildx"
+        uses: docker/setup-buildx-action@v3
+
+      - name: "Docker meta"
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ${{ env.DOCKER_REPO }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+
+      - name: "Create manifest list and push"
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf '${{ env.DOCKER_REPO }}@sha256:%s ' *)
+
+      - name: "Inspect image"
+        run: |
+          docker buildx imagetools inspect ${{ env.DOCKER_REPO }}:${{ steps.meta.outputs.version }}

.github/workflows/npm-format-check.yml

@@ -0,0 +1,23 @@
+name: NPM Format Check
+
+on: [push]
+
+jobs:
+  format-check:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - name: "Checkout code"
+        uses: actions/checkout@v4
+
+      - name: "Use Node.js"
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - name: "Install npm dependencies"
+        run: npm ci
+
+      - name: "Check code formatting"
+        run: npm run format:check 

.prettierignore

@@ -0,0 +1,27 @@
+# Ignore build outputs
+node_modules/
+vendor/
+storage/
+bootstrap/cache/
+public/build/
+public/hot/
+
+# Ignore lock files
+package-lock.json
+composer.lock
+
+# Ignore generated files
+*.min.js
+*.min.css
+
+# Ignore test results
+test-results/
+playwright-report/
+
+# Ignore IDE files
+.idea/
+.vscode/
+
+# Ignore OS files
+.DS_Store
+Thumbs.db 

.prettierrc.json

@@ -3,5 +3,6 @@
     "tabWidth": 4,
     "singleQuote": true,
     "bracketSameLine": true,
-    "quoteProps": "preserve"
+    "quoteProps": "preserve",
+    "printWidth": 100
 }

CONTRIBUTING.md

@@ -0,0 +1,81 @@
+# Contributing to solidtime
+
+Contributions are greatly apprecited, please make sure to read the rules and vision for solidtime before contributing. 
+
+## Rules
+
+### Issues for Bugs, Discussions for Feature requests
+
+In order to keep the issues of the repository clean we decided to only use them for bugs. Feature Requests and enhancement are handled in discussions. This also helps us to see which feature requests are popular as they can be upvoted. 
+
+### Only work on approved issues
+
+To respect your time and help us manage contributions effectively, please open an issue or start a discussion and wait for approval before submitting a pull request (PR). This does not apply to tiny fixes or changes however, please keep in mind that we might not merge PRs for various reasons. 
+
+### Contributor License Agreement
+
+You'll also notice that we’ve set up a [Contributor License Agreement (CLA)](https://cla-assistant.io/solidtime-io/solidtime), which must be signed before any PR can be merged. Don’t worry - the process is quick and only takes a few clicks.
+
+We want to be transparent about why we require the CLA and what it means for your contributions and the codebase. That’s why we’ve written a few paragraphs below outlining our plans and vision for solidtime in the **Vision** part of this document. 
+
+### Prevent Duplicate Work
+
+Before you submit a new PR, make sure that none exists already. If you plan to work on an issue, make sure to let us and others know by commenting on the issue/discussion. 
+
+### Give context
+
+Tell us what you thinking was behind the decisions you made while drafting the PR. Treat the PR itself as documentation for everyone who wants to go back and understand why certain decisions were made. 
+
+### Summarize your PR
+
+Please make sure to include a short summary at the top of your PR to make it easy for us to quickly check what the PR is about, without looking at the code changes. 
+
+### Use Github Keywords and Auto-Link Issues
+
+Use phrases like "Closes #123" or "Fixes #123" in the PR description to link the PR with the issue that you are adressing. 
+
+### Mention what you tested and how
+
+Explain how you tested and validated the implementation. 
+
+### Keep Naming consistent
+
+Look at existing code patterns and use naming conventions that already exist in the code base. 
+
+### Testing
+
+We have an exhaustive test-suite of PHPUnit (Backend) and Playwright (Frontend) testing. Whereever applicable please make sure to write add tests to the codebase. 
+
+### Linting & Formatting
+
+Make sure to run linting and formatting commands before you commit the changes. 
+
+For backend changes:
+
+```
+composer fix
+composer analyse
+```
+
+For frontend changes: 
+
+```
+npm run lint:fix
+npm run format
+```
+
+## Vision
+
+We started solidtime to provide an open infrastructure solution for time tracking—one that empowers teams and individuals to fully own their data, instead of depending on proprietary platforms. We believe infrastructure software should be open, accessible, and built to last. However, competing with established market leaders in this space requires long-term financial sustainability.
+
+solidtime is licensed under the AGPL, which we believe is the best available license to strike a balance between openness and financial viability. The AGPL gives us, as the copyright holders, certain exclusive rights that we plan to leverage to fund development. To ensure we retain those rights across the entire codebase, we've put a CLA in place that contributors must sign before submitting code.
+
+One of solidtime’s key advantages is that it's built to be self-hostable. This makes it a great solution for organizations like governments, healthcare providers, and enterprises that are required to keep data on their own infrastructure due to regulations or internal policies. These organizations may need custom licenses, integrations, or modifications that aren't suitable for the open-source version. To support them, we offer relicensed versions of solidtime along with support plans.
+
+We’ll also provide proprietary extensions for solidtime. These will be available to enterprise customers with support plans, but also to individual users or teams who don’t need support, at much more accessible price points. For companies running solidtime on their own infrastructure, this is the easiest way to support the project while gaining additional functionality. While we plan to make it easier to build custom extensions in the future, our current APIs are still highly experimental.
+
+Finally - and perhaps most importantly - we offer a hosted SaaS version called solidtime Cloud, for users who can’t or don’t want to run the software themselves. This version includes proprietary extensions, always runs the latest commit, and includes monitoring and billing features available exclusively on this hosted instance. We expect solidtime Cloud to play a critical role in funding the project long-term.
+
+Having full control over the source code’s licensing also gives us the ability to change the license of the main project in the future. That said, we have no plans to do so and would only consider it in extreme cases - for example, if a malicious actor were to directly compete with our hosted service in a way that threatens the sustainability of the project, the legal interpretation of AGPL changes in a way that would make it unreasonable to use for certain companies, or a new similar license gains wide-spread adoption. Regardless, solidtime will always remain free to self-host for individuals and companies who use it as part of their work, and all previous releases will remain licensed under AGPL.
+
+If you are using the open-source version of solidtime and want to support us, the best way to do so is to spread the word. 

README.md

@@ -35,10 +35,9 @@ If you have a **feature request**, please [**create a discussion**](https://gith
 
 ## Contributing
 
-This project is in a very early stage. The structure and APIs are still subject to change and not stable. 
-Therefore, we do not currently accept any contributions, unless you are a member of the team.
+Please open an issue or start a discussion and wait for approval before submitting a pull request. This does not apply to tiny fixes or changes however, please keep in mind that we might not merge PRs for various reasons. 
 
-As soon as we feel comfortable enough that the application structure is stable enough, we will open up the project for contributions.
+Please read the [CONTRIBUTING.md](./CONTRIBUTING.md) before sumbitting a Pull Request.
 
 We do accept contributions in the [documentation repository](https://github.com/solidtime-io/docs) f.e. to add new self-hosting guides.
 

app/Enums/TimeEntryAggregationType.php

@@ -20,6 +20,7 @@ enum TimeEntryAggregationType: string
     case Client = 'client';
     case Billable = 'billable';
     case Description = 'description';
+    case Tag = 'tag';
 
     public static function fromInterval(TimeEntryAggregationTypeInterval $timeEntryAggregationTypeInterval): TimeEntryAggregationType
     {

app/Exceptions/Api/OverlappingTimeEntryApiException.php

@@ -0,0 +1,10 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Exceptions\Api;
+
+class OverlappingTimeEntryApiException extends ApiException
+{
+    public const string KEY = 'overlapping_time_entry';
+}

app/Http/Controllers/Api/V1/ChartController.php

@@ -14,6 +14,8 @@ use Illuminate\Http\JsonResponse;
 class ChartController extends Controller
 {
     /**
+     * Get chart data for the weekly project overview.
+     *
      * @throws AuthorizationException
      *
      * @operationId weeklyProjectOverview
@@ -31,6 +33,8 @@ class ChartController extends Controller
     }
 
     /**
+     * Get chart data for the latest tasks.
+     *
      * @throws AuthorizationException
      *
      * @operationId latestTasks
@@ -48,6 +52,8 @@ class ChartController extends Controller
     }
 
     /**
+     * Get chart data for the last seven days.
+     *
      * @throws AuthorizationException
      *
      * @operationId lastSevenDays
@@ -65,6 +71,8 @@ class ChartController extends Controller
     }
 
     /**
+     * Get chart data for the latest team activity.
+     *
      * @throws AuthorizationException
      *
      * @operationId latestTeamActivity
@@ -81,6 +89,8 @@ class ChartController extends Controller
     }
 
     /**
+     * Get chart data for daily tracked hours.
+     *
      * @throws AuthorizationException
      *
      * @operationId dailyTrackedHours
@@ -98,6 +108,8 @@ class ChartController extends Controller
     }
 
     /**
+     * Get chart data for total weekly time.
+     *
      * @throws AuthorizationException
      *
      * @operationId totalWeeklyTime
@@ -115,6 +127,8 @@ class ChartController extends Controller
     }
 
     /**
+     * Get chart data for total weekly billable time.
+     *
      * @throws AuthorizationException
      *
      * @operationId totalWeeklyBillableTime
@@ -132,6 +146,8 @@ class ChartController extends Controller
     }
 
     /**
+     * Get chart data for total weekly billable amount.
+     *
      * @throws AuthorizationException
      *
      * @operationId totalWeeklyBillableAmount
@@ -154,6 +170,8 @@ class ChartController extends Controller
     }
 
     /**
+     * Get chart data for weekly history.
+     *
      * @throws AuthorizationException
      *
      * @operationId weeklyHistory

app/Http/Controllers/Api/V1/ClientController.php

@@ -38,11 +38,17 @@ class ClientController extends Controller
     public function index(Organization $organization, ClientIndexRequest $request): ClientCollection
     {
         $this->checkPermission($organization, 'clients:view');
+        $canViewAllClients = $this->hasPermission($organization, 'clients:view:all');
+        $user = $this->user();
 
         $clientsQuery = Client::query()
             ->whereBelongsTo($organization, 'organization')
             ->orderBy('created_at', 'desc');
 
+        if (! $canViewAllClients) {
+            $clientsQuery->visibleByEmployee($user);
+        }
+
         $filterArchived = $request->getFilterArchived();
         if ($filterArchived === 'true') {
             $clientsQuery->whereNotNull('archived_at');

app/Http/Controllers/Api/V1/OrganizationController.php

@@ -61,6 +61,9 @@ class OrganizationController extends Controller
         if ($request->getTimeFormat() !== null) {
             $organization->time_format = $request->getTimeFormat();
         }
+        if ($request->getPreventOverlappingTimeEntries() !== null) {
+            $organization->prevent_overlapping_time_entries = $request->getPreventOverlappingTimeEntries();
+        }
         $hasBillableRate = $request->has('billable_rate');
         if ($hasBillableRate) {
             $oldBillableRate = $organization->billable_rate;

app/Http/Controllers/Api/V1/TimeEntryController.php

@@ -7,6 +7,7 @@ namespace App\Http\Controllers\Api\V1;
 use App\Enums\ExportFormat;
 use App\Enums\Role;
 use App\Exceptions\Api\FeatureIsNotAvailableInFreePlanApiException;
+use App\Exceptions\Api\OverlappingTimeEntryApiException;
 use App\Exceptions\Api\PdfRendererIsNotConfiguredException;
 use App\Exceptions\Api\TimeEntryCanNotBeRestartedApiException;
 use App\Exceptions\Api\TimeEntryStillRunningApiException;
@@ -45,6 +46,7 @@ use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Http\File;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Resources\Json\JsonResource;
+use Illuminate\Support\Carbon;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Blade;
@@ -56,6 +58,43 @@ use Spatie\TemporaryDirectory\TemporaryDirectory;
 
 class TimeEntryController extends Controller
 {
+    private function assertNoOverlap(Organization $organization, Member $member, \Illuminate\Support\Carbon $start, ?\Illuminate\Support\Carbon $end, ?TimeEntry $exclude = null): void
+    {
+        if (! $organization->prevent_overlapping_time_entries) {
+            return;
+        }
+
+        $query = TimeEntry::query()
+            ->where('organization_id', $organization->getKey())
+            ->where('user_id', $member->user_id)
+            ->when($exclude !== null, function (Builder $q) use ($exclude): void {
+                $q->where('id', '!=', $exclude->getKey());
+            })
+            ->where(function (Builder $q) use ($start, $end): void {
+                $q->where(function (Builder $q2) use ($start): void {
+                    $q2->where('end', '>', $start)
+                        ->where('start', '<', $start);
+                });
+
+                if ($end !== null) {
+                    $q->orWhere(function (Builder $q4) use ($end): void {
+                        $q4->where('start', '<', $end)
+                            ->where('end', '>', $end);
+                    });
+                    // Check if the new entry completely surrounds an existing entry
+                    $q->orWhere(function (Builder $q6) use ($start, $end): void {
+                        $q6->where('start', '>=', $start)
+                            ->where('end', '<=', $end);
+                    });
+                }
+
+            });
+
+        if ($query->exists()) {
+            throw new OverlappingTimeEntryApiException;
+        }
+    }
+
     protected function checkPermission(Organization $organization, string $permission, ?TimeEntry $timeEntry = null): void
     {
         parent::checkPermission($organization, $permission);
@@ -549,17 +588,15 @@ class TimeEntryController extends Controller
             throw new TimeEntryStillRunningApiException;
         }
 
+        // Overlap check for create
+        $start = Carbon::parse($request->input('start'));
+        $end = $request->input('end') !== null ? Carbon::parse($request->input('end')) : null;
+        $this->assertNoOverlap($organization, $member, $start, $end);
+
         $project = $request->input('project_id') !== null ? Project::findOrFail((string) $request->input('project_id')) : null;
         $client = $project?->client;
         $task = $request->input('task_id') !== null ? $project->tasks()->findOrFail((string) $request->input('task_id')) : null;
 
-        if ($project !== null) {
-            RecalculateSpentTimeForProject::dispatch($project);
-        }
-        if ($task !== null) {
-            RecalculateSpentTimeForTask::dispatch($task);
-        }
-
         $timeEntry = new TimeEntry;
         $timeEntry->fill($request->validated());
         $timeEntry->client()->associate($client);
@@ -569,6 +606,13 @@ class TimeEntryController extends Controller
         $timeEntry->setComputedAttributeValue('billable_rate');
         $timeEntry->save();
 
+        if ($project !== null) {
+            RecalculateSpentTimeForProject::dispatch($project);
+        }
+        if ($task !== null) {
+            RecalculateSpentTimeForTask::dispatch($task);
+        }
+
         return new TimeEntryResource($timeEntry);
     }
 
@@ -593,6 +637,13 @@ class TimeEntryController extends Controller
             throw new TimeEntryCanNotBeRestartedApiException;
         }
 
+        // Overlap check for update (exclude current)
+        /** @var Member $effectiveMember */
+        $effectiveMember = $request->has('member_id') ? Member::query()->findOrFail($request->input('member_id')) : $timeEntry->member;
+        $effectiveStart = $request->has('start') ? Carbon::parse($request->input('start')) : $timeEntry->start;
+        $effectiveEnd = $request->has('end') ? ($request->input('end') !== null ? Carbon::parse($request->input('end')) : null) : $timeEntry->end;
+        $this->assertNoOverlap($organization, $effectiveMember, $effectiveStart, $effectiveEnd, $timeEntry);
+
         $oldProject = $timeEntry->project;
         $oldTask = $timeEntry->task;
 

app/Http/Middleware/HandleInertiaRequests.php

@@ -41,7 +41,8 @@ class HandleInertiaRequests extends Middleware
     {
         $hasBilling = Module::has('Billing') && Module::isEnabled('Billing');
         $hasInvoicing = Module::has('Invoicing') && Module::isEnabled('Invoicing');
-
+        $hasServices = Module::has('Services') && Module::isEnabled('Services');
+        
         /** @var BillingContract $billing */
         $billing = app(BillingContract::class);
 
@@ -50,6 +51,7 @@ class HandleInertiaRequests extends Middleware
         return array_merge(parent::share($request), [
             'has_billing_extension' => $hasBilling,
             'has_invoicing_extension' => $hasInvoicing,
+            'has_services_extension' => $hasServices,
             'billing' => $currentOrganization !== null ? [
                 'has_subscription' => $billing->hasSubscription($currentOrganization),
                 'has_trial' => $billing->hasTrial($currentOrganization),

app/Http/Requests/V1/Organization/OrganizationUpdateRequest.php

@@ -39,6 +39,9 @@ class OrganizationUpdateRequest extends BaseFormRequest
             'employees_can_see_billable_rates' => [
                 'boolean',
             ],
+            'prevent_overlapping_time_entries' => [
+                'boolean',
+            ],
             'number_format' => [
                 Rule::enum(NumberFormat::class),
             ],
@@ -98,4 +101,9 @@ class OrganizationUpdateRequest extends BaseFormRequest
     {
         return $this->has('employees_can_see_billable_rates') ? $this->boolean('employees_can_see_billable_rates') : null;
     }
+
+    public function getPreventOverlappingTimeEntries(): ?bool
+    {
+        return $this->has('prevent_overlapping_time_entries') ? $this->boolean('prevent_overlapping_time_entries') : null;
+    }
 }

app/Http/Requests/V1/TimeEntry/TimeEntryStoreRequest.php

@@ -79,7 +79,7 @@ class TimeEntryStoreRequest extends BaseFormRequest
             'description' => [
                 'nullable',
                 'string',
-                'max:500',
+                'max:5000',
             ],
             // List of tag IDs
             'tags' => [

app/Http/Requests/V1/TimeEntry/TimeEntryUpdateMultipleRequest.php

@@ -79,7 +79,7 @@ class TimeEntryUpdateMultipleRequest extends BaseFormRequest
             'changes.description' => [
                 'nullable',
                 'string',
-                'max:500',
+                'max:5000',
             ],
             // List of tag IDs
             'changes.tags' => [

app/Http/Requests/V1/TimeEntry/TimeEntryUpdateRequest.php

@@ -77,7 +77,7 @@ class TimeEntryUpdateRequest extends BaseFormRequest
             'description' => [
                 'nullable',
                 'string',
-                'max:500',
+                'max:5000',
             ],
             // List of tag IDs
             'tags' => [

app/Http/Resources/V1/Organization/OrganizationResource.php

@@ -53,6 +53,8 @@ class OrganizationResource extends BaseResource
             'billable_rate' => $this->showBillableRate ? $this->resource->billable_rate : null,
             /** @var bool $employees_can_see_billable_rates Can members of the organization with role "employee" see the billable rates */
             'employees_can_see_billable_rates' => $this->resource->employees_can_see_billable_rates,
+            /** @var bool $prevent_overlapping_time_entries Prevent creating overlapping time entries (only new entries) */
+            'prevent_overlapping_time_entries' => $this->resource->prevent_overlapping_time_entries,
             /** @var string $currency Currency code (ISO 4217) */
             'currency' => $this->resource->currency,
             /** @var string $currency_symbol Currency symbol */

app/Models/Client.php

@@ -7,6 +7,7 @@ namespace App\Models;
 use App\Models\Concerns\CustomAuditable;
 use App\Models\Concerns\HasUuids;
 use Database\Factories\ClientFactory;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
@@ -62,6 +63,18 @@ class Client extends Model implements AuditableContract
         return $this->hasMany(Project::class, 'client_id');
     }
 
+    /**
+     * @param  Builder<Client>  $builder
+     * @return Builder<Client>
+     */
+    public function scopeVisibleByEmployee(Builder $builder, User $user): Builder
+    {
+        return $builder->whereHas('projects', function (Builder $builder) use ($user): Builder {
+            /** @var Builder<Project> $builder */
+            return $builder->visibleByEmployee($user);
+        });
+    }
+
     /**
      * @return Attribute<bool, never>
      */

app/Models/Organization.php

@@ -70,6 +70,7 @@ class Organization extends JetstreamTeam implements AuditableContract
         'personal_team' => 'boolean',
         'currency' => 'string',
         'employees_can_see_billable_rates' => 'boolean',
+        'prevent_overlapping_time_entries' => 'boolean',
         'number_format' => NumberFormat::class,
         'currency_format' => CurrencyFormat::class,
         'date_format' => DateFormat::class,

app/Providers/JetstreamServiceProvider.php

@@ -109,6 +109,7 @@ class JetstreamServiceProvider extends ServiceProvider
             'tags:update',
             'tags:delete',
             'clients:view',
+            'clients:view:all',
             'clients:create',
             'clients:update',
             'clients:delete',
@@ -172,6 +173,7 @@ class JetstreamServiceProvider extends ServiceProvider
             'tags:update',
             'tags:delete',
             'clients:view',
+            'clients:view:all',
             'clients:create',
             'clients:update',
             'clients:delete',
@@ -232,6 +234,7 @@ class JetstreamServiceProvider extends ServiceProvider
             'tags:update',
             'tags:delete',
             'clients:view',
+            'clients:view:all',
             'clients:create',
             'clients:update',
             'clients:delete',
@@ -256,12 +259,13 @@ class JetstreamServiceProvider extends ServiceProvider
             'projects:view',
             'tags:view',
             'tasks:view',
+            'clients:view',
             'time-entries:view:own',
             'time-entries:create:own',
             'time-entries:update:own',
             'time-entries:delete:own',
             'organizations:view',
-        ])->description('Employees have the ability to read, create, and update their own time entries and they can see the projects that they are members of.');
+        ])->description('Employees have the ability to read, create, and update their own time entries, they can see the projects that they are members of and the clients they are assigned to.');
 
         Jetstream::role(Role::Placeholder->value, 'Placeholder', [
         ])->description('Placeholders are used for importing data. They cannot log in and have no permissions.');

app/Service/Import/Importers/ClockifyTimeEntriesImporter.php

@@ -112,7 +112,7 @@ class ClockifyTimeEntriesImporter extends DefaultImporter
                 $timeEntry->project_id = $projectId;
                 $timeEntry->client_id = $clientId;
                 $timeEntry->organization_id = $this->organization->id;
-                if (strlen($record['Description']) > 500) {
+                if (strlen($record['Description']) > 5000) {
                     throw new ImportException('Time entry description is too long');
                 }
                 $timeEntry->description = $record['Description'];

app/Service/Import/Importers/HarvestTimeEntriesImporter.php

@@ -107,7 +107,7 @@ class HarvestTimeEntriesImporter extends DefaultImporter
                 $timeEntry->project_id = $projectId;
                 $timeEntry->client_id = $clientId;
                 $timeEntry->organization_id = $this->organization->id;
-                if (strlen($record['Notes']) > 500) {
+                if (strlen($record['Notes']) > 5000) {
                     throw new ImportException('Time entry note is too long');
                 }
                 $timeEntry->description = $record['Notes'];

app/Service/Import/Importers/SolidtimeImporter.php

@@ -247,7 +247,7 @@ class SolidtimeImporter extends DefaultImporter
                 $timeEntry->project_id = $projectId;
                 $timeEntry->client_id = $clientId;
                 $timeEntry->organization_id = $this->organization->id;
-                if (strlen($timeEntryRow['description']) > 500) {
+                if (strlen($timeEntryRow['description']) > 5000) {
                     throw new ImportException('Time entry description is too long');
                 }
                 $timeEntry->description = $timeEntryRow['description'];

app/Service/TimeEntryAggregationService.php

@@ -10,6 +10,7 @@ use App\Enums\TimeEntryRoundingType;
 use App\Enums\Weekday;
 use App\Models\Client;
 use App\Models\Project;
+use App\Models\Tag;
 use App\Models\Task;
 use App\Models\TimeEntry;
 use App\Models\User;
@@ -17,6 +18,7 @@ use Carbon\CarbonTimeZone;
 use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Support\Carbon;
 use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Log;
 
 class TimeEntryAggregationService
@@ -45,9 +47,21 @@ class TimeEntryAggregationService
     public function getAggregatedTimeEntries(Builder $timeEntriesQuery, ?TimeEntryAggregationType $group1Type, ?TimeEntryAggregationType $group2Type, string $timezone, Weekday $startOfWeek, bool $fillGapsInTimeGroups, ?Carbon $start, ?Carbon $end, bool $showBillableRate, ?TimeEntryRoundingType $roundingType, ?int $roundingMinutes): array
     {
         $fillGapsInTimeGroupsIsPossible = $fillGapsInTimeGroups && $start !== null && $end !== null;
+        /** @var Builder<TimeEntry> $baseTotalsQuery */
+        $baseTotalsQuery = $timeEntriesQuery->clone();
         $group1Select = null;
         $group2Select = null;
         $groupBy = null;
+        // If any grouping is by tag, expand rows per tag and ensure a NULL row for entries without tags
+        if (($group1Type === TimeEntryAggregationType::Tag) || ($group2Type === TimeEntryAggregationType::Tag)) {
+            $timeEntriesQuery->crossJoin(DB::raw(
+                "LATERAL (\n".
+                "  SELECT jsonb_array_elements_text(coalesce(tags, '[]'::jsonb)) AS tag\n".
+                "  UNION ALL\n".
+                "  SELECT ''::text AS tag WHERE coalesce(jsonb_array_length(tags), 0) = 0\n".
+                ') AS tag(tag)'
+            ));
+        }
         if ($group1Type !== null) {
             $group1Select = $this->getGroupByQuery($group1Type, $timezone, $startOfWeek);
             $groupBy = ['group_1'];
@@ -84,6 +98,26 @@ class TimeEntryAggregationService
             $group1Response = [];
             $group1ResponseSum = 0;
             $group1ResponseCost = 0;
+            // If Tag is subgroup, prepare base totals per primary group without tag expansion
+            $baseTotalsPerGroup1Map = [];
+            if ($group2Type === TimeEntryAggregationType::Tag) {
+                $baseTotalsPerGroup1Query = $baseTotalsQuery->clone();
+                $baseTotalsPerGroup1 = $baseTotalsPerGroup1Query
+                    ->selectRaw(
+                        $group1Select.' as group_1,'.
+                        ' round(sum(extract(epoch from ('.$endRawSelect.' - '.$startRawSelect.')))) as aggregate,'.
+                        ' round(sum(extract(epoch from ('.$endRawSelect.' - '.$startRawSelect.')) * (coalesce(billable_rate, 0)::float/60/60))) as cost'
+                    )
+                    ->groupBy('group_1')
+                    ->get();
+                foreach ($baseTotalsPerGroup1 as $row) {
+                    /** @var object{group_1: mixed, aggregate: int|null, cost: int|null} $row */
+                    $baseTotalsPerGroup1Map[(string) ($row->group_1 ?? '')] = [
+                        'aggregate' => (int) ($row->aggregate ?? 0),
+                        'cost' => (int) ($row->cost ?? 0),
+                    ];
+                }
+            }
             foreach ($groupedAggregates as $group1 => $group1Aggregates) {
                 /** @var string|int $group1 */
                 $group2Response = [];
@@ -103,6 +137,14 @@ class TimeEntryAggregationService
                         $group2ResponseSum += (int) $aggregate->get(0)->aggregate;
                         $group2ResponseCost += (int) $aggregate->get(0)->cost;
                     }
+                    // Override primary group totals when Tag is subgroup to avoid double counting
+                    if ($group2Type === TimeEntryAggregationType::Tag) {
+                        $keyForMap = (string) $group1;
+                        if (array_key_exists($keyForMap, $baseTotalsPerGroup1Map)) {
+                            $group2ResponseSum = $baseTotalsPerGroup1Map[$keyForMap]['aggregate'];
+                            $group2ResponseCost = $baseTotalsPerGroup1Map[$keyForMap]['cost'];
+                        }
+                    }
                 } else {
                     /** @var Collection<int, object{aggregate: int, cost: int}> $group1Aggregates */
                     $group2ResponseSum = (int) $group1Aggregates->get(0)->aggregate;
@@ -121,6 +163,23 @@ class TimeEntryAggregationService
                 $group1ResponseCost += $group2ResponseCost;
             }
 
+            // If Tag is selected in any grouping, compute overall totals from base (non-tag-expanded) query to avoid double counting
+            $hasTagGrouping = ($group1Type === TimeEntryAggregationType::Tag) || ($group2Type === TimeEntryAggregationType::Tag);
+            if ($hasTagGrouping) {
+                // Reset selects and ordering on the cloned base query
+                $baseTotals = $baseTotalsQuery
+                    ->selectRaw(
+                        ' round(sum(extract(epoch from ('.$endRawSelect.' - '.$startRawSelect.')))) as aggregate,'.
+                        ' round(sum(extract(epoch from ('.$endRawSelect.' - '.$startRawSelect.')) * (coalesce(billable_rate, 0)::float/60/60))) as cost'
+                    )
+                    ->first();
+                if ($baseTotals !== null) {
+                    /** @var object{aggregate: int|null, cost: int|null} $baseTotals */
+                    $group1ResponseSum = (int) ($baseTotals->aggregate ?? 0);
+                    $group1ResponseCost = (int) ($baseTotals->cost ?? 0);
+                }
+            }
+
             if ($fillGapsInTimeGroupsIsPossible) {
                 $group1Response = $this->fillGapsInTimeGroups($group1Response, $group1Type, $group2Type, $timezone, $startOfWeek, $start, $end);
             }
@@ -294,6 +353,17 @@ class TimeEntryAggregationService
                     'color' => null,
                 ];
             }
+        } elseif ($type === TimeEntryAggregationType::Tag) {
+            $tags = Tag::query()
+                ->whereIn('id', $keys)
+                ->select('id', 'name')
+                ->get();
+            foreach ($tags as $tag) {
+                $descriptorMap[$tag->id] = [
+                    'description' => $tag->name,
+                    'color' => null,
+                ];
+            }
         }
 
         return $descriptorMap;
@@ -436,6 +506,8 @@ class TimeEntryAggregationService
             return 'billable';
         } elseif ($group === TimeEntryAggregationType::Description) {
             return 'description';
+        } elseif ($group === TimeEntryAggregationType::Tag) {
+            return 'tag';
         }
     }
 

database/migrations/2025_10_02_000001_add_prevent_overlapping_time_entries_to_organizations_table.php

@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('organizations', function (Blueprint $table): void {
+            $table->boolean('prevent_overlapping_time_entries')->default(false)->after('employees_can_see_billable_rates');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('organizations', function (Blueprint $table): void {
+            $table->dropColumn('prevent_overlapping_time_entries');
+        });
+    }
+};

database/migrations/2025_10_16_000001_extend_time_entry_description.php

@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('time_entries', function (Blueprint $table): void {
+            $table->string('description', 5000)->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('time_entries', function (Blueprint $table): void {
+            $table->string('description', 500)->change();
+        });
+    }
+};

database/schema/pgsql_test-schema.sql

@@ -435,7 +435,7 @@ CREATE TABLE public.tasks (
 
 CREATE TABLE public.time_entries (
     id uuid NOT NULL,
-    description character varying(500) NOT NULL,
+    description character varying(5000) NOT NULL,
     start timestamp(0) without time zone NOT NULL,
     "end" timestamp(0) without time zone,
     billable_rate integer,

docker-compose.yml

@@ -5,8 +5,6 @@ services:
             dockerfile: Dockerfile
             args:
                 WWWGROUP: '${WWWGROUP}'
-        ports:
-            - '${FORWARD_WEB_PORT:-8083}:80'
         image: sail-8.3/app
         labels:
             - "traefik.enable=true"

docker/local/minio/create_bucket.sh

@@ -2,7 +2,7 @@
 
 # Source: https://helgesver.re/articles/laravel-sail-create-minio-bucket-automatically
 
-/usr/bin/mc config host add local ${S3_ENDPOINT} ${S3_ACCESS_KEY_ID} ${S3_SECRET_ACCESS_KEY};
+/usr/bin/mc alias set local ${S3_ENDPOINT} ${S3_ACCESS_KEY_ID} ${S3_SECRET_ACCESS_KEY};
 /usr/bin/mc rm -r --force local/${S3_BUCKET};
 /usr/bin/mc mb --ignore-existing local/${S3_BUCKET};
 /usr/bin/mc anonymous set public local/${S3_BUCKET};

docker/prod/Dockerfile

@@ -16,7 +16,7 @@ RUN CGO_ENABLED=1 \
     XCADDY_GO_BUILD_FLAGS="-ldflags='-w -s' -tags=nobadger,nomysql,nopgx" \
     CGO_CFLAGS=$(php-config --includes) \
     CGO_LDFLAGS="$(php-config --ldflags) $(php-config --libs)" \
-    xcaddy build \
+    xcaddy build v2.10.0 \
         --output /usr/local/bin/frankenphp \
         --with github.com/dunglas/frankenphp=./ \
         --with github.com/dunglas/frankenphp/caddy=./caddy/ \

e2e/clients.spec.ts

@@ -7,11 +7,8 @@ async function goToProjectsOverview(page: Page) {
 }
 
 // Create new project via modal
-test('test that creating and deleting a new client via the modal works', async ({
-    page,
-}) => {
-    const newClientName =
-        'New Project ' + Math.floor(1 + Math.random() * 10000);
+test('test that creating and deleting a new client via the modal works', async ({ page }) => {
+    const newClientName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
     await goToProjectsOverview(page);
     await page.getByRole('button', { name: 'Create Client' }).click();
     await page.getByPlaceholder('Client Name').fill(newClientName);
@@ -28,13 +25,9 @@ test('test that creating and deleting a new client via the modal works', async (
     ]);
 
     await expect(page.getByTestId('client_table')).toContainText(newClientName);
-    const moreButton = page.locator(
-        "[aria-label='Actions for Client " + newClientName + "']"
-    );
+    const moreButton = page.locator("[aria-label='Actions for Client " + newClientName + "']");
     moreButton.click();
-    const deleteButton = page.locator(
-        "[aria-label='Delete Client " + newClientName + "']"
-    );
+    const deleteButton = page.locator("[aria-label='Delete Client " + newClientName + "']");
 
     await Promise.all([
         deleteButton.click(),
@@ -45,9 +38,7 @@ test('test that creating and deleting a new client via the modal works', async (
                 response.status() === 204
         ),
     ]);
-    await expect(page.getByTestId('client_table')).not.toContainText(
-        newClientName
-    );
+    await expect(page.getByTestId('client_table')).not.toContainText(newClientName);
 });
 
 test('test that archiving and unarchiving clients works', async ({ page }) => {

e2e/members.spec.ts

@@ -22,12 +22,8 @@ test('test that new manager can be invited', async ({ page }) => {
     await page.getByLabel('Email').fill(`new+${editorId}@editor.test`);
     await page.getByRole('button', { name: 'Manager' }).click();
     await Promise.all([
-        page
-            .getByRole('button', { name: 'Invite Member', exact: true })
-            .click(),
-        expect(page.getByRole('main')).toContainText(
-            `new+${editorId}@editor.test`
-        ),
+        page.getByRole('button', { name: 'Invite Member', exact: true }).click(),
+        expect(page.getByRole('main')).toContainText(`new+${editorId}@editor.test`),
     ]);
 });
 
@@ -38,12 +34,8 @@ test('test that new employee can be invited', async ({ page }) => {
     await page.getByLabel('Email').fill(`new+${editorId}@editor.test`);
     await page.getByRole('button', { name: 'Employee' }).click();
     await Promise.all([
-        page
-            .getByRole('button', { name: 'Invite Member', exact: true })
-            .click(),
-        await expect(page.getByRole('main')).toContainText(
-            `new+${editorId}@editor.test`
-        ),
+        page.getByRole('button', { name: 'Invite Member', exact: true }).click(),
+        await expect(page.getByRole('main')).toContainText(`new+${editorId}@editor.test`),
     ]);
 });
 
@@ -54,12 +46,8 @@ test('test that new admin can be invited', async ({ page }) => {
     await page.getByLabel('Email').fill(`new+${adminId}@admin.test`);
     await page.getByRole('button', { name: 'Administrator' }).click();
     await Promise.all([
-        page
-            .getByRole('button', { name: 'Invite Member', exact: true })
-            .click(),
-        expect(page.getByRole('main')).toContainText(
-            `new+${adminId}@admin.test`
-        ),
+        page.getByRole('button', { name: 'Invite Member', exact: true }).click(),
+        expect(page.getByRole('main')).toContainText(`new+${adminId}@admin.test`),
     ]);
 });
 test('test that error shows if no role is selected', async ({ page }) => {
@@ -69,9 +57,7 @@ test('test that error shows if no role is selected', async ({ page }) => {
 
     await page.getByLabel('Email').fill(`new+${noRoleId}@norole.test`);
     await Promise.all([
-        page
-            .getByRole('button', { name: 'Invite Member', exact: true })
-            .click(),
+        page.getByRole('button', { name: 'Invite Member', exact: true }).click(),
         expect(page.getByText('Please select a role')).toBeVisible(),
     ]);
 });
@@ -85,9 +71,7 @@ test('test that organization billable rate can be updated with all existing time
     await page.getByRole('menuitem').getByText('Edit').click();
     await page.getByText('Organization Default Rate').click();
     await page.getByText('Custom Rate').click();
-    await page
-        .getByPlaceholder('Billable Rate')
-        .fill(newBillableRate.toString());
+    await page.getByPlaceholder('Billable Rate').fill(newBillableRate.toString());
     await page.getByRole('button', { name: 'Update Member' }).click();
 
     await Promise.all([
@@ -103,8 +87,7 @@ test('test that organization billable rate can be updated with all existing time
                 response.url().includes('/organizations/') &&
                 response.request().method() === 'PUT' &&
                 response.status() === 200 &&
-                (await response.json()).data.billable_rate ===
-                    newBillableRate * 100
+                (await response.json()).data.billable_rate === newBillableRate * 100
         ),
     ]);
 });

e2e/organization.spec.ts

@@ -9,7 +9,10 @@ async function goToOrganizationSettings(page) {
 
 async function createTimeEntry(page, duration: string) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/time');
-    await page.getByRole('button', { name: 'Manual time entry' }).click();
+
+    // Open the dropdown menu and click "Manual time entry"
+    await page.getByRole('button', { name: 'Time entry actions' }).click();
+    await page.getByRole('menuitem', { name: 'Manual time entry' }).click();
 
     // Fill in the time entry details
     await page.getByTestId('time_entry_description').fill('Test time entry');
@@ -35,9 +38,9 @@ test('test that organization name can be updated', async ({ page }) => {
     await page.getByLabel('Organization Name').fill('NEW ORG NAME');
     await page.getByLabel('Organization Name').press('Enter');
     await page.getByLabel('Organization Name').press('Meta+r');
-    await expect(
-        page.locator('[data-testid="organization_switcher"]:visible')
-    ).toContainText('NEW ORG NAME');
+    await expect(page.locator('[data-testid="organization_switcher"]:visible')).toContainText(
+        'NEW ORG NAME'
+    );
 });
 
 test('test that organization billable rate can be updated with all existing time entries', async ({
@@ -46,9 +49,7 @@ test('test that organization billable rate can be updated with all existing time
     await goToOrganizationSettings(page);
     const newBillableRate = Math.round(Math.random() * 10000);
     await page.getByLabel('Organization Billable Rate').click();
-    await page
-        .getByLabel('Organization Billable Rate')
-        .fill(newBillableRate.toString());
+    await page.getByLabel('Organization Billable Rate').fill(newBillableRate.toString());
     await page
         .locator('form')
         .filter({ hasText: 'Organization Billable' })
@@ -56,9 +57,7 @@ test('test that organization billable rate can be updated with all existing time
         .click();
 
     await Promise.all([
-        page
-            .getByRole('button', { name: 'Yes, update existing time entries' })
-            .click(),
+        page.getByRole('button', { name: 'Yes, update existing time entries' }).click(),
         page.waitForRequest(
             async (request) =>
                 request.url().includes('/organizations/') &&
@@ -70,15 +69,12 @@ test('test that organization billable rate can be updated with all existing time
                 response.url().includes('/organizations/') &&
                 response.request().method() === 'PUT' &&
                 response.status() === 200 &&
-                (await response.json()).data.billable_rate ===
-                    newBillableRate * 100
+                (await response.json()).data.billable_rate === newBillableRate * 100
         ),
     ]);
 });
 
-test('test that organization format settings can be updated', async ({
-    page,
-}) => {
+test('test that organization format settings can be updated', async ({ page }) => {
     await goToOrganizationSettings(page);
 
     // Test number format
@@ -113,8 +109,7 @@ test('test that organization format settings can be updated', async ({
                 response.url().includes('/organizations/') &&
                 response.request().method() === 'PUT' &&
                 response.status() === 200 &&
-                (await response.json()).data.currency_format ===
-                    'iso-code-after-with-space'
+                (await response.json()).data.currency_format === 'iso-code-after-with-space'
         ),
     ]);
 
@@ -132,8 +127,7 @@ test('test that organization format settings can be updated', async ({
                 response.url().includes('/organizations/') &&
                 response.request().method() === 'PUT' &&
                 response.status() === 200 &&
-                (await response.json()).data.date_format ===
-                    'slash-separated-dd-mm-yyyy'
+                (await response.json()).data.date_format === 'slash-separated-dd-mm-yyyy'
         ),
     ]);
 
@@ -169,19 +163,14 @@ test('test that organization format settings can be updated', async ({
                 response.url().includes('/organizations/') &&
                 response.request().method() === 'PUT' &&
                 response.status() === 200 &&
-                (await response.json()).data.interval_format ===
-                    'hours-minutes-colon-separated'
+                (await response.json()).data.interval_format === 'hours-minutes-colon-separated'
         ),
     ]);
 });
 
-test('test that format settings are reflected in the dashboard', async ({
-    page,
-}) => {
+test('test that format settings are reflected in the dashboard', async ({ page }) => {
     // check that 0h 00min is displayed
-    await expect(
-        page.getByText('0h 00min', { exact: true }).nth(0)
-    ).toBeVisible();
+    await expect(page.getByText('0h 00min', { exact: true }).nth(0)).toBeVisible();
 
     // First set the format settings
     await goToOrganizationSettings(page);
@@ -213,10 +202,8 @@ test('test that format settings are reflected in the dashboard', async ({
                 response.url().includes('/organizations/') &&
                 response.request().method() === 'PUT' &&
                 response.status() === 200 &&
-                (await response.json()).data.interval_format ===
-                    'hours-minutes-colon-separated' &&
-                (await response.json()).data.currency_format ===
-                    'symbol-after' &&
+                (await response.json()).data.interval_format === 'hours-minutes-colon-separated' &&
+                (await response.json()).data.currency_format === 'symbol-after' &&
                 (await response.json()).data.number_format === 'comma-point'
         ),
     ]);
@@ -232,16 +219,12 @@ test('test that format settings are reflected in the dashboard', async ({
     // check that 00:00 is displayed
     await expect(page.getByText('0:00', { exact: true }).nth(0)).toBeVisible();
     // check that 0h 00min is not displayed
-    await expect(
-        page.getByText('0h 00min', { exact: true }).nth(0)
-    ).not.toBeVisible();
+    await expect(page.getByText('0h 00min', { exact: true }).nth(0)).not.toBeVisible();
 
     // check that the current date is displayed in the dd/mm/yyyy format on the time page
     await page.goto(PLAYWRIGHT_BASE_URL + '/time');
     await expect(
-        page
-            .getByText(new Date().toLocaleDateString('en-GB'), { exact: true })
-            .nth(0)
+        page.getByText(new Date().toLocaleDateString('en-GB'), { exact: true }).nth(0)
     ).toBeVisible();
 });
 

e2e/profile.spec.ts

@@ -1,34 +1,32 @@
-import {test, expect} from '../playwright/fixtures';
-import {PLAYWRIGHT_BASE_URL} from '../playwright/config';
+import { test, expect } from '../playwright/fixtures';
+import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 
-test('test that user name can be updated', async ({page}) => {
+test('test that user name can be updated', async ({ page }) => {
     await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
-    await page.getByLabel('Name', {exact: true} ).fill('NEW NAME');
+    await page.getByLabel('Name', { exact: true }).fill('NEW NAME');
     await Promise.all([
-        page.getByRole('button', {name: 'Save'}).first().click(),
+        page.getByRole('button', { name: 'Save' }).first().click(),
         page.waitForResponse('**/user/profile-information'),
     ]);
     await page.reload();
-    await expect(page.getByLabel('Name', {exact: true})).toHaveValue('NEW NAME');
+    await expect(page.getByLabel('Name', { exact: true })).toHaveValue('NEW NAME');
 });
 
-test.skip('test that user email can be updated', async ({page}) => {
+test.skip('test that user email can be updated', async ({ page }) => {
     // this does not work because of email verification currently
     await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
     const emailId = Math.round(Math.random() * 10000);
     await page.getByLabel('Email').fill(`newemail+${emailId}@test.com`);
-    await page.getByRole('button', {name: 'Save'}).first().click();
+    await page.getByRole('button', { name: 'Save' }).first().click();
     await page.reload();
-    await expect(page.getByLabel('Email')).toHaveValue(
-        `newemail+${emailId}@test.com`
-    );
+    await expect(page.getByLabel('Email')).toHaveValue(`newemail+${emailId}@test.com`);
 });
 
 async function createNewApiToken(page) {
     await page.getByLabel('API Key Name').fill('NEW API KEY');
     await Promise.all([
-        page.getByRole('button', {name: 'Create API Key'}).click(),
-        page.waitForResponse('**/users/me/api-tokens')
+        page.getByRole('button', { name: 'Create API Key' }).click(),
+        page.waitForResponse('**/users/me/api-tokens'),
     ]);
 
     await expect(page.locator('body')).toContainText('API Token created successfully');
@@ -36,34 +34,37 @@ async function createNewApiToken(page) {
     await expect(page.locator('body')).toContainText('NEW API KEY');
 }
 
-test('test that user can create an API key', async ({page}) => {
+test('test that user can create an API key', async ({ page }) => {
     await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
     await createNewApiToken(page);
 });
 
-test('test that user can delete an API key', async ({page}) => {
+test('test that user can delete an API key', async ({ page }) => {
     await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
     await createNewApiToken(page);
     page.getByLabel('Delete API Token NEW API KEY').click();
-    await expect(page.getByRole('dialog')).toContainText('Are you sure you would like to delete this API token?');
+    await expect(page.getByRole('dialog')).toContainText(
+        'Are you sure you would like to delete this API token?'
+    );
     await Promise.all([
-        page.getByRole('dialog').getByRole('button', {name: 'Delete'}).click(),
-        page.waitForResponse('**/users/me/api-tokens')
+        page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click(),
+        page.waitForResponse('**/users/me/api-tokens'),
     ]);
     await expect(page.locator('body')).not.toContainText('NEW API KEY');
 });
 
-
-test('test that user can revoke an API key', async ({page}) => {
+test('test that user can revoke an API key', async ({ page }) => {
     await page.goto(PLAYWRIGHT_BASE_URL + '/user/profile');
     await createNewApiToken(page);
     page.getByLabel('Revoke API Token NEW API KEY').click();
-    await expect(page.getByRole('dialog')).toContainText('Are you sure you would like to revoke this API token?');
+    await expect(page.getByRole('dialog')).toContainText(
+        'Are you sure you would like to revoke this API token?'
+    );
     await Promise.all([
-        page.getByRole('dialog').getByRole('button', {name: 'Revoke'}).click(),
-        page.waitForResponse('**/users/me/api-tokens')
+        page.getByRole('dialog').getByRole('button', { name: 'Revoke' }).click(),
+        page.waitForResponse('**/users/me/api-tokens'),
     ]);
-    await expect(page.getByRole('button', {name: 'Revoke'})).toBeHidden();
+    await expect(page.getByRole('button', { name: 'Revoke' })).toBeHidden();
     await expect(page.locator('body')).toContainText('NEW API KEY');
     await expect(page.locator('body')).toContainText('Revoked');
 });

e2e/project-members.spec.ts

@@ -12,8 +12,7 @@ async function goToProjectsOverview(page: Page) {
 test('test that updating project member billable rate works for existing time entries', async ({
     page,
 }) => {
-    const newProjectName =
-        'New Project ' + Math.floor(1 + Math.random() * 10000);
+    const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
     const newBillableRate = Math.round(Math.random() * 10000);
     await goToProjectsOverview(page);
     await page.getByRole('button', { name: 'Create Project' }).click();
@@ -36,9 +35,7 @@ test('test that updating project member billable rate works for existing time en
         .first()
         .getByRole('button')
         .click();
-    await page
-        .getByRole('menuitem', { name: 'Edit Project Member' })
-        .click();
+    await page.getByRole('menuitem', { name: 'Edit Project Member' }).click();
     await page.getByLabel('Billable Rate').fill(newBillableRate.toString());
     await page.getByRole('button', { name: 'Update Project Member' }).click();
 
@@ -55,8 +52,7 @@ test('test that updating project member billable rate works for existing time en
                 response.url().includes('/project-members/') &&
                 response.request().method() === 'PUT' &&
                 response.status() === 200 &&
-                (await response.json()).data.billable_rate ===
-                    newBillableRate * 100
+                (await response.json()).data.billable_rate === newBillableRate * 100
         ),
     ]);
     await expect(

e2e/projects.spec.ts

@@ -9,11 +9,8 @@ async function goToProjectsOverview(page: Page) {
 }
 
 // Create new project via modal
-test('test that creating and deleting a new project via the modal works', async ({
-    page,
-}) => {
-    const newProjectName =
-        'New Project ' + Math.floor(1 + Math.random() * 10000);
+test('test that creating and deleting a new project via the modal works', async ({ page }) => {
+    const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
     await goToProjectsOverview(page);
     await page.getByRole('button', { name: 'Create Project' }).click();
     await page.getByLabel('Project Name').fill(newProjectName);
@@ -31,16 +28,10 @@ test('test that creating and deleting a new project via the modal works', async
         ),
     ]);
 
-    await expect(page.getByTestId('project_table')).toContainText(
-        newProjectName
-    );
-    const moreButton = page.locator(
-        "[aria-label='Actions for Project " + newProjectName + "']"
-    );
+    await expect(page.getByTestId('project_table')).toContainText(newProjectName);
+    const moreButton = page.locator("[aria-label='Actions for Project " + newProjectName + "']");
     moreButton.click();
-    const deleteButton = page.locator(
-        "[aria-label='Delete Project " + newProjectName + "']"
-    );
+    const deleteButton = page.locator("[aria-label='Delete Project " + newProjectName + "']");
 
     await Promise.all([
         deleteButton.click(),
@@ -51,14 +42,11 @@ test('test that creating and deleting a new project via the modal works', async
                 response.status() === 204
         ),
     ]);
-    await expect(page.getByTestId('project_table')).not.toContainText(
-        newProjectName
-    );
+    await expect(page.getByTestId('project_table')).not.toContainText(newProjectName);
 });
 
 test('test that archiving and unarchiving projects works', async ({ page }) => {
-    const newProjectName =
-        'New Project ' + Math.floor(1 + Math.random() * 10000);
+    const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
     await goToProjectsOverview(page);
     await page.getByRole('button', { name: 'Create Project' }).click();
     await page.getByLabel('Project Name').fill(newProjectName);
@@ -87,11 +75,8 @@ test('test that archiving and unarchiving projects works', async ({ page }) => {
     ]);
 });
 
-test('test that updating billable rate works with existing time entries', async ({
-    page,
-}) => {
-    const newProjectName =
-        'New Project ' + Math.floor(1 + Math.random() * 10000);
+test('test that updating billable rate works with existing time entries', async ({ page }) => {
+    const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
     const newBillableRate = Math.round(Math.random() * 10000);
     await goToProjectsOverview(page);
     await page.getByRole('button', { name: 'Create Project' }).click();
@@ -104,15 +89,11 @@ test('test that updating billable rate works with existing time entries', async
     await page.getByRole('menuitem').getByText('Edit').first().click();
     await page.getByText('Non-Billable').click();
     await page.getByText('Custom Rate').click();
-    await page
-        .getByPlaceholder('Billable Rate')
-        .fill(newBillableRate.toString());
+    await page.getByPlaceholder('Billable Rate').fill(newBillableRate.toString());
     await page.getByRole('button', { name: 'Update Project' }).click();
 
     await Promise.all([
-        page
-        .locator('button').filter({ hasText: 'Yes, update existing time' })
-        .click(),    
+        page.locator('button').filter({ hasText: 'Yes, update existing time' }).click(),
         page.waitForRequest(
             async (request) =>
                 request.url().includes('/projects/') &&
@@ -124,8 +105,7 @@ test('test that updating billable rate works with existing time entries', async
                 response.url().includes('/projects/') &&
                 response.request().method() === 'PUT' &&
                 response.status() === 200 &&
-                (await response.json()).data.billable_rate ===
-                    newBillableRate * 100
+                (await response.json()).data.billable_rate === newBillableRate * 100
         ),
     ]);
     await expect(

e2e/reporting.spec.ts

@@ -2,8 +2,6 @@ import { expect, Page } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 import { test } from '../playwright/fixtures';
 
-
-
 async function goToTimeOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/time');
 }
@@ -28,10 +26,16 @@ async function createTimeEntryWithProject(page: Page, projectName: string, durat
 
     // Then create the time entry
     await goToTimeOverview(page);
-    await page.getByRole('button', { name: 'Manual time entry' }).click();
+
+    // Open the dropdown menu and click "Manual time entry"
+    await page.getByRole('button', { name: 'Time entry actions' }).click();
+    await page.getByRole('menuitem', { name: 'Manual time entry' }).click();
 
     // Fill in the time entry details
-    await page.getByRole('dialog').getByRole('textbox', { name: 'Description' }).fill(`Time entry for ${projectName}`);
+    await page
+        .getByRole('dialog')
+        .getByRole('textbox', { name: 'Description' })
+        .fill(`Time entry for ${projectName}`);
 
     await page.getByRole('button', { name: 'No Project' }).click();
     await page.getByText(projectName).click();
@@ -43,16 +47,24 @@ async function createTimeEntryWithProject(page: Page, projectName: string, durat
     // Submit the time entry
     await Promise.all([
         page.getByRole('button', { name: 'Create Time Entry' }).click(),
-        page.waitForResponse(response => response.url().includes('/time-entries') && response.status() === 201)
+        page.waitForResponse(
+            (response) => response.url().includes('/time-entries') && response.status() === 201
+        ),
     ]);
 }
 
 async function createTimeEntryWithTag(page: Page, tagName: string, duration: string) {
     await goToTimeOverview(page);
-    await page.getByRole('button', { name: 'Manual time entry' }).click();
+
+    // Open the dropdown menu and click "Manual time entry"
+    await page.getByRole('button', { name: 'Time entry actions' }).click();
+    await page.getByRole('menuitem', { name: 'Manual time entry' }).click();
 
     // Fill in the time entry details
-    await page.getByRole('dialog').getByRole('textbox', { name: 'Description' }).fill(`Time entry with tag ${tagName}`);
+    await page
+        .getByRole('dialog')
+        .getByRole('textbox', { name: 'Description' })
+        .fill(`Time entry with tag ${tagName}`);
 
     // Add tag
     await page.getByRole('button', { name: 'Tags' }).click();
@@ -69,12 +81,22 @@ async function createTimeEntryWithTag(page: Page, tagName: string, duration: str
     await page.getByRole('button', { name: 'Create Time Entry' }).click();
 }
 
-async function createTimeEntryWithBillableStatus(page: Page, isBillable: boolean, duration: string) {
+async function createTimeEntryWithBillableStatus(
+    page: Page,
+    isBillable: boolean,
+    duration: string
+) {
     await goToTimeOverview(page);
-    await page.getByRole('button', { name: 'Manual time entry' }).click();
+
+    // Open the dropdown menu and click "Manual time entry"
+    await page.getByRole('button', { name: 'Time entry actions' }).click();
+    await page.getByRole('menuitem', { name: 'Manual time entry' }).click();
 
     // Fill in the time entry details
-    await page.getByRole('dialog').getByRole('textbox', { name: 'Description' }).fill(`Time entry ${isBillable ? 'billable' : 'non-billable'}`);
+    await page
+        .getByRole('dialog')
+        .getByRole('textbox', { name: 'Description' })
+        .fill(`Time entry ${isBillable ? 'billable' : 'non-billable'}`);
 
     // Set billable status
     await page.getByRole('button', { name: 'Non-Billable' }).click();
@@ -109,7 +131,10 @@ test('test that project filtering works in reporting', async ({ page }) => {
         // escape
         page.keyboard.press('Escape'),
         // wait for API request to finish
-        page.waitForResponse(response => response.url().includes('/time-entries/aggregate') && response.status() === 200)
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries/aggregate') && response.status() === 200
+        ),
     ]);
     await page.waitForLoadState('networkidle');
 
@@ -138,7 +163,10 @@ test('test that tag filtering works in reporting', async ({ page }) => {
         // escape
         page.keyboard.press('Escape'),
         // wait for API request to finish
-        page.waitForResponse(response => response.url().includes('/time-entries/aggregate') && response.status() === 200)
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries/aggregate') && response.status() === 200
+        ),
     ]);
 
     // Verify only time entries with tag1 are shown
@@ -160,14 +188,16 @@ test('test that billable status filtering works in reporting', async ({ page })
         // escape
         page.keyboard.press('Escape'),
         // wait for API request to finish
-        page.waitForResponse(response => response.url().includes('/time-entries/aggregate') && response.status() === 200)
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries/aggregate') && response.status() === 200
+        ),
     ]);
     await page.waitForLoadState('networkidle');
 
     await expect(page.getByTestId('reporting_view').getByText('1h 00min').first()).toBeVisible();
 });
 
-
 test('test that detailed view shows time entries correctly', async ({ page }) => {
     const projectName = 'Detailed View Project ' + Math.floor(Math.random() * 10000);
 

e2e/tags.spec.ts

@@ -7,9 +7,7 @@ async function goToTagsOverview(page: Page) {
 }
 
 // Create new project via modal
-test('test that creating and deleting a new client via the modal works', async ({
-    page,
-}) => {
+test('test that creating and deleting a new client via the modal works', async ({ page }) => {
     const newTagName = 'New Tag ' + Math.floor(1 + Math.random() * 10000);
     await goToTagsOverview(page);
     await page.getByRole('button', { name: 'Create Tag' }).click();
@@ -27,13 +25,9 @@ test('test that creating and deleting a new client via the modal works', async (
     ]);
 
     await expect(page.getByTestId('tag_table')).toContainText(newTagName);
-    const moreButton = page.locator(
-        "[aria-label='Actions for Tag " + newTagName + "']"
-    );
+    const moreButton = page.locator("[aria-label='Actions for Tag " + newTagName + "']");
     moreButton.click();
-    const deleteButton = page.locator(
-        "[aria-label='Delete Tag " + newTagName + "']"
-    );
+    const deleteButton = page.locator("[aria-label='Delete Tag " + newTagName + "']");
 
     await Promise.all([
         deleteButton.click(),

e2e/tasks.spec.ts

@@ -7,11 +7,8 @@ async function goToProjectsOverview(page: Page) {
 }
 
 // Create new project via modal
-test('test that creating and deleting a new tag in a new project works', async ({
-    page,
-}) => {
-    const newProjectName =
-        'New Project ' + Math.floor(1 + Math.random() * 10000);
+test('test that creating and deleting a new tag in a new project works', async ({ page }) => {
+    const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
     await goToProjectsOverview(page);
     await page.getByRole('button', { name: 'Create Project' }).click();
     await page.getByLabel('Project Name').fill(newProjectName);
@@ -29,9 +26,7 @@ test('test that creating and deleting a new tag in a new project works', async (
         ),
     ]);
 
-    await expect(page.getByTestId('project_table')).toContainText(
-        newProjectName
-    );
+    await expect(page.getByTestId('project_table')).toContainText(newProjectName);
 
     await page.getByText(newProjectName).click();
 
@@ -55,13 +50,9 @@ test('test that creating and deleting a new tag in a new project works', async (
 
     await expect(page.getByTestId('task_table')).toContainText(newTaskName);
 
-    const taskMoreButton = page.locator(
-        "[aria-label='Actions for Task " + newTaskName + "']"
-    );
+    const taskMoreButton = page.locator("[aria-label='Actions for Task " + newTaskName + "']");
     taskMoreButton.click();
-    const taskDeleteButton = page.locator(
-        "[aria-label='Delete Task " + newTaskName + "']"
-    );
+    const taskDeleteButton = page.locator("[aria-label='Delete Task " + newTaskName + "']");
 
     await Promise.all([
         taskDeleteButton.click(),
@@ -76,13 +67,9 @@ test('test that creating and deleting a new tag in a new project works', async (
 
     await goToProjectsOverview(page);
 
-    const moreButton = page.locator(
-        "[aria-label='Actions for Project " + newProjectName + "']"
-    );
+    const moreButton = page.locator("[aria-label='Actions for Project " + newProjectName + "']");
     moreButton.click();
-    const deleteButton = page.locator(
-        "[aria-label='Delete Project " + newProjectName + "']"
-    );
+    const deleteButton = page.locator("[aria-label='Delete Project " + newProjectName + "']");
 
     await Promise.all([
         deleteButton.click(),
@@ -93,14 +80,11 @@ test('test that creating and deleting a new tag in a new project works', async (
                 response.status() === 204
         ),
     ]);
-    await expect(page.getByTestId('project_table')).not.toContainText(
-        newProjectName
-    );
+    await expect(page.getByTestId('project_table')).not.toContainText(newProjectName);
 });
 
 test('test that archiving and unarchiving tasks works', async ({ page }) => {
-    const newProjectName =
-        'New Project ' + Math.floor(1 + Math.random() * 10000);
+    const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
     const newTaskName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
 
     await goToProjectsOverview(page);

e2e/time.spec.ts

@@ -25,9 +25,7 @@ async function createEmptyTimeEntry(page: Page) {
         startOrStopTimerWithButton(page),
         assertThatTimerIsStopped(page),
         page.waitForResponse(
-            (response) =>
-                response.url().includes('/time-entries') &&
-                response.status() === 200
+            (response) => response.url().includes('/time-entries') && response.status() === 200
         ),
     ]);
 }
@@ -38,9 +36,7 @@ test('test that starting and stopping an empty time entry shows a new time entry
     await Promise.all([
         goToTimeOverview(page),
         page.waitForResponse(
-            (response) =>
-                response.url().includes('/time-entries') &&
-                response.status() === 200
+            (response) => response.url().includes('/time-entries') && response.status() === 200
         ),
     ]);
     await page.waitForTimeout(100);
@@ -56,9 +52,7 @@ test('test that starting and stopping an empty time entry shows a new time entry
 // Test that description update works
 
 async function assertThatTimeEntryRowIsStopped(newTimeEntry: Locator) {
-    await expect(newTimeEntry.getByTestId('timer_button')).toHaveClass(
-        /bg-accent-300\/70/
-    );
+    await expect(newTimeEntry.getByTestId('timer_button')).toHaveClass(/bg-accent-300\/70/);
 }
 
 test('test that updating a description of a time entry in the overview works on blur', async ({
@@ -71,17 +65,14 @@ test('test that updating a description of a time entry in the overview works on
     await assertThatTimeEntryRowIsStopped(newTimeEntry);
 
     const newDescription = Math.floor(Math.random() * 1000000).toString();
-    const descriptionElement = newTimeEntry.getByTestId(
-        'time_entry_description'
-    );
+    const descriptionElement = newTimeEntry.getByTestId('time_entry_description');
     await descriptionElement.fill(newDescription);
     await Promise.all([
         descriptionElement.press('Tab'),
         page.waitForResponse(async (response) => {
             return (
                 response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
+                (await response.headerValue('Content-Type')) === 'application/json' &&
                 (await response.json()).data.id !== null &&
                 (await response.json()).data.start !== null &&
                 (await response.json()).data.end !== null &&
@@ -90,8 +81,7 @@ test('test that updating a description of a time entry in the overview works on
                 (await response.json()).data.task_id === null &&
                 (await response.json()).data.duration !== null &&
                 (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
+                JSON.stringify((await response.json()).data.tags) === JSON.stringify([])
             );
         }),
     ]);
@@ -107,17 +97,14 @@ test('test that updating a description of a time entry in the overview works on
     const newTimeEntry = timeEntryRows.first();
     await assertThatTimeEntryRowIsStopped(newTimeEntry);
     const newDescription = Math.floor(Math.random() * 1000000).toString();
-    const descriptionElement = newTimeEntry.getByTestId(
-        'time_entry_description'
-    );
+    const descriptionElement = newTimeEntry.getByTestId('time_entry_description');
     await descriptionElement.fill(newDescription);
     await Promise.all([
         descriptionElement.press('Enter'),
         page.waitForResponse(async (response) => {
             return (
                 response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
+                (await response.headerValue('Content-Type')) === 'application/json' &&
                 (await response.json()).data.id !== null &&
                 (await response.json()).data.start !== null &&
                 (await response.json()).data.end !== null &&
@@ -126,16 +113,13 @@ test('test that updating a description of a time entry in the overview works on
                 (await response.json()).data.task_id === null &&
                 (await response.json()).data.duration !== null &&
                 (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
+                JSON.stringify((await response.json()).data.tags) === JSON.stringify([])
             );
         }),
     ]);
 });
 
-test('test that adding a new tag to an existing time entry works', async ({
-    page,
-}) => {
+test('test that adding a new tag to an existing time entry works', async ({ page }) => {
     await goToTimeOverview(page);
     const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
     await createEmptyTimeEntry(page);
@@ -152,8 +136,7 @@ test('test that adding a new tag to an existing time entry works', async ({
         page.waitForResponse(async (response) => {
             return (
                 response.status() === 201 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
+                (await response.headerValue('Content-Type')) === 'application/json' &&
                 (await response.json()).data.name === newTagName
             );
         }),
@@ -163,8 +146,7 @@ test('test that adding a new tag to an existing time entry works', async ({
     await page.waitForResponse(async (response) => {
         return (
             response.status() === 200 &&
-            (await response.headerValue('Content-Type')) ===
-                'application/json' &&
+            (await response.headerValue('Content-Type')) === 'application/json' &&
             (await response.json()).data.id !== null &&
             (await response.json()).data.start !== null &&
             (await response.json()).data.end !== null &&
@@ -187,17 +169,14 @@ test('test that updating a the start of an existing time entry in the overview w
     const newTimeEntry = timeEntryRows.first();
     await assertThatTimeEntryRowIsStopped(newTimeEntry);
     await page.waitForTimeout(1500);
-    const timeEntryRangeElement = newTimeEntry.getByTestId(
-        'time_entry_range_selector'
-    );
+    const timeEntryRangeElement = newTimeEntry.getByTestId('time_entry_range_selector');
     await timeEntryRangeElement.click();
     await page.getByTestId('time_entry_range_start').first().fill('1');
     await Promise.all([
         page.waitForResponse(async (response) => {
             return (
                 response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
+                (await response.headerValue('Content-Type')) === 'application/json' &&
                 (await response.json()).data.id !== null &&
                 // TODO! Actually check the value
                 (await response.json()).data.start !== null &&
@@ -208,9 +187,7 @@ test('test that updating a the start of an existing time entry in the overview w
     ]);
 });
 
-test('test that updating a the duration in the overview works on blur', async ({
-    page,
-}) => {
+test('test that updating a the duration in the overview works on blur', async ({ page }) => {
     await goToTimeOverview(page);
     const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
     await createEmptyTimeEntry(page);
@@ -225,8 +202,7 @@ test('test that updating a the duration in the overview works on blur', async ({
         page.waitForResponse(async (response) => {
             return (
                 response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
+                (await response.headerValue('Content-Type')) === 'application/json' &&
                 (await response.json()).data.id !== null &&
                 // TODO! Actually check the value
                 (await response.json()).data.start !== null &&
@@ -240,9 +216,7 @@ test('test that updating a the duration in the overview works on blur', async ({
 });
 
 // Test that start stop button stops running timer
-test('test that starting a time entry from the overview works', async ({
-    page,
-}) => {
+test('test that starting a time entry from the overview works', async ({ page }) => {
     await goToTimeOverview(page);
     const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
     await createEmptyTimeEntry(page);
@@ -255,8 +229,7 @@ test('test that starting a time entry from the overview works', async ({
         page.waitForResponse(async (response) => {
             return (
                 response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
+                (await response.headerValue('Content-Type')) === 'application/json' &&
                 (await response.json()).data.id !== null &&
                 (await response.json()).data.start !== null &&
                 (await response.json()).data.end !== null
@@ -272,8 +245,7 @@ test('test that starting a time entry from the overview works', async ({
         page.waitForResponse(async (response) => {
             return (
                 response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
+                (await response.headerValue('Content-Type')) === 'application/json' &&
                 (await response.json()).data.id !== null &&
                 (await response.json()).data.start !== null &&
                 (await response.json()).data.end !== null
@@ -284,9 +256,7 @@ test('test that starting a time entry from the overview works', async ({
     ]);
 });
 
-test('test that deleting a time entry from the overview works', async ({
-    page,
-}) => {
+test('test that deleting a time entry from the overview works', async ({ page }) => {
     await goToTimeOverview(page);
     const timeEntryRows = page.locator('[data-testid="time_entry_row"]');
     await createEmptyTimeEntry(page);
@@ -302,16 +272,12 @@ test('test that deleting a time entry from the overview works', async ({
     await expect(timeEntryRows).toHaveCount(0);
 });
 
-test.skip('test that load more works when the end of page is reached', async ({
-    page,
-}) => {
+test.skip('test that load more works when the end of page is reached', async ({ page }) => {
     // this test is flaky when you do not need to scroll
     await Promise.all([
         goToTimeOverview(page),
         page.waitForResponse(
-            (response) =>
-                response.url().includes('/time-entries') &&
-                response.status() === 200
+            (response) => response.url().includes('/time-entries') && response.status() === 200
         ),
     ]);
 
@@ -322,18 +288,14 @@ test.skip('test that load more works when the end of page is reached', async ({
             return (
                 response.status() === 200 &&
                 response.url().includes('before') &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                JSON.stringify((await response.json()).data) ===
-                    JSON.stringify([])
+                (await response.headerValue('Content-Type')) === 'application/json' &&
+                JSON.stringify((await response.json()).data) === JSON.stringify([])
             );
         }),
     ]);
 
     // assert that "All time entries are loaded!" is visible on page
-    await expect(page.locator('body')).toHaveText(
-        /All time entries are loaded!/
-    );
+    await expect(page.locator('body')).toHaveText(/All time entries are loaded!/);
 });
 
 // TODO: Test that updating the time entry start / end times works while it is running

e2e/timetracker.spec.ts

@@ -24,22 +24,15 @@ test('test that starting and stopping a timer without description and project wo
         assertThatTimerHasStarted(page),
     ]);
     await page.waitForTimeout(1500);
-    await Promise.all([
-        stoppedTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
+    await Promise.all([stoppedTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
     await assertThatTimerIsStopped(page);
 });
 
-test('test that starting and stopping a timer with a description works', async ({
-    page,
-}) => {
+test('test that starting and stopping a timer with a description works', async ({ page }) => {
     await goToDashboard(page);
     // TODO: Fix flakyness by disabling description input field until timer is loaded
     await page.waitForTimeout(500);
-    await page
-        .getByTestId('time_entry_description')
-        .fill('New Time Entry Description');
+    await page.getByTestId('time_entry_description').fill('New Time Entry Description');
     await Promise.all([
         newTimeEntryResponse(page, {
             description: 'New Time Entry Description',
@@ -62,47 +55,29 @@ test('test that starting the time entry starts the live timer and that it keeps
 }) => {
     await goToDashboard(page);
 
-    await Promise.all([
-        newTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
+    await Promise.all([newTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
     await assertThatTimerHasStarted(page);
     await page.waitForTimeout(500);
-    const beforeTimerValue = await page
-        .getByTestId('time_entry_time')
-        .inputValue();
+    const beforeTimerValue = await page.getByTestId('time_entry_time').inputValue();
     await page.waitForTimeout(2000);
-    const afterWaitTimeValue = await page
-        .getByTestId('time_entry_time')
-        .inputValue();
+    const afterWaitTimeValue = await page.getByTestId('time_entry_time').inputValue();
     expect(afterWaitTimeValue).not.toEqual(beforeTimerValue);
     await page.reload();
     await page.waitForTimeout(500);
 
-    const afterReloadTimerValue = await page
-        .getByTestId('time_entry_time')
-        .inputValue();
+    const afterReloadTimerValue = await page.getByTestId('time_entry_time').inputValue();
     await page.waitForTimeout(2000);
-    const afterReloadAfterWaitTimerValue = await page
-        .getByTestId('time_entry_time')
-        .inputValue();
+    const afterReloadAfterWaitTimerValue = await page.getByTestId('time_entry_time').inputValue();
     expect(afterReloadTimerValue).not.toEqual(afterReloadAfterWaitTimerValue);
 });
 
-test('test that starting and updating the description while running works', async ({
-    page,
-}) => {
+test('test that starting and updating the description while running works', async ({ page }) => {
     await goToDashboard(page);
 
-    await Promise.all([
-        newTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
+    await Promise.all([newTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
     await assertThatTimerHasStarted(page);
     await page.waitForTimeout(500);
-    await page
-        .getByTestId('time_entry_description')
-        .fill('New Time Entry Description');
+    await page.getByTestId('time_entry_description').fill('New Time Entry Description');
 
     await Promise.all([
         newTimeEntryResponse(page, {
@@ -121,9 +96,7 @@ test('test that starting and updating the description while running works', asyn
     await assertThatTimerIsStopped(page);
 });
 
-test('test that starting and updating the time while running works', async ({
-    page,
-}) => {
+test('test that starting and updating the time while running works', async ({ page }) => {
     await goToDashboard(page);
     const [createResponse] = await Promise.all([
         newTimeEntryResponse(page),
@@ -138,19 +111,16 @@ test('test that starting and updating the time while running works', async ({
             return (
                 response.url().includes('/time-entries') &&
                 response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
+                (await response.headerValue('Content-Type')) === 'application/json' &&
                 (await response.json()).data.id !== null &&
                 (await response.json()).data.start !== null &&
-                (await response.json()).data.start !==
-                    (await createResponse.json()).data.start &&
+                (await response.json()).data.start !== (await createResponse.json()).data.start &&
                 (await response.json()).data.end === null &&
                 (await response.json()).data.project_id === null &&
                 (await response.json()).data.description === '' &&
                 (await response.json()).data.task_id === null &&
                 (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
+                JSON.stringify((await response.json()).data.tags) === JSON.stringify([])
             );
         }),
         page.getByTestId('time_entry_time').press('Enter'),
@@ -158,16 +128,11 @@ test('test that starting and updating the time while running works', async ({
 
     await expect(page.getByTestId('time_entry_time')).toHaveValue(/00:20/);
     await page.waitForTimeout(500);
-    await Promise.all([
-        stoppedTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
+    await Promise.all([stoppedTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
     await assertThatTimerIsStopped(page);
 });
 
-test('test that entering a human readable time starts the timer on blur', async ({
-    page,
-}) => {
+test('test that entering a human readable time starts the timer on blur', async ({ page }) => {
     await goToDashboard(page);
     await page.getByTestId('time_entry_time').fill('20min');
     await Promise.all([
@@ -177,18 +142,13 @@ test('test that entering a human readable time starts the timer on blur', async
     await expect(page.getByTestId('time_entry_time')).toHaveValue(/00:20:/);
     await assertThatTimerHasStarted(page);
 
-    await Promise.all([
-        stoppedTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
+    await Promise.all([stoppedTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
     await page.locator(
         '[data-testid="dashboard_timer"] [data-testid="timer_button"].bg-accent-300/70'
     );
 });
 
-test('test that entering a number in the time range starts the timer on blur', async ({
-    page,
-}) => {
+test('test that entering a number in the time range starts the timer on blur', async ({ page }) => {
     await goToDashboard(page);
     await page.getByTestId('time_entry_time').fill('5');
     await Promise.all([
@@ -198,10 +158,7 @@ test('test that entering a number in the time range starts the timer on blur', a
     await expect(page.getByTestId('time_entry_time')).toHaveValue(/00:05:/);
     await assertThatTimerHasStarted(page);
 
-    await Promise.all([
-        stoppedTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
+    await Promise.all([stoppedTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
     await page.locator(
         '[data-testid="dashboard_timer"] [data-testid="timer_button"].bg-accent-300/70'
     );
@@ -219,10 +176,7 @@ test('test that entering a value with the format hh:mm in the time range starts
     await expect(page.getByTestId('time_entry_time')).toHaveValue(/12:30:/);
     await assertThatTimerHasStarted(page);
 
-    await Promise.all([
-        stoppedTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
+    await Promise.all([stoppedTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
     await page.locator(
         '[data-testid="dashboard_timer"] [data-testid="timer_button"].bg-accent-300/70'
     );
@@ -239,9 +193,7 @@ test('test that entering a random value in the time range does not start the tim
         );
 });
 
-test('test that entering a time starts the timer on enter', async ({
-    page,
-}) => {
+test('test that entering a time starts the timer on enter', async ({ page }) => {
     await goToDashboard(page);
     await page.getByTestId('time_entry_time').fill('20min');
     await Promise.all([
@@ -249,10 +201,7 @@ test('test that entering a time starts the timer on enter', async ({
         page.getByTestId('time_entry_time').press('Enter'),
     ]);
     await assertThatTimerHasStarted(page);
-    await Promise.all([
-        stoppedTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
+    await Promise.all([stoppedTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
     await assertThatTimerIsStopped(page);
 });
 
@@ -273,15 +222,10 @@ test('test that adding a new tag works', async ({ page }) => {
     await expect(page.getByRole('option', { name: newTagName })).toBeVisible();
 });
 
-test('test that adding a new tag when the timer is running', async ({
-    page,
-}) => {
+test('test that adding a new tag when the timer is running', async ({ page }) => {
     const newTagName = 'New Tag' + Math.floor(Math.random() * 10000);
     await goToDashboard(page);
-    await Promise.all([
-        newTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
+    await Promise.all([newTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
     await assertThatTimerHasStarted(page);
     await page.getByTestId('tag_dropdown').click();
     await page.getByText('Create new tag').click();

e2e/utils/currentTimeEntry.ts

@@ -1,9 +1,7 @@
 import { expect, Page } from '@playwright/test';
 
 export async function startOrStopTimerWithButton(page: Page) {
-    await page
-        .locator('[data-testid="dashboard_timer"] [data-testid="timer_button"]')
-        .click();
+    await page.locator('[data-testid="dashboard_timer"] [data-testid="timer_button"]').click();
 }
 
 export async function assertThatTimerHasStarted(page: Page) {
@@ -20,8 +18,7 @@ export function newTimeEntryResponse(
         return (
             response.url().includes('/time-entries') &&
             response.status() === status &&
-            (await response.headerValue('Content-Type')) ===
-                'application/json' &&
+            (await response.headerValue('Content-Type')) === 'application/json' &&
             (await response.json()).data.id !== null &&
             (await response.json()).data.start !== null &&
             (await response.json()).data.end === null &&
@@ -29,30 +26,23 @@ export function newTimeEntryResponse(
             (await response.json()).data.description === description &&
             (await response.json()).data.task_id === null &&
             (await response.json()).data.user_id !== null &&
-            JSON.stringify((await response.json()).data.tags) ===
-                JSON.stringify(tags)
+            JSON.stringify((await response.json()).data.tags) === JSON.stringify(tags)
         );
     });
 }
 
 export async function assertThatTimerIsStopped(page: Page) {
     await expect(
-        page.locator(
-            '[data-testid="dashboard_timer"] [data-testid="timer_button"]'
-        )
+        page.locator('[data-testid="dashboard_timer"] [data-testid="timer_button"]')
     ).toHaveClass(/bg-accent-300\/70/);
 }
 
-export async function stoppedTimeEntryResponse(
-    page: Page,
-    { description = '', tags = [] } = {}
-) {
+export async function stoppedTimeEntryResponse(page: Page, { description = '', tags = [] } = {}) {
     return page.waitForResponse(async (response) => {
         return (
             response.status() === 200 &&
             response.url().includes('/time-entries/') &&
-            (await response.headerValue('Content-Type')) ===
-                'application/json' &&
+            (await response.headerValue('Content-Type')) === 'application/json' &&
             (await response.json()).data.id !== null &&
             (await response.json()).data.start !== null &&
             (await response.json()).data.end !== null &&
@@ -61,8 +51,7 @@ export async function stoppedTimeEntryResponse(
             (await response.json()).data.task_id === null &&
             (await response.json()).data.duration !== null &&
             (await response.json()).data.user_id !== null &&
-            JSON.stringify((await response.json()).data.tags) ===
-                JSON.stringify(tags)
+            JSON.stringify((await response.json()).data.tags) === JSON.stringify(tags)
         );
     });
 }

e2e/utils/money.ts

@@ -14,4 +14,4 @@ export function formatCentsWithOrganizationDefaults(
         currencySymbol,
         'point-comma' as NumberFormat
     );
-} 
+}

e2e/utils/tags.ts

@@ -4,8 +4,7 @@ export function newTagResponse(page: Page, { name = '' } = {}) {
     return page.waitForResponse(async (response) => {
         return (
             response.status() === 201 &&
-            (await response.headerValue('Content-Type')) ===
-                'application/json' &&
+            (await response.headerValue('Content-Type')) === 'application/json' &&
             (await response.json()).data.name === name
         );
     });

eslint.config.mjs

@@ -3,7 +3,7 @@ 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";
+import unusedImports from 'eslint-plugin-unused-imports';
 
 export default typescriptEslint.config(
     { ignores: ['*.d.ts', '**/coverage', '**/dist'] },
@@ -23,18 +23,21 @@ export default typescriptEslint.config(
             },
         },
         plugins: {
-            "unused-imports": unusedImports,
+            '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", {
-                "vars": "all",
-                "varsIgnorePattern": "^_",
-                "args": "after-used",
-                "argsIgnorePattern": "^_",
-            }],
+            'vue/multi-word-component-names': 'off',
+            '@typescript-eslint/no-unused-vars': 'off',
+            'unused-imports/no-unused-imports': 'error',
+            'unused-imports/no-unused-vars': [
+                'error',
+                {
+                    'vars': 'all',
+                    'varsIgnorePattern': '^_',
+                    'args': 'after-used',
+                    'argsIgnorePattern': '^_',
+                },
+            ],
         },
     },
     eslintConfigPrettier

lang/en/exceptions.php

@@ -14,6 +14,7 @@ use App\Exceptions\Api\OnlyOwnerCanChangeOwnership;
 use App\Exceptions\Api\OnlyPlaceholdersCanBeMergedIntoAnotherMember;
 use App\Exceptions\Api\OrganizationHasNoSubscriptionButMultipleMembersException;
 use App\Exceptions\Api\OrganizationNeedsAtLeastOneOwner;
+use App\Exceptions\Api\OverlappingTimeEntryApiException;
 use App\Exceptions\Api\PdfRendererIsNotConfiguredException;
 use App\Exceptions\Api\PersonalAccessClientIsNotConfiguredException;
 use App\Exceptions\Api\ThisPlaceholderCanNotBeInvitedUseTheMergeToolInsteadException;
@@ -47,6 +48,7 @@ return [
         OnlyPlaceholdersCanBeMergedIntoAnotherMember::KEY => 'Only placeholders can be merged into another member',
         ThisPlaceholderCanNotBeInvitedUseTheMergeToolInsteadException::KEY => 'This placeholder can not be invited use the merge tool instead',
         InvitationForTheEmailAlreadyExistsApiException::KEY => 'The email has already been invited to the organization. Please wait for the user to accept the invitation or resend the invitation email.',
+        OverlappingTimeEntryApiException::KEY => 'Overlapping time entries are not allowed.',
     ],
     'unknown_error_in_admin_panel' => 'An unknown error occurred. Please check the logs.',
 ];

lang/en/validation.php

@@ -203,6 +203,7 @@ return [
     'organization' => 'The :attribute does not exist.',
     'task_belongs_to_project' => 'The :attribute is not part of the given project.',
     'project_name_already_exists' => 'A project with the same name and client already exists in the organization.',
+    'overlapping_time_entry' => 'Overlapping time entries are not allowed.',
     'tag_name_already_exists' => 'A tag with the same name already exists in the organization.',
     'client_name_already_exists' => 'A client with the same name already exists in the organization.',
     'task_name_already_exists' => 'A task with the same name already exists in the project.',

package-lock.json

@@ -7,6 +7,11 @@
             "dependencies": {
                 "@floating-ui/core": "^1.6.0",
                 "@floating-ui/vue": "^1.0.6",
+                "@fullcalendar/core": "^6.1.18",
+                "@fullcalendar/daygrid": "^6.1.18",
+                "@fullcalendar/interaction": "^6.1.18",
+                "@fullcalendar/timegrid": "^6.1.18",
+                "@fullcalendar/vue3": "^6.1.18",
                 "@heroicons/vue": "^2.1.1",
                 "@rushstack/eslint-patch": "^1.10.5",
                 "@tailwindcss/container-queries": "^0.1.1",
@@ -18,6 +23,7 @@
                 "@vue/eslint-config-typescript": "^14.3.0",
                 "@vueuse/core": "^12.8.2",
                 "@vueuse/integrations": "^12.5.0",
+                "chroma-js": "3.1.2",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
                 "dayjs": "^1.11.11",
@@ -39,6 +45,7 @@
                 "@playwright/test": "^1.41.1",
                 "@tailwindcss/forms": "^0.5.9",
                 "@tailwindcss/typography": "^0.5.15",
+                "@types/chroma-js": "2.4.5",
                 "@types/node": "^22.10.10",
                 "@vitejs/plugin-vue": "^5.2.1",
                 "@vue/tsconfig": "^0.5.1",
@@ -1027,6 +1034,55 @@
                 "vue-demi": ">=0.13.0"
             }
         },
+        "node_modules/@fullcalendar/core": {
+            "version": "6.1.18",
+            "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.18.tgz",
+            "integrity": "sha512-cD7XtZIZZ87Cg2+itnpsONCsZ89VIfLLDZ22pQX4IQVWlpYUB3bcCf878DhWkqyEen6dhi5ePtBoqYgm5K+0fQ==",
+            "license": "MIT",
+            "dependencies": {
+                "preact": "~10.12.1"
+            }
+        },
+        "node_modules/@fullcalendar/daygrid": {
+            "version": "6.1.18",
+            "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.18.tgz",
+            "integrity": "sha512-s452Zle1SdMEzZDw+pDczm8m3JLIZzS9ANMThXTnqeqJewW1gqNFYas18aHypJSgF9Fh9rDJjTSUw04BpXB/Mg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@fullcalendar/core": "~6.1.18"
+            }
+        },
+        "node_modules/@fullcalendar/interaction": {
+            "version": "6.1.18",
+            "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.18.tgz",
+            "integrity": "sha512-f/mD5RTjzw+Q6MGTMZrLCgIrQLIUUO9NV/58aM2J6ZBQZeRlNizDqmqldqyG+j49zj2vFhUfZibPrVKWm5yA4Q==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@fullcalendar/core": "~6.1.18"
+            }
+        },
+        "node_modules/@fullcalendar/timegrid": {
+            "version": "6.1.18",
+            "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.18.tgz",
+            "integrity": "sha512-T/ouhs+T1tM8JcW7Cjx+KiohL/qQWKqvRITwjol8ktJ1e1N/6noC40/obR1tyolqOxMRWHjJkYoj9fUqfoez9A==",
+            "license": "MIT",
+            "dependencies": {
+                "@fullcalendar/daygrid": "~6.1.18"
+            },
+            "peerDependencies": {
+                "@fullcalendar/core": "~6.1.18"
+            }
+        },
+        "node_modules/@fullcalendar/vue3": {
+            "version": "6.1.18",
+            "resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.1.18.tgz",
+            "integrity": "sha512-YMagwTumxsIx3GFYWLa9Yr73EMA+JuH6S3EeZGS+rEjvG5fDGdf+33rxGMzmw+LdO7SWi3ctbzRnJlv3fnm3RQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@fullcalendar/core": "~6.1.18",
+                "vue": "^3.0.11"
+            }
+        },
         "node_modules/@heroicons/vue": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.2.0.tgz",
@@ -1842,6 +1898,13 @@
                 "vue": "^2.7.0 || ^3.0.0"
             }
         },
+        "node_modules/@types/chroma-js": {
+            "version": "2.4.5",
+            "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.4.5.tgz",
+            "integrity": "sha512-6ISjhzJViaPCy2q2e6PgK+8HcHQDQ0V2LDiKmYAh+jJlLqDa6HbwDh0wOevHY0kHHUx0iZwjSRbVD47WOUx5EQ==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@types/estree": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -2877,6 +2940,12 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/chroma-js": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-3.1.2.tgz",
+            "integrity": "sha512-IJnETTalXbsLx1eKEgx19d5L6SRM7cH4vINw/99p/M11HCuXGRWL+6YmCm7FWFGIo6dtWuQoQi1dc5yQ7ESIHg==",
+            "license": "(BSD-3-Clause AND Apache-2.0)"
+        },
         "node_modules/class-variance-authority": {
             "version": "0.7.1",
             "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -5140,6 +5209,16 @@
             "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
             "license": "MIT"
         },
+        "node_modules/preact": {
+            "version": "10.12.1",
+            "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
+            "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+            "license": "MIT",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/preact"
+            }
+        },
         "node_modules/prelude-ls": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",

package.json

@@ -8,7 +8,9 @@
         "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"
+        "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",
+        "format": "prettier --write './**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts,vue}'",
+        "format:check": "prettier --check './**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts,vue}'"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3.2.0",
@@ -17,6 +19,7 @@
         "@playwright/test": "^1.41.1",
         "@tailwindcss/forms": "^0.5.9",
         "@tailwindcss/typography": "^0.5.15",
+        "@types/chroma-js": "2.4.5",
         "@types/node": "^22.10.10",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vue/tsconfig": "^0.5.1",
@@ -37,6 +40,11 @@
     "dependencies": {
         "@floating-ui/core": "^1.6.0",
         "@floating-ui/vue": "^1.0.6",
+        "@fullcalendar/core": "^6.1.18",
+        "@fullcalendar/daygrid": "^6.1.18",
+        "@fullcalendar/interaction": "^6.1.18",
+        "@fullcalendar/timegrid": "^6.1.18",
+        "@fullcalendar/vue3": "^6.1.18",
         "@heroicons/vue": "^2.1.1",
         "@rushstack/eslint-patch": "^1.10.5",
         "@tailwindcss/container-queries": "^0.1.1",
@@ -48,6 +56,7 @@
         "@vue/eslint-config-typescript": "^14.3.0",
         "@vueuse/core": "^12.8.2",
         "@vueuse/integrations": "^12.5.0",
+        "chroma-js": "3.1.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.11",

playwright/config.ts

@@ -1,2 +1 @@
-export const PLAYWRIGHT_BASE_URL =
-    process.env.PLAYWRIGHT_BASE_URL ?? 'http://solidtime.test';
+export const PLAYWRIGHT_BASE_URL = process.env.PLAYWRIGHT_BASE_URL ?? 'http://solidtime.test';

playwright/fixtures.ts

@@ -8,12 +8,8 @@ export const test = baseTest.extend<object, { workerStorageState: string }>({
         // Perform authentication steps. Replace these actions with your own.
         await page.goto(PLAYWRIGHT_BASE_URL + '/register');
         await page.getByLabel('Name').fill('John Doe');
-        await page
-            .getByLabel('Email')
-            .fill(`john+${Math.round(Math.random() * 1000000)}@doe.com`);
-        await page
-            .getByLabel('Password', { exact: true })
-            .fill('amazingpassword123');
+        await page.getByLabel('Email').fill(`john+${Math.round(Math.random() * 1000000)}@doe.com`);
+        await page.getByLabel('Password', { exact: true }).fill('amazingpassword123');
         await page.getByLabel('Confirm Password').fill('amazingpassword123');
         await page.getByLabel('I agree to the Terms of').click();
         await page.getByRole('button', { name: 'Register' }).click();

resources/css/app.css

@@ -46,14 +46,16 @@
 
     --color-accent-default: rgba(var(--color-accent-300), 0.2);
     --color-accent-foreground: rgb(var(--color-accent-100));
+    --theme-color-default-background: var(--color-bg-primary);
+
 }
 
 :root.light {
-    --color-bg-primary: #F5F5F5;
+    --color-bg-primary: #FFFFFF;
     --color-bg-secondary: #f7f7f8;
-    --color-bg-tertiary: #e1e1e3;
-    --color-bg-quaternary: #ffffff;
-    --color-bg-background: #ffffff;
+    --color-bg-tertiary: #eeeeef;
+    --color-bg-quaternary: #e1e1e3;
+    --color-bg-background: #F5F5F5;
     --color-text-primary: #18181b;
     --color-text-secondary: #3f3f46;
     --color-text-tertiary: #57575C;
@@ -63,14 +65,14 @@
     --color-border-tertiary: #dfdfdf;
     --color-border-quaternary: #d1d1d1;
     --color-input-border-active: rgba(0,0,0,0.3);
-    --theme-color-menu-active: var(--color-bg-tertiary);
+    --theme-color-menu-active: var(--color-bg-quaternary);
 
-    --theme-color-card-background: var(--color-bg-quaternary);
-    --theme-color-card-background-active: var(--color-bg-primary);
+    --theme-color-card-background: var(--color-bg-primary);
+    --theme-color-card-background-active: var(--color-bg-tertiary);
 
     --theme-color-chart: var(--color-accent-400);
 
-    --theme-shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --theme-shadow-card: lch(0 0 0 / 0.022) 0px 3px 6px -2px, lch(0 0 0 / 0.044) 0px 1px 1px;
     --theme-shadow-dropdown: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 
     --theme-color-row-background: var(--theme-color-card-background);
@@ -85,17 +87,18 @@
     --theme-color-button-primary-border: rgba(var(--color-accent-600), 1);
     --theme-color-button-primary-text: #FFFFFF;
 
-    --theme-color-input-background: var(--color-bg-quaternary);
+    --theme-color-input-background: var(--color-bg-primary);
 
     --theme-color-input-select-active: rgb(var(--color-accent-400));
     --theme-color-input-select-active-hover: rgb(var(--color-accent-500));
 
     --color-accent-default: rgb(var(--color-accent-100));
     --color-accent-foreground: rgb(var(--color-accent-800));
+    --theme-color-default-background: #FCFCFC;
+
 }
 
 :root {
-    --theme-color-default-background: var(--color-bg-primary);
     --theme-color-icon-active: rgb(var(--color-text-tertiary));
     --theme-color-card-background-separator: var(--color-border-tertiary);
     --theme-color-card-border: var(--color-border-secondary);
@@ -163,10 +166,8 @@ body {
 /* Inter Variable Font with browser compatibility considerations */
 @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter-Variable.woff2') format('woff2 supports variations'),
-         url('/fonts/Inter-Variable.woff2') format('woff2-variations'),
-         url('/fonts/Inter-Variable.ttf') format('truetype supports variations'),
-         url('/fonts/Inter-Variable.ttf') format('truetype-variations');
+    src: url('/fonts/InterVariable.woff2') format('woff2'),
+         url('/fonts/InterVariable.ttf') format('truetype');
     font-weight: 100 900;
     font-style: normal;
     font-display: swap;

resources/js/Components/ActionSection.vue

@@ -14,8 +14,7 @@ import SectionTitle from './SectionTitle.vue';
         </SectionTitle>
 
         <div class="mt-5 md:mt-0 md:col-span-2">
-            <div
-                class="px-4 py-5 sm:p-6 bg-card-background shadow sm:rounded-lg">
+            <div class="px-4 py-5 sm:p-6 bg-card-background shadow sm:rounded-lg">
                 <slot name="content" />
             </div>
         </div>

resources/js/Components/AuthenticationCard.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
-import { useTheme } from "@/utils/theme.js";
+import { onMounted } from 'vue';
+import { useTheme } from '@/utils/theme.js';
 
 onMounted(async () => {
-    useTheme()
+    useTheme();
 });
 </script>
 

resources/js/Components/Banner.vue

@@ -24,9 +24,7 @@ watchEffect(async () => {
 
 <template>
     <div>
-        <div
-            v-if="show && message"
-            class="bg-secondary border-b border-border-secondary">
+        <div v-if="show && message" class="bg-secondary border-b border-border-secondary">
             <div class="mx-auto py-1 px-3 sm:px-6 lg:px-8">
                 <div class="flex items-center justify-between flex-wrap">
                     <div class="w-0 flex-1 flex items-center min-w-0">

resources/js/Components/Billing/BillingBanner.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
-import {
-    CheckBadgeIcon,
-    XMarkIcon,
-    XCircleIcon,
-} from '@heroicons/vue/16/solid';
+import { CheckBadgeIcon, XMarkIcon, XCircleIcon } from '@heroicons/vue/16/solid';
 import { Link } from '@inertiajs/vue3';
 import { computed } from 'vue';
 import {
@@ -18,28 +14,20 @@ import { useSessionStorage } from '@vueuse/core';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { canManageBilling } from '@/utils/permissions';
 
-const hideTrialBanner = useSessionStorage(
-    'showTrialBanner-' + getCurrentOrganizationId(),
-    false
-);
+const hideTrialBanner = useSessionStorage('showTrialBanner-' + getCurrentOrganizationId(), false);
 const showTrialBanner = computed(() => isInTrial() && !hideTrialBanner.value);
 const hideBlockedBanner = useSessionStorage(
     'showBlockedBanner-' + getCurrentOrganizationId(),
     false
 );
-const showBlockedBanner = computed(
-    () => isBlocked() && !hideBlockedBanner.value
-);
+const showBlockedBanner = computed(() => isBlocked() && !hideBlockedBanner.value);
 const hideFreeUpgradeBanner = useSessionStorage(
     'showFreeUpgradeBanner-' + getCurrentOrganizationId(),
     false
 );
 const showFreeUpgradeBanner = computed(
     () =>
-        isFreePlan() &&
-        !isBlocked() &&
-        !hideFreeUpgradeBanner.value &&
-        !showBlackFridayBanner.value
+        isFreePlan() && !isBlocked() && !hideFreeUpgradeBanner.value && !showBlackFridayBanner.value
 );
 const hideBlackFridayBanner = useSessionStorage(
     'hideBlackFridayBanner-' + getCurrentOrganizationId(),
@@ -62,10 +50,7 @@ const showBlackFridayBanner = computed(() => {
         class="bg-tertiary text-xs lg:text-sm pb-1 pt-2 border-b border-border-secondary">
         <MainContainer class="flex items-center justify-between">
             <div class="flex items-center space-x-1.5">
-                <svg
-                    class="w-4 mr-1"
-                    viewBox="0 0 256 256"
-                    xmlns="http://www.w3.org/2000/svg">
+                <svg class="w-4 mr-1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                     <path
                         fill="#FF37AD"
                         d="M22.498 68.97a11.845 11.845 0 1 0 0-23.687c-6.471.098-11.666 5.372-11.666 11.844s5.195 11.746 11.666 11.844m181.393-10.04a11.845 11.845 0 1 0-.003-23.688c-6.471.098-11.665 5.373-11.665 11.845c.001 6.472 5.197 11.745 11.668 11.842" />
@@ -113,8 +98,7 @@ const showBlackFridayBanner = computed(() => {
                     </div>
                 </Link>
                 <button class="p-1" @click="hideBlackFridayBanner = true">
-                    <XMarkIcon
-                        class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
+                    <XMarkIcon class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
                 </button>
             </div>
         </MainContainer>
@@ -130,8 +114,8 @@ const showBlackFridayBanner = computed(() => {
                         Your trial expires in {{ daysLeftInTrial() }} days.
                     </span>
                     <span class="hidden md:inline">
-                        To continue using all features & support the development
-                        of solidtime, please upgrade your plan.
+                        To continue using all features & support the development of solidtime,
+                        please upgrade your plan.
                     </span>
                 </div>
             </div>
@@ -143,8 +127,7 @@ const showBlackFridayBanner = computed(() => {
                     </div>
                 </Link>
                 <button class="p-1" @click="hideTrialBanner = true">
-                    <XMarkIcon
-                        class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
+                    <XMarkIcon class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
                 </button>
             </div>
         </MainContainer>
@@ -156,27 +139,22 @@ const showBlackFridayBanner = computed(() => {
             <div class="flex items-center space-x-1.5">
                 <XCircleIcon class="w-4 text-text-primary/50"></XCircleIcon>
                 <div class="flex-1 space-x-1">
-                    <span class="font-medium">
-                        Your organization is currently blocked.
-                    </span>
+                    <span class="font-medium"> Your organization is currently blocked. </span>
                     <span class="hidden md:inline">
-                        Please upgrade to a premium plan or remove all users
-                        except the owner to unblock your organization.
+                        Please upgrade to a premium plan or remove all users except the owner to
+                        unblock your organization.
                     </span>
                 </div>
             </div>
             <div class="flex items-center space-x-2">
-                <Link
-                    v-if="isBillingActivated() && canManageBilling()"
-                    href="/billing">
+                <Link v-if="isBillingActivated() && canManageBilling()" href="/billing">
                     <div
                         class="text-text-primary font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
                         <span>Upgrade now</span>
                     </div>
                 </Link>
                 <button class="p-1" @click="hideBlockedBanner = true">
-                    <XMarkIcon
-                        class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
+                    <XMarkIcon class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
                 </button>
             </div>
         </MainContainer>
@@ -188,27 +166,22 @@ const showBlackFridayBanner = computed(() => {
             <div class="flex items-center space-x-1.5">
                 <XCircleIcon class="w-4 text-text-primary/50"></XCircleIcon>
                 <div class="flex-1 space-x-1">
-                    <span class="font-medium">
-                        You are currently using the Free Plan.
-                    </span>
+                    <span class="font-medium"> You are currently using the Free Plan. </span>
                     <span class="hidden md:inline">
-                        To unlock all premium features & support the development
-                        of solidtime, please upgrade your plan.</span
+                        To unlock all premium features & support the development of solidtime,
+                        please upgrade your plan.</span
                     >
                 </div>
             </div>
             <div class="flex items-center space-x-2">
-                <Link
-                    v-if="isBillingActivated() && canManageBilling()"
-                    href="/billing">
+                <Link v-if="isBillingActivated() && canManageBilling()" href="/billing">
                     <div
                         class="text-text-primary font-semibold uppercase text-xs flex space-x-1 items-center hover:bg-white/10 rounded-lg px-2 py-1.5">
                         <span>Upgrade now</span>
                     </div>
                 </Link>
                 <button class="p-1" @click="hideFreeUpgradeBanner = true">
-                    <XMarkIcon
-                        class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
+                    <XMarkIcon class="w-4 opacity-50 hover:opacity-100"></XMarkIcon>
                 </button>
             </div>
         </MainContainer>

resources/js/Components/Common/Card.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts"></script>
 
 <template>
-    <div class="rounded-lg border overflow-hidden border-card-border bg-card-background shadow-card">
+    <div
+        class="rounded-lg border overflow-hidden border-card-border bg-card-background shadow-card">
         <slot></slot>
     </div>
 </template>

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import {
-    ArchiveBoxIcon,
-    PencilSquareIcon,
-    TrashIcon,
-} from '@heroicons/vue/20/solid';
+import { ArchiveBoxIcon, PencilSquareIcon, TrashIcon } from '@heroicons/vue/20/solid';
 import type { Client } from '@/packages/api/src';
 import { canDeleteClients, canUpdateClients } from '@/utils/permissions';
 import {

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

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

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

@@ -20,9 +20,7 @@ function deleteClient() {
 }
 
 const projectCount = computed(() => {
-    return projects.value.filter(
-        (projects) => projects.client_id === props.client.id
-    ).length;
+    return projects.value.filter((projects) => projects.client_id === props.client.id).length;
 });
 
 function archiveClient() {
@@ -37,9 +35,7 @@ const showEditModal = ref(false);
 
 <template>
     <TableRow>
-        <ClientEditModal
-            v-model:show="showEditModal"
-            :client="client"></ClientEditModal>
+        <ClientEditModal v-model:show="showEditModal" :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-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             <span>

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

@@ -20,11 +20,8 @@ onMounted(async () => {
                 class="grid min-w-full"
                 style="grid-template-columns: 1fr 1fr 80px">
                 <InvitationTableHeading></InvitationTableHeading>
-                <template
-                    v-for="invitation in invitations"
-                    :key="invitation.id">
-                    <InvitationTableRow
-                        :invitation="invitation"></InvitationTableRow>
+                <template v-for="invitation in invitations" :key="invitation.id">
+                    <InvitationTableRow :invitation="invitation"></InvitationTableRow>
                 </template>
             </div>
         </div>

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

@@ -9,8 +9,7 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
             Email
         </div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Role</div>
-        <div
-            class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
+        <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
             <span class="sr-only">Edit</span>
         </div>
     </TableHeading>

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

@@ -38,15 +38,12 @@ async function resendInvitation() {
     if (organizationId) {
         await handleApiRequestNotifications(
             () =>
-                api.resendInvitationEmail(
-                    undefined,
-                    {
-                        params: {
-                            invitation: props.invitation.id,
-                            organization: organizationId,
-                        },
-                    }
-                ),
+                api.resendInvitationEmail(undefined, {
+                    params: {
+                        invitation: props.invitation.id,
+                        organization: organizationId,
+                    },
+                }),
             'Invitation mail sent successfully',
             'Error sending invitation mail'
         );
@@ -65,9 +62,7 @@ async function resendInvitation() {
         </div>
         <div
             class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
-            <InvitationMoreOptionsDropdown
-                @delete="deleteInvitation"
-                @resend="resendInvitation" />
+            <InvitationMoreOptionsDropdown @delete="deleteInvitation" @resend="resendInvitation" />
         </div>
     </TableRow>
 </template>

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

@@ -42,8 +42,8 @@ defineEmits<{
             >.
         </p>
         <p class="py-1 text-center font-semibold max-w-md mx-auto">
-            Do you want to update all existing time entries, where the member
-            billable rate applies as well?
+            Do you want to update all existing time entries, where the member billable rate applies
+            as well?
         </p>
     </BillableRateModal>
 </template>

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

@@ -35,12 +35,8 @@ useFocus(searchInput, { initialValue: true });
 const filteredMembers = computed<Member[]>(() => {
     return members.value.filter((member) => {
         return (
-            member.name
-                .toLowerCase()
-                .includes(searchValue.value?.toLowerCase()?.trim() || '') &&
-            !props.hiddenMembers.some(
-                (hiddenMember) => hiddenMember.member_id === member.id
-            ) &&
+            member.name.toLowerCase().includes(searchValue.value?.toLowerCase()?.trim() || '') &&
+            !props.hiddenMembers.some((hiddenMember) => hiddenMember.member_id === member.id) &&
             member.is_placeholder === false
         );
     });

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

@@ -9,7 +9,7 @@ import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import Checkbox from '@/packages/ui/src/Input/Checkbox.vue';
 import { useNotificationsStore } from '@/utils/notification';
 import { getCurrentOrganizationId } from '@/utils/useUser';
-import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';    
+import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
 import InputError from '@/packages/ui/src/Input/InputError.vue';
 import { useMembersStore } from '@/utils/useMembers';
 
@@ -30,7 +30,7 @@ const deleteMutation = useMutation({
         if (!organizationId) {
             throw new Error('No organization ID found');
         }
-        
+
         return api.removeMember(undefined, {
             params: {
                 member: props.member.id,
@@ -44,7 +44,7 @@ const deleteMutation = useMutation({
     onSuccess: () => {
         close();
         useMembersStore().fetchMembers();
-    }
+    },
 });
 
 const form = useForm({
@@ -70,77 +70,77 @@ const close = () => {
 <template>
     <Modal :show="show" max-width="md" @close="close">
         <div class="p-6">
-            <h2 class="text-lg font-medium text-text-primary">
-                Delete Member
-            </h2>
+            <h2 class="text-lg font-medium text-text-primary">Delete Member</h2>
 
             <div class="mt-4 text-sm text-text-secondary">
                 <p class="mb-4">
                     Are you sure you want to delete {{ member.name }}? This action cannot be undone.
                 </p>
-                <p class="mb-4">
-                    This will permanently delete:
-                </p>
+                <p class="mb-4">This will permanently delete:</p>
 
-                    <ul class="list-disc ml-6 mt-2">
-                        <li>All time entries created by this member</li>
-                        <li>Their project assignments</li>
-                        <li>Their organization membership</li>
-                    </ul>
+                <ul class="list-disc ml-6 mt-2">
+                    <li>All time entries created by this member</li>
+                    <li>Their project assignments</li>
+                    <li>Their organization membership</li>
+                </ul>
                 <p class="pt-4">
-                    <strong>Note:</strong> Deleting time entries will affect all reports and statistics.
-                    If you want to keep the time entries but remove the member from your organization, you can convert them to a placeholder user instead. Placeholder users are not charged and their time entries remain intact for reporting purposes.
+                    <strong>Note:</strong> Deleting time entries will affect all reports and
+                    statistics. If you want to keep the time entries but remove the member from your
+                    organization, you can convert them to a placeholder user instead. Placeholder
+                    users are not charged and their time entries remain intact for reporting
+                    purposes.
                 </p>
             </div>
 
             <form
-class="mt-6" @submit="
-      (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        form.handleSubmit();
-      }
-    ">
+                class="mt-6"
+                @submit="
+                    (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        form.handleSubmit();
+                    }
+                ">
                 <div class="flex items-start">
-                        <form.Field
-                            name="confirmDelete"
-                            :validators="{
-                                onSubmit: ({value}) => {
-                                    if (!value) {
-                                        return 'You must confirm that you understand the consequences of this action';
-                                    }
-                                    return '';
+                    <form.Field
+                        name="confirmDelete"
+                        :validators="{
+                            onSubmit: ({ value }) => {
+                                if (!value) {
+                                    return 'You must confirm that you understand the consequences of this action';
                                 }
-                            }"
-                        >
+                                return '';
+                            },
+                        }">
                         <template #default="{ field }">
                             <div class="flex flex-col">
-                            <div class="flex items-center space-x-3 text-sm">
-                                <Checkbox
-                                    :id="field.name"
-                                    :name="field.name"
-                                    :checked="field.state.value"
-                                    @update:checked="field.handleChange"
-                                    @blur="field.handleBlur"
-                                />
-                                <InputLabel :for="field.name" class="font-medium text-text-primary">
-                                I understand that this will permanently delete all data related to this member
-                                </InputLabel>
-                            </div>
-                            <InputError class="pl-7 pt-2" :message="field.state.meta.errors[0]" />
+                                <div class="flex items-center space-x-3 text-sm">
+                                    <Checkbox
+                                        :id="field.name"
+                                        :name="field.name"
+                                        :checked="field.state.value"
+                                        @update:checked="field.handleChange"
+                                        @blur="field.handleBlur" />
+                                    <InputLabel
+                                        :for="field.name"
+                                        class="font-medium text-text-primary">
+                                        I understand that this will permanently delete all data
+                                        related to this member
+                                    </InputLabel>
+                                </div>
+                                <InputError
+                                    class="pl-7 pt-2"
+                                    :message="field.state.meta.errors[0]" />
                             </div>
                         </template>
-                        </form.Field>
+                    </form.Field>
                 </div>
                 <div class="mt-6 flex justify-end space-x-3">
                     <SecondaryButton @click="close">Cancel</SecondaryButton>
                     <form.Subscribe>
                         <template #default="{ canSubmit, isSubmitting }">
-                            <DangerButton
-                                type="submit"
-                                :disabled="!canSubmit"
-                            >
-                                {{ isSubmitting  ? 'Deleting...' : 'Delete Member' }}
+                            <DangerButton type="submit" :disabled="!canSubmit">
+                                {{ isSubmitting ? 'Deleting...' : 'Delete Member' }}
                             </DangerButton>
                         </template>
                     </form.Subscribe>
@@ -148,4 +148,4 @@ class="mt-6" @submit="
             </form>
         </div>
     </Modal>
-</template> 
+</template>

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

@@ -54,10 +54,7 @@ function saveWithChecks() {
             showBillableRateModal.value = true;
         }, 0);
         show.value = false;
-    } else if (
-        memberBody.value.role === 'owner' &&
-        props.member.role !== 'owner'
-    ) {
+    } else if (memberBody.value.role === 'owner' && props.member.role !== 'owner') {
         show.value = false;
         showOwnershipTransferConfirmModal.value = true;
     } else {
@@ -96,10 +93,7 @@ const roleDescriptionTexts = {
 };
 
 const roleDescription = computed(() => {
-    if (
-        memberBody.value.role &&
-        memberBody.value.role in roleDescriptionTexts
-    ) {
+    if (memberBody.value.role && memberBody.value.role in roleDescriptionTexts) {
         return roleDescriptionTexts[memberBody.value.role];
     }
     return '';
@@ -143,22 +137,14 @@ const roleDescription = computed(() => {
                         <div>
                             <InputLabel for="billableType" value="Billable" />
                             <MemberBillableSelect
-                                v-model="
-                                    billableRateSelect
-                                "
+                                v-model="billableRateSelect"
                                 class="mt-2"
                                 name="billableType"></MemberBillableSelect>
                         </div>
-                        <div
-                            v-if="billableRateSelect === 'custom-rate'"
-                            class="flex-1">
-                            <InputLabel
-                                for="memberBillableRate"
-                                value="Billable Rate" />
+                        <div v-if="billableRateSelect === 'custom-rate'" class="flex-1">
+                            <InputLabel for="memberBillableRate" value="Billable Rate" />
                             <BillableRateInput
-                                v-model="
-                                    memberBody.billable_rate
-                                "
+                                v-model="memberBody.billable_rate"
                                 focus
                                 class="w-full"
                                 :currency="getOrganizationCurrencyString()"

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

@@ -11,10 +11,7 @@ import type { Role } from '@/types/jetstream';
 import { Link, useForm } from '@inertiajs/vue3';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { filterRoles } from '@/utils/roles';
-import {
-    isAllowedToPerformPremiumAction,
-    isBillingActivated,
-} from '@/utils/billing';
+import { isAllowedToPerformPremiumAction, isBillingActivated } from '@/utils/billing';
 import { CreditCardIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
 import { canManageBilling, canUpdateOrganization } from '@/utils/permissions';
 import { api } from '@/packages/api/src';
@@ -44,14 +41,10 @@ const { handleApiRequestNotifications } = useNotificationsStore();
 
 async function submit() {
     if (addTeamMemberForm.role === null || addTeamMemberForm.email === '') {
-        errors.value.email = z
-            .string()
-            .email()
-            .safeParse(addTeamMemberForm.email).success
+        errors.value.email = z.string().email().safeParse(addTeamMemberForm.email).success
             ? ''
             : 'Please enter a valid email address';
-        errors.value.role =
-            addTeamMemberForm.role === null ? 'Please select a role' : '';
+        errors.value.role = addTeamMemberForm.role === null ? 'Please select a role' : '';
         return;
     }
 
@@ -100,21 +93,15 @@ useFocus(clientNameInput, { initialValue: true });
                     <UserGroupIcon class="w-12"></UserGroupIcon>
                 </div>
                 <div class="max-w-sm text-center mx-auto py-4 text-base">
-                    <p class="py-1">
-                        The Free plan is <strong>limited to one member</strong>
-                    </p>
+                    <p class="py-1">The Free plan is <strong>limited to one member</strong></p>
                     <p class="py-1">
                         To add new team members to your organization you,
                         <strong>please upgrade to a paid plan</strong>.
                     </p>
 
-                    <Link
-                        v-if="isBillingActivated() && canManageBilling()"
-                        href="/billing">
+                    <Link v-if="isBillingActivated() && canManageBilling()" href="/billing">
                         <PrimaryButton
-                            v-if="
-                                isBillingActivated() && canUpdateOrganization()
-                            "
+                            v-if="isBillingActivated() && canUpdateOrganization()"
                             type="button"
                             class="mt-6">
                             <CreditCardIcon class="w-5 h-5 me-2" />
@@ -154,8 +141,7 @@ useFocus(clientNameInput, { initialValue: true });
                             :class="{
                                 'border-t border-card-border focus:border-none rounded-t-none':
                                     i > 0,
-                                'rounded-b-none':
-                                    i != Object.keys(availableRoles).length - 1,
+                                'rounded-b-none': i != Object.keys(availableRoles).length - 1,
                             }"
                             @click="addTeamMemberForm.role = role.key">
                             <div
@@ -169,17 +155,13 @@ useFocus(clientNameInput, { initialValue: true });
                                     <div
                                         class="text-sm text-text-primary"
                                         :class="{
-                                            'font-semibold':
-                                                addTeamMemberForm.role ==
-                                                role.key,
+                                            'font-semibold': addTeamMemberForm.role == role.key,
                                         }">
                                         {{ role.name }}
                                     </div>
 
                                     <svg
-                                        v-if="
-                                            addTeamMemberForm.role == role.key
-                                        "
+                                        v-if="addTeamMemberForm.role == role.key"
                                         class="ms-2 h-5 w-5 text-green-400"
                                         xmlns="http://www.w3.org/2000/svg"
                                         fill="none"

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

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
-import {ref} from 'vue';
-import {api, type Member} from '@/packages/api/src';
+import { ref } from 'vue';
+import { api, type Member } from '@/packages/api/src';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
-import {useMutation} from '@tanstack/vue-query';
-import {getCurrentOrganizationId} from "@/utils/useUser";
-import {useNotificationsStore} from "@/utils/notification";
-import {useMembersStore} from "@/utils/useMembers";
+import { useMutation } from '@tanstack/vue-query';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { useNotificationsStore } from '@/utils/notification';
+import { useMembersStore } from '@/utils/useMembers';
 
-const {handleApiRequestNotifications} = useNotificationsStore();
+const { handleApiRequestNotifications } = useNotificationsStore();
 
-const show = defineModel('show', {default: false});
+const show = defineModel('show', { default: false });
 const saving = ref(false);
 
 const props = defineProps<{
@@ -27,7 +27,7 @@ const turnToPlaceholderMutation = useMutation({
         return await api.makePlaceholder(undefined, {
             params: {
                 organization: organizationId,
-                member: props.member.id
+                member: props.member.id,
             },
         });
     },
@@ -36,17 +36,15 @@ const turnToPlaceholderMutation = useMutation({
 async function submit() {
     saving.value = true;
     await handleApiRequestNotifications(
-        () =>
-            turnToPlaceholderMutation.mutateAsync(),
+        () => turnToPlaceholderMutation.mutateAsync(),
         'Deactivating the member was successful!',
         'There was an error deactivating the user.',
         () => {
             show.value = false;
-            useMembersStore().fetchMembers()
+            useMembersStore().fetchMembers();
         }
     );
 }
-
 </script>
 
 <template>
@@ -59,8 +57,9 @@ async function submit() {
 
         <template #content>
             <p>
-                Deactivating the user <strong>{{ member.name }} </strong> will remove the user's access to
-                the organization. You will not be billed for inactive users and all time entries will be preserved.
+                Deactivating the user <strong>{{ member.name }} </strong> will remove the user's
+                access to the organization. You will not be billed for inactive users and all time
+                entries will be preserved.
             </p>
         </template>
         <template #footer>

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

@@ -2,14 +2,14 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
 import { ref } from 'vue';
-import {api, type Member} from '@/packages/api/src';
+import { api, type Member } from '@/packages/api/src';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
-import MemberCombobox from "@/Components/Common/Member/MemberCombobox.vue";
-import {UserIcon, ArrowRightIcon} from "@heroicons/vue/24/solid";
-import {Badge} from "@/packages/ui/src";
+import MemberCombobox from '@/Components/Common/Member/MemberCombobox.vue';
+import { UserIcon, ArrowRightIcon } from '@heroicons/vue/24/solid';
+import { Badge } from '@/packages/ui/src';
 import { useMutation } from '@tanstack/vue-query';
-import {getCurrentOrganizationId} from "@/utils/useUser";
-import {useNotificationsStore} from "@/utils/notification";
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { useNotificationsStore } from '@/utils/notification';
 const { handleApiRequestNotifications, addNotification } = useNotificationsStore();
 
 const show = defineModel('show', { default: false });
@@ -27,40 +27,36 @@ const mergeMember = useMutation({
         if (organizationId === null) {
             throw new Error('No current organization id - create report');
         }
-        return await api.mergeMember({
-            member_id: newMemberId,
-        }, {
-            params: {
-                organization: organizationId,
-                member: props.member.id
+        return await api.mergeMember(
+            {
+                member_id: newMemberId,
             },
-        });
+            {
+                params: {
+                    organization: organizationId,
+                    member: props.member.id,
+                },
+            }
+        );
     },
 });
 
 async function submit() {
     const newMemberId = newMember.value;
-    if(newMemberId !== ''){
+    if (newMemberId !== '') {
         saving.value = true;
         await handleApiRequestNotifications(
-            () =>
-                mergeMember.mutateAsync(newMemberId),
+            () => mergeMember.mutateAsync(newMemberId),
             'Members successfully merged!',
             'There was an error merging the members.',
             () => {
                 show.value = false;
             }
         );
+    } else {
+        addNotification('error', 'Please select a member to merge into.');
     }
-    else{
-        addNotification(
-            'error',
-            'Please select a member to merge into.',
-        );
-    }
-
 }
-
 </script>
 
 <template>
@@ -72,10 +68,14 @@ async function submit() {
         </template>
 
         <template #content>
-            <p>Merging the user <strong>{{ member.name }} </strong> into another one will transfer all time entries to the new user. <strong>This cannot be reverted!</strong></p>
+            <p>
+                Merging the user <strong>{{ member.name }} </strong> into another one will transfer
+                all time entries to the new user. <strong>This cannot be reverted!</strong>
+            </p>
             <div class="py-5 flex flex-col md:flex-row gap-6 items-center">
                 <div class="flex-1">
-                    <Badge class="flex w-full text-base text-left space-x-3 px-3 text-text-secondary font-normal cursor py-1.5">
+                    <Badge
+                        class="flex w-full text-base text-left space-x-3 px-3 text-text-secondary font-normal cursor py-1.5">
                         <UserIcon class="relative z-10 w-4 text-text-secondary"></UserIcon>
                         <div class="flex-1 font-medium truncate">
                             {{ member.name }}
@@ -86,9 +86,7 @@ async function submit() {
                     <ArrowRightIcon class="relative z-10 w-4 text-muted"></ArrowRightIcon>
                 </div>
                 <div class="flex-1">
-                    <MemberCombobox
-                        v-model="newMember"
-                    ></MemberCombobox>
+                    <MemberCombobox v-model="newMember"></MemberCombobox>
                 </div>
             </div>
         </template>

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

@@ -1,7 +1,17 @@
 <script setup lang="ts">
-import { TrashIcon, UserCircleIcon, PencilSquareIcon, ArrowDownOnSquareStackIcon } from '@heroicons/vue/20/solid';
+import {
+    TrashIcon,
+    UserCircleIcon,
+    PencilSquareIcon,
+    ArrowDownOnSquareStackIcon,
+} from '@heroicons/vue/20/solid';
 import type { Member } from '@/packages/api/src';
-import {canDeleteMembers, canMakeMembersPlaceholders, canMergeMembers, canUpdateMembers} from '@/utils/permissions';
+import {
+    canDeleteMembers,
+    canMakeMembersPlaceholders,
+    canMergeMembers,
+    canUpdateMembers,
+} from '@/utils/permissions';
 import {
     DropdownMenu,
     DropdownMenuContent,

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

@@ -26,8 +26,8 @@ const emit = defineEmits<{
             <div class="flex items-center space-x-4">
                 <div class="col-span-6 sm:col-span-4 flex-1">
                     <p class="py-1 text-center">
-                        You are about to transfer the ownership of this
-                        organization to {{ memberName }}.
+                        You are about to transfer the ownership of this organization to
+                        {{ memberName }}.
                     </p>
                 </div>
             </div>

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

@@ -22,9 +22,7 @@ function getNameFromItem(item: Role) {
 }
 
 function getNameForKey(key: string | undefined) {
-    const item = page.props.availableRoles.find(
-        (item) => getKeyFromItem(item) === key
-    );
+    const item = page.props.availableRoles.find((item) => getKeyFromItem(item) === key);
     if (item) {
         return getNameFromItem(item);
     }

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

@@ -10,12 +10,9 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
         </div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Email</div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Role</div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
-            Billable Rate
-        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Billable Rate</div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Status</div>
-        <div
-            class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
+        <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
             <span class="sr-only">Edit</span>
         </div>
     </TableHeading>

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

@@ -86,13 +86,9 @@ const userHasValidMailAddress = computed(() => {
         </div>
         <div
             class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1 items-center font-medium">
-            <CheckCircleIcon
-                v-if="member.is_placeholder === false"
-                class="w-5"></CheckCircleIcon>
+            <CheckCircleIcon v-if="member.is_placeholder === false" class="w-5"></CheckCircleIcon>
             <span v-if="member.is_placeholder === false">Active</span>
-            <UserCircleIcon
-                v-if="member.is_placeholder === true"
-                class="w-5"></UserCircleIcon>
+            <UserCircleIcon v-if="member.is_placeholder === true" class="w-5"></UserCircleIcon>
             <span v-if="member.is_placeholder === true">Inactive</span>
         </div>
         <div
@@ -116,12 +112,8 @@ const userHasValidMailAddress = computed(() => {
                     showMakeMemberPlaceholderModal = true
                 "></MemberMoreOptionsDropdown>
         </div>
-        <MemberEditModal
-            v-model:show="showEditMemberModal"
-            :member="member"></MemberEditModal>
-        <MemberMergeModal
-            v-model:show="showMergeMemberModal"
-            :member="member"></MemberMergeModal>
+        <MemberEditModal v-model:show="showEditMemberModal" :member="member"></MemberEditModal>
+        <MemberMergeModal v-model:show="showMergeMemberModal" :member="member"></MemberMergeModal>
         <MemberMakePlaceholderModal
             v-model:show="showMakeMemberPlaceholderModal"
             :member="member"></MemberMakePlaceholderModal>

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

@@ -41,8 +41,8 @@ defineEmits<{
             >.
         </p>
         <p class="py-0.5 text-center font-semibold">
-            Do you want to update all existing time entries, where the
-            organization billable rate applies as well?
+            Do you want to update all existing time entries, where the organization billable rate
+            applies as well?
         </p>
     </BillableRateModal>
 </template>

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

@@ -1,41 +1,39 @@
 <script setup lang="ts">
-import ProjectBadge from "@/packages/ui/src/Project/ProjectBadge.vue";
-import { computed, nextTick, ref, watch } from "vue";
-import { useProjectsStore } from "@/utils/useProjects";
-import Dropdown from "@/packages/ui/src/Input/Dropdown.vue";
+import ProjectBadge from '@/packages/ui/src/Project/ProjectBadge.vue';
+import { computed, nextTick, ref, watch } from 'vue';
+import { useProjectsStore } from '@/utils/useProjects';
+import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import {
     ComboboxAnchor,
     ComboboxContent,
     ComboboxInput,
     ComboboxItem,
     ComboboxRoot,
-    ComboboxViewport
-} from "radix-vue";
-import { PlusCircleIcon } from "@heroicons/vue/20/solid";
-import { storeToRefs } from "pinia";
-import { api } from "@/packages/api/src";
-import { usePage } from "@inertiajs/vue3";
-import { getRandomColor } from "@/packages/ui/src/utils/color";
-import type { Project } from "@/packages/api/src";
-import ProjectDropdownItem from "@/packages/ui/src/Project/ProjectDropdownItem.vue";
-import { UseFocusTrap } from "@vueuse/integrations/useFocusTrap/component";
+    ComboboxViewport,
+} from 'radix-vue';
+import { PlusCircleIcon } from '@heroicons/vue/20/solid';
+import { storeToRefs } from 'pinia';
+import { api } from '@/packages/api/src';
+import { usePage } from '@inertiajs/vue3';
+import { getRandomColor } from '@/packages/ui/src/utils/color';
+import type { Project } from '@/packages/api/src';
+import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue';
+import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component';
 
-const searchValue = ref("");
+const searchValue = ref('');
 const searchInput = ref<HTMLElement | null>(null);
 const model = defineModel<string | null>({
-    default: null
+    default: null,
 });
 const open = ref(false);
 const projectsStore = useProjectsStore();
-const emit = defineEmits(["update:modelValue", "changed"]);
+const emit = defineEmits(['update:modelValue', 'changed']);
 
 const { projects } = storeToRefs(projectsStore);
 const projectDropdownTrigger = ref<HTMLElement | null>(null);
 const shownProjects = computed(() => {
     return projects.value.filter((project) => {
-        return project.name
-            .toLowerCase()
-            .includes(searchValue.value?.toLowerCase()?.trim() || "");
+        return project.name.toLowerCase().includes(searchValue.value?.toLowerCase()?.trim() || '');
     });
 });
 
@@ -44,7 +42,7 @@ withDefaults(
         border?: boolean;
     }>(),
     {
-        border: true
+        border: true,
     }
 );
 
@@ -62,13 +60,13 @@ async function addProjectIfNoneExists() {
             {
                 name: searchValue.value,
                 color: getRandomColor(),
-                is_billable: false
+                is_billable: false,
             },
             { params: { organization: page.props.auth.user.current_team_id } }
         );
         projects.value.unshift(response.data);
         model.value = response.data.id;
-        searchValue.value = "";
+        searchValue.value = '';
         open.value = false;
     }
 }
@@ -95,16 +93,16 @@ function isProjectSelected(project: Project) {
 }
 
 const selectedProjectName = computed(() => {
-    return currentProject.value?.name || "No Project";
+    return currentProject.value?.name || 'No Project';
 });
 
 const selectedProjectColor = computed(() => {
-    return currentProject.value?.color || "var(--theme-color-icon-default)";
+    return currentProject.value?.color || 'var(--theme-color-icon-default)';
 });
 
 function updateValue(project: Project) {
     model.value = project.id;
-    emit("changed");
+    emit('changed');
 }
 </script>
 
@@ -122,16 +120,13 @@ function updateValue(project: Project) {
         </template>
 
         <template #content>
-            <UseFocusTrap
-                v-if="open"
-                :options="{ immediate: true, allowOutsideClick: true }">
+            <UseFocusTrap v-if="open" :options="{ immediate: true, allowOutsideClick: true }">
                 <ComboboxRoot
                     v-model:search-term="searchValue"
                     :open="open"
                     :model-value="currentProject"
                     class="relative"
-                    @update:model-value="updateValue"
-                    >
+                    @update:model-value="updateValue">
                     <ComboboxAnchor>
                         <ComboboxInput
                             ref="searchInput"
@@ -155,19 +150,12 @@ function updateValue(project: Project) {
                                     :name="project.name"></ProjectDropdownItem>
                             </ComboboxItem>
                             <div
-                                v-if="
-                                searchValue.length > 0 &&
-                                shownProjects.length === 0
-                            "
+                                v-if="searchValue.length > 0 && shownProjects.length === 0"
                                 class="bg-card-background-active">
                                 <div
                                     class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-separator">
-                                    <PlusCircleIcon
-                                        class="w-5 flex-shrink-0"></PlusCircleIcon>
-                                    <span
-                                    >Add "{{ searchValue }}" as a new
-                                    Project</span
-                                    >
+                                    <PlusCircleIcon class="w-5 flex-shrink-0"></PlusCircleIcon>
+                                    <span>Add "{{ searchValue }}" as a new Project</span>
                                 </div>
                             </div>
                         </ComboboxViewport>

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

@@ -3,11 +3,7 @@ import TextInput from '@/packages/ui/src/Input/TextInput.vue';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
 import { computed, ref } from 'vue';
-import type {
-    CreateClientBody,
-    CreateProjectBody,
-    Project,
-} from '@/packages/api/src';
+import type { CreateClientBody, CreateProjectBody, Project } from '@/packages/api/src';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useProjectsStore } from '@/utils/useProjects';
 import { useFocus } from '@vueuse/core';
@@ -64,9 +60,7 @@ useFocus(projectNameInput, { initialValue: true });
 
 const currentClientName = computed(() => {
     if (project.value.client_id) {
-        return clients.value.find(
-            (client) => client.id === project.value.client_id
-        )?.name;
+        return clients.value.find((client) => client.id === project.value.client_id)?.name;
     }
     return 'No Client';
 });
@@ -87,8 +81,7 @@ async function submitBillableRate() {
         </template>
 
         <template #content>
-            <div
-                class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-5">
+            <div class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-5">
                 <div class="flex-1 flex items-center">
                     <div class="text-center">
                         <InputLabel for="color" value="Color" />
@@ -122,8 +115,7 @@ async function submitBillableRate() {
                                 class="bg-input-background cursor-pointer hover:bg-tertiary"
                                 size="xlarge">
                                 <div class="flex items-center space-x-2">
-                                    <UserCircleIcon
-                                        class="w-5 text-icon-default"></UserCircleIcon>
+                                    <UserCircleIcon class="w-5 text-icon-default"></UserCircleIcon>
                                     <span class="whitespace-nowrap">
                                         {{ currentClientName }}
                                     </span>
@@ -137,9 +129,7 @@ async function submitBillableRate() {
                 <div>
                     <ProjectEditBillableSection
                         v-model:is-billable="project.is_billable"
-                        v-model:billable-rate="
-                            project.billable_rate
-                        "
+                        v-model:billable-rate="project.billable_rate"
                         :currency="getOrganizationCurrencyString()"
                         @submit="submit"></ProjectEditBillableSection>
                 </div>

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import {
-    TrashIcon,
-    PencilSquareIcon,
-    ArchiveBoxIcon,
-} from '@heroicons/vue/20/solid';
+import { TrashIcon, PencilSquareIcon, ArchiveBoxIcon } from '@heroicons/vue/20/solid';
 import type { Project } from '@/packages/api/src';
 import { canDeleteProjects, canUpdateProjects } from '@/utils/permissions';
 import {

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

@@ -7,12 +7,7 @@ import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue
 import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
 import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
 import { canCreateProjects } from '@/utils/permissions';
-import type {
-    CreateProjectBody,
-    Project,
-    Client,
-    CreateClientBody,
-} from '@/packages/api/src';
+import type { CreateProjectBody, Project, Client, CreateClientBody } from '@/packages/api/src';
 import { useProjectsStore } from '@/utils/useProjects';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
@@ -24,15 +19,11 @@ const props = defineProps<{
 }>();
 
 const showCreateProjectModal = ref(false);
-async function createProject(
-    project: CreateProjectBody
-): Promise<Project | undefined> {
+async function createProject(project: CreateProjectBody): Promise<Project | undefined> {
     return await useProjectsStore().createProject(project);
 }
 
-async function createClient(
-    client: CreateClientBody
-): Promise<Client | undefined> {
+async function createClient(client: CreateClientBody): Promise<Client | undefined> {
     return await useClientsStore().createClient(client);
 }
 const { clients } = storeToRefs(useClientsStore());
@@ -52,19 +43,11 @@ import { isAllowedToPerformPremiumAction } from '@/utils/billing';
         :enable-estimated-time="isAllowedToPerformPremiumAction"></ProjectCreateModal>
     <div class="flow-root max-w-[100vw] overflow-x-auto">
         <div class="inline-block min-w-full align-middle">
-            <div
-                data-testid="project_table"
-                class="grid min-w-full"
-                :style="gridTemplate">
+            <div data-testid="project_table" class="grid min-w-full" :style="gridTemplate">
                 <ProjectTableHeading
-                    :show-billable-rate="
-                        props.showBillableRate
-                    "></ProjectTableHeading>
-                <div
-                    v-if="projects.length === 0"
-                    class="col-span-5 py-24 text-center">
-                    <FolderPlusIcon
-                        class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
+                    :show-billable-rate="props.showBillableRate"></ProjectTableHeading>
+                <div 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-text-primary font-semibold">
                         {{
                             canCreateProjects()

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

@@ -12,15 +12,9 @@ defineProps<{
             Name
         </div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Client</div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
-            Total Time
-        </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
-            Progress
-        </div>
-        <div
-            v-if="showBillableRate"
-            class="px-3 py-1.5 text-left font-semibold text-text-primary">
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Total Time</div>
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Progress</div>
+        <div v-if="showBillableRate" class="px-3 py-1.5 text-left font-semibold text-text-primary">
             Billable Rate
         </div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Status</div>

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

@@ -26,14 +26,11 @@ const props = defineProps<{
 }>();
 
 const client = computed(() => {
-    return clients.value.find(
-        (client) => client.id === props.project.client_id
-    );
+    return clients.value.find((client) => client.id === props.project.client_id);
 });
 
 const projectTasksCount = computed(() => {
-    return tasks.value.filter((task) => task.project_id === props.project.id)
-        .length;
+    return tasks.value.filter((task) => task.project_id === props.project.id).length;
 });
 
 function deleteProject() {
@@ -67,7 +64,6 @@ const billableRateInfo = computed(() => {
 });
 
 const showEditProjectModal = ref(false);
-
 </script>
 
 <template>
@@ -86,15 +82,10 @@ const showEditProjectModal = ref(false);
             <span class="overflow-ellipsis overflow-hidden">
                 {{ project.name }}
             </span>
-            <span class="text-text-secondary">
-                {{ projectTasksCount }} Tasks
-            </span>
+            <span class="text-text-secondary"> {{ projectTasksCount }} Tasks </span>
         </div>
-        <div
-            class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-text-secondary">
-            <div
-                v-if="project.client_id"
-                class="overflow-ellipsis overflow-hidden">
+        <div class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-text-secondary">
+            <div v-if="project.client_id" class="overflow-ellipsis overflow-hidden">
                 {{ client?.name }}
             </div>
             <div v-else>No client</div>
@@ -111,10 +102,8 @@ const showEditProjectModal = ref(false);
             </div>
             <div v-else>--</div>
         </div>
-        <div
-            class="whitespace-nowrap px-3 flex items-center text-sm text-text-secondary">
-            <UpgradeBadge
-                v-if="!isAllowedToPerformPremiumAction()"></UpgradeBadge>
+        <div class="whitespace-nowrap px-3 flex items-center text-sm text-text-secondary">
+            <UpgradeBadge v-if="!isAllowedToPerformPremiumAction()"></UpgradeBadge>
             <EstimatedTimeProgress
                 v-else-if="project.estimated_time"
                 :estimated="project.estimated_time"

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

@@ -42,8 +42,8 @@ defineEmits<{
             >.
         </p>
         <p class="py-1 text-center font-semibold max-w-md mx-auto">
-            Do you want to update all existing time entries, where the project
-            member billable rate applies as well?
+            Do you want to update all existing time entries, where the project member billable rate
+            applies as well?
         </p>
     </BillableRateModal>
 </template>

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

@@ -2,10 +2,7 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
 import { ref } from 'vue';
-import type {
-    CreateProjectMemberBody,
-    ProjectMember,
-} from '@/packages/api/src';
+import type { CreateProjectMemberBody, ProjectMember } from '@/packages/api/src';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useFocus } from '@vueuse/core';
 import { useProjectMembersStore } from '@/utils/useProjectMembers';
@@ -57,9 +54,7 @@ useFocus(projectNameInput, { initialValue: true });
                 </div>
                 <div class="col-span-3 sm:col-span-1 flex-1">
                     <BillableRateInput
-                        v-model="
-                            projectMember.billable_rate
-                        "
+                        v-model="projectMember.billable_rate"
                         name="billable_rate"
                         :currency="getOrganizationCurrencyString()"></BillableRateInput>
                 </div>

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

@@ -2,10 +2,7 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
 import { ref, watch } from 'vue';
-import type {
-    ProjectMember,
-    UpdateProjectMemberBody,
-} from '@/packages/api/src';
+import type { ProjectMember, UpdateProjectMemberBody } from '@/packages/api/src';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useFocus } from '@vueuse/core';
 import { useProjectMembersStore } from '@/utils/useProjectMembers';
@@ -29,10 +26,7 @@ const projectMemberBody = ref<UpdateProjectMemberBody>({
 });
 const showBillableRateModal = ref(false);
 async function submit() {
-    if (
-        props.projectMember.billable_rate !==
-        projectMemberBody.value.billable_rate
-    ) {
+    if (props.projectMember.billable_rate !== projectMemberBody.value.billable_rate) {
         // make sure that the alert modal is not immediately submitted when user presses enter
         setTimeout(() => {
             showBillableRateModal.value = true;
@@ -84,20 +78,14 @@ useFocus(projectNameInput, { initialValue: true });
                 @close="showBillableRateModal = false"
                 @submit="submitBillableRate"></ProjectMemberBillableRateModal>
             <div class="grid grid-cols-3 items-center space-x-4">
-                <div
-                    class="col-span-3 sm:col-span-2 space-x-2 flex items-center">
+                <div class="col-span-3 sm:col-span-2 space-x-2 flex items-center">
                     <UserIcon class="w-4 text-text-secondary"></UserIcon>
                     <span>{{ props.name }}</span>
                 </div>
                 <div class="col-span-3 sm:col-span-1 flex-1">
-                    <InputLabel
-                        for="billable_rate"
-                        class="mb-2"
-                        value="Billable Rate"></InputLabel>
+                    <InputLabel for="billable_rate" class="mb-2" value="Billable Rate"></InputLabel>
                     <BillableRateInput
-                        v-model="
-                            projectMemberBody.billable_rate
-                        "
+                        v-model="projectMemberBody.billable_rate"
                         :currency="getOrganizationCurrencyString()"
                         name="billable_rate"
                         @keydown.enter="submit"></BillableRateInput>

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

@@ -22,9 +22,7 @@ const props = defineProps<{
 const { members } = storeToRefs(useMembersStore());
 
 const currentMember = computed(() => {
-    return members.value.find(
-        (member) => member.id === props.projectMember.user_id
-    );
+    return members.value.find((member) => member.id === props.projectMember.user_id);
 });
 </script>
 

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

@@ -28,24 +28,16 @@ const createProjectMember = ref(false);
                 class="grid min-w-full"
                 style="grid-template-columns: 1fr 150px 150px 80px">
                 <ProjectMemberTableHeading></ProjectMemberTableHeading>
-                <div
-                    v-if="projectMembers.length === 0"
-                    class="col-span-5 py-24 text-center">
-                    <UserGroupIcon
-                        class="w-8 text-icon-default inline pb-2"></UserGroupIcon>
+                <div 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-text-primary font-semibold">No project members</h3>
                     <p class="pb-5">Add the first project member!</p>
-                    <SecondaryButton
-                        :icon="PlusIcon"
-                        @click="createProjectMember = true"
+                    <SecondaryButton :icon="PlusIcon" @click="createProjectMember = true"
                         >Add a new Project Member
                     </SecondaryButton>
                 </div>
-                <template
-                    v-for="projectMember in projectMembers"
-                    :key="projectMember.id">
-                    <ProjectMemberTableRow
-                        :project-member="projectMember"></ProjectMemberTableRow>
+                <template v-for="projectMember in projectMembers" :key="projectMember.id">
+                    <ProjectMemberTableRow :project-member="projectMember"></ProjectMemberTableRow>
                 </template>
             </div>
         </div>

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

@@ -8,9 +8,7 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
             class="py-1.5 pr-3 text-left font-semibold text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Name
         </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
-            Billable Rate
-        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Billable Rate</div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Role</div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>

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

@@ -31,9 +31,7 @@ function editProjectMember() {
 
 const { members } = storeToRefs(useMembersStore());
 const member = computed(() => {
-    return members.value.find(
-        (member) => member.id === props.projectMember.member_id
-    );
+    return members.value.find((member) => member.id === props.projectMember.member_id);
 });
 const showEditModal = ref(false);
 </script>

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

@@ -5,10 +5,7 @@ import DialogModal from '@/packages/ui/src/DialogModal.vue';
 import { ref } from 'vue';
 import PrimaryButton from '../../../packages/ui/src/Buttons/PrimaryButton.vue';
 import InputLabel from '../../../packages/ui/src/Input/InputLabel.vue';
-import type {
-    CreateReportBody,
-    CreateReportBodyProperties,
-} from '@/packages/api/src';
+import type { CreateReportBody, CreateReportBodyProperties } from '@/packages/api/src';
 import { useMutation } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { api } from '@/packages/api/src';
@@ -80,10 +77,7 @@ async function submit() {
             <div class="items-center space-y-4 w-full">
                 <div class="w-full">
                     <InputLabel for="name" value="Name" />
-                    <TextInput
-                        id="name"
-                        v-model="report.name"
-                        class="mt-1.5 w-full"></TextInput>
+                    <TextInput id="name" v-model="report.name" class="mt-1.5 w-full"></TextInput>
                 </div>
                 <div>
                     <InputLabel for="description" value="Description" />
@@ -95,19 +89,13 @@ async function submit() {
                 <InputLabel value="Visibility" />
                 <div class="flex items-center space-x-12">
                     <div class="flex items-center space-x-3 px-2 py-3">
-                        <Checkbox
-                            id="is_public"
-                            v-model:checked="report.is_public"></Checkbox>
+                        <Checkbox id="is_public" v-model:checked="report.is_public"></Checkbox>
                         <InputLabel for="is_public" value="Public" />
                     </div>
-                    <div
-                        v-if="report.is_public"
-                        class="flex items-center space-x-4">
+                    <div v-if="report.is_public" class="flex items-center space-x-4">
                         <div>
                             <InputLabel for="public_until" value="Expires at" />
-                            <div class="text-text-tertiary font-medium">
-                                (optional)
-                            </div>
+                            <div class="text-text-tertiary font-medium">(optional)</div>
                         </div>
                         <DatePicker id="public_until"></DatePicker>
                     </div>

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

@@ -94,10 +94,7 @@ async function submit() {
             <div class="items-center space-y-4 w-full">
                 <div class="w-full">
                     <InputLabel for="name" value="Name" />
-                    <TextInput
-                        id="name"
-                        v-model="report.name"
-                        class="mt-1.5 w-full"></TextInput>
+                    <TextInput id="name" v-model="report.name" class="mt-1.5 w-full"></TextInput>
                 </div>
                 <div>
                     <InputLabel for="description" value="Description" />
@@ -109,14 +106,10 @@ async function submit() {
                 <InputLabel value="Visibility" />
                 <div class="flex items-center space-x-12">
                     <div class="flex items-center space-x-2 px-2 py-3">
-                        <Checkbox
-                            id="is_public"
-                            v-model:checked="report.is_public"></Checkbox>
+                        <Checkbox id="is_public" v-model:checked="report.is_public"></Checkbox>
                         <InputLabel for="is_public" value="Public" />
                     </div>
-                    <div
-                        v-if="report.is_public"
-                        class="flex items-center space-x-4">
+                    <div v-if="report.is_public" class="flex items-center space-x-4">
                         <InputLabel for="public_until" value="Expires at" />
                         <DatePicker id="public_until"></DatePicker>
                     </div>

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

@@ -31,13 +31,9 @@ function onSaveReportClick() {
         v-model:show="showCreateReportModal"
         :properties="reportProperties"></ReportCreateModal>
     <UpgradeModal v-model:show="showPremiumModal">
-        <strong>Sharable Reports</strong> is only available in solidtime
-        Professional.
+        <strong>Sharable Reports</strong> is only available in solidtime Professional.
     </UpgradeModal>
-    <SecondaryButton
-        v-if="canCreateReports()"
-        :icon="SaveIcon"
-        @click="onSaveReportClick"
+    <SecondaryButton v-if="canCreateReports()" :icon="SaveIcon" @click="onSaveReportClick"
         >Save Report</SecondaryButton
     >
 </template>

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

@@ -21,25 +21,15 @@ const gridTemplate = computed(() => {
 <template>
     <div class="flow-root max-w-[100vw] overflow-x-auto">
         <div class="inline-block min-w-full align-middle">
-            <div
-                data-testid="report_table"
-                class="grid min-w-full"
-                :style="gridTemplate">
+            <div data-testid="report_table" class="grid min-w-full" :style="gridTemplate">
                 <ReportTableHeading></ReportTableHeading>
-                <div
-                    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-text-primary font-semibold">
-                        No shared reports found
-                    </h3>
+                <div 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-text-primary font-semibold">No shared reports found</h3>
                     <p v-if="canCreateProjects()" class="pb-5">
                         Go to the overview to create a report
                     </p>
-                    <SecondaryButton
-                        :icon="PlusIcon"
-                        @click="router.visit(route('reporting'))"
+                    <SecondaryButton :icon="PlusIcon" @click="router.visit(route('reporting'))"
                         >Go to overview
                     </SecondaryButton>
                 </div>