add feedback button in sidebar

This became redundant due to the floating feedback bubble removal

.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_DB_PORT=54329
-FORWARD_WEB_PORT=8083
 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 @@
-<!--
+## What does this PR do?
-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.
 
-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. 
+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. 
-Therefore, we do not currently accept any contributions, unless you are a member of the team.
 
-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/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/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),

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 ({
+test('test that creating and deleting a new client via the modal works', async ({ page }) => {
-    page,
+    const newClientName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
-}) => {
-    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(
+    const moreButton = page.locator("[aria-label='Actions for Client " + newClientName + "']");
-        "[aria-label='Actions for Client " + newClientName + "']"
-    );
     moreButton.click();
-    const deleteButton = page.locator(
+    const deleteButton = page.locator("[aria-label='Delete Client " + newClientName + "']");
-        "[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(
+    await expect(page.getByTestId('client_table')).not.toContainText(newClientName);
-        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
+        page.getByRole('button', { name: 'Invite Member', exact: true }).click(),
-            .getByRole('button', { name: 'Invite Member', exact: true })
+        expect(page.getByRole('main')).toContainText(`new+${editorId}@editor.test`),
-            .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
+        page.getByRole('button', { name: 'Invite Member', exact: true }).click(),
-            .getByRole('button', { name: 'Invite Member', exact: true })
+        await expect(page.getByRole('main')).toContainText(`new+${editorId}@editor.test`),
-            .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
+        page.getByRole('button', { name: 'Invite Member', exact: true }).click(),
-            .getByRole('button', { name: 'Invite Member', exact: true })
+        expect(page.getByRole('main')).toContainText(`new+${adminId}@admin.test`),
-            .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
+        page.getByRole('button', { name: 'Invite Member', exact: true }).click(),
-            .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
+    await page.getByPlaceholder('Billable Rate').fill(newBillableRate.toString());
-        .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 ===
+                (await response.json()).data.billable_rate === newBillableRate * 100
-                    newBillableRate * 100
         ),
     ]);
 });

e2e/organization.spec.ts

@@ -35,9 +35,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(
+    await expect(page.locator('[data-testid="organization_switcher"]:visible')).toContainText(
-        page.locator('[data-testid="organization_switcher"]:visible')
+        'NEW ORG NAME'
-    ).toContainText('NEW ORG NAME');
+    );
 });
 
 test('test that organization billable rate can be updated with all existing time entries', async ({
@@ -46,9 +46,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
+    await page.getByLabel('Organization Billable Rate').fill(newBillableRate.toString());
-        .getByLabel('Organization Billable Rate')
-        .fill(newBillableRate.toString());
     await page
         .locator('form')
         .filter({ hasText: 'Organization Billable' })
@@ -56,9 +54,7 @@ test('test that organization billable rate can be updated with all existing time
         .click();
 
     await Promise.all([
-        page
+        page.getByRole('button', { name: 'Yes, update existing time entries' }).click(),
-            .getByRole('button', { name: 'Yes, update existing time entries' })
-            .click(),
         page.waitForRequest(
             async (request) =>
                 request.url().includes('/organizations/') &&
@@ -70,15 +66,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 ===
+                (await response.json()).data.billable_rate === newBillableRate * 100
-                    newBillableRate * 100
         ),
     ]);
 });
 
-test('test that organization format settings can be updated', async ({
+test('test that organization format settings can be updated', async ({ page }) => {
-    page,
-}) => {
     await goToOrganizationSettings(page);
 
     // Test number format
@@ -113,8 +106,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 ===
+                (await response.json()).data.currency_format === 'iso-code-after-with-space'
-                    'iso-code-after-with-space'
         ),
     ]);
 
@@ -132,8 +124,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 ===
+                (await response.json()).data.date_format === 'slash-separated-dd-mm-yyyy'
-                    'slash-separated-dd-mm-yyyy'
         ),
     ]);
 
@@ -169,19 +160,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 ===
+                (await response.json()).data.interval_format === 'hours-minutes-colon-separated'
-                    'hours-minutes-colon-separated'
         ),
     ]);
 });
 
-test('test that format settings are reflected in the dashboard', async ({
+test('test that format settings are reflected in the dashboard', async ({ page }) => {
-    page,
-}) => {
     // check that 0h 00min is displayed
-    await expect(
+    await expect(page.getByText('0h 00min', { exact: true }).nth(0)).toBeVisible();
-        page.getByText('0h 00min', { exact: true }).nth(0)
-    ).toBeVisible();
 
     // First set the format settings
     await goToOrganizationSettings(page);
@@ -213,10 +199,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 ===
+                (await response.json()).data.interval_format === 'hours-minutes-colon-separated' &&
-                    'hours-minutes-colon-separated' &&
+                (await response.json()).data.currency_format === 'symbol-after' &&
-                (await response.json()).data.currency_format ===
-                    'symbol-after' &&
                 (await response.json()).data.number_format === 'comma-point'
         ),
     ]);
@@ -232,16 +216,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(
+    await expect(page.getByText('0h 00min', { exact: true }).nth(0)).not.toBeVisible();
-        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
+        page.getByText(new Date().toLocaleDateString('en-GB'), { exact: true }).nth(0)
-            .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 { test, expect } from '../playwright/fixtures';
-import {PLAYWRIGHT_BASE_URL} from '../playwright/config';
+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(
+    await expect(page.getByLabel('Email')).toHaveValue(`newemail+${emailId}@test.com`);
-        `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.getByRole('button', { name: 'Create API Key' }).click(),
-        page.waitForResponse('**/users/me/api-tokens')
+        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.getByRole('dialog').getByRole('button', { name: 'Delete' }).click(),
-        page.waitForResponse('**/users/me/api-tokens')
+        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.getByRole('dialog').getByRole('button', { name: 'Revoke' }).click(),
-        page.waitForResponse('**/users/me/api-tokens')
+        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 =
+    const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
-        '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
+    await page.getByRole('menuitem', { name: 'Edit Project Member' }).click();
-        .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 ===
+                (await response.json()).data.billable_rate === newBillableRate * 100
-                    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 ({
+test('test that creating and deleting a new project via the modal works', async ({ page }) => {
-    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);
@@ -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(
+    await expect(page.getByTestId('project_table')).toContainText(newProjectName);
-        newProjectName
+    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(
+    const deleteButton = page.locator("[aria-label='Delete Project " + newProjectName + "']");
-        "[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(
+    await expect(page.getByTestId('project_table')).not.toContainText(newProjectName);
-        newProjectName
-    );
 });
 
 test('test that archiving and unarchiving projects works', async ({ page }) => {
-    const newProjectName =
+    const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
-        '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 ({
+test('test that updating billable rate works with existing time entries', async ({ page }) => {
-    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();
@@ -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
+    await page.getByPlaceholder('Billable Rate').fill(newBillableRate.toString());
-        .getByPlaceholder('Billable Rate')
-        .fill(newBillableRate.toString());
     await page.getByRole('button', { name: 'Update Project' }).click();
 
     await Promise.all([
-        page
+        page.locator('button').filter({ hasText: 'Yes, update existing time' }).click(),
-        .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 ===
+                (await response.json()).data.billable_rate === newBillableRate * 100
-                    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');
 }
@@ -31,7 +29,10 @@ async function createTimeEntryWithProject(page: Page, projectName: string, durat
     await page.getByRole('button', { 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,7 +44,9 @@ 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
+        ),
     ]);
 }
 
@@ -52,7 +55,10 @@ async function createTimeEntryWithTag(page: Page, tagName: string, duration: str
     await page.getByRole('button', { 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 +75,19 @@ 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();
 
     // 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 +122,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 +154,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 +179,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 ({
+test('test that creating and deleting a new client via the modal works', async ({ page }) => {
-    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(
+    const moreButton = page.locator("[aria-label='Actions for Tag " + newTagName + "']");
-        "[aria-label='Actions for Tag " + newTagName + "']"
-    );
     moreButton.click();
-    const deleteButton = page.locator(
+    const deleteButton = page.locator("[aria-label='Delete Tag " + newTagName + "']");
-        "[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 ({
+test('test that creating and deleting a new tag in a new project works', async ({ page }) => {
-    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);
@@ -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(
+    await expect(page.getByTestId('project_table')).toContainText(newProjectName);
-        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(
+    const taskMoreButton = page.locator("[aria-label='Actions for Task " + newTaskName + "']");
-        "[aria-label='Actions for Task " + newTaskName + "']"
-    );
     taskMoreButton.click();
-    const taskDeleteButton = page.locator(
+    const taskDeleteButton = page.locator("[aria-label='Delete Task " + newTaskName + "']");
-        "[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(
+    const moreButton = page.locator("[aria-label='Actions for Project " + newProjectName + "']");
-        "[aria-label='Actions for Project " + newProjectName + "']"
-    );
     moreButton.click();
-    const deleteButton = page.locator(
+    const deleteButton = page.locator("[aria-label='Delete Project " + newProjectName + "']");
-        "[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(
+    await expect(page.getByTestId('project_table')).not.toContainText(newProjectName);
-        newProjectName
-    );
 });
 
 test('test that archiving and unarchiving tasks works', async ({ page }) => {
-    const newProjectName =
+    const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
-        '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) => response.url().includes('/time-entries') && response.status() === 200
-                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) => response.url().includes('/time-entries') && response.status() === 200
-                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(
+    await expect(newTimeEntry.getByTestId('timer_button')).toHaveClass(/bg-accent-300\/70/);
-        /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(
+    const descriptionElement = newTimeEntry.getByTestId('time_entry_description');
-        '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')) ===
+                (await response.headerValue('Content-Type')) === 'application/json' &&
-                    '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((await response.json()).data.tags) === JSON.stringify([])
-                    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(
+    const descriptionElement = newTimeEntry.getByTestId('time_entry_description');
-        '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')) ===
+                (await response.headerValue('Content-Type')) === 'application/json' &&
-                    '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((await response.json()).data.tags) === JSON.stringify([])
-                    JSON.stringify([])
             );
         }),
     ]);
 });
 
-test('test that adding a new tag to an existing time entry works', async ({
+test('test that adding a new tag to an existing time entry works', async ({ page }) => {
-    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')) ===
+                (await response.headerValue('Content-Type')) === 'application/json' &&
-                    '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')) ===
+            (await response.headerValue('Content-Type')) === 'application/json' &&
-                '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(
+    const timeEntryRangeElement = newTimeEntry.getByTestId('time_entry_range_selector');
-        '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')) ===
+                (await response.headerValue('Content-Type')) === 'application/json' &&
-                    '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 ({
+test('test that updating a the duration in the overview works on blur', async ({ page }) => {
-    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')) ===
+                (await response.headerValue('Content-Type')) === 'application/json' &&
-                    '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 ({
+test('test that starting a time entry from the overview works', async ({ page }) => {
-    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')) ===
+                (await response.headerValue('Content-Type')) === 'application/json' &&
-                    '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')) ===
+                (await response.headerValue('Content-Type')) === 'application/json' &&
-                    '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 ({
+test('test that deleting a time entry from the overview works', async ({ page }) => {
-    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 ({
+test.skip('test that load more works when the end of page is reached', async ({ page }) => {
-    page,
-}) => {
     // this test is flaky when you do not need to scroll
     await Promise.all([
         goToTimeOverview(page),
         page.waitForResponse(
-            (response) =>
+            (response) => response.url().includes('/time-entries') && response.status() === 200
-                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')) ===
+                (await response.headerValue('Content-Type')) === 'application/json' &&
-                    'application/json' &&
+                JSON.stringify((await response.json()).data) === JSON.stringify([])
-                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(
+    await expect(page.locator('body')).toHaveText(/All time entries are loaded!/);
-        /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([
+    await Promise.all([stoppedTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
-        stoppedTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
     await assertThatTimerIsStopped(page);
 });
 
-test('test that starting and stopping a timer with a description works', async ({
+test('test that starting and stopping a timer with a description works', async ({ page }) => {
-    page,
-}) => {
     await goToDashboard(page);
     // TODO: Fix flakyness by disabling description input field until timer is loaded
     await page.waitForTimeout(500);
-    await page
+    await page.getByTestId('time_entry_description').fill('New Time Entry Description');
-        .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([
+    await Promise.all([newTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
-        newTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
     await assertThatTimerHasStarted(page);
     await page.waitForTimeout(500);
-    const beforeTimerValue = await page
+    const beforeTimerValue = await page.getByTestId('time_entry_time').inputValue();
-        .getByTestId('time_entry_time')
-        .inputValue();
     await page.waitForTimeout(2000);
-    const afterWaitTimeValue = await page
+    const afterWaitTimeValue = await page.getByTestId('time_entry_time').inputValue();
-        .getByTestId('time_entry_time')
-        .inputValue();
     expect(afterWaitTimeValue).not.toEqual(beforeTimerValue);
     await page.reload();
     await page.waitForTimeout(500);
 
-    const afterReloadTimerValue = await page
+    const afterReloadTimerValue = await page.getByTestId('time_entry_time').inputValue();
-        .getByTestId('time_entry_time')
-        .inputValue();
     await page.waitForTimeout(2000);
-    const afterReloadAfterWaitTimerValue = await page
+    const afterReloadAfterWaitTimerValue = await page.getByTestId('time_entry_time').inputValue();
-        .getByTestId('time_entry_time')
-        .inputValue();
     expect(afterReloadTimerValue).not.toEqual(afterReloadAfterWaitTimerValue);
 });
 
-test('test that starting and updating the description while running works', async ({
+test('test that starting and updating the description while running works', async ({ page }) => {
-    page,
-}) => {
     await goToDashboard(page);
 
-    await Promise.all([
+    await Promise.all([newTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
-        newTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
     await assertThatTimerHasStarted(page);
     await page.waitForTimeout(500);
-    await page
+    await page.getByTestId('time_entry_description').fill('New Time Entry Description');
-        .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 ({
+test('test that starting and updating the time while running works', async ({ page }) => {
-    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')) ===
+                (await response.headerValue('Content-Type')) === 'application/json' &&
-                    'application/json' &&
                 (await response.json()).data.id !== null &&
                 (await response.json()).data.start !== null &&
-                (await response.json()).data.start !==
+                (await response.json()).data.start !== (await createResponse.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((await response.json()).data.tags) === JSON.stringify([])
-                    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([
+    await Promise.all([stoppedTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
-        stoppedTimeEntryResponse(page),
-        startOrStopTimerWithButton(page),
-    ]);
     await assertThatTimerIsStopped(page);
 });
 
-test('test that entering a human readable time starts the timer on blur', async ({
+test('test that entering a human readable time starts the timer on blur', async ({ page }) => {
-    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([
+    await Promise.all([stoppedTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
-        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 ({
+test('test that entering a number in the time range starts the timer on blur', async ({ page }) => {
-    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([
+    await Promise.all([stoppedTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
-        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([
+    await Promise.all([stoppedTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
-        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 ({
+test('test that entering a time starts the timer on enter', async ({ page }) => {
-    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([
+    await Promise.all([stoppedTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
-        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 ({
+test('test that adding a new tag when the timer is running', async ({ page }) => {
-    page,
-}) => {
     const newTagName = 'New Tag' + Math.floor(Math.random() * 10000);
     await goToDashboard(page);
-    await Promise.all([
+    await Promise.all([newTimeEntryResponse(page), startOrStopTimerWithButton(page)]);
-        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
+    await page.locator('[data-testid="dashboard_timer"] [data-testid="timer_button"]').click();
-        .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')) ===
+            (await response.headerValue('Content-Type')) === 'application/json' &&
-                '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((await response.json()).data.tags) === JSON.stringify(tags)
-                JSON.stringify(tags)
         );
     });
 }
 
 export async function assertThatTimerIsStopped(page: Page) {
     await expect(
-        page.locator(
+        page.locator('[data-testid="dashboard_timer"] [data-testid="timer_button"]')
-            '[data-testid="dashboard_timer"] [data-testid="timer_button"]'
-        )
     ).toHaveClass(/bg-accent-300\/70/);
 }
 
-export async function stoppedTimeEntryResponse(
+export async function stoppedTimeEntryResponse(page: Page, { description = '', tags = [] } = {}) {
-    page: Page,
-    { description = '', tags = [] } = {}
-) {
     return page.waitForResponse(async (response) => {
         return (
             response.status() === 200 &&
             response.url().includes('/time-entries/') &&
-            (await response.headerValue('Content-Type')) ===
+            (await response.headerValue('Content-Type')) === 'application/json' &&
-                '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((await response.json()).data.tags) === JSON.stringify(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')) ===
+            (await response.headerValue('Content-Type')) === 'application/json' &&
-                '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",
+            'vue/multi-word-component-names': 'off',
-            "@typescript-eslint/no-unused-vars": "off",
+            '@typescript-eslint/no-unused-vars': 'off',
-            "unused-imports/no-unused-imports": "error",
+            'unused-imports/no-unused-imports': 'error',
-            "unused-imports/no-unused-vars": ["error", {
+            'unused-imports/no-unused-vars': [
-                "vars": "all",
+                'error',
-                "varsIgnorePattern": "^_",
+                {
-                "args": "after-used",
+                    'vars': 'all',
-                "argsIgnorePattern": "^_",
+                    'varsIgnorePattern': '^_',
-            }],
+                    'args': 'after-used',
+                    'argsIgnorePattern': '^_',
+                },
+            ],
         },
     },
     eslintConfigPrettier

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 =
+export const PLAYWRIGHT_BASE_URL = process.env.PLAYWRIGHT_BASE_URL ?? 'http://solidtime.test';
-    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
+        await page.getByLabel('Email').fill(`john+${Math.round(Math.random() * 1000000)}@doe.com`);
-            .getByLabel('Email')
+        await page.getByLabel('Password', { exact: true }).fill('amazingpassword123');
-            .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-tertiary: #eeeeef;
-    --color-bg-quaternary: #ffffff;
+    --color-bg-quaternary: #e1e1e3;
-    --color-bg-background: #ffffff;
+    --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: var(--color-bg-primary);
-    --theme-color-card-background-active: 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,8 +166,8 @@ body {
 /* Inter Variable Font with browser compatibility considerations */
 @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter-Variable.woff2') format('woff2'),
+    src: url('/fonts/InterVariable.woff2') format('woff2'),
-         url('/fonts/Inter-Variable.ttf') format('truetype');
+         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
+            <div class="px-4 py-5 sm:p-6 bg-card-background shadow sm:rounded-lg">
-                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 { onMounted } from 'vue';
-import { useTheme } from "@/utils/theme.js";
+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
+        <div v-if="show && message" class="bg-secondary border-b border-border-secondary">
-            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 {
+import { CheckBadgeIcon, XMarkIcon, XCircleIcon } from '@heroicons/vue/16/solid';
-    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(
+const hideTrialBanner = useSessionStorage('showTrialBanner-' + getCurrentOrganizationId(), false);
-    'showTrialBanner-' + getCurrentOrganizationId(),
-    false
-);
 const showTrialBanner = computed(() => isInTrial() && !hideTrialBanner.value);
 const hideBlockedBanner = useSessionStorage(
     'showBlockedBanner-' + getCurrentOrganizationId(),
     false
 );
-const showBlockedBanner = computed(
+const showBlockedBanner = computed(() => isBlocked() && !hideBlockedBanner.value);
-    () => isBlocked() && !hideBlockedBanner.value
-);
 const hideFreeUpgradeBanner = useSessionStorage(
     'showFreeUpgradeBanner-' + getCurrentOrganizationId(),
     false
 );
 const showFreeUpgradeBanner = computed(
     () =>
-        isFreePlan() &&
+        isFreePlan() && !isBlocked() && !hideFreeUpgradeBanner.value && !showBlackFridayBanner.value
-        !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
+                <svg class="w-4 mr-1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/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
+                    <XMarkIcon class="w-4 opacity-50 hover:opacity-100"></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
+                        To continue using all features & support the development of solidtime,
-                        of solidtime, please upgrade your plan.
+                        please upgrade your plan.
                     </span>
                 </div>
             </div>
@@ -143,8 +127,7 @@ const showBlackFridayBanner = computed(() => {
                     </div>
                 </Link>
                 <button class="p-1" @click="hideTrialBanner = true">
-                    <XMarkIcon
+                    <XMarkIcon class="w-4 opacity-50 hover:opacity-100"></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">
+                    <span class="font-medium"> Your organization is currently blocked. </span>
-                        Your organization is currently blocked.
-                    </span>
                     <span class="hidden md:inline">
-                        Please upgrade to a premium plan or remove all users
+                        Please upgrade to a premium plan or remove all users except the owner to
-                        except the owner to unblock your organization.
+                        unblock your organization.
                     </span>
                 </div>
             </div>
             <div class="flex items-center space-x-2">
-                <Link
+                <Link v-if="isBillingActivated() && canManageBilling()" href="/billing">
-                    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
+                    <XMarkIcon class="w-4 opacity-50 hover:opacity-100"></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">
+                    <span class="font-medium"> You are currently using the Free Plan. </span>
-                        You are currently using the Free Plan.
-                    </span>
                     <span class="hidden md:inline">
-                        To unlock all premium features & support the development
+                        To unlock all premium features & support the development of solidtime,
-                        of solidtime, please upgrade your plan.</span
+                        please upgrade your plan.</span
                     >
                 </div>
             </div>
             <div class="flex items-center space-x-2">
-                <Link
+                <Link v-if="isBillingActivated() && canManageBilling()" href="/billing">
-                    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
+                    <XMarkIcon class="w-4 opacity-50 hover:opacity-100"></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 {
+import { ArchiveBoxIcon, PencilSquareIcon, TrashIcon } from '@heroicons/vue/20/solid';
-    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
+                <div v-if="clients.length === 0" class="col-span-3 py-24 text-center">
-                    v-if="clients.length === 0"
+                    <UserCircleIcon class="w-8 text-icon-default inline pb-2"></UserCircleIcon>
-                    class="col-span-3 py-24 text-center">
+                    <h3 class="text-text-primary font-semibold">No clients found</h3>
-                    <UserCircleIcon
+                    <p v-if="canCreateClients()" class="pb-5">Create your first client now!</p>
-                        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(
+    return projects.value.filter((projects) => projects.client_id === props.client.id).length;
-        (projects) => projects.client_id === props.client.id
-    ).length;
 });
 
 function archiveClient() {
@@ -37,9 +35,7 @@ const showEditModal = ref(false);
 
 <template>
     <TableRow>
-        <ClientEditModal
+        <ClientEditModal v-model:show="showEditModal" :client="client"></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
+                <template v-for="invitation in invitations" :key="invitation.id">
-                    v-for="invitation in invitations"
+                    <InvitationTableRow :invitation="invitation"></InvitationTableRow>
-                    :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
+        <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
-            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(
+                api.resendInvitationEmail(undefined, {
-                    undefined,
+                    params: {
-                    {
+                        invitation: props.invitation.id,
-                        params: {
+                        organization: organizationId,
-                            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
+            <InvitationMoreOptionsDropdown @delete="deleteInvitation" @resend="resendInvitation" />
-                @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
+            Do you want to update all existing time entries, where the member billable rate applies
-            billable rate applies as well?
+            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
+            member.name.toLowerCase().includes(searchValue.value?.toLowerCase()?.trim() || '') &&
-                .toLowerCase()
+            !props.hiddenMembers.some((hiddenMember) => hiddenMember.member_id === member.id) &&
-                .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">
+            <h2 class="text-lg font-medium text-text-primary">Delete Member</h2>
-                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">
+                <p class="mb-4">This will permanently delete:</p>
-                    This will permanently delete:
-                </p>
 
-                    <ul class="list-disc ml-6 mt-2">
+                <ul class="list-disc ml-6 mt-2">
-                        <li>All time entries created by this member</li>
+                    <li>All time entries created by this member</li>
-                        <li>Their project assignments</li>
+                    <li>Their project assignments</li>
-                        <li>Their organization membership</li>
+                    <li>Their organization membership</li>
-                    </ul>
+                </ul>
                 <p class="pt-4">
-                    <strong>Note:</strong> Deleting time entries will affect all reports and statistics.
+                    <strong>Note:</strong> Deleting time entries will affect all reports and
-                    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.
+                    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="
+                class="mt-6"
-      (e) => {
+                @submit="
-        e.preventDefault();
+                    (e) => {
-        e.stopPropagation();
+                        e.preventDefault();
-        form.handleSubmit();
+                        e.stopPropagation();
-      }
+                        form.handleSubmit();
-    ">
+                    }
+                ">
                 <div class="flex items-start">
-                        <form.Field
+                    <form.Field
-                            name="confirmDelete"
+                        name="confirmDelete"
-                            :validators="{
+                        :validators="{
-                                onSubmit: ({value}) => {
+                            onSubmit: ({ value }) => {
-                                    if (!value) {
+                                if (!value) {
-                                        return 'You must confirm that you understand the consequences of this action';
+                                    return 'You must confirm that you understand the consequences of this action';
-                                    }
-                                    return '';
                                 }
-                            }"
+                                return '';
-                        >
+                            },
+                        }">
                         <template #default="{ field }">
                             <div class="flex flex-col">
-                            <div class="flex items-center space-x-3 text-sm">
+                                <div class="flex items-center space-x-3 text-sm">
-                                <Checkbox
+                                    <Checkbox
-                                    :id="field.name"
+                                        :id="field.name"
-                                    :name="field.name"
+                                        :name="field.name"
-                                    :checked="field.state.value"
+                                        :checked="field.state.value"
-                                    @update:checked="field.handleChange"
+                                        @update:checked="field.handleChange"
-                                    @blur="field.handleBlur"
+                                        @blur="field.handleBlur" />
-                                />
+                                    <InputLabel
-                                <InputLabel :for="field.name" class="font-medium text-text-primary">
+                                        :for="field.name"
-                                I understand that this will permanently delete all data related to this member
+                                        class="font-medium text-text-primary">
-                                </InputLabel>
+                                        I understand that this will permanently delete all data
-                            </div>
+                                        related to this member
-                            <InputError class="pl-7 pt-2" :message="field.state.meta.errors[0]" />
+                                    </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
+                            <DangerButton type="submit" :disabled="!canSubmit">
-                                type="submit"
+                                {{ isSubmitting ? 'Deleting...' : 'Delete Member' }}
-                                :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 (
+    } else if (memberBody.value.role === 'owner' && props.member.role !== 'owner') {
-        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 (
+    if (memberBody.value.role && memberBody.value.role in roleDescriptionTexts) {
-        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="
+                                v-model="billableRateSelect"
-                                    billableRateSelect
-                                "
                                 class="mt-2"
                                 name="billableType"></MemberBillableSelect>
                         </div>
-                        <div
+                        <div v-if="billableRateSelect === 'custom-rate'" class="flex-1">
-                            v-if="billableRateSelect === 'custom-rate'"
+                            <InputLabel for="memberBillableRate" value="Billable Rate" />
-                            class="flex-1">
-                            <InputLabel
-                                for="memberBillableRate"
-                                value="Billable Rate" />
                             <BillableRateInput
-                                v-model="
+                                v-model="memberBody.billable_rate"
-                                    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 {
+import { isAllowedToPerformPremiumAction, isBillingActivated } from '@/utils/billing';
-    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
+        errors.value.email = z.string().email().safeParse(addTeamMemberForm.email).success
-            .string()
-            .email()
-            .safeParse(addTeamMemberForm.email).success
             ? ''
             : 'Please enter a valid email address';
-        errors.value.role =
+        errors.value.role = addTeamMemberForm.role === null ? 'Please select a 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">
+                    <p class="py-1">The Free plan is <strong>limited to one member</strong></p>
-                        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
+                    <Link v-if="isBillingActivated() && canManageBilling()" href="/billing">
-                        v-if="isBillingActivated() && canManageBilling()"
-                        href="/billing">
                         <PrimaryButton
-                            v-if="
+                            v-if="isBillingActivated() && canUpdateOrganization()"
-                                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':
+                                'rounded-b-none': i != Object.keys(availableRoles).length - 1,
-                                    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':
+                                            'font-semibold': addTeamMemberForm.role == role.key,
-                                                addTeamMemberForm.role ==
-                                                role.key,
                                         }">
                                         {{ role.name }}
                                     </div>
 
                                     <svg
-                                        v-if="
+                                        v-if="addTeamMemberForm.role == role.key"
-                                            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 { 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 {useMutation} from '@tanstack/vue-query';
+import { useMutation } from '@tanstack/vue-query';
-import {getCurrentOrganizationId} from "@/utils/useUser";
+import { getCurrentOrganizationId } from '@/utils/useUser';
-import {useNotificationsStore} from "@/utils/notification";
+import { useNotificationsStore } from '@/utils/notification';
-import {useMembersStore} from "@/utils/useMembers";
+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
+                Deactivating the user <strong>{{ member.name }} </strong> will remove the user's
-                the organization. You will not be billed for inactive users and all time entries will be preserved.
+                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 MemberCombobox from '@/Components/Common/Member/MemberCombobox.vue';
-import {UserIcon, ArrowRightIcon} from "@heroicons/vue/24/solid";
+import { UserIcon, ArrowRightIcon } from '@heroicons/vue/24/solid';
-import {Badge} from "@/packages/ui/src";
+import { Badge } from '@/packages/ui/src';
 import { useMutation } from '@tanstack/vue-query';
-import {getCurrentOrganizationId} from "@/utils/useUser";
+import { getCurrentOrganizationId } from '@/utils/useUser';
-import {useNotificationsStore} from "@/utils/notification";
+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({
+        return await api.mergeMember(
-            member_id: newMemberId,
+            {
-        }, {
+                member_id: newMemberId,
-            params: {
-                organization: organizationId,
-                member: props.member.id
             },
-        });
+            {
+                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
+                    <MemberCombobox v-model="newMember"></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
+                        You are about to transfer the ownership of this organization to
-                        organization to {{ memberName }}.
+                        {{ 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(
+    const item = page.props.availableRoles.find((item) => getKeyFromItem(item) === key);
-        (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">
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Billable Rate</div>
-            Billable Rate
-        </div>
         <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Status</div>
-        <div
+        <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
-            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
+            <CheckCircleIcon v-if="member.is_placeholder === false" class="w-5"></CheckCircleIcon>
-                v-if="member.is_placeholder === false"
-                class="w-5"></CheckCircleIcon>
             <span v-if="member.is_placeholder === false">Active</span>
-            <UserCircleIcon
+            <UserCircleIcon v-if="member.is_placeholder === true" class="w-5"></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
+        <MemberEditModal v-model:show="showEditMemberModal" :member="member"></MemberEditModal>
-            v-model:show="showEditMemberModal"
+        <MemberMergeModal v-model:show="showMergeMemberModal" :member="member"></MemberMergeModal>
-            :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
+            Do you want to update all existing time entries, where the organization billable rate
-            organization billable rate applies as well?
+            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 ProjectBadge from '@/packages/ui/src/Project/ProjectBadge.vue';
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, ref, watch } from 'vue';
-import { useProjectsStore } from "@/utils/useProjects";
+import { useProjectsStore } from '@/utils/useProjects';
-import Dropdown from "@/packages/ui/src/Input/Dropdown.vue";
+import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import {
     ComboboxAnchor,
     ComboboxContent,
     ComboboxInput,
     ComboboxItem,
     ComboboxRoot,
-    ComboboxViewport
+    ComboboxViewport,
-} from "radix-vue";
+} from 'radix-vue';
-import { PlusCircleIcon } from "@heroicons/vue/20/solid";
+import { PlusCircleIcon } from '@heroicons/vue/20/solid';
-import { storeToRefs } from "pinia";
+import { storeToRefs } from 'pinia';
-import { api } from "@/packages/api/src";
+import { api } from '@/packages/api/src';
-import { usePage } from "@inertiajs/vue3";
+import { usePage } from '@inertiajs/vue3';
-import { getRandomColor } from "@/packages/ui/src/utils/color";
+import { getRandomColor } from '@/packages/ui/src/utils/color';
-import type { Project } from "@/packages/api/src";
+import type { Project } from '@/packages/api/src';
-import ProjectDropdownItem from "@/packages/ui/src/Project/ProjectDropdownItem.vue";
+import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue';
-import { UseFocusTrap } from "@vueuse/integrations/useFocusTrap/component";
+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
+        return project.name.toLowerCase().includes(searchValue.value?.toLowerCase()?.trim() || '');
-            .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
+            <UseFocusTrap v-if="open" :options="{ immediate: true, allowOutsideClick: true }">
-                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="
+                                v-if="searchValue.length > 0 && shownProjects.length === 0"
-                                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
+                                    <PlusCircleIcon class="w-5 flex-shrink-0"></PlusCircleIcon>
-                                        class="w-5 flex-shrink-0"></PlusCircleIcon>
+                                    <span>Add "{{ searchValue }}" as a new Project</span>
-                                    <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 {
+import type { CreateClientBody, CreateProjectBody, Project } from '@/packages/api/src';
-    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(
+        return clients.value.find((client) => client.id === project.value.client_id)?.name;
-            (client) => client.id === project.value.client_id
-        )?.name;
     }
     return 'No Client';
 });
@@ -87,8 +81,7 @@ async function submitBillableRate() {
         </template>
 
         <template #content>
-            <div
+            <div class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-5">
-                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
+                                    <UserCircleIcon class="w-5 text-icon-default"></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="
+                        v-model:billable-rate="project.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 {
+import { TrashIcon, PencilSquareIcon, ArchiveBoxIcon } from '@heroicons/vue/20/solid';
-    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 {
+import type { CreateProjectBody, Project, Client, CreateClientBody } from '@/packages/api/src';
-    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(
+async function createProject(project: CreateProjectBody): Promise<Project | undefined> {
-    project: CreateProjectBody
-): Promise<Project | undefined> {
     return await useProjectsStore().createProject(project);
 }
 
-async function createClient(
+async function createClient(client: CreateClientBody): Promise<Client | undefined> {
-    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
+            <div data-testid="project_table" class="grid min-w-full" :style="gridTemplate">
-                data-testid="project_table"
-                class="grid min-w-full"
-                :style="gridTemplate">
                 <ProjectTableHeading
-                    :show-billable-rate="
+                    :show-billable-rate="props.showBillableRate"></ProjectTableHeading>
-                        props.showBillableRate
+                <div v-if="projects.length === 0" class="col-span-5 py-24 text-center">
-                    "></ProjectTableHeading>
+                    <FolderPlusIcon class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
-                <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">
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Total Time</div>
-            Total Time
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Progress</div>
-        </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">
-            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(
+    return clients.value.find((client) => client.id === props.project.client_id);
-        (client) => client.id === props.project.client_id
-    );
 });
 
 const projectTasksCount = computed(() => {
-    return tasks.value.filter((task) => task.project_id === props.project.id)
+    return tasks.value.filter((task) => task.project_id === props.project.id).length;
-        .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">
+            <span class="text-text-secondary"> {{ projectTasksCount }} Tasks </span>
-                {{ projectTasksCount }} Tasks
-            </span>
         </div>
-        <div
+        <div class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-text-secondary">
-            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
-                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
+        <div class="whitespace-nowrap px-3 flex items-center text-sm text-text-secondary">
-            class="whitespace-nowrap px-3 flex items-center text-sm text-text-secondary">
+            <UpgradeBadge v-if="!isAllowedToPerformPremiumAction()"></UpgradeBadge>
-            <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
+            Do you want to update all existing time entries, where the project member billable rate
-            member billable rate applies as well?
+            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 {
+import type { CreateProjectMemberBody, ProjectMember } from '@/packages/api/src';
-    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="
+                        v-model="projectMember.billable_rate"
-                            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 {
+import type { ProjectMember, UpdateProjectMemberBody } from '@/packages/api/src';
-    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 (
+    if (props.projectMember.billable_rate !== projectMemberBody.value.billable_rate) {
-        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
+                <div class="col-span-3 sm:col-span-2 space-x-2 flex items-center">
-                    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
+                    <InputLabel for="billable_rate" class="mb-2" value="Billable Rate"></InputLabel>
-                        for="billable_rate"
-                        class="mb-2"
-                        value="Billable Rate"></InputLabel>
                     <BillableRateInput
-                        v-model="
+                        v-model="projectMemberBody.billable_rate"
-                            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(
+    return members.value.find((member) => member.id === props.projectMember.user_id);
-        (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
+                <div v-if="projectMembers.length === 0" class="col-span-5 py-24 text-center">
-                    v-if="projectMembers.length === 0"
+                    <UserGroupIcon class="w-8 text-icon-default inline pb-2"></UserGroupIcon>
-                    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
+                    <SecondaryButton :icon="PlusIcon" @click="createProjectMember = true"
-                        :icon="PlusIcon"
-                        @click="createProjectMember = true"
                         >Add a new Project Member
                     </SecondaryButton>
                 </div>
-                <template
+                <template v-for="projectMember in projectMembers" :key="projectMember.id">
-                    v-for="projectMember in projectMembers"
+                    <ProjectMemberTableRow :project-member="projectMember"></ProjectMemberTableRow>
-                    :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">
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Billable Rate</div>
-            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(
+    return members.value.find((member) => member.id === props.projectMember.member_id);
-        (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 {
+import type { CreateReportBody, CreateReportBodyProperties } from '@/packages/api/src';
-    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
+                    <TextInput id="name" v-model="report.name" class="mt-1.5 w-full"></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
+                        <Checkbox id="is_public" v-model:checked="report.is_public"></Checkbox>
-                            id="is_public"
-                            v-model:checked="report.is_public"></Checkbox>
                         <InputLabel for="is_public" value="Public" />
                     </div>
-                    <div
+                    <div v-if="report.is_public" class="flex items-center space-x-4">
-                        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">
+                            <div class="text-text-tertiary font-medium">(optional)</div>
-                                (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
+                    <TextInput id="name" v-model="report.name" class="mt-1.5 w-full"></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
+                        <Checkbox id="is_public" v-model:checked="report.is_public"></Checkbox>
-                            id="is_public"
-                            v-model:checked="report.is_public"></Checkbox>
                         <InputLabel for="is_public" value="Public" />
                     </div>
-                    <div
+                    <div v-if="report.is_public" class="flex items-center space-x-4">
-                        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
+        <strong>Sharable Reports</strong> is only available in solidtime Professional.
-        Professional.
     </UpgradeModal>
-    <SecondaryButton
+    <SecondaryButton v-if="canCreateReports()" :icon="SaveIcon" @click="onSaveReportClick"
-        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
+            <div data-testid="report_table" class="grid min-w-full" :style="gridTemplate">
-                data-testid="report_table"
-                class="grid min-w-full"
-                :style="gridTemplate">
                 <ReportTableHeading></ReportTableHeading>
-                <div
+                <div v-if="reports.length === 0" class="col-span-5 py-24 text-center">
-                    v-if="reports.length === 0"
+                    <FolderPlusIcon class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
-                    class="col-span-5 py-24 text-center">
+                    <h3 class="text-text-primary font-semibold">No shared reports found</h3>
-                    <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
+                    <SecondaryButton :icon="PlusIcon" @click="router.visit(route('reporting'))"
-                        :icon="PlusIcon"
-                        @click="router.visit(route('reporting'))"
                         >Go to overview
                     </SecondaryButton>
                 </div>

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

@@ -8,15 +8,9 @@ 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">
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Description</div>
-            Description
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Visibility</div>
-        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Public URL</div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
-            Visibility
-        </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
-            Public URL
-        </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>

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

@@ -57,9 +57,7 @@ async function deleteReport() {
 </script>
 
 <template>
-    <ReportEditModal
+    <ReportEditModal v-model:show="showEditReportModal" :original-report="report"></ReportEditModal>
-        v-model:show="showEditReportModal"
-        :original-report="report"></ReportEditModal>
     <TableRow>
         <div
             class="whitespace-nowrap min-w-0 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">
@@ -75,14 +73,9 @@ async function deleteReport() {
         <div class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary">
             {{ report.is_public ? 'Public' : 'Private' }}
         </div>
-        <div
+        <div class="whitespace-nowrap px-3 flex items-center text-sm text-text-secondary">
-            class="whitespace-nowrap px-3 flex items-center text-sm text-text-secondary">
+            <div v-if="report.shareable_link" class="space-x-2 flex items-center">
-            <div
+                <SecondaryButton v-if="isSupported" @click="copy(report.shareable_link)">
-                v-if="report.shareable_link"
-                class="space-x-2 flex items-center">
-                <SecondaryButton
-                    v-if="isSupported"
-                    @click="copy(report.shareable_link)">
                     <span v-if="!copied">Copy URL</span>
                     <span v-else>Copied!</span>
                 </SecondaryButton>

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

@@ -2,11 +2,7 @@
 import VChart, { THEME_KEY } from 'vue-echarts';
 import { computed, provide, inject, shallowRef, type ComputedRef } from 'vue';
 import LinearGradient from 'zrender/lib/graphic/LinearGradient';
-import {
+import { formatDate, formatHumanReadableDuration, formatWeek } from '@/packages/ui/src/utils/time';
-    formatDate,
-    formatHumanReadableDuration,
-    formatWeek,
-} from '@/packages/ui/src/utils/time';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { BarChart } from 'echarts/charts';
@@ -19,14 +15,7 @@ import {
 import type { AggregatedTimeEntries, Organization } from '@/packages/api/src';
 import { useCssVariable } from '@/utils/useCssVariable';
 
-use([
+use([CanvasRenderer, BarChart, TitleComponent, GridComponent, TooltipComponent, LegendComponent]);
-    CanvasRenderer,
-    BarChart,
-    TitleComponent,
-    GridComponent,
-    TooltipComponent,
-    LegendComponent,
-]);
 
 provide(THEME_KEY, 'dark');
 
@@ -174,9 +163,7 @@ const option = computed(() => ({
             class="chart"
             :option="option" />
         <div v-else class="chart flex flex-col items-center justify-center">
-            <p class="text-lg text-text-primary font-semibold">
+            <p class="text-lg text-text-primary font-semibold">No time entries found</p>
-                No time entries found
-            </p>
             <p>Try to change the filters and time range</p>
         </div>
     </div>

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

@@ -27,15 +27,11 @@ function triggerDownload(format: ExportFormat) {
 <template>
     <Dropdown align="end">
         <template #trigger>
-            <SecondaryButton :icon="ArrowDownTrayIcon" :loading>
+            <SecondaryButton :icon="ArrowDownTrayIcon" :loading> Export </SecondaryButton>
-                Export
-            </SecondaryButton>
         </template>
         <template #content>
             <div class="flex flex-col space-y-1 p-1.5">
-                <SecondaryButton
+                <SecondaryButton class="border-0 px-2" @click="triggerDownload('pdf')">
-                    class="border-0 px-2"
-                    @click="triggerDownload('pdf')">
                     <div class="flex items-center space-x-2">
                         <span> Export as PDF </span>
                         <LockClosedIcon
@@ -43,27 +39,20 @@ function triggerDownload(format: ExportFormat) {
                             class="w-3.5 text-text-tertiary"></LockClosedIcon>
                     </div>
                 </SecondaryButton>
-                <SecondaryButton
+                <SecondaryButton class="border-0 px-2" @click="triggerDownload('xlsx')"
-                    class="border-0 px-2"
-                    @click="triggerDownload('xlsx')"
                     >Export as Excel</SecondaryButton
                 >
-                <SecondaryButton
+                <SecondaryButton class="border-0 px-2" @click="triggerDownload('csv')"
-                    class="border-0 px-2"
-                    @click="triggerDownload('csv')"
                     >Export as CSV</SecondaryButton
                 >
-                <SecondaryButton
+                <SecondaryButton class="border-0 px-2" @click="triggerDownload('ods')"
-                    class="border-0 px-2"
-                    @click="triggerDownload('ods')"
                     >Export as ODS
                 </SecondaryButton>
             </div>
         </template>
     </Dropdown>
     <UpgradeModal v-model:show="showPremiumModal">
-        <strong>PDF Reports</strong> are only available in solidtime
+        <strong>PDF Reports</strong> are only available in solidtime Professional.
-        Professional.
     </UpgradeModal>
 </template>
 

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import {
+import { ArrowDownTrayIcon, CheckCircleIcon, XMarkIcon } from '@heroicons/vue/20/solid';
-    ArrowDownTrayIcon,
-    CheckCircleIcon,
-    XMarkIcon,
-} from '@heroicons/vue/20/solid';
 import { Modal, PrimaryButton } from '@/packages/ui/src';
 const props = defineProps<{
     exportUrl: string | null;
@@ -19,30 +15,19 @@ function downloadCurrentExport() {
 </script>
 
 <template>
-    <Modal
+    <Modal closeable max-width="lg" :show="showExportModal" @close="showExportModal = false">
-        closeable
-        max-width="lg"
-        :show="showExportModal"
-        @close="showExportModal = false">
         <button
             class="text-text-tertiary w-6 mx-auto absolute focus-visible:outline-none focus-visible:ring-2 rounded-full focus-visible:ring-ring transition focus-visible:text-text-primary hover:text-text-primary top-2 right-2">
             <XMarkIcon @click="showExportModal = false"></XMarkIcon>
         </button>
         <div class="text-center text-text-primary py-6">
-            <div
+            <div class="flex items-center font-semibold text-lg justify-center space-x-2 pb-2">
-                class="flex items-center font-semibold text-lg justify-center space-x-2 pb-2">
+                <CheckCircleIcon class="text-text-tertiary w-6"></CheckCircleIcon>
-                <CheckCircleIcon
-                    class="text-text-tertiary w-6"></CheckCircleIcon>
                 <span> Export Successful! </span>
             </div>
             <div class="text-center text-sm max-w-64 mx-auto">
-                <p class="pb-5">
+                <p class="pb-5">Your export is ready, you can download it with the button below.</p>
-                    Your export is ready, you can download it with the button
+                <PrimaryButton :icon="ArrowDownTrayIcon" @click="downloadCurrentExport"
-                    below.
-                </p>
-                <PrimaryButton
-                    :icon="ArrowDownTrayIcon"
-                    @click="downloadCurrentExport"
                     >Download</PrimaryButton
                 >
             </div>

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

@@ -26,18 +26,8 @@ const iconClass = computed(() => {
 </script>
 
 <template>
-    <Button
+    <Button variant="outline" size="sm" :class="twMerge(activeClass)">
-        variant="outline"
+        <component :is="icon" :class="iconClass"></component>
-        size="sm"
-        :class="
-            twMerge(
-                activeClass
-            )
-        ">
-        <component
-            :is="icon"
-            :class="iconClass"
-        ></component>
         <span class="text-nowrap"> {{ title }} </span>
         <div
             v-if="count"

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

@@ -8,12 +8,10 @@ const props = defineProps<{
     groupByOptions: { value: string; label: string; icon: Component }[];
 }>();
 const icon = computed(() => {
-    return props.groupByOptions.find((option) => option.value === model.value)
+    return props.groupByOptions.find((option) => option.value === model.value)?.icon;
-        ?.icon;
 });
 const title = computed(() => {
-    return props.groupByOptions.find((option) => option.value === model.value)
+    return props.groupByOptions.find((option) => option.value === model.value)?.label;
-        ?.label;
 });
 </script>
 

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

@@ -1,10 +1,5 @@
 <script setup lang="ts">
-import {
+import { ChartBarIcon, CheckCircleIcon, TagIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
-    ChartBarIcon,
-    CheckCircleIcon,
-    TagIcon,
-    UserGroupIcon,
-} from '@heroicons/vue/20/solid';
 import { FolderIcon } from '@heroicons/vue/16/solid';
 import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
@@ -43,11 +38,7 @@ import {
     type CreateReportBodyProperties,
     type Organization,
 } from '@/packages/api/src';
-import {
+import { getCurrentMembershipId, getCurrentOrganizationId, getCurrentRole } from '@/utils/useUser';
-    getCurrentMembershipId,
-    getCurrentOrganizationId,
-    getCurrentRole,
-} from '@/utils/useUser';
 import { useTagsStore } from '@/utils/useTags';
 import { useSessionStorage, useStorage } from '@vueuse/core';
 import { useNotificationsStore } from '@/utils/notification';
@@ -84,8 +75,7 @@ const subGroup = useStorage<GroupingOption>('reporting-sub-group', 'task');
 
 const reportingStore = useReportingStore();
 
-const { aggregatedGraphTimeEntries, aggregatedTableTimeEntries } =
+const { aggregatedGraphTimeEntries, aggregatedTableTimeEntries } = storeToRefs(reportingStore);
-    storeToRefs(reportingStore);
 
 const { groupByOptions } = reportingStore;
 
@@ -103,26 +93,13 @@ function getFilterAttributes(): AggregatedTimeEntriesQueryParams {
     };
     params = {
         ...params,
-        member_ids:
+        member_ids: selectedMembers.value.length > 0 ? selectedMembers.value : undefined,
-            selectedMembers.value.length > 0
+        project_ids: selectedProjects.value.length > 0 ? selectedProjects.value : undefined,
-                ? selectedMembers.value
+        task_ids: selectedTasks.value.length > 0 ? selectedTasks.value : undefined,
-                : undefined,
+        client_ids: selectedClients.value.length > 0 ? selectedClients.value : undefined,
-        project_ids:
-            selectedProjects.value.length > 0
-                ? selectedProjects.value
-                : undefined,
-        task_ids:
-            selectedTasks.value.length > 0 ? selectedTasks.value : undefined,
-        client_ids:
-            selectedClients.value.length > 0
-                ? selectedClients.value
-                : undefined,
         tag_ids: selectedTags.value.length > 0 ? selectedTags.value : undefined,
         billable: billable.value !== null ? billable.value : undefined,
-        member_id:
+        member_id: getCurrentRole() === 'employee' ? getCurrentMembershipId() : undefined,
-            getCurrentRole() === 'employee'
-                ? getCurrentMembershipId()
-                : undefined,
         rounding_type: roundingEnabled.value ? roundingType.value : undefined,
         rounding_minutes: roundingEnabled.value ? roundingMinutes.value : undefined,
     };
@@ -142,9 +119,7 @@ function updateGraphReporting() {
 function updateTableReporting() {
     const params = getFilterAttributes();
     if (group.value === subGroup.value) {
-        const fallbackOption = groupByOptions.find(
+        const fallbackOption = groupByOptions.find((el) => el.value !== group.value);
-            (el) => el.value !== group.value
-        );
         if (fallbackOption?.value) {
             subGroup.value = fallbackOption.value;
         }
@@ -162,14 +137,8 @@ function updateReporting() {
     updateTableReporting();
 }
 
-function getOptimalGroupingOption(
+function getOptimalGroupingOption(startDate: string, endDate: string): 'day' | 'week' | 'month' {
-    startDate: string,
+    const diffInDays = getDayJsInstance()(endDate).diff(getDayJsInstance()(startDate), 'd');
-    endDate: string
-): 'day' | 'week' | 'month' {
-    const diffInDays = getDayJsInstance()(endDate).diff(
-        getDayJsInstance()(startDate),
-        'd'
-    );
 
     if (diffInDays <= 31) {
         return 'day';
@@ -213,10 +182,7 @@ async function downloadExport(format: ExportFormat) {
                         ...getFilterAttributes(),
                         group: group.value,
                         sub_group: subGroup.value,
-                        history_group: getOptimalGroupingOption(
+                        history_group: getOptimalGroupingOption(startDate.value, endDate.value),
-                            startDate.value,
-                            endDate.value
-                        ),
                         format: format,
                     },
                 }),
@@ -249,17 +215,12 @@ const groupedPieChartData = computed(() => {
             if (
                 name &&
                 aggregatedTableTimeEntries.value?.grouped_type &&
-                emptyPlaceholder[
+                emptyPlaceholder[aggregatedTableTimeEntries.value?.grouped_type] === name
-                    aggregatedTableTimeEntries.value?.grouped_type
-                ] === name
             ) {
                 color = '#CCCCCC';
-            } else if (
+            } else if (aggregatedTableTimeEntries.value?.grouped_type === 'project') {
-                aggregatedTableTimeEntries.value?.grouped_type === 'project'
-            ) {
                 color =
-                    projects.value?.find((project) => project.id === entry.key)
+                    projects.value?.find((project) => project.id === entry.key)?.color ?? '#CCCCCC';
-                        ?.color ?? '#CCCCCC';
             }
             return {
                 value: entry.seconds,
@@ -288,10 +249,7 @@ const tableData = computed(() => {
                     return {
                         seconds: el.seconds,
                         cost: el.cost,
-                        description: getNameForReportingRowEntry(
+                        description: getNameForReportingRowEntry(el.key, entry.grouped_type),
-                            el.key,
-                            entry.grouped_type
-                        ),
                     };
                 }) ?? [],
         };
@@ -310,20 +268,15 @@ const tableData = computed(() => {
             <ReportingTabNavbar active="reporting"></ReportingTabNavbar>
         </div>
         <div class="flex space-x-2">
-            <ReportingExportButton
+            <ReportingExportButton :download="downloadExport"></ReportingExportButton>
-                :download="downloadExport"></ReportingExportButton>
+            <ReportSaveButton :report-properties="reportProperties"></ReportSaveButton>
-            <ReportSaveButton
-                :report-properties="reportProperties"></ReportSaveButton>
         </div>
     </MainContainer>
     <div class="py-2.5 w-full border-b border-default-background-separator">
         <MainContainer class="sm:flex space-y-4 sm:space-y-0 justify-between">
-            <div
+            <div class="flex flex-wrap items-center space-y-2 sm:space-y-0 space-x-3">
-                class="flex flex-wrap items-center space-y-2 sm:space-y-0 space-x-3">
                 <div class="text-sm font-medium">Filters</div>
-                <MemberMultiselectDropdown
+                <MemberMultiselectDropdown v-model="selectedMembers" @submit="updateReporting">
-                    v-model="selectedMembers"
-                    @submit="updateReporting">
                     <template #trigger>
                         <ReportingFilterBadge
                             :count="selectedMembers.length"
@@ -332,9 +285,7 @@ const tableData = computed(() => {
                             :icon="UserGroupIcon"></ReportingFilterBadge>
                     </template>
                 </MemberMultiselectDropdown>
-                <ProjectMultiselectDropdown
+                <ProjectMultiselectDropdown v-model="selectedProjects" @submit="updateReporting">
-                    v-model="selectedProjects"
-                    @submit="updateReporting">
                     <template #trigger>
                         <ReportingFilterBadge
                             :count="selectedProjects.length"
@@ -343,9 +294,7 @@ const tableData = computed(() => {
                             :icon="FolderIcon"></ReportingFilterBadge>
                     </template>
                 </ProjectMultiselectDropdown>
-                <TaskMultiselectDropdown
+                <TaskMultiselectDropdown v-model="selectedTasks" @submit="updateReporting">
-                    v-model="selectedTasks"
-                    @submit="updateReporting">
                     <template #trigger>
                         <ReportingFilterBadge
                             :count="selectedTasks.length"
@@ -354,9 +303,7 @@ const tableData = computed(() => {
                             :icon="CheckCircleIcon"></ReportingFilterBadge>
                     </template>
                 </TaskMultiselectDropdown>
-                <ClientMultiselectDropdown
+                <ClientMultiselectDropdown v-model="selectedClients" @submit="updateReporting">
-                    v-model="selectedClients"
-                    @submit="updateReporting">
                     <template #trigger>
                         <ReportingFilterBadge
                             :count="selectedClients.length"
@@ -401,11 +348,7 @@ const tableData = computed(() => {
                     <template #trigger>
                         <ReportingFilterBadge
                             :active="billable !== null"
-                            :title="
+                            :title="billable === 'false' ? 'Non Billable' : 'Billable'"
-                                billable === 'false'
-                                    ? 'Non Billable'
-                                    : 'Billable'
-                            "
                             :icon="BillableIcon"></ReportingFilterBadge>
                     </template>
                 </SelectDropdown>
@@ -427,37 +370,26 @@ const tableData = computed(() => {
         <div class="pt-10 w-full px-3 relative">
             <ReportingChart
                 :grouped-type="aggregatedGraphTimeEntries?.grouped_type"
-                :grouped-data="
+                :grouped-data="aggregatedGraphTimeEntries?.grouped_data"></ReportingChart>
-                    aggregatedGraphTimeEntries?.grouped_data
-                "></ReportingChart>
         </div>
     </MainContainer>
     <MainContainer>
         <div class="sm:grid grid-cols-4 pt-6 items-start">
-            <div
+            <div class="col-span-3 bg-card-background rounded-lg border border-card-border pt-3">
-                class="col-span-3 bg-card-background rounded-lg border border-card-border pt-3">
                 <div
                     class="text-sm flex text-text-primary items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3">
                     <span>Group by</span>
                     <ReportingGroupBySelect
                         v-model="group"
                         :group-by-options="groupByOptions"
-                        @changed="
+                        @changed="updateTableReporting"></ReportingGroupBySelect>
-                            updateTableReporting
-                        "></ReportingGroupBySelect>
                     <span>and</span>
                     <ReportingGroupBySelect
                         v-model="subGroup"
-                        :group-by-options="
+                        :group-by-options="groupByOptions.filter((el) => el.value !== group)"
-                            groupByOptions.filter((el) => el.value !== group)
+                        @changed="updateTableReporting"></ReportingGroupBySelect>
-                        "
-                        @changed="
-                            updateTableReporting
-                        "></ReportingGroupBySelect>
                 </div>
-                <div
+                <div class="grid items-center" style="grid-template-columns: 1fr 100px 150px">
-                    class="grid items-center"
-                    style="grid-template-columns: 1fr 100px 150px">
                     <div
                         class="contents [&>*]:border-card-background-separator [&>*]:border-b [&>*]:bg-tertiary [&>*]:pb-1.5 [&>*]:pt-1 text-text-secondary text-sm">
                         <div class="pl-6">Name</div>
@@ -475,13 +407,11 @@ const tableData = computed(() => {
                             :currency="getOrganizationCurrencyString()"
                             :type="aggregatedTableTimeEntries.grouped_type"
                             :entry="entry"></ReportingRow>
-                        <div
+                        <div class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
-                            class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
                             <div class="flex items-center pl-6 font-medium">
                                 <span>Total</span>
                             </div>
-                            <div
+                            <div class="justify-end flex items-center font-medium">
-                                class="justify-end flex items-center font-medium">
                                 {{
                                     formatHumanReadableDuration(
                                         aggregatedTableTimeEntries.seconds,
@@ -490,8 +420,7 @@ const tableData = computed(() => {
                                     )
                                 }}
                             </div>
-                            <div
+                            <div class="justify-end pr-6 flex items-center font-medium">
-                                class="justify-end pr-6 flex items-center font-medium">
                                 {{
                                     aggregatedTableTimeEntries.cost
                                         ? formatCents(
@@ -509,16 +438,13 @@ const tableData = computed(() => {
                     <div
                         v-else
                         class="chart flex flex-col items-center justify-center py-12 col-span-3">
-                        <p class="text-lg text-text-primary font-medium">
+                        <p class="text-lg text-text-primary font-medium">No time entries found</p>
-                            No time entries found
-                        </p>
                         <p>Try to change the filters and time range</p>
                     </div>
                 </div>
             </div>
             <div class="px-2 lg:px-4">
-                <ReportingPieChart
+                <ReportingPieChart :data="groupedPieChartData"></ReportingPieChart>
-                    :data="groupedPieChartData"></ReportingPieChart>
             </div>
         </div>
     </MainContainer>

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

@@ -14,14 +14,7 @@ import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { useCssVariable } from '@/utils/useCssVariable';
 import type { Organization } from '@/packages/api/src';
 
-use([
+use([CanvasRenderer, PieChart, TitleComponent, GridComponent, TooltipComponent, LegendComponent]);
-    CanvasRenderer,
-    PieChart,
-    TitleComponent,
-    GridComponent,
-    TooltipComponent,
-    LegendComponent,
-]);
 
 provide(THEME_KEY, 'dark');
 

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

@@ -2,20 +2,20 @@
 import { Switch } from '@/Components/ui/switch';
 import { Popover, PopoverContent, PopoverTrigger } from '@/Components/ui/popover';
 import { Button } from '@/Components/ui/button';
-import { 
+import {
-    Select, 
+    Select,
-    SelectContent, 
+    SelectContent,
-    SelectItem, 
+    SelectItem,
-    SelectTrigger, 
+    SelectTrigger,
-    SelectValue 
+    SelectValue,
 } from '@/Components/ui/select';
 import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
-import { 
+import {
-    NumberField, 
+    NumberField,
-    NumberFieldInput, 
+    NumberFieldInput,
-    NumberFieldContent, 
+    NumberFieldContent,
-    NumberFieldIncrement, 
+    NumberFieldIncrement,
-    NumberFieldDecrement 
+    NumberFieldDecrement,
 } from '@/Components/ui/number-field';
 import { ArrowsUpDownIcon } from '@heroicons/vue/20/solid';
 import { computed, ref, watch } from 'vue';
@@ -30,7 +30,7 @@ const TimeEntryRoundingType = {
     Nearest: 'nearest' as const,
 } as const;
 
-type TimeEntryRoundingType = typeof TimeEntryRoundingType[keyof typeof TimeEntryRoundingType];
+type TimeEntryRoundingType = (typeof TimeEntryRoundingType)[keyof typeof TimeEntryRoundingType];
 
 interface Props {
     enabled: boolean;
@@ -79,8 +79,8 @@ const selectedInterval = ref('');
 
 // Compute the current interval value based on props
 const currentInterval = computed(() => {
-    const predefined = predefinedIntervals.find(interval => 
+    const predefined = predefinedIntervals.find(
-        interval.value !== 'custom' && parseInt(interval.value) === props.minutes
+        (interval) => interval.value !== 'custom' && parseInt(interval.value) === props.minutes
     );
     return predefined ? predefined.value : 'custom';
 });
@@ -116,10 +116,14 @@ function handleCustomMinutesChange(value: string | number) {
 }
 
 // Watch for changes in props.minutes
-watch(() => props.minutes, (newMinutes) => {
+watch(
-    customMinutes.value = newMinutes;
+    () => props.minutes,
-    initializeSelectedInterval();
+    (newMinutes) => {
-}, { immediate: true });
+        customMinutes.value = newMinutes;
+        initializeSelectedInterval();
+    },
+    { immediate: true }
+);
 
 watch(currentInterval, () => {
     initializeSelectedInterval();
@@ -136,7 +140,9 @@ const activeClass = computed(() => {
 const iconClass = computed(() => {
     return twMerge(
         'w-4 h-4',
-        props.enabled ? 'dark:text-accent-300/80 text-accent-400/80' : 'text-muted-foreground opacity-50'
+        props.enabled
+            ? 'dark:text-accent-300/80 text-accent-400/80'
+            : 'text-muted-foreground opacity-50'
     );
 });
 </script>
@@ -144,10 +150,7 @@ const iconClass = computed(() => {
 <template>
     <Popover>
         <PopoverTrigger as-child>
-            <Button 
+            <Button variant="outline" size="sm" :class="twMerge(activeClass)">
-                variant="outline" 
-                size="sm"
-                :class="twMerge(activeClass)">
                 <ArrowsUpDownIcon :class="iconClass" />
                 Rounding {{ enabled ? 'on' : 'off' }}
             </Button>
@@ -155,7 +158,9 @@ const iconClass = computed(() => {
         <PopoverContent class="w-72 p-4">
             <div v-if="!isAllowedToPerformPremiumAction()" class="flex flex-col space-y-2">
                 <span class="font-semibold text-xs">Premium</span>
-                <span class="text-xs text-text-secondary flex-1">Rounding is a premium feature. Upgrade to unlock this feature.</span>
+                <span class="text-xs text-text-secondary flex-1"
+                    >Rounding is a premium feature. Upgrade to unlock this feature.</span
+                >
                 <Link href="/billing">
                     <Button size="sm" variant="input" class="items-center space-x-1">
                         <CreditCardIcon class="w-3.5 h-3.5 text-text-tertiary mr-1" />
@@ -166,26 +171,31 @@ const iconClass = computed(() => {
             <div v-else class="space-y-4">
                 <div>
                     <div class="flex items-center justify-between">
-                    <InputLabel for="enable-rounding" value="Enable Rounding" />
+                        <InputLabel for="enable-rounding" value="Enable Rounding" />
-                    <Switch 
+                        <Switch
-                        id="enable-rounding"
+                            id="enable-rounding"
-                        :model-value="enabled"
+                            :model-value="enabled"
-                        class="data-[state=checked]:bg-accent-500"
+                            class="data-[state=checked]:bg-accent-500"
-                        @update:model-value="updateEnabled" />
+                            @update:model-value="updateEnabled" />
-                </div>
+                    </div>
-                <div class="mb-3 pb-2 pt-1 text-xs text-muted-foreground border-b border-border-secondary text-text-tertiary">
+                    <div
-                Rounding is applied to each individual time entry, not to the accumulated total.
+                        class="mb-3 pb-2 pt-1 text-xs text-muted-foreground border-b border-border-secondary text-text-tertiary">
-                </div>
+                        Rounding is applied to each individual time entry, not to the accumulated
-
+                        total.
+                    </div>
                 </div>
 
                 <div>
                     <InputLabel for="rounding-type" value="Rounding Type" class="mb-2" />
-                    <Select 
+                    <Select
                         :model-value="type"
                         :disabled="!enabled"
                         @update:model-value="(value) => updateType(value as TimeEntryRoundingType)">
-                        <SelectTrigger id="rounding-type" size="small" class="w-full" :disabled="!enabled">
+                        <SelectTrigger
+                            id="rounding-type"
+                            size="small"
+                            class="w-full"
+                            :disabled="!enabled">
                             <SelectValue placeholder="Select rounding type" />
                         </SelectTrigger>
                         <SelectContent>
@@ -197,23 +207,27 @@ const iconClass = computed(() => {
                 </div>
                 <div>
                     <InputLabel for="minutes-interval" value="Minutes Interval" class="mb-2" />
-                    <Select 
+                    <Select
                         :model-value="selectedInterval"
                         :disabled="!enabled"
                         @update:model-value="(value) => handleIntervalChange(value as string)">
-                        <SelectTrigger id="minutes-interval" size="small" class="w-full" :disabled="!enabled">
+                        <SelectTrigger
-                            <SelectValue  placeholder="Select interval" />
+                            id="minutes-interval"
+                            size="small"
+                            class="w-full"
+                            :disabled="!enabled">
+                            <SelectValue placeholder="Select interval" />
                         </SelectTrigger>
                         <SelectContent>
-                            <SelectItem 
+                            <SelectItem
-                                v-for="interval in predefinedIntervals" 
+                                v-for="interval in predefinedIntervals"
                                 :key="interval.value"
                                 :value="interval.value">
                                 {{ interval.label }}
                             </SelectItem>
                         </SelectContent>
                     </Select>
-                    
+
                     <div v-if="showCustomInput" class="mt-2">
                         <NumberField
                             id="custom-minutes"
@@ -226,7 +240,9 @@ const iconClass = computed(() => {
                             @update:model-value="handleCustomMinutesChange">
                             <NumberFieldContent>
                                 <NumberFieldDecrement :disabled="!enabled" />
-                                <NumberFieldInput placeholder="Enter custom minutes" :disabled="!enabled" />
+                                <NumberFieldInput
+                                    placeholder="Enter custom minutes"
+                                    :disabled="!enabled" />
                                 <NumberFieldIncrement :disabled="!enabled" />
                             </NumberFieldContent>
                         </NumberField>
@@ -235,4 +251,4 @@ const iconClass = computed(() => {
             </div>
         </PopoverContent>
     </Popover>
-</template> 
+</template>

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

@@ -32,10 +32,7 @@ const organization = inject<ComputedRef<Organization>>('organization');
         class="contents text-text-primary [&>*]:transition [&>*]:border-card-background-separator [&>*]:border-b [&>*]:h-[50px]">
         <div
             :class="
-                twMerge(
+                twMerge('pl-6 font-medium flex items-center space-x-3', props.indent ? 'pl-16' : '')
-                    'pl-6 font-medium flex items-center space-x-3',
-                    props.indent ? 'pl-16' : ''
-                )
             ">
             <GroupedItemsCountButton
                 v-if="entry.grouped_data && entry.grouped_data?.length > 0"
@@ -57,13 +54,17 @@ const organization = inject<ComputedRef<Organization>>('organization');
             }}
         </div>
         <div class="justify-end pr-6 flex items-center">
-            {{ entry.cost ? formatCents(
+            {{
-                entry.cost,
+                entry.cost
-                props.currency,
+                    ? formatCents(
-                organization?.currency_format,
+                          entry.cost,
-                organization?.currency_symbol,
+                          props.currency,
-                organization?.number_format
+                          organization?.currency_format,
-            ) : '--' }}
+                          organization?.currency_symbol,
+                          organization?.number_format
+                      )
+                    : '--'
+            }}
         </div>
     </div>
     <div

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

@@ -2,8 +2,8 @@
 import { router } from '@inertiajs/vue3';
 import TabBar from '@/Components/Common/TabBar/TabBar.vue';
 import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
-import {canViewReport} from "@/utils/permissions";
+import { canViewReport } from '@/utils/permissions';
-import {computed} from "vue";
+import { computed } from 'vue';
 defineProps<{
     active: 'reporting' | 'detailed' | 'shared';
 }>();
@@ -12,17 +12,11 @@ const showSharedReports = computed(() => canViewReport());
 </script>
 
 <template>
-    <TabBar
+    <TabBar :model-value="active">
-    :model-value="active"
+        <TabBarItem value="reporting" @click="router.visit(route('reporting'))"
-    >
-        <TabBarItem
-            value="reporting"
-            @click="router.visit(route('reporting'))"
             >Overview</TabBarItem
         >
-        <TabBarItem
+        <TabBarItem value="detailed" @click="router.visit(route('reporting.detailed'))"
-            value="detailed"
-            @click="router.visit(route('reporting.detailed'))"
             >Detailed</TabBarItem
         >
         <TabBarItem

resources/js/Components/Common/StatCard.vue

@@ -6,8 +6,7 @@ defineProps<{
 </script>
 
 <template>
-    <div
+    <div class="rounded-lg bg-card-background border-card-border shadow-card border px-3.5 py-2.5">
-        class="rounded-lg bg-card-background border-card-border shadow-card border px-3.5 py-2.5">
         <dt class="font-semibold text-sm text-text-secondary">{{ title }}</dt>
         <dd class="text-2xl text-text-primary pt-1 font-semibold">
             {{ value ?? '--' }}

resources/js/Components/Common/TabBar/TabBar.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Tabs, TabsList } from '@/Components/ui/tabs'
+import { Tabs, TabsList } from '@/Components/ui/tabs';
 
 defineProps<{
-    defaultValue?: string
+    defaultValue?: string;
-}>()
+}>();
 </script>
 
 <template>

resources/js/Components/Common/TabBar/TabBarItem.vue

@@ -1,20 +1,25 @@
 <script setup lang="ts">
-import { TabsTrigger } from '@/Components/ui/tabs'
+import { TabsTrigger } from '@/Components/ui/tabs';
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from 'tailwind-merge';
-import type { Component } from 'vue'
+import type { Component } from 'vue';
 
 const props = defineProps<{
-    value: string
+    value: string;
-    class?: string
+    class?: string;
-    icon?: Component
+    icon?: Component;
-}>()
+}>();
 </script>
 
 <template>
     <TabsTrigger
         :value="value"
         :icon="icon"
-        :class="twMerge('rounded-md px-2 sm:px-3 py-1 border sm:py-1.5 text-xs sm:text-sm font-medium text-text-tertiary hover:text-text-primary focus-visible:outline-none data-[state=active]:bg-tab-background data-[state=active]:border-input-border data-[state=active]:text-text-primary border-tab-border', props.class)">
+        :class="
+            twMerge(
+                'rounded-md px-2 sm:px-3 py-1 border sm:py-1.5 text-xs sm:text-sm font-medium text-text-tertiary hover:text-text-primary focus-visible:outline-none data-[state=active]:bg-tab-background data-[state=active]:border-input-border data-[state=active]:text-text-primary border-tab-border',
+                props.class
+            )
+        ">
         <slot></slot>
     </TabsTrigger>
 </template>

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

@@ -18,9 +18,7 @@ const showCreateTagModal = ref(false);
 </script>
 
 <template>
-    <TagCreateModal
+    <TagCreateModal v-model:show="showCreateTagModal" :create-tag></TagCreateModal>
-        v-model:show="showCreateTagModal"
-        :create-tag></TagCreateModal>
     <div class="flow-root">
         <div class="inline-block min-w-full align-middle">
             <div
@@ -28,15 +26,10 @@ const showCreateTagModal = ref(false);
                 class="grid min-w-full"
                 style="grid-template-columns: 1fr 80px">
                 <TagTableHeading></TagTableHeading>
-                <div
+                <div v-if="tags.length === 0" class="col-span-5 py-24 text-center">
-                    v-if="tags.length === 0"
+                    <FolderPlusIcon class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
-                    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 tags found</h3>
-                    <p v-if="canCreateTags()" class="pb-5">
+                    <p v-if="canCreateTags()" class="pb-5">Create your first tag now!</p>
-                        Create your first tag now!
-                    </p>
                     <SecondaryButton
                         v-if="canCreateTags()"
                         :icon="PlusIcon"

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

@@ -2,7 +2,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 { ref, watch } from "vue";
+import { ref, watch } from 'vue';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useFocus } from '@vueuse/core';
 import { useTasksStore } from '@/utils/useTasks';
@@ -23,9 +23,12 @@ const props = defineProps<{
 
 const taskProjectId = ref<string>(props.projectId);
 
-watch(() => props.projectId, (value) => {
+watch(
-    taskProjectId.value = value;
+    () => props.projectId,
-});
+    (value) => {
+        taskProjectId.value = value;
+    }
+);
 
 async function submit() {
     await createTask({

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

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

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

@@ -18,9 +18,7 @@ const createTask = ref(false);
 </script>
 
 <template>
-    <TaskCreateModal
+    <TaskCreateModal v-model:show="createTask" :project-id="props.projectId"></TaskCreateModal>
-        v-model:show="createTask"
-        :project-id="props.projectId"></TaskCreateModal>
     <div class="flow-root">
         <div class="inline-block min-w-full align-middle">
             <div
@@ -29,22 +27,14 @@ const createTask = ref(false);
                 class="grid min-w-full"
                 style="
                     grid-template-columns:
-                        1fr minmax(80px, auto) minmax(120px, auto) minmax(
+                        1fr minmax(80px, auto) minmax(120px, auto) minmax(50px, auto)
-                            50px,
-                            auto
-                        )
                         80px;
                 ">
                 <TaskTableHeading></TaskTableHeading>
-                <div
+                <div v-if="tasks.length === 0" class="col-span-5 py-24 text-center">
-                    v-if="tasks.length === 0"
+                    <PlusCircleIcon class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
-                    class="col-span-5 py-24 text-center">
-                    <PlusCircleIcon
-                        class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
                     <h3 class="text-text-primary font-semibold">No tasks found</h3>
-                    <p v-if="canCreateTasks()" class="pb-5">
+                    <p v-if="canCreateTasks()" class="pb-5">Create your first task now!</p>
-                        Create your first task now!
-                    </p>
                     <SecondaryButton
                         v-if="canCreateTasks()"
                         :icon="PlusIcon"

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

@@ -8,12 +8,8 @@ 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">
             Task Name
         </div>
-        <div 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>
-            Total Time
+        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">Progress</div>
-        </div>
-        <div class="px-3 py-1.5 text-left font-semibold text-text-primary">
-            Progress
-        </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">
             <span class="sr-only">Edit</span>

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

@@ -54,10 +54,8 @@ const showTaskEditModal = ref(false);
             </span>
             <span v-else> -- </span>
         </div>
-        <div
+        <div class="whitespace-nowrap px-3 flex items-center text-sm text-text-secondary">
-            class="whitespace-nowrap px-3 flex items-center text-sm text-text-secondary">
+            <UpgradeBadge v-if="!isAllowedToPerformPremiumAction()"></UpgradeBadge>
-            <UpgradeBadge
-                v-if="!isAllowedToPerformPremiumAction()"></UpgradeBadge>
             <EstimatedTimeProgress
                 v-else-if="task.estimated_time"
                 :estimated="task.estimated_time"
@@ -83,9 +81,7 @@ const showTaskEditModal = ref(false);
                 @edit="showTaskEditModal = true"
                 @delete="deleteTask"></TaskMoreOptionsDropdown>
         </div>
-        <TaskEditModal
+        <TaskEditModal v-model:show="showTaskEditModal" :task="task"></TaskEditModal>
-            v-model:show="showTaskEditModal"
-            :task="task"></TaskEditModal>
     </TableRow>
 </template>
 

resources/js/Components/Common/UpgradeBadge.vue

@@ -7,8 +7,7 @@ const showUpgradeModal = ref(false);
 
 <template>
     <UpgradeModal v-model:show="showUpgradeModal">
-        <strong>Project and Task Estimates</strong> is only available in
+        <strong>Project and Task Estimates</strong> is only available in solidtime Professional.
-        solidtime Professional.
     </UpgradeModal>
     <button
         class="inline-flex bg-secondary hover:bg-tertiary px-2 py-1 rounded border border-border-secondary hover:border-border-tertiary items-center space-x-1"

resources/js/Components/Common/UpgradeModal.vue

@@ -46,13 +46,9 @@ const show = defineModel('show', { default: false });
                         to try out this feature.
                     </p>
 
-                    <Link
+                    <Link v-if="isBillingActivated() && canManageBilling()" href="/billing">
-                        v-if="isBillingActivated() && canManageBilling()"
-                        href="/billing">
                         <PrimaryButton
-                            v-if="
+                            v-if="isBillingActivated() && canUpdateOrganization()"
-                                isBillingActivated() && canUpdateOrganization()
-                            "
                             type="button"
                             class="mt-6"
                             :icon="CreditCardIcon">

resources/js/Components/Common/User/UserTimezoneMismatchModal.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
+import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
+import { onMounted, ref } from 'vue';
+import { getUserTimezone } from '@/packages/ui/src/utils/settings';
+import { getDayJsInstance } from '@/packages/ui/src/utils/time';
+import { useForm, usePage } from '@inertiajs/vue3';
+import type { User } from '@/types/models';
+import { useSessionStorage } from '@vueuse/core';
+
+const show = defineModel('show', { default: false });
+const saving = defineModel('saving', { default: false });
+
+const timezone = ref('');
+const userTimezone = ref('');
+
+const page = usePage<{
+    auth: {
+        user: User;
+    };
+}>();
+
+const hideTimezoneMismatchModal = useSessionStorage<boolean>('hide-timezone-mismatch-modal', false);
+
+onMounted(() => {
+    timezone.value = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    userTimezone.value = getUserTimezone();
+
+    if (
+        getDayJsInstance()().tz(timezone.value).format() !==
+            getDayJsInstance()().tz(userTimezone.value).format() &&
+        !hideTimezoneMismatchModal.value
+    ) {
+        show.value = true;
+    }
+});
+
+function submit() {
+    saving.value = true;
+    const form = useForm({
+        _method: 'PUT',
+        timezone: timezone.value,
+        name: page.props.auth.user.name,
+        email: page.props.auth.user.email,
+        week_start: page.props.auth.user.week_start,
+    });
+
+    form.post(route('user-profile-information.update'), {
+        errorBag: 'updateProfileInformation',
+        preserveScroll: true,
+        onSuccess: () => {
+            saving.value = false;
+            show.value = false;
+            location.reload();
+        },
+    });
+}
+
+function cancel() {
+    show.value = false;
+    hideTimezoneMismatchModal.value = true;
+}
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex justify-center">
+                <span> Timezone mismatch detected </span>
+            </div>
+        </template>
+        <template #content>
+            <div class="flex items-center space-x-4">
+                <div class="col-span-6 sm:col-span-4 flex-1 space-y-2">
+                    <p>
+                        The timezone of your device does not match the timezone in your user
+                        settings. <br />
+                        <strong
+                            >We highly recommend that you update your timezone settings to your
+                            current timezone.</strong
+                        >
+                    </p>
+
+                    <p>
+                        Want to change your timezone setting from
+                        <strong>{{ userTimezone }}</strong> to <strong>{{ timezone }}</strong
+                        >.
+                    </p>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="cancel"> Cancel</SecondaryButton>
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit()">
+                Update timezone
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>

resources/js/Components/ConfirmationModal.vue

@@ -24,11 +24,7 @@ const close = () => {
 </script>
 
 <template>
-    <Modal
+    <Modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
-        :show="show"
-        :max-width="maxWidth"
-        :closeable="closeable"
-        @close="close">
         <div class="bg-card-background px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
             <div class="sm:flex sm:items-start">
                 <div
@@ -59,8 +55,7 @@ const close = () => {
             </div>
         </div>
 
-        <div
+        <div class="flex flex-row justify-end px-6 py-4 bg-card-background text-end">
-            class="flex flex-row justify-end px-6 py-4 bg-card-background text-end">
             <slot name="footer" />
         </div>
     </Modal>

resources/js/Components/CurrentSidebarTimer.vue

@@ -43,9 +43,7 @@ const isRunningInDifferentOrganization = computed(() => {
             </div>
         </div>
         <div>
-            <div class="text-text-secondary font-medium text-xs">
+            <div class="text-text-secondary font-medium text-xs">Current Timer</div>
-                Current Timer
-            </div>
             <div class="text-text-primary font-medium text-lg">
                 {{ currentTime }}
             </div>