Add checks for placeholder invitation; Fixed bug in member deletion

allow admins to delete members
fix Dialog cloes on click outside of content

.github/workflows/build-private.yml

@@ -10,6 +10,8 @@ on:
       - '.github/workflows/build-private.yml'
       - 'docker/prod/**'
   workflow_dispatch:
+permissions:
+  contents: read
 
 name: Build - Private
 jobs:
@@ -17,6 +19,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 20
 
+
     steps:
       - name: "Check out code"
         uses: actions/checkout@v4

.github/workflows/build-public.yml

@@ -11,6 +11,12 @@ on:
       - 'docker/prod/**'
   workflow_dispatch:
 
+permissions:
+  packages: write
+  contents: read
+  attestations: write
+  id-token: write
+
 env:
   DOCKERHUB_REPO: solidtime/solidtime
   GHCR_REPO: ghcr.io/solidtime-io/solidtime
@@ -26,11 +32,6 @@ jobs:
           - runs-on: "ubuntu-24.04"
             platform: "linux/amd64"
     runs-on: ${{ matrix.runs-on }}
-    permissions:
-      packages: write
-      contents: read
-      attestations: write
-      id-token: write
     timeout-minutes: 90
 
     steps:
@@ -163,11 +164,6 @@ jobs:
 
   merge:
     runs-on: ubuntu-latest
-    permissions:
-      packages: write
-      contents: read
-      attestations: write
-      id-token: write
     timeout-minutes: 90
     needs:
       - build

.github/workflows/generate-api-docs.yml

@@ -3,6 +3,9 @@ on:
   push:
     branches:
       - main
+permissions:
+  contents: read
+
 jobs:
   api_docs:
     runs-on: ubuntu-latest

.github/workflows/npm-build.yml

@@ -1,6 +1,8 @@
 name: NPM Build
 
 on: [push]
+permissions:
+  contents: read
 
 jobs:
   build:

.github/workflows/npm-lint.yml

@@ -1,6 +1,8 @@
 name: NPM Lint
 
 on: [push]
+permissions:
+  contents: read
 
 jobs:
   build:

.github/workflows/npm-publish-api.yml

@@ -1,6 +1,8 @@
 name: Publish API package to NPM
 on:
   workflow_dispatch
+permissions:
+  contents: read
 jobs:
   build:
     runs-on: ubuntu-latest

.github/workflows/npm-publish-ui.yml

@@ -1,6 +1,8 @@
 name: Publish UI package to NPM
 on:
   workflow_dispatch
+permissions:
+  contents: read
 jobs:
   build:
     runs-on: ubuntu-latest

.github/workflows/npm-typecheck.yml

@@ -1,7 +1,8 @@
 name: NPM Typecheck
 
 on: [push]
-
+permissions:
+  contents: read
 jobs:
   build:
     runs-on: ubuntu-latest

.github/workflows/phpstan.yml

@@ -1,5 +1,7 @@
 name: Static code analysis (PHPStan)
 on: push
+permissions:
+  contents: read
 jobs:
   phpstan:
     runs-on: ubuntu-latest

.github/workflows/phpunit.yml

@@ -1,13 +1,18 @@
 name: PHPUnit Tests
 on: push
+permissions:
+  contents: read
 jobs:
   phpunit:
     runs-on: ubuntu-latest
     timeout-minutes: 10
+    strategy:
+      matrix:
+        postgres_version: [ 15, 16, 17 ]
 
     services:
       pgsql_test:
-        image: postgres:15
+        image: postgres:${{ matrix.postgres_version }}
         env:
           PGPASSWORD: 'root'
           POSTGRES_DB: 'laravel'
@@ -63,7 +68,7 @@ jobs:
         run: php artisan test --stop-on-failure --coverage-text --coverage-clover=coverage.xml
 
       - name: "Upload coverage reports to Codecov"
-        uses: codecov/codecov-action@v5.4.2
+        uses: codecov/codecov-action@v5.4.3
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           slug: solidtime-io/solidtime

.github/workflows/pint.yml

@@ -1,5 +1,7 @@
 name: PHP Linting
 on: push
+permissions:
+  contents: read
 jobs:
   pint:
     runs-on: ubuntu-latest

.github/workflows/playwright.yml

@@ -1,5 +1,7 @@
 name: Playwright Tests
 on: [push]
+permissions:
+  contents: read
 jobs:
   test:
     runs-on: ubuntu-latest

app/Console/Kernel.php

@@ -28,7 +28,7 @@ class Kernel extends ConsoleKernel
 
         $schedule->command('self-host:database-consistency')
             ->when(fn (): bool => config('scheduling.tasks.self_hosting_database_consistency'))
-            ->twiceDaily();
+            ->everySixHours();
     }
 
     /**

app/Exceptions/Api/InvitationForTheEmailAlreadyExistsApiException.php

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

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

@@ -4,6 +4,7 @@ declare(strict_types=1);
 
 namespace App\Http\Controllers\Api\V1;
 
+use App\Exceptions\Api\InvitationForTheEmailAlreadyExistsApiException;
 use App\Exceptions\Api\UserIsAlreadyMemberOfOrganizationApiException;
 use App\Http\Requests\V1\Invitation\InvitationIndexRequest;
 use App\Http\Requests\V1\Invitation\InvitationStoreRequest;
@@ -50,6 +51,7 @@ class InvitationController extends Controller
      *
      * @throws AuthorizationException
      * @throws UserIsAlreadyMemberOfOrganizationApiException
+     * @throws InvitationForTheEmailAlreadyExistsApiException
      *
      * @operationId invite
      */

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

@@ -10,12 +10,14 @@ use App\Exceptions\Api\CanNotRemoveOwnerFromOrganization;
 use App\Exceptions\Api\ChangingRoleOfPlaceholderIsNotAllowed;
 use App\Exceptions\Api\ChangingRoleToPlaceholderIsNotAllowed;
 use App\Exceptions\Api\EntityStillInUseApiException;
+use App\Exceptions\Api\InvitationForTheEmailAlreadyExistsApiException;
 use App\Exceptions\Api\OnlyOwnerCanChangeOwnership;
 use App\Exceptions\Api\OnlyPlaceholdersCanBeMergedIntoAnotherMember;
 use App\Exceptions\Api\OrganizationNeedsAtLeastOneOwner;
 use App\Exceptions\Api\ThisPlaceholderCanNotBeInvitedUseTheMergeToolInsteadException;
 use App\Exceptions\Api\UserIsAlreadyMemberOfOrganizationApiException;
 use App\Exceptions\Api\UserNotPlaceholderApiException;
+use App\Http\Requests\V1\Member\MemberDestroyRequest;
 use App\Http\Requests\V1\Member\MemberIndexRequest;
 use App\Http\Requests\V1\Member\MemberMergeIntoRequest;
 use App\Http\Requests\V1\Member\MemberUpdateRequest;
@@ -100,11 +102,13 @@ class MemberController extends Controller
      *
      * @operationId removeMember
      */
-    public function destroy(Organization $organization, Member $member, MemberService $memberService): JsonResponse
+    public function destroy(MemberDestroyRequest $request, Organization $organization, Member $member, MemberService $memberService): JsonResponse
     {
         $this->checkPermission($organization, 'members:delete', $member);
 
-        $memberService->removeMember($member, $organization);
+        $deleteRelated = $request->getDeleteRelated();
+
+        $memberService->removeMember($member, $organization, $deleteRelated);
 
         return response()
             ->json(null, 204);
@@ -170,6 +174,7 @@ class MemberController extends Controller
      * @throws UserNotPlaceholderApiException
      * @throws UserIsAlreadyMemberOfOrganizationApiException
      * @throws ThisPlaceholderCanNotBeInvitedUseTheMergeToolInsteadException
+     * @throws InvitationForTheEmailAlreadyExistsApiException
      *
      * @operationId invitePlaceholder
      */

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

@@ -148,8 +148,6 @@ class ReportController extends Controller
                 $report->share_secret = null;
                 $report->public_until = null;
             }
-        } elseif ($report->is_public && $request->has('public_until')) {
-            $report->public_until = $request->getPublicUntil();
         }
         $report->save();
 

app/Http/Controllers/Controller.php

@@ -43,7 +43,10 @@ class Controller extends BaseController
         /** @var Member|null $member */
         $member = Member::query()->whereBelongsTo($organization, 'organization')->whereBelongsTo($user, 'user')->first();
         if ($member === null) {
-            Log::error('This function should only be called in authenticated context after checking the user is a member of the organization');
+            Log::error('This function should only be called in authenticated context after checking the user is a member of the organization', [
+                'user' => $user->getKey(),
+                'organization' => $organization->getKey(),
+            ]);
             throw new AuthorizationException;
         }
 

app/Http/Requests/V1/Invitation/InvitationStoreRequest.php

@@ -7,11 +7,8 @@ namespace App\Http\Requests\V1\Invitation;
 use App\Enums\Role;
 use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
-use App\Models\OrganizationInvitation;
 use Illuminate\Contracts\Validation\ValidationRule;
-use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Validation\Rule;
-use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
 
 /**
  * @property Organization $organization
@@ -29,10 +26,6 @@ class InvitationStoreRequest extends BaseFormRequest
             'email' => [
                 'required',
                 'email',
-                UniqueEloquent::make(OrganizationInvitation::class, 'email', function (Builder $builder): Builder {
-                    /** @var Builder<OrganizationInvitation> $builder */
-                    return $builder->whereBelongsTo($this->organization, 'organization');
-                })->withCustomTranslation('validation.invitation_already_exists'),
             ],
             'role' => [
                 'required',

app/Http/Requests/V1/Member/MemberDestroyRequest.php

@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Requests\V1\Member;
+
+use App\Http\Requests\V1\BaseFormRequest;
+use App\Models\Organization;
+use Illuminate\Contracts\Validation\ValidationRule;
+
+/**
+ * @property Organization $organization
+ */
+class MemberDestroyRequest extends BaseFormRequest
+{
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, array<string|ValidationRule>>
+     */
+    public function rules(): array
+    {
+        return [
+            'delete_related' => [
+                'string',
+                'in:true,false',
+            ],
+        ];
+    }
+
+    public function getDeleteRelated(): bool
+    {
+        return $this->input('delete_related', 'false') === 'true';
+    }
+}

app/Providers/JetstreamServiceProvider.php

@@ -187,6 +187,7 @@ class JetstreamServiceProvider extends ServiceProvider
             'members:invite-placeholder',
             'members:make-placeholder',
             'members:merge-into',
+            'members:delete',
             'members:update',
             'reports:view',
             'reports:create',

app/Service/InvitationService.php

@@ -5,6 +5,7 @@ declare(strict_types=1);
 namespace App\Service;
 
 use App\Enums\Role;
+use App\Exceptions\Api\InvitationForTheEmailAlreadyExistsApiException;
 use App\Exceptions\Api\UserIsAlreadyMemberOfOrganizationApiException;
 use App\Mail\OrganizationInvitationMail;
 use App\Models\Member;
@@ -16,7 +17,7 @@ use Laravel\Jetstream\Events\InvitingTeamMember;
 class InvitationService
 {
     /**
-     * @throws UserIsAlreadyMemberOfOrganizationApiException
+     * @throws UserIsAlreadyMemberOfOrganizationApiException|InvitationForTheEmailAlreadyExistsApiException
      */
     public function inviteUser(Organization $organization, string $email, Role $role): OrganizationInvitation
     {
@@ -28,6 +29,13 @@ class InvitationService
             throw new UserIsAlreadyMemberOfOrganizationApiException;
         }
 
+        if (OrganizationInvitation::query()
+            ->where('email', $email)
+            ->whereBelongsTo($organization, 'organization')
+            ->exists()) {
+            throw new InvitationForTheEmailAlreadyExistsApiException;
+        }
+
         InvitingTeamMember::dispatch($organization, $email, $role->value);
 
         $invitation = new OrganizationInvitation;

app/Service/MemberService.php

@@ -45,6 +45,9 @@ class MemberService
             $member->organization()->associate($organization);
             $member->role = $role->value;
             $member->save();
+
+            $user->currentOrganization()->associate($organization);
+            $user->save();
         });
 
         if (! $asSuperAdmin) {
@@ -58,19 +61,41 @@ class MemberService
      * @throws CanNotRemoveOwnerFromOrganization
      * @throws EntityStillInUseApiException
      */
-    public function removeMember(Member $member, Organization $organization): void
+    public function removeMember(Member $member, Organization $organization, bool $withRelations = false): void
     {
-        if (TimeEntry::query()->where('user_id', $member->user_id)->whereBelongsTo($organization, 'organization')->exists()) {
-            throw new EntityStillInUseApiException('member', 'time_entry');
-        }
-        if (ProjectMember::query()->whereBelongsToOrganization($organization)->where('user_id', $member->user_id)->exists()) {
-            throw new EntityStillInUseApiException('member', 'project_member');
-        }
         if ($member->role === Role::Owner->value) {
             throw new CanNotRemoveOwnerFromOrganization;
         }
 
+        $user = $member->user;
+        $isPlaceholder = $user->is_placeholder;
+
+        if (! $isPlaceholder && $user->current_team_id === $member->organization_id) {
+            $user->currentTeam()->disassociate();
+            $user->save();
+        }
+
+        if ($withRelations) {
+            TimeEntry::query()->where('user_id', $member->user_id)->whereBelongsTo($organization, 'organization')->delete();
+            ProjectMember::query()->whereBelongsToOrganization($organization)->where('user_id', $member->user_id)->delete();
+        } else {
+            if (TimeEntry::query()->where('user_id', $member->user_id)->whereBelongsTo($organization, 'organization')->exists()) {
+                throw new EntityStillInUseApiException('member', 'time_entry');
+            }
+            if (ProjectMember::query()->whereBelongsToOrganization($organization)->where('user_id', $member->user_id)->exists()) {
+                throw new EntityStillInUseApiException('member', 'project_member');
+            }
+        }
+
         $member->delete();
+
+        if ($isPlaceholder) {
+            $user->delete();
+        } else {
+            $this->userService->makeSureUserHasAtLeastOneOrganization($user);
+            $this->userService->makeSureUserHasCurrentOrganization($user);
+        }
+
         MemberRemoved::dispatch($member, $organization);
     }
 

e2e/organization.spec.ts

@@ -230,9 +230,7 @@ test('test that format settings are reflected in the dashboard', async ({
     await expect(page.getByText('0.00€')).toBeVisible();
 
     // check that 00:00 is displayed
-    await expect(
-        page.getByText('0:00 h', { exact: true }).nth(0)
-    ).toBeVisible();
+    await expect(page.getByText('0:00', { exact: true }).nth(0)).toBeVisible();
     // check that 0h 00min is not displayed
     await expect(
         page.getByText('0h 00min', { exact: true }).nth(0)

e2e/projects.spec.ts

@@ -111,8 +111,8 @@ test('test that updating billable rate works with existing time entries', async
 
     await Promise.all([
         page
-            .getByRole('button', { name: 'Yes, update existing time entries' })
-            .click(),
+        .locator('button').filter({ hasText: 'Yes, update existing time' })
+        .click(),    
         page.waitForRequest(
             async (request) =>
                 request.url().includes('/projects/') &&
@@ -136,49 +136,6 @@ test('test that updating billable rate works with existing time entries', async
     ).toBeVisible();
 });
 
-test('test that creating and updating project time estimate works', async ({ page }) => {
-    const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
-    const timeEstimate = '10';
-    
-    await goToProjectsOverview(page);
-    await page.getByRole('button', { name: 'Create Project' }).click();
-    await page.getByLabel('Project Name').fill(newProjectName);
-    await page.getByLabel('Time Estimated').fill(timeEstimate);
-
-    await Promise.all([
-        page.getByRole('button', { name: 'Create Project' }).click(),
-        page.waitForResponse(
-            async (response) =>
-                response.url().includes('/projects') &&
-                response.request().method() === 'POST' &&
-                response.status() === 201 &&
-                (await response.json()).data.estimated_time === parseInt(timeEstimate) * 60 * 60
-        ),
-    ]);
-
-    // Check that time estimate is displayed in the projects table
-    await expect(page.getByTestId('project_table')).toContainText(timeEstimate + 'h');
-
-    // Edit project to remove time estimate
-    await page.getByRole('row').first().getByRole('button').click();
-    await page.getByRole('menuitem').getByText('Edit').first().click();
-    await page.getByLabel('Time Estimated').fill('');
-    
-    await Promise.all([
-        page.getByRole('button', { name: 'Update Project' }).click(),
-        page.waitForResponse(
-            async (response) =>
-                response.url().includes('/projects') &&
-                response.request().method() === 'PUT' &&
-                response.status() === 200 &&
-                (await response.json()).data.estimated_time === null
-        ),
-    ]);
-
-    // Check that time estimate is no longer displayed
-    await expect(page.getByTestId('project_table')).not.toContainText(timeEstimate + 'h');
-});
-
 // Create new project with new Client
 
 // Create new project with existing Client

lang/en/exceptions.php

@@ -9,6 +9,7 @@ use App\Exceptions\Api\ChangingRoleToPlaceholderIsNotAllowed;
 use App\Exceptions\Api\EntityStillInUseApiException;
 use App\Exceptions\Api\FeatureIsNotAvailableInFreePlanApiException;
 use App\Exceptions\Api\InactiveUserCanNotBeUsedApiException;
+use App\Exceptions\Api\InvitationForTheEmailAlreadyExistsApiException;
 use App\Exceptions\Api\OnlyOwnerCanChangeOwnership;
 use App\Exceptions\Api\OnlyPlaceholdersCanBeMergedIntoAnotherMember;
 use App\Exceptions\Api\OrganizationHasNoSubscriptionButMultipleMembersException;
@@ -45,6 +46,7 @@ return [
         ChangingRoleOfPlaceholderIsNotAllowed::KEY => 'Changing role of placeholder is not allowed',
         OnlyPlaceholdersCanBeMergedIntoAnotherMember::KEY => 'Only placeholders can be merged into another member',
         ThisPlaceholderCanNotBeInvitedUseTheMergeToolInsteadException::KEY => 'This placeholder can not be invited use the merge tool instead',
+        InvitationForTheEmailAlreadyExistsApiException::KEY => 'The email has already been invited to the organization. Please wait for the user to accept the invitation or resend the invitation email.',
     ],
     'unknown_error_in_admin_panel' => 'An unknown error occurred. Please check the logs.',
 ];

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

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

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

@@ -49,15 +49,6 @@ const props = defineProps<{
                 <PencilSquareIcon class="w-5 text-icon-active" />
                 <span>Edit</span>
             </DropdownMenuItem>
-            <DropdownMenuItem
-                v-if="canDeleteMembers()"
-                :aria-label="'Delete Member ' + props.member.name"
-                data-testid="member_delete"
-                class="flex items-center space-x-3 cursor-pointer text-destructive focus:text-destructive"
-                @click="emit('delete')">
-                <TrashIcon class="w-5" />
-                <span>Delete</span>
-            </DropdownMenuItem>
             <DropdownMenuItem
                 v-if="props.member.role === 'placeholder' && canMergeMembers()"
                 :aria-label="'Merge Member ' + props.member.name"
@@ -75,6 +66,15 @@ const props = defineProps<{
                 <UserCircleIcon class="w-5 text-icon-active" />
                 <span>Deactivate</span>
             </DropdownMenuItem>
+            <DropdownMenuItem
+                v-if="canDeleteMembers()"
+                :aria-label="'Delete Member ' + props.member.name"
+                data-testid="member_delete"
+                class="flex items-center space-x-3 cursor-pointer text-destructive focus:text-destructive"
+                @click="emit('delete')">
+                <TrashIcon class="w-5" />
+                <span>Delete</span>
+            </DropdownMenuItem>
         </DropdownMenuContent>
     </DropdownMenu>
 </template>

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

@@ -8,26 +8,30 @@ import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
 import { canInvitePlaceholderMembers } from '@/utils/permissions';
-import { useMembersStore } from '@/utils/useMembers';
 import { computed, type ComputedRef, inject, ref } from 'vue';
 import MemberEditModal from '@/Components/Common/Member/MemberEditModal.vue';
 import MemberMergeModal from '@/Components/Common/Member/MemberMergeModal.vue';
 import MemberMakePlaceholderModal from '@/Components/Common/Member/MemberMakePlaceholderModal.vue';
+import MemberDeleteModal from '@/Components/Common/Member/MemberDeleteModal.vue';
 import { capitalizeFirstLetter } from '../../../utils/format';
 import { formatCents } from '../../../packages/ui/src/utils/money';
+import { useMembersStore } from '@/utils/useMembers';
 
 const props = defineProps<{
     member: Member;
 }>();
 
 const organization = inject<ComputedRef<Organization>>('organization');
+const memberStore = useMembersStore();
 
 const showEditMemberModal = ref(false);
 const showMergeMemberModal = ref(false);
 const showMakeMemberPlaceholderModal = ref(false);
+const showDeleteMemberModal = ref(false);
 
 function removeMember() {
-    useMembersStore().removeMember(props.member.id);
+    showDeleteMemberModal.value = true;
+    memberStore.fetchMembers();
 }
 
 async function invitePlaceholder(id: string) {
@@ -121,6 +125,9 @@ const userHasValidMailAddress = computed(() => {
         <MemberMakePlaceholderModal
             v-model:show="showMakeMemberPlaceholderModal"
             :member="member"></MemberMakePlaceholderModal>
+        <MemberDeleteModal
+            v-model:show="showDeleteMemberModal"
+            :member="member"></MemberDeleteModal>
     </TableRow>
 </template>
 

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

@@ -15,7 +15,6 @@ import { api } from '@/packages/api/src';
 import { Checkbox } from '@/packages/ui/src';
 import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
 import { useNotificationsStore } from '@/utils/notification';
-import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
 
 const show = defineModel('show', { default: false });
 const saving = ref(false);
@@ -48,14 +47,10 @@ const report = ref({
 const { handleApiRequestNotifications } = useNotificationsStore();
 
 async function submit() {
-    const { public_until, ...reportProperties } = report.value;
     await handleApiRequestNotifications(
         () =>
             createReportMutation.mutateAsync({
-                ...reportProperties,
-                public_until: public_until
-                    ? getLocalizedDayJs(public_until).utc().format()
-                    : null,
+                ...report.value,
                 properties: { ...props.properties },
             }),
         'Success',
@@ -108,16 +103,13 @@ async function submit() {
                     <div
                         v-if="report.is_public"
                         class="flex items-center space-x-4">
-                        <div class="w-full">
+                        <div>
                             <InputLabel for="public_until" value="Expires at" />
                             <div class="text-text-tertiary font-medium">
                                 (optional)
                             </div>
                         </div>
-                        <DatePicker
-                            id="public_until"
-                            v-model="report.public_until"
-                            size="input"></DatePicker>
+                        <DatePicker id="public_until"></DatePicker>
                     </div>
                 </div>
             </div>

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

@@ -13,7 +13,6 @@ import { Checkbox } from '@/packages/ui/src';
 import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
 import { useNotificationsStore } from '@/utils/notification';
 import type { Report } from '@/packages/api/src';
-import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
 
 const show = defineModel('show', { default: false });
 const saving = ref(false);
@@ -65,15 +64,8 @@ watch(
 const { handleApiRequestNotifications } = useNotificationsStore();
 
 async function submit() {
-    const { public_until, ...reportProperties } = report.value;
     await handleApiRequestNotifications(
-        () =>
-            updateReportMutation.mutateAsync({
-                ...reportProperties,
-                public_until: public_until
-                    ? getLocalizedDayJs(public_until).utc().format()
-                    : null,
-            }),
+        () => updateReportMutation.mutateAsync(report.value),
         'Success',
         'Error',
         () => {
@@ -126,10 +118,7 @@ async function submit() {
                         v-if="report.is_public"
                         class="flex items-center space-x-4">
                         <InputLabel for="public_until" value="Expires at" />
-                        <DatePicker
-                            id="public_until"
-                            v-model="report.public_until"
-                            size="input"></DatePicker>
+                        <DatePicker id="public_until"></DatePicker>
                     </div>
                 </div>
             </div>

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

@@ -17,7 +17,7 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import type { AggregatedTimeEntries, Organization } from '@/packages/api/src';
-import { useCssVar } from '@vueuse/core';
+import { useCssVariable } from '@/utils/useCssVariable';
 
 use([
     CanvasRenderer,
@@ -47,8 +47,10 @@ const xAxisLabels = computed(() => {
         formatDate(el.key ?? '', organization?.value?.date_format)
     );
 });
-const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
-const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
+const accentColor = useCssVariable('--theme-color-chart');
+const labelColor = useCssVariable('--color-text-secondary');
+const markLineColor = useCssVariable('--color-border-secondary');
+const splitLineColor = useCssVariable('--color-border-tertiary');
 
 const seriesData = computed(() => {
     return props?.groupedData?.map((el) => {
@@ -111,7 +113,7 @@ const option = computed(() => ({
         data: xAxisLabels.value,
         markLine: {
             lineStyle: {
-                color: 'rgba(125,156,188,0.1)',
+                color: markLineColor.value,
                 type: 'dashed',
             },
         },
@@ -135,9 +137,13 @@ const option = computed(() => ({
     },
     yAxis: {
         type: 'value',
+        axisLabel: {
+            color: labelColor.value,
+            fontFamily: 'Outfit, sans-serif',
+        },
         splitLine: {
             lineStyle: {
-                color: 'rgba(125,156,188,0.2)', // Set desired color here
+                color: splitLineColor.value,
             },
         },
     },

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

@@ -11,7 +11,7 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { useCssVar } from '@vueuse/core';
+import { useCssVariable } from '@/utils/useCssVariable';
 import type { Organization } from '@/packages/api/src';
 
 use([
@@ -36,7 +36,7 @@ type ReportingChartDataEntry = {
 const props = defineProps<{
     data: ReportingChartDataEntry | null;
 }>();
-const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
+const labelColor = useCssVariable('--color-text-secondary');
 
 const seriesData = computed(() => {
     return props.data?.map((el) => {

resources/js/Components/Dashboard/ActivityGraphCard.vue

@@ -19,7 +19,7 @@ import {
     formatHumanReadableDuration,
     getDayJsInstance,
 } from '@/packages/ui/src/utils/time';
-import { useCssVar } from '@vueuse/core';
+import { useCssVariable } from '@/utils/useCssVariable';
 import { useQuery } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { api, type Organization } from '@/packages/api/src';
@@ -64,12 +64,9 @@ const max = computed(() => {
     }
 });
 
-const backgroundColor = useCssVar('--color-card-background', null, {
-    observe: true,
-});
-const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, {
-    observe: true,
-});
+const backgroundColor = useCssVariable('--theme-color-card-background');
+const itemBackgroundColor = useCssVariable('--color-bg-tertiary');
+const borderColor = useCssVariable('--color-border');
 
 const option = computed(() => {
     return {
@@ -120,7 +117,7 @@ const option = computed(() => {
                 [],
             itemStyle: {
                 borderRadius: 5,
-                borderColor: 'rgba(255,255,255,0.05)',
+                borderColor: borderColor.value,
                 borderWidth: 1,
             },
             tooltip: {

resources/js/Components/Dashboard/DayOverviewCardChart.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import VChart from 'vue-echarts';
-import { computed, ref } from 'vue';
-import { useCssVar } from '@vueuse/core';
+import { computed } from 'vue';
+import { useCssVariable } from '@/utils/useCssVariable';
 
 const props = defineProps<{
     history: number[];
 }>();
 
-const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
+const accentColor = useCssVariable('--theme-color-chart');
+const markLineColor = useCssVariable('--color-border-secondary');
 
 const seriesData = computed(() => props.history.map((el) => {
     return {
@@ -22,7 +23,7 @@ const seriesData = computed(() => props.history.map((el) => {
         },
     };
 }));
-const option = ref({
+const option = computed(() => ({
     grid: {
         top: 0,
         right: 0,
@@ -35,7 +36,7 @@ const option = ref({
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
         markLine: {
             lineStyle: {
-                color: 'rgba(125,156,188,0.1)',
+                color: markLineColor.value,
                 type: 'dashed',
             },
         },
@@ -66,11 +67,11 @@ const option = ref({
     },
     series: [
         {
-            data: seriesData,
+            data: seriesData.value,
             type: 'bar',
         },
     ],
-});
+}));
 </script>
 
 <template>

resources/js/Components/Dashboard/ProjectsChartCard.vue

@@ -11,7 +11,7 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { useCssVar } from "@vueuse/core";
+import { useCssVariable } from '@/utils/useCssVariable';
 import type { Organization } from "@/packages/api/src";
 
 use([
@@ -24,7 +24,7 @@ use([
 ]);
 
 provide(THEME_KEY, 'dark');
-const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
+const labelColor = useCssVariable('--color-text-secondary');
 
 const props = defineProps<{
     weeklyProjectOverview: {

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -18,7 +18,7 @@ import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import { getWeekStart } from '@/packages/ui/src/utils/settings';
-import { useCssVar } from '@vueuse/core';
+import { useCssVariable } from '@/utils/useCssVariable';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { useQuery } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
@@ -60,7 +60,7 @@ const weekdays = computed(() => {
     }
 });
 
-const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
+const accentColor = useCssVariable('--theme-color-chart');
 
 // Get the organization ID using the utility function
 const organizationId = computed(() => getCurrentOrganizationId());
@@ -176,10 +176,8 @@ const seriesData = computed(() => {
     });
 });
 
-const markLineColor = useCssVar('--color-border-secondary', null, {
-    observe: true,
-});
-const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
+const markLineColor = useCssVariable('--color-border-secondary');
+const labelColor = useCssVariable('--color-text-secondary');
 const option = computed(() => {
     return {
         tooltip: {
@@ -215,6 +213,10 @@ const option = computed(() => {
         },
         yAxis: {
             type: 'value',
+            axisLabel: {
+                color: labelColor.value,
+                fontFamily: 'Outfit, sans-serif',
+            },
             splitLine: {
                 lineStyle: {
                     color: markLineColor.value,

resources/js/Components/ui/dialog/DialogContent.vue

@@ -30,22 +30,21 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <div
                             class="absolute inset-0 bg-default-background opacity-30" />
 </DialogOverlay>
-    <DialogContent
-      v-bind="forwarded"
+    <div
       :class="
         cn(
-          'fixed top-0 left-0 z-50 w-screen h-screen flex items-start pt-6 md:pt-20 xl:pt-32 justify-center overflow-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-          
+          'fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start pt-6 md:pt-20 xl:pt-32 justify-center overflow-auto',
         )"
     >
-    <div
+    <DialogContent
+    v-bind="forwarded"
 :class="cn(
-          'bg-default-background grid w-full max-w-lg border shadow-lg duration-200 sm:rounded-lg',
+          'bg-default-background grid w-full max-w-lg border border-border-tertiary shadow-lg duration-200 sm:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
           props.class,
         )"
       >
         <slot />
+      </DialogContent>
     </div>
-    </DialogContent>
   </DialogPortal>
 </template>

resources/js/Pages/Time.vue

@@ -119,8 +119,7 @@ function deleteSelected() {
 </script>
 
 <template>
-    <AppLayout title="Dashboard" data-testid="time_view">
-        <TimeEntryCreateModal
+    <TimeEntryCreateModal
         v-model:show="showManualTimeEntryModal"
         :enable-estimated-time="isAllowedToPerformPremiumAction()"
         :create-project="createProject"
@@ -131,6 +130,7 @@ function deleteSelected() {
         :tasks
         :tags
         :clients></TimeEntryCreateModal>
+    <AppLayout title="Dashboard" data-testid="time_view">
         <MainContainer
             class="pt-5 lg:pt-8 pb-4 lg:pb-6">
             <div

resources/js/packages/api/src/openapi.json.client.ts

@@ -2407,6 +2407,11 @@ const endpoints = makeApi([
                 type: 'Path',
                 schema: z.string(),
             },
+            {
+                name: 'delete_related',
+                type: 'Query',
+                schema: z.enum(['true', 'false']).optional(),
+            },
         ],
         response: z.void(),
         errors: [
@@ -2436,6 +2441,16 @@ const endpoints = makeApi([
                 description: `Not found`,
                 schema: z.object({ message: z.string() }).passthrough(),
             },
+            {
+                status: 422,
+                description: `Validation error`,
+                schema: z
+                    .object({
+                        message: z.string(),
+                        errors: z.record(z.array(z.string())),
+                    })
+                    .passthrough(),
+            },
         ],
     },
     {

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

@@ -11,10 +11,9 @@ const emit = defineEmits(['submit']);
     <div class="pt-6">
         <div class="flex items-center space-x-1 mb-2">
             <ClockIcon class="text-text-quaternary w-4"></ClockIcon>
-            <InputLabel for="time-estimated" value="Time Estimated" />
+            <InputLabel for="billable" value="Time Estimated" />
         </div>
         <DurationInput
-            id="time-estimated"
             v-model="model"
             class="max-w-[150px]"
             @submit="emit('submit')"></DurationInput>

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

@@ -1,96 +1,76 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue';
 import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from '@/Components/ui/popover';
-import { Button, type ButtonVariants } from '@/Components/ui/button';
-import { Calendar } from '@/Components/ui/calendar';
-import { CalendarIcon } from 'lucide-vue-next';
-import { formatDateLocalized } from '@/packages/ui/src/utils/time';
-import { parseDate, type DateValue } from '@internationalized/date';
-import { computed, inject, type ComputedRef } from 'vue';
-import { type Organization } from '@/packages/api/src';
-import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
+    getDayJsInstance,
+    getLocalizedDayJs,
+} from '@/packages/ui/src/utils/time';
+import { twMerge } from 'tailwind-merge';
 
 const props = defineProps<{
     class?: string;
     tabindex?: string;
-    size: ButtonVariants['size'];
 }>();
 
-const model = defineModel<string | null>();
-const emit = defineEmits<{
-    changed: [string];
-}>();
-
-const handleChange = (date: DateValue | undefined) => {
-    if (!date) {
-        model.value = null;
-        return;
-    }
-
-    const dayjs = model.value
-        ? getLocalizedDayJs(model.value)
-        : getLocalizedDayJs();
-    model.value = dayjs
-        .year(date.year)
-        .month(date.month - 1) // CalendarDate uses 1-based months
-        .date(date.day)
-        .format();
-    emit('changed', model.value);
-};
-
-const date = computed(() => {
-    return model.value
-        ? parseDate(getLocalizedDayJs(model.value).format('YYYY-MM-DD'))
-        : undefined;
+// This has to be a localized timestamp, not UTC
+const model = defineModel<string | null>({
+    default: null,
 });
 
-const organization = inject<ComputedRef<Organization>>('organization');
+const tempDate = ref(getLocalizedDayJs(model.value).format('YYYY-MM-DD'));
+
+watch(model, (value) => {
+    tempDate.value = getLocalizedDayJs(value).format('YYYY-MM-DD');
+});
+
+function updateDate(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const newValue = target.value;
+    const newDate = getDayJsInstance()(newValue);
+    if (newDate.isValid()) {
+        model.value = getLocalizedDayJs(model.value)
+            .set('year', newDate.year())
+            .set('month', newDate.month())
+            .set('date', newDate.date())
+            .format();
+        emit('changed', model.value);
+    }
+}
+
+const datePicker = ref<HTMLInputElement | null>(null);
+
+function updateTempValue(event: Event) {
+    const target = event.target as HTMLInputElement;
+    tempDate.value = target.value;
+}
+
+const emit = defineEmits(['changed']);
 </script>
 
 <template>
-    <Popover>
-        <PopoverTrigger as-child>
-            <Button
-                variant="input"
-                :size="size"
-                :class="[
-                    size === 'sm' ? 'gap-1.5' : 'gap-2',
-                    'w-full justify-center text-left font-normal',
-                    !model && 'text-muted-foreground',
-                    props.class,
-                ]"
-                :tabindex="tabindex">
-                <CalendarIcon
-                    :class="[
-                        size === 'xs'
-                            ? 'h-3 w-3'
-                            : size === 'sm'
-                              ? 'h-3 w-3'
-                              : size === 'lg'
-                                ? 'h-4.5 w-4.5'
-                                : 'h-4 w-4',
-                    ]" />
-                <span class="text-center">
-                    {{
-                        model
-                            ? formatDateLocalized(
-                                  model,
-                                  organization?.date_format
-                              )
-                            : 'Pick a date'
-                    }}
-                </span>
-            </Button>
-        </PopoverTrigger>
-        <PopoverContent class="w-auto p-0">
-            <Calendar
-                mode="single"
-                :model-value="date"
-                :initial-focus="true"
-                @update:model-value="handleChange" />
-        </PopoverContent>
-    </Popover>
+    <div class="flex items-center text-text-secondary">
+        <input
+            id="start"
+            ref="datePicker"
+            :tabindex="tabindex"
+            :class="
+                twMerge(
+                    'bg-input-background border text-text-primary border-input-border focus-visible:outline-0 focus-visible:border-input-border-active focus-visible:ring-0 rounded-md',
+                    props.class
+                )
+            "
+            type="date"
+            name="trip-start"
+            :value="tempDate"
+            @change="updateTempValue"
+            @blur="updateDate"
+            @keydown.enter="updateDate" />
+    </div>
 </template>
+
+<style scoped>
+input::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+
+    opacity: 0.2;
+}
+</style>

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

@@ -5,10 +5,7 @@ import {
     PopoverTrigger,
 } from '@/Components/ui/popover';
 import { RangeCalendar } from '@/Components/ui/range-calendar';
-import {
-    CalendarDate,
-    getLocalTimeZone,
-} from '@internationalized/date';
+import { CalendarDate } from '@internationalized/date';
 import { CalendarIcon } from 'lucide-vue-next';
 import { computed, ref, inject, type ComputedRef, watch } from 'vue';
 import { twMerge } from 'tailwind-merge';
@@ -16,8 +13,9 @@ import {
     getDayJsInstance,
     getLocalizedDayJs,
 } from '@/packages/ui/src/utils/time';
-import { formatDateLocalized } from '@/packages/ui/src/utils/time';
 import { type Organization } from '@/packages/api/src';
+import { getUserTimezone } from '@/packages/ui/src/utils/settings';
+import { formatDate } from '@/packages/ui/src/utils/time';
 
 const props = defineProps<{
     start: string;
@@ -59,12 +57,13 @@ const modelValue = computed<CalendarDateRange>({
     }),
     set: (newValue) => {
         if (newValue.start) {
-            const date = newValue.start.toDate(getLocalTimeZone());
-            emit('update:start', getDayJsInstance()(date).format('YYYY-MM-DD'));
+            console.log(newValue.start);
+            const date = newValue.start.toDate(getUserTimezone());
+            emit('update:start', getLocalizedDayJs(date.toString()).format());
         }
         if (newValue.end) {
-            const date = newValue.end.toDate(getLocalTimeZone());
-            emit('update:end', getDayJsInstance()(date).format('YYYY-MM-DD'));
+            const date = newValue.end.toDate(getUserTimezone());
+            emit('update:end', getLocalizedDayJs(date.toString()).format());
         }
     },
 });
@@ -74,18 +73,18 @@ const open = ref(false);
 function setToday() {
     emit(
         'update:start',
-        getLocalizedDayJs().startOf('day').format('YYYY-MM-DD')
+        getLocalizedDayJs().startOf('day').format()
     );
-    emit('update:end', getLocalizedDayJs().endOf('day').format('YYYY-MM-DD'));
+    emit('update:end', getLocalizedDayJs().endOf('day').format());
     open.value = false;
 }
 
 function setThisWeek() {
     emit(
         'update:start',
-        getLocalizedDayJs().startOf('week').format('YYYY-MM-DD')
+        getLocalizedDayJs().startOf('week').format()
     );
-    emit('update:end', getLocalizedDayJs().endOf('week').format('YYYY-MM-DD'));
+    emit('update:end', getLocalizedDayJs().endOf('week').format());
     open.value = false;
 }
 
@@ -95,14 +94,14 @@ function setLastWeek() {
         getLocalizedDayJs()
             .subtract(1, 'week')
             .startOf('week')
-            .format('YYYY-MM-DD')
+            .format()
     );
     emit(
         'update:end',
         getLocalizedDayJs()
             .subtract(1, 'week')
             .endOf('week')
-            .format('YYYY-MM-DD')
+            .format()
     );
     open.value = false;
 }
@@ -110,18 +109,18 @@ function setLastWeek() {
 function setLast14Days() {
     emit(
         'update:start',
-        getLocalizedDayJs().subtract(14, 'days').format('YYYY-MM-DD')
+        getLocalizedDayJs().subtract(14, 'days').format()
     );
-    emit('update:end', getLocalizedDayJs().format('YYYY-MM-DD'));
+    emit('update:end', getLocalizedDayJs().format());
     open.value = false;
 }
 
 function setThisMonth() {
     emit(
         'update:start',
-        getLocalizedDayJs().startOf('month').format('YYYY-MM-DD')
+        getLocalizedDayJs().startOf('month').format()
     );
-    emit('update:end', getLocalizedDayJs().endOf('month').format('YYYY-MM-DD'));
+    emit('update:end', getLocalizedDayJs().endOf('month').format());
     open.value = false;
 }
 
@@ -131,14 +130,14 @@ function setLastMonth() {
         getLocalizedDayJs()
             .subtract(1, 'month')
             .startOf('month')
-            .format('YYYY-MM-DD')
+            .format()
     );
     emit(
         'update:end',
         getLocalizedDayJs()
             .subtract(1, 'month')
             .endOf('month')
-            .format('YYYY-MM-DD')
+            .format()
     );
     open.value = false;
 }
@@ -146,36 +145,36 @@ function setLastMonth() {
 function setLast30Days() {
     emit(
         'update:start',
-        getLocalizedDayJs().subtract(30, 'days').format('YYYY-MM-DD')
+        getLocalizedDayJs().subtract(30, 'days').format()
     );
-    emit('update:end', getLocalizedDayJs().format('YYYY-MM-DD'));
+    emit('update:end', getLocalizedDayJs().format());
     open.value = false;
 }
 
 function setLast90Days() {
     emit(
         'update:start',
-        getDayJsInstance()().subtract(90, 'days').format('YYYY-MM-DD')
+        getDayJsInstance()().subtract(90, 'days').format()
     );
-    emit('update:end', getDayJsInstance()().format('YYYY-MM-DD'));
+    emit('update:end', getDayJsInstance()().format());
     open.value = false;
 }
 
 function setLast12Months() {
     emit(
         'update:start',
-        getLocalizedDayJs().subtract(12, 'months').format('YYYY-MM-DD')
+        getLocalizedDayJs().subtract(12, 'months').format()
     );
-    emit('update:end', getLocalizedDayJs().format('YYYY-MM-DD'));
+    emit('update:end', getLocalizedDayJs().format());
     open.value = false;
 }
 
 function setThisYear() {
     emit(
         'update:start',
-        getLocalizedDayJs().startOf('year').format('YYYY-MM-DD')
+        getLocalizedDayJs().startOf('year').format()
     );
-    emit('update:end', getLocalizedDayJs().endOf('year').format('YYYY-MM-DD'));
+    emit('update:end', getLocalizedDayJs().endOf('year').format());
     open.value = false;
 }
 
@@ -185,14 +184,14 @@ function setLastYear() {
         getLocalizedDayJs()
             .subtract(1, 'year')
             .startOf('year')
-            .format('YYYY-MM-DD')
+            .format()
     );
     emit(
         'update:end',
         getLocalizedDayJs()
             .subtract(1, 'year')
             .endOf('year')
-            .format('YYYY-MM-DD')
+            .format()
     );
     open.value = false;
 }
@@ -219,12 +218,27 @@ watch(open, (value) => {
                 <CalendarIcon class="mr-2 h-4 w-4" />
                 <template v-if="modelValue.start">
                     <template v-if="modelValue.end">
-                        {{ formatDateLocalized(modelValue.start.toString(), organization?.date_format) }}
+                        {{
+                            formatDate(
+                                modelValue.start.toString(),
+                                organization?.date_format
+                            )
+                        }}
                         -
-                        {{ formatDateLocalized(modelValue.end.toString(), organization?.date_format) }}
+                        {{
+                            formatDate(
+                                modelValue.end.toString(),
+                                organization?.date_format
+                            )
+                        }}
                     </template>
                     <template v-else>
-                        {{ formatDateLocalized(modelValue.start.toString(), organization?.date_format) }}
+                        {{
+                            formatDate(
+                                modelValue.start.toString(),
+                                organization?.date_format
+                            )
+                        }}
                     </template>
                 </template>
                 <template v-else> Pick a date </template>

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

@@ -2,10 +2,6 @@
 import { computed, ref } from 'vue';
 import { TextInput } from '@/packages/ui/src';
 
-defineProps<{
-    id?: string;
-}>();
-
 const model = defineModel<number | null>({
     default: null,
 });
@@ -20,8 +16,6 @@ function updateDuration() {
     const hours = parseInt(temporaryCustomTimerEntry.value);
     if (!isNaN(hours)) {
         model.value = hours * 60 * 60;
-    } else {
-        model.value = null;
     }
     temporaryCustomTimerEntry.value = '';
 }
@@ -60,7 +54,6 @@ function updateAndSubmit() {
 <template>
     <div class="relative">
         <TextInput
-            :id="id"
             v-model="currentTime"
             class="w-full overflow-hidden pr-14"
             placeholder="0"

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

@@ -5,7 +5,6 @@ import { twMerge } from 'tailwind-merge';
 const props = defineProps<{
     name?: string;
     class?: string;
-    id?: string;
 }>();
 
 const input = ref<HTMLInputElement | null>(null);
@@ -22,7 +21,6 @@ const model = defineModel();
 
 <template>
     <input
-        :id="id"
         ref="input"
         v-model="model"
         :class="

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

@@ -1,18 +1,15 @@
 <script setup lang="ts">
-import { ref, watch, inject, type ComputedRef } from 'vue';
-import { getLocalizedDayJs, formatTime } from '@/packages/ui/src/utils/time';
+import { ref, watch } from 'vue';
+import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
 import { useFocus } from '@vueuse/core';
 import { TextInput } from '@/packages/ui/src';
 import { twMerge } from 'tailwind-merge';
-import type { Organization } from '@/packages/api/src';
 
 // This has to be a localized timestamp, not UTC
 const model = defineModel<string | null>({
     default: null,
 });
 
-const organization = inject<ComputedRef<Organization>>('organization');
-
 const props = withDefaults(
     defineProps<{
         size?: 'base' | 'large';
@@ -27,95 +24,62 @@ const props = withDefaults(
 function updateTime(event: Event) {
     const target = event.target as HTMLInputElement;
     const newValue = target.value.trim();
-
-    // Get current hours and minutes for comparison
-    const currentTime = model.value ? getLocalizedDayJs(model.value) : null;
-    const currentHours = currentTime?.hour() ?? 0;
-    const currentMinutes = currentTime?.minute() ?? 0;
-
-    // Handle AM/PM format
-    const amPmMatch = newValue.match(/^(\d{1,2}):?(\d{2})?\s*(AM|PM|am|pm)$/);
-    if (amPmMatch) {
-        let hours = amPmMatch[1];
-        const minutes = amPmMatch[2] ?? '00';
-        const period = amPmMatch[3];
-        
-        hours = parseInt(hours).toString();
-        if (period.toUpperCase() === 'PM' && hours !== '12') {
-            hours = (parseInt(hours) + 12).toString();
-        } else if (period.toUpperCase() === 'AM' && hours === '12') {
-            hours = '0';
-        }
-        
-        const newHours = parseInt(hours);
-        const newMinutes = parseInt(minutes);
-        
-        if (newHours !== currentHours || newMinutes !== currentMinutes) {
-            model.value = getLocalizedDayJs(model.value)
-                .set('hours', newHours)
-                .set('minutes', newMinutes)
-                .set('seconds', 0)
-                .format();
-            emit('changed', model.value);
-        }
-        return;
-    }
-
-    // Handle existing formats
     if (newValue.split(':').length === 2) {
         const [hours, minutes] = newValue.split(':');
         if (!isNaN(parseInt(hours)) && !isNaN(parseInt(minutes))) {
-            const newHours = Math.min(parseInt(hours), 23);
-            const newMinutes = Math.min(parseInt(minutes), 59);
-            
-            if (newHours !== currentHours || newMinutes !== currentMinutes) {
-                model.value = getLocalizedDayJs(model.value)
-                    .set('hours', newHours)
-                    .set('minutes', newMinutes)
-                    .set('seconds', 0)
-                    .format();
-                emit('changed', model.value);
-            }
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(hours), 23))
+                .set('minutes', Math.min(parseInt(minutes), 59))
+                .format();
+            emit('changed', model.value);
         }
     }
     // check if input is only numbers
     else if (/^\d+$/.test(newValue)) {
-        let newHours = currentHours;
-        let newMinutes = currentMinutes;
-
         if (newValue.length === 4) {
             // parse 1300 to 13:00
-            newHours = Math.min(parseInt(newValue.slice(0, 2)), 23);
-            newMinutes = Math.min(parseInt(newValue.slice(2, 4)), 59);
+            const [hours, minutes] = [
+                newValue.slice(0, 2),
+                newValue.slice(2, 4),
+            ];
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(hours), 23))
+                .set('minutes', Math.min(parseInt(minutes), 59))
+                .format();
+            emit('changed', model.value);
         } else if (newValue.length === 3) {
             // parse 130 to 01:30
-            newHours = Math.min(parseInt(newValue.slice(0, 1)), 23);
-            newMinutes = Math.min(parseInt(newValue.slice(1, 3)), 59);
+            const [hours, minutes] = [
+                newValue.slice(0, 1),
+                newValue.slice(1, 3),
+            ];
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(hours), 23))
+                .set('minutes', Math.min(parseInt(minutes), 59))
+                .format();
+            emit('changed', model.value);
         } else if (newValue.length === 2) {
             // parse 13 to 13:00
-            newHours = Math.min(parseInt(newValue), 23);
-            newMinutes = 0;
+            model.value = getLocalizedDayJs(model.value)
+                .set('hours', Math.min(parseInt(newValue), 23))
+                .set('minutes', 0)
+                .format();
+            emit('changed', model.value);
         } else if (newValue.length === 1) {
             // parse 1 to 01:00
-            newHours = Math.min(parseInt(newValue), 23);
-            newMinutes = 0;
-        }
-
-        if (newHours !== currentHours || newMinutes !== currentMinutes) {
             model.value = getLocalizedDayJs(model.value)
-                .set('hours', newHours)
-                .set('minutes', newMinutes)
-                .set('seconds', 0)
+                .set('hours', Math.min(parseInt(newValue), 23))
+                .set('minutes', 0)
                 .format();
             emit('changed', model.value);
         }
     }
+
+    inputValue.value = getLocalizedDayJs(model.value).format('HH:mm');
 }
 
 watch(model, (value) => {
-    inputValue.value = value
-        ? formatTime(value, organization?.value?.time_format || '24-hours')
-        : null;
+    inputValue.value = value ? getLocalizedDayJs(value).format('HH:mm') : null;
 });
 
 const timeInput = ref<HTMLInputElement | null>(null);
@@ -124,12 +88,7 @@ const emit = defineEmits(['changed']);
 useFocus(timeInput, { initialValue: props.focus });
 
 const inputValue = ref(
-    model.value
-        ? formatTime(
-              model.value,
-              organization?.value?.time_format || '24-hours'
-          )
-        : null
+    model.value ? getLocalizedDayJs(model.value).format('HH:mm') : null
 );
 </script>
 
@@ -139,7 +98,7 @@ const inputValue = ref(
         ref="timeInput"
         v-model="inputValue"
         :class="
-            twMerge('text-center w-28 px-3 py-2', size === 'large' && 'w-28')
+            twMerge('text-center w-24 px-3 py-2', size === 'large' && 'w-28')
         "
         data-testid="time_picker_input"
         type="text"

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

@@ -52,22 +52,26 @@ watch(focused, (newValue, oldValue) => {
 </script>
 
 <template>
-    <form
+    <div
         ref="dropdownContent"
         class="grid grid-cols-2 divide-x divide-card-background-separator text-center py-2">
-        <div class="px-2">
-            <div class="font-semibold text-text-primary text-sm pb-2">
-                Start
-            </div>
+        <div
+            class="px-2"
+            @keydown.enter.prevent="nextTick(() => emit('close'))">
+            <div class="font-semibold text-text-primary text-sm pb-2">Start</div>
             <div class="space-y-2">
                 <TimePickerSimple
                     v-model="tempStart"
                     data-testid="time_entry_range_start"
                     tabindex="0"
                     :focus
-                    @keydown.enter.prevent="nextTick(() => emit('close'))"
                     @keydown.exact.tab.shift.stop.prevent="emit('close')"
                     @changed="updateTimeEntry"></TimePickerSimple>
+                <DatePicker
+                    v-model="tempStart"
+                    class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
+                    @changed="updateTimeEntry"
+                    @blur.stop.prevent="emit('close')"></DatePicker>
             </div>
         </div>
         <div class="px-2">
@@ -76,31 +80,16 @@ watch(focused, (newValue, oldValue) => {
                 <TimePickerSimple
                     v-model="tempEnd"
                     data-testid="time_entry_range_end"
-                    @keydown.enter.prevent="nextTick(() => emit('close'))"
                     @changed="updateTimeEntry"></TimePickerSimple>
+                <DatePicker
+                    v-model="tempEnd"
+                    class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
+                    @changed="updateTimeEntry"></DatePicker>
             </div>
             <div v-else class="text-text-secondary">-- : --</div>
+            <div tabindex="0" @focusin="emit('close')"></div>
         </div>
-        <div class="px-2 pt-2">
-            <DatePicker
-                v-model="tempStart"
-                size="sm"
-                class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"
-                @changed="updateTimeEntry"></DatePicker>
-        </div>
-        <div class="px-2 pt-2">
-            <DatePicker
-                v-if="tempEnd !== null"
-                v-model="tempEnd"
-                size="sm"
-                class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"
-                @changed="updateTimeEntry"></DatePicker>
-        </div>
-        <div
-            tabindex="0"
-            class="focus-visible:outline-none"
-            @focusin="emit('close')"></div>
-    </form>
+    </div>
 </template>
 
 <style></style>

resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue

@@ -29,7 +29,7 @@ import DurationHumanInput from '@/packages/ui/src/Input/DurationHumanInput.vue';
 
 import { InformationCircleIcon } from '@heroicons/vue/20/solid';
 import type { Tag, Task } from '@/packages/api/src';
-import TimePickerSimple from '@/packages/ui/src/Input/TimePickerSimple.vue';
+import TimePickerSimple from "@/packages/ui/src/Input/TimePickerSimple.vue";
 
 const show = defineModel('show', { default: false });
 const saving = ref(false);
@@ -148,7 +148,9 @@ type BillableOption = {
                     <div class="flex-1 min-w-0">
                         <TimeTrackerProjectTaskDropdown
                             v-model:project="timeEntry.project_id"
-                            v-model:task="timeEntry.task_id"
+                            v-model:task="
+                                timeEntry.task_id
+                            "
                             :clients
                             :create-project
                             :create-client
@@ -158,9 +160,7 @@ type BillableOption = {
                             class="bg-input-background"
                             :projects="projects"
                             :tasks="tasks"
-                            :enable-estimated-time="
-                                enableEstimatedTime
-                            "></TimeTrackerProjectTaskDropdown>
+                            :enable-estimated-time="enableEstimatedTime"></TimeTrackerProjectTaskDropdown>
                     </div>
                     <div class="flex items-center space-x-2">
                         <div class="flex-col">
@@ -242,33 +242,37 @@ type BillableOption = {
                         </div>
                     </div>
                 </div>
-                <div class="grid gap-2 grid-cols-2">
-                    <div class="space-y-1">
-                        <InputLabel>Start</InputLabel>
+                <div class="">
+                    <InputLabel>Start</InputLabel>
+                    <div class="flex flex-col items-center space-y-2 mt-1">
                         <TimePickerSimple
+
                             v-model="localStart"
                             size="large"></TimePickerSimple>
+                        <DatePicker
+                            v-model="localStart"
+                            tabindex="1"
+                            class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
                     </div>
-                    <div class="space-y-1">
-                        <InputLabel>End</InputLabel>
+                </div>
+                <div class="">
+                    <InputLabel>End</InputLabel>
+                    <div class="flex flex-col items-center space-y-2 mt-1">
                         <TimePickerSimple
                             v-model="localEnd"
                             size="large"></TimePickerSimple>
+                        <DatePicker
+                            v-model="localEnd"
+                            tabindex="1"
+                            class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
                     </div>
-                    <DatePicker
-                        v-model="localStart"
-                        size="sm"
-                        class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
-                    <DatePicker
-                        v-model="localEnd"
-                        size="sm"
-                        class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
                 </div>
             </div>
         </template>
         <template #footer>
-            <SecondaryButton @click="show = false">Cancel</SecondaryButton>
+            <SecondaryButton tabindex="2" @click="show = false"> Cancel</SecondaryButton>
             <PrimaryButton
+                tabindex="2"
                 class="ms-3"
                 :class="{ 'opacity-25': saving }"
                 :disabled="saving"

resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue

@@ -101,19 +101,15 @@ const startTime = computed(() => {
 const inputField = ref<HTMLInputElement | null>(null);
 
 const timeRangeSelector = ref<HTMLElement | null>(null);
-const isMouseDown = ref(false);
 
 function openModalOnTab(e: FocusEvent) {
     // check if the source is inside the dropdown
-
-    console.log(e.target);
     const source = e.relatedTarget as HTMLElement;
     if (
         source &&
         window.document.body
             .querySelector<HTMLElement>('#app')
-            ?.contains(source) &&
-        !isMouseDown.value
+            ?.contains(source)
     ) {
         open.value = true;
     }
@@ -157,8 +153,6 @@ function closeAndFocusInput() {
                     @keydown.exact.tab="focusNextElement"
                     @keydown.exact.shift.tab="open = false"
                     @blur="updateTimerAndStartLiveTimerUpdate"
-                    @mousedown="isMouseDown = true"
-                    @mouseup="isMouseDown = false"
                     @keydown.enter="onTimeEntryEnterPress" />
             </template>
             <template #content>

resources/js/packages/ui/src/utils/time.ts

@@ -13,6 +13,7 @@ import updateLocale from 'dayjs/plugin/updateLocale';
 import { computed } from 'vue';
 import { formatNumber } from './number';
 
+
 export type DateFormat =
     | 'point-separated-d-m-yyyy'
     | 'slash-separated-mm-dd-yyyy'
@@ -27,7 +28,7 @@ const dateFormatMap: Record<DateFormat, string> = {
     'slash-separated-dd-mm-yyyy': 'DD/MM/YYYY',
     'hyphen-separated-dd-mm-yyyy': 'DD-MM-YYYY',
     'hyphen-separated-mm-dd-yyyy': 'MM-DD-YYYY',
-    'hyphen-separated-yyyy-mm-dd': 'YYYY-MM-DD',
+    'hyphen-separated-yyyy-mm-dd': 'YYYY-MM-DD'
 };
 
 export type TimeFormat = '12-hours' | '24-hours';
@@ -83,7 +84,7 @@ export function formatHumanReadableDuration(
         case 'hours-minutes':
             return `${hours}h ${minutes.toString().padStart(2, '0')}min`;
         case 'hours-minutes-colon-separated':
-            return `${hours}:${minutes.toString().padStart(2, '0')} h`;
+            return `${hours}:${minutes.toString().padStart(2, '0')}`;
         case 'hours-minutes-seconds-colon-separated':
             return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
         default:
@@ -128,10 +129,7 @@ export function getLocalizedDateFromTimestamp(timestamp: string) {
  * Returns a formatted date.
  * @param date - date in the format of 'YYYY-MM-DD'
  */
-export function formatDate(
-    date: string,
-    format: DateFormat = 'point-separated-d-m-yyyy'
-): string {
+export function formatDate(date: string, format: DateFormat = 'point-separated-d-m-yyyy'): string {
     if (date?.includes('+')) {
         console.warn(
             'Date contains timezone information, use formatDateLocalized instead'
@@ -144,18 +142,11 @@ export function formatDate(
  * Returns a formatted date.
  * @param date - date in the format of 'YYYY-MM-DD'
  */
-export function formatDateLocalized(
-    date: string,
-    format: DateFormat = 'point-separated-d-m-yyyy'
-): string {
+export function formatDateLocalized(date: string, format: DateFormat = 'point-separated-d-m-yyyy'): string {
     return getLocalizedDayJs(date).format(dateFormatMap[format]);
 }
 
-export function formatDateTimeLocalized(
-    date: string,
-    dateFormat?: DateFormat,
-    timeFormat?: TimeFormat
-): string {
+export function formatDateTimeLocalized(date: string, dateFormat?: DateFormat, timeFormat?: TimeFormat): string {
     const format = `${dateFormatMap[dateFormat ?? 'point-separated-d-m-yyyy']} ${timeFormat === '12-hours' ? 'hh:mm A' : 'HH:mm'}`;
     return getLocalizedDayJs(date).format(format);
 }
@@ -181,11 +172,7 @@ export function formatWeekday(date: string) {
     return dayjs(date).format('dddd');
 }
 
-export function formatStartEnd(
-    start: string,
-    end: string | null,
-    timeFormat: TimeFormat = '24-hours'
-) {
+export function formatStartEnd(start: string, end: string | null, timeFormat: TimeFormat = '24-hours') {
     if (end) {
         return `${formatTime(start, timeFormat)} - ${formatTime(end, timeFormat)}`;
     } else {

resources/js/utils/theme.ts

@@ -3,13 +3,6 @@ import { computed, watch } from "vue";
 
 type themeOption = "system" | "light" | "dark";
 const themeSetting = useStorage<themeOption>("theme", "system");
-// reload page when themeSettingChanges
-watch(
-    themeSetting,
-    () => {
-        location.reload();
-    }
-)
 const preferredColor = usePreferredColorScheme();
 const theme = computed(() => {
     if(themeSetting.value === "system"){

resources/js/utils/useCssVariable.ts

@@ -0,0 +1,49 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useCssVariable(variableName: string) {
+  const value = ref('')
+  let observer: MutationObserver | null = null
+  let mediaQuery: MediaQueryList | null = null
+  
+  const updateValue = () => {
+    const computedStyle = getComputedStyle(document.documentElement)
+    const cssValue = computedStyle.getPropertyValue(variableName).trim()
+    value.value = cssValue
+  }
+  
+  onMounted(() => {
+    // Initialize with current value
+    updateValue()
+    
+    // Watch for class changes on document.documentElement (where theme classes are applied)
+    observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          updateValue()
+        }
+      })
+    })
+    
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+    
+    // Also watch for system color scheme changes
+    if (window.matchMedia) {
+      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      mediaQuery.addEventListener('change', updateValue)
+    }
+  })
+  
+  onUnmounted(() => {
+    if (observer) {
+      observer.disconnect()
+    }
+    if (mediaQuery) {
+      mediaQuery.removeEventListener('change', updateValue)
+    }
+  })
+  
+  return value
+} 

tests/Unit/Endpoint/Api/V1/InvitationEndpointTest.php

@@ -129,26 +129,31 @@ class InvitationEndpointTest extends ApiEndpointTestAbstract
         $response->assertJsonPath('message', 'User is already a member of the organization');
     }
 
-    public function test_store_fails_if_user_invites_user_who_is_already_invited_to_organization(): void
+    public function test_store_fails_if_an_invitation_with_the_same_email_already_exists(): void
     {
         // Arrange
         $data = $this->createUserWithPermission([
             'invitations:create',
         ]);
         Passport::actingAs($data->user);
-        $invitation = OrganizationInvitation::factory()->forOrganization($data->organization)->create();
+        $email = 'user@email.test';
+        $invitation = OrganizationInvitation::factory()->forOrganization($data->organization)->create([
+            'email' => $email,
+        ]);
 
         // Act
         $response = $this->postJson(route('api.v1.invitations.store', $data->organization->getKey()), [
-            'email' => $invitation->email,
+            'email' => $email,
             'role' => Role::Employee->value,
         ]);
 
         // Assert
-        $response->assertInvalid([
-            'email' => 'The email has already been invited to the organization. Please wait for the user to accept the invitation or resend the invitation email.',
+        $response->assertStatus(400);
+        $response->assertExactJson([
+            'error' => true,
+            'key' => 'invitation_for_the_email_already_exists',
+            'message' => 'The email has already been invited to the organization. Please wait for the user to accept the invitation or resend the invitation email.',
         ]);
-        $response->assertStatus(422);
     }
 
     public function test_store_works_if_user_invites_user_who_is_also_a_placeholder(): void

tests/Unit/Endpoint/Api/V1/MemberEndpointTest.php

@@ -10,6 +10,7 @@ use App\Events\MemberRemoved;
 use App\Http\Controllers\Api\V1\MemberController;
 use App\Models\Member;
 use App\Models\Organization;
+use App\Models\OrganizationInvitation;
 use App\Models\Project;
 use App\Models\ProjectMember;
 use App\Models\TimeEntry;
@@ -653,6 +654,182 @@ class MemberEndpointTest extends ApiEndpointTestAbstract
         Event::assertNotDispatched(MemberRemoved::class);
     }
 
+    public function test_destroy_endpoint_also_deletes_user_if_member_is_placeholder(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'members:delete',
+        ]);
+        $user = User::factory()->placeholder()->create();
+        $member = Member::factory()->forUser($user)->forOrganization($data->organization)->role(Role::Placeholder)->create();
+        Passport::actingAs($data->user);
+        Event::fake([
+            MemberRemoved::class,
+        ]);
+
+        // Act
+        $response = $this->deleteJson(route('api.v1.members.destroy', [$data->organization->getKey(), $member->getKey()]));
+
+        // Assert
+        $response->assertStatus(204);
+        $this->assertDatabaseMissing(Member::class, [
+            'id' => $member->getKey(),
+        ]);
+        $this->assertDatabaseMissing(User::class, [
+            'id' => $user->getKey(),
+        ]);
+        Event::assertDispatched(function (MemberRemoved $event) use ($data, $member): bool {
+            return $event->organization->is($data->organization) &&
+                $event->member->is($member);
+        }, 1);
+    }
+
+    public function test_destroy_endpoint_sets_current_organization_to_organization_the_user_is_still_member_of(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'members:delete',
+        ]);
+        $user = $data->user;
+        $otherOrganization = Organization::factory()->create();
+        $otherMember = Member::factory()->forOrganization($otherOrganization)->forUser($user)->role(Role::Employee)->create();
+        Passport::actingAs($user);
+        Event::fake([
+            MemberRemoved::class,
+        ]);
+
+        // Act
+        $response = $this->deleteJson(route('api.v1.members.destroy', [$data->organization->getKey(), $data->member->getKey()]));
+
+        // Assert
+        $response->assertStatus(204);
+        $this->assertDatabaseMissing(Member::class, [
+            'id' => $data->member->getKey(),
+        ]);
+        $user->refresh();
+        $this->assertSame($otherOrganization->getKey(), $user->currentOrganization->getKey());
+        Event::assertDispatched(function (MemberRemoved $event) use ($data): bool {
+            return $event->organization->is($data->organization) &&
+                $event->member->is($data->member);
+        }, 1);
+    }
+
+    public function test_destroy_endpoint_creates_new_organization_and_sets_the_current_organization_to_it_if_user_is_not_member_of_any_other_organization(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'members:delete',
+        ]);
+        $organization = $data->organization;
+        $user = $data->user;
+        Passport::actingAs($user);
+        Event::fake([
+            MemberRemoved::class,
+        ]);
+        $this->assertDatabaseCount(Organization::class, 1);
+
+        // Act
+        $response = $this->deleteJson(route('api.v1.members.destroy', [$data->organization->getKey(), $data->member->getKey()]));
+
+        // Assert
+        $response->assertStatus(204);
+        $this->assertDatabaseCount(Organization::class, 2);
+        $newOrganization = Organization::where('id', '!=', $organization->getKey())->first();
+        $this->assertNotNull($newOrganization);
+        $this->assertDatabaseMissing(Member::class, [
+            'id' => $data->member->getKey(),
+        ]);
+        $this->assertDatabaseHas(Member::class, [
+            'organization_id' => $newOrganization->getKey(),
+            'user_id' => $user->getKey(),
+        ]);
+        $user->refresh();
+        $this->assertNotNull($user->currentOrganization);
+        Event::assertDispatched(function (MemberRemoved $event) use ($data): bool {
+            return $event->organization->is($data->organization) &&
+                $event->member->is($data->member);
+        }, 1);
+    }
+
+    public function test_destroy_endpoint_succeeds_if_member_is_still_in_use_by_a_project_member_and_delete_related_is_active(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'members:delete',
+        ]);
+        $otherMember = Member::factory()->forOrganization($data->organization)->role(Role::Employee)->create();
+        $project = Project::factory()->forOrganization($data->organization)->create();
+        $projectMember = ProjectMember::factory()->forProject($project)->forMember($data->member)->create();
+        $otherProjectMember = ProjectMember::factory()->forProject($project)->forMember($otherMember)->create();
+        Passport::actingAs($data->user);
+        Event::fake([
+            MemberRemoved::class,
+        ]);
+
+        // Act
+        $response = $this->deleteJson(route('api.v1.members.destroy', [
+            'organization' => $data->organization->getKey(),
+            'member' => $data->member->getKey(),
+            'delete_related' => 'true',
+        ]));
+
+        // Assert
+        $response->assertStatus(204);
+        $this->assertDatabaseMissing(Member::class, [
+            'id' => $data->member->getKey(),
+        ]);
+        $this->assertDatabaseHas(ProjectMember::class, [
+            'id' => $otherProjectMember->getKey(),
+            'member_id' => $otherMember->getKey(),
+            'user_id' => $otherMember->user_id,
+        ]);
+        $this->assertDatabaseMissing(ProjectMember::class, [
+            'id' => $projectMember->getKey(),
+        ]);
+        Event::assertDispatched(function (MemberRemoved $event) use ($data): bool {
+            return $event->organization->is($data->organization) &&
+                $event->member->is($data->member);
+        }, 1);
+    }
+
+    public function test_destroy_endpoint_succeeds_if_member_is_still_in_use_by_a_time_entry_and_delete_related_is_active(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'members:delete',
+        ]);
+        $otherMember = Member::factory()->forOrganization($data->organization)->role(Role::Employee)->create();
+        $timeEntry = TimeEntry::factory()->forMember($data->member)->forOrganization($data->organization)->create();
+        $otherTimeEntry = TimeEntry::factory()->forMember($otherMember)->forOrganization($data->organization)->create();
+        Passport::actingAs($data->user);
+        Event::fake([
+            MemberRemoved::class,
+        ]);
+
+        // Act
+        $response = $this->deleteJson(route('api.v1.members.destroy', [
+            'organization' => $data->organization->getKey(),
+            'member' => $data->member->getKey(),
+            'delete_related' => 'true',
+        ]));
+
+        // Assert
+        $response->assertStatus(204);
+        $this->assertDatabaseMissing(Member::class, [
+            'id' => $data->member->getKey(),
+        ]);
+        $this->assertDatabaseHas(TimeEntry::class, [
+            'id' => $otherTimeEntry->getKey(),
+        ]);
+        $this->assertDatabaseMissing(TimeEntry::class, [
+            'id' => $timeEntry->getKey(),
+        ]);
+        Event::assertDispatched(function (MemberRemoved $event) use ($data): bool {
+            return $event->organization->is($data->organization) &&
+                $event->member->is($data->member);
+        }, 1);
+    }
+
     public function test_destroy_member_succeeds_if_data_is_valid(): void
     {
         // Arrange
@@ -858,6 +1035,37 @@ class MemberEndpointTest extends ApiEndpointTestAbstract
         $response->assertForbidden();
     }
 
+    public function test_invite_placeholder_fails_if_there_is_already_an_invitation_with_the_same_email(): void
+    {
+        // Arrange
+        $data = $this->createUserWithPermission([
+            'members:invite-placeholder',
+            'invitations:create',
+        ]);
+        $placeholder = User::factory()->placeholder()->create([
+            'email' => 'user@mail.test',
+        ]);
+        $placeholderMember = Member::factory()->forUser($placeholder)->forOrganization($data->organization)->role(Role::Placeholder)->create();
+        OrganizationInvitation::factory()->forOrganization($data->organization)->create([
+            'email' => $placeholder->email,
+        ]);
+        Passport::actingAs($data->user);
+
+        // Act
+        $response = $this->postJson(route('api.v1.members.invite-placeholder', [
+            'organization' => $data->organization->id,
+            'member' => $placeholderMember->id,
+        ]));
+
+        // Assert
+        $response->assertStatus(400);
+        $response->assertExactJson([
+            'error' => true,
+            'key' => 'invitation_for_the_email_already_exists',
+            'message' => 'The email has already been invited to the organization. Please wait for the user to accept the invitation or resend the invitation email.',
+        ]);
+    }
+
     public function test_invite_placeholder_returns_400_if_user_is_not_placeholder(): void
     {
         // Arrange

tests/Unit/Endpoint/Api/V1/ReportEndpointTest.php

@@ -340,35 +340,6 @@ class ReportEndpointTest extends ApiEndpointTestAbstract
         );
     }
 
-    public function test_update_endpoint_can_update_public_until_without_changing_secret(): void
-    {
-        // Arrange
-        $data = $this->createUserWithPermission([
-            'reports:update',
-        ]);
-        $report = Report::factory()->public()->forOrganization($data->organization)->create();
-        $secret = $report->share_secret;
-        $newPublicUntil = Carbon::now()->addDays(30)->toIso8601ZuluString();
-        Passport::actingAs($data->user);
-
-        // Act
-        $response = $this->putJson(route('api.v1.reports.update', [$data->organization->getKey(), $report->getKey()]), [
-            'public_until' => $newPublicUntil,
-        ]);
-
-        // Assert
-        $report->refresh();
-        $this->assertTrue($report->is_public);
-        $this->assertSame($secret, $report->share_secret);
-        $this->assertSame($newPublicUntil, $report->public_until->toIso8601ZuluString());
-        $response->assertStatus(200);
-        $response->assertJson(fn (AssertableJson $json) => $json
-            ->has('data')
-            ->where('data.is_public', true)
-            ->where('data.shareable_link', $report->getShareableLink())
-        );
-    }
-
     public function test_update_endpoint_can_update_the_report_all_properties_set(): void
     {
         // Arrange