Conditionally show cost column in report tables; Task/Project Modal

Field cleanup; improve estimated time UX

.github/workflows/playwright.yml

@@ -9,8 +9,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
-        shardTotal: [8]
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
 
     services:
       mailpit:

app/Actions/Jetstream/AddOrganizationMember.php

@@ -4,9 +4,18 @@ declare(strict_types=1);
 
 namespace App\Actions\Jetstream;
 
-use App\Exceptions\MovedToApiException;
+use App\Enums\Role;
 use App\Models\Organization;
 use App\Models\User;
+use App\Service\MemberService;
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Facades\Gate;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
+use Illuminate\Validation\Rules\In;
+use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 use Laravel\Jetstream\Contracts\AddsTeamMembers;
 
 class AddOrganizationMember implements AddsTeamMembers
@@ -16,6 +25,70 @@ class AddOrganizationMember implements AddsTeamMembers
      */
     public function add(User $owner, Organization $organization, string $email, ?string $role = null): void
     {
-        throw new MovedToApiException;
+        Gate::forUser($owner)->authorize('addTeamMember', $organization); // TODO: refactor after owner refactoring
+
+        $this->validate($organization, $email, $role);
+
+        $newOrganizationMember = User::query()
+            ->where('email', $email)
+            ->where('is_placeholder', '=', false)
+            ->firstOrFail();
+
+        app(MemberService::class)->addMember($newOrganizationMember, $organization, Role::from($role));
+    }
+
+    /**
+     * Validate the add member operation.
+     */
+    protected function validate(Organization $organization, string $email, ?string $role): void
+    {
+        Validator::make([
+            'email' => $email,
+            'role' => $role,
+        ], $this->rules())->after(
+            $this->ensureUserIsNotAlreadyOnTeam($organization, $email)
+        )->validateWithBag('addTeamMember');
+    }
+
+    /**
+     * Get the validation rules for adding a team member.
+     *
+     * @return array<string, array<ValidationRule|Rule|string|In>>
+     */
+    protected function rules(): array
+    {
+        return [
+            'email' => [
+                'required',
+                'email',
+                ExistsEloquent::make(User::class, 'email', function (Builder $builder) {
+                    /** @var Builder<User> $builder */
+                    return $builder->where('is_placeholder', '=', false);
+                })->withMessage(__('We were unable to find a registered user with this email address.')),
+            ],
+            'role' => [
+                'required',
+                'string',
+                Rule::in([
+                    Role::Admin->value,
+                    Role::Manager->value,
+                    Role::Employee->value,
+                ]),
+            ],
+        ];
+    }
+
+    /**
+     * Ensure that the user is not already on the team.
+     */
+    protected function ensureUserIsNotAlreadyOnTeam(Organization $team, string $email): Closure
+    {
+        return function ($validator) use ($team, $email): void {
+            $validator->errors()->addIf(
+                $team->hasRealUserWithEmail($email),
+                'email',
+                __('This user already belongs to the team.')
+            );
+        };
     }
 }

app/Actions/Jetstream/CreateOrganization.php

@@ -25,8 +25,6 @@ class CreateOrganization implements CreatesTeams
      *
      * @throws AuthorizationException
      * @throws ValidationException
-     *
-     * @deprecated Use REST endpoint instead
      */
     public function create(User $user, array $input): Organization
     {

app/Actions/Jetstream/DeleteOrganization.php

@@ -12,8 +12,6 @@ class DeleteOrganization implements DeletesTeams
 {
     /**
      * Delete the given team.
-     *
-     * @deprecated Use REST endpoint instead
      */
     public function delete(Organization $organization): void
     {

app/Actions/Jetstream/DeleteUser.php

@@ -16,8 +16,6 @@ class DeleteUser implements DeletesUsers
      * Delete the given user.
      *
      * @throws ValidationException
-     *
-     * @deprecated Use REST endpoint instead
      */
     public function delete(User $user): void
     {

app/Actions/Jetstream/ValidateOrganizationDeletion.php

@@ -18,8 +18,6 @@ class ValidateOrganizationDeletion
      * @param  Organization  $organization  Organization to be deleted
      *
      * @throws AuthorizationException
-     *
-     * @deprecated Use REST endpoint instead
      */
     public function validate(User $user, Organization $organization): void
     {

app/Events/MemberAdded.php

@@ -1,28 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Events;
-
-use App\Models\Member;
-use App\Models\Organization;
-use App\Models\User;
-use Illuminate\Foundation\Events\Dispatchable;
-
-class MemberAdded
-{
-    use Dispatchable;
-
-    public Member $member;
-
-    public Organization $organization;
-
-    public User $user;
-
-    public function __construct(Member $member, Organization $organization, User $user)
-    {
-        $this->member = $member;
-        $this->organization = $organization;
-        $this->user = $user;
-    }
-}

app/Events/MemberAdding.php

@@ -1,28 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Events;
-
-use App\Enums\Role;
-use App\Models\Organization;
-use App\Models\User;
-use Illuminate\Foundation\Events\Dispatchable;
-
-class MemberAdding
-{
-    use Dispatchable;
-
-    public User $user;
-
-    public Organization $organization;
-
-    public Role $role;
-
-    public function __construct(User $user, Organization $organization, Role $role)
-    {
-        $this->user = $user;
-        $this->organization = $organization;
-        $this->role = $role;
-    }
-}

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

@@ -35,7 +35,6 @@ class ApiTokenController extends Controller
                 /** @var Builder<Client> $query */
                 $query->whereJsonContains('grant_types', 'personal_access');
             })
-            ->orderBy('created_at', 'desc')
             ->get();
 
         return new ApiTokenCollection($tokens);

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

@@ -41,7 +41,6 @@ class InvitationController extends Controller
         $this->checkPermission($organization, 'invitations:view');
 
         $invitations = $organization->teamInvitations()
-            ->orderBy('created_at', 'desc')
             ->paginate(config('app.pagination_per_page_default'));
 
         return InvitationCollection::make($invitations);

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

@@ -60,7 +60,6 @@ class MemberController extends Controller
         $members = Member::query()
             ->whereBelongsTo($organization, 'organization')
             ->with(['user'])
-            ->orderBy('created_at', 'desc')
             ->paginate(config('app.pagination_per_page_default'));
 
         return MemberCollection::make($members);

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

@@ -5,17 +5,11 @@ declare(strict_types=1);
 namespace App\Http\Controllers\Api\V1;
 
 use App\Enums\Role;
-use App\Events\AfterCreateOrganization;
-use App\Http\Requests\V1\Organization\OrganizationStoreRequest;
 use App\Http\Requests\V1\Organization\OrganizationUpdateRequest;
 use App\Http\Resources\V1\Organization\OrganizationResource;
 use App\Models\Organization;
 use App\Service\BillableRateService;
-use App\Service\DeletionService;
-use App\Service\IpLookup\IpLookupServiceContract;
-use App\Service\OrganizationService;
 use Illuminate\Auth\Access\AuthorizationException;
-use Illuminate\Http\JsonResponse;
 
 class OrganizationController extends Controller
 {
@@ -86,48 +80,4 @@ class OrganizationController extends Controller
 
         return new OrganizationResource($organization, true);
     }
-
-    /**
-     * Create organization
-     *
-     * @operationId createOrganization
-     */
-    public function store(OrganizationStoreRequest $request, OrganizationService $organizationService): OrganizationResource
-    {
-        $user = $this->user();
-        $ipLookupResponse = app(IpLookupServiceContract::class)->lookup($request->ip());
-
-        $currency = $ipLookupResponse?->currency;
-
-        $organization = $organizationService->createOrganization(
-            $request->getName(),
-            $user,
-            false,
-            $currency
-        );
-
-        $user->switchTeam($organization);
-
-        // Note: The refresh is necessary for currently unknown reasons. Do not remove it.
-        $organization = $organization->refresh();
-        AfterCreateOrganization::dispatch($organization);
-
-        return new OrganizationResource($organization, true);
-    }
-
-    /**
-     * Delete organization
-     *
-     * @operationId deleteOrganization
-     *
-     * @throws AuthorizationException
-     */
-    public function destroy(Organization $organization, DeletionService $deletionService): JsonResponse
-    {
-        $this->checkPermission($organization, 'organizations:delete');
-
-        $deletionService->deleteOrganization($organization);
-
-        return response()->json(null, 204);
-    }
 }

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

@@ -60,9 +60,7 @@ class ProjectController extends Controller
             $projectsQuery->whereNull('archived_at');
         }
 
-        $projects = $projectsQuery
-            ->orderBy('created_at', 'desc')
-            ->paginate(config('app.pagination_per_page_default'));
+        $projects = $projectsQuery->paginate(config('app.pagination_per_page_default'));
 
         $showBillableRate = $this->member($organization)->role !== Role::Employee->value || $organization->employees_can_see_billable_rates;
 

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

@@ -6,7 +6,6 @@ namespace App\Http\Controllers\Api\V1;
 
 use App\Exceptions\Api\InactiveUserCanNotBeUsedApiException;
 use App\Exceptions\Api\UserIsAlreadyMemberOfProjectApiException;
-use App\Http\Requests\V1\ProjectMember\ProjectMemberIndexRequest;
 use App\Http\Requests\V1\ProjectMember\ProjectMemberStoreRequest;
 use App\Http\Requests\V1\ProjectMember\ProjectMemberUpdateRequest;
 use App\Http\Resources\V1\ProjectMember\ProjectMemberCollection;
@@ -42,13 +41,12 @@ class ProjectMemberController extends Controller
      *
      * @operationId getProjectMembers
      */
-    public function index(Organization $organization, Project $project, ProjectMemberIndexRequest $request): ProjectMemberCollection
+    public function index(Organization $organization, Project $project): ProjectMemberCollection
     {
         $this->checkPermission($organization, 'project-members:view', $project);
 
         $projectMembers = ProjectMember::query()
             ->whereBelongsTo($project, 'project')
-            ->orderBy('created_at', 'desc')
             ->paginate(config('app.pagination_per_page_default'));
 
         return new ProjectMemberCollection($projectMembers);

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

@@ -5,7 +5,6 @@ declare(strict_types=1);
 namespace App\Http\Controllers\Api\V1;
 
 use App\Enums\Weekday;
-use App\Http\Requests\V1\Report\ReportIndexRequest;
 use App\Http\Requests\V1\Report\ReportStoreRequest;
 use App\Http\Requests\V1\Report\ReportUpdateRequest;
 use App\Http\Resources\V1\Report\DetailedReportResource;
@@ -41,7 +40,7 @@ class ReportController extends Controller
      *
      * @operationId getReports
      */
-    public function index(Organization $organization, ReportIndexRequest $request): ReportCollection
+    public function index(Organization $organization): ReportCollection
     {
         $this->checkPermission($organization, 'reports:view');
 

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

@@ -5,7 +5,6 @@ declare(strict_types=1);
 namespace App\Http\Controllers\Api\V1;
 
 use App\Exceptions\Api\EntityStillInUseApiException;
-use App\Http\Requests\V1\Tag\TagIndexRequest;
 use App\Http\Requests\V1\Tag\TagStoreRequest;
 use App\Http\Requests\V1\Tag\TagUpdateRequest;
 use App\Http\Resources\V1\Tag\TagCollection;
@@ -35,7 +34,7 @@ class TagController extends Controller
      *
      * @throws AuthorizationException
      */
-    public function index(Organization $organization, TagIndexRequest $request): TagCollection
+    public function index(Organization $organization): TagCollection
     {
         $this->checkPermission($organization, 'tags:view');
 

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

@@ -82,9 +82,7 @@ class TaskController extends Controller
             $query->whereNull('done_at');
         }
 
-        $tasks = $query
-            ->orderBy('created_at', 'desc')
-            ->paginate(config('app.pagination_per_page_default'));
+        $tasks = $query->paginate(config('app.pagination_per_page_default'));
 
         return new TaskCollection($tasks);
     }

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

@@ -4,12 +4,8 @@ declare(strict_types=1);
 
 namespace App\Http\Controllers\Api\V1;
 
-use App\Exceptions\Api\CanNotDeleteUserWhoIsOwnerOfOrganizationWithMultipleMembers;
 use App\Http\Resources\V1\User\UserResource;
-use App\Models\User;
-use App\Service\DeletionService;
 use Illuminate\Auth\Access\AuthorizationException;
-use Illuminate\Http\JsonResponse;
 
 class UserController extends Controller
 {
@@ -28,29 +24,4 @@ class UserController extends Controller
 
         return new UserResource($user);
     }
-
-    /**
-     * Handles the deletion of a user.
-     *
-     * This endpoint is independent of organization.
-     *
-     * @operationId deleteUser
-     *
-     * @param  User  $user  The user instance to be deleted.
-     * @param  DeletionService  $deletionService  The service responsible for performing the user deletion.
-     * @return JsonResponse A JSON response with a 204 No Content status upon successful deletion.
-     *
-     * @throws AuthorizationException Thrown when the authenticated user does not match the user to be deleted.
-     * @throws CanNotDeleteUserWhoIsOwnerOfOrganizationWithMultipleMembers Thrown when the user to be deleted is the owner of an organization with multiple members.
-     */
-    public function destroy(User $user, DeletionService $deletionService): JsonResponse
-    {
-        if ($user->getKey() !== $this->user()->getKey()) {
-            throw new AuthorizationException;
-        }
-
-        $deletionService->deleteUser($user);
-
-        return response()->json(null, 204);
-    }
 }

app/Http/Controllers/Web/DashboardController.php

@@ -4,13 +4,30 @@ declare(strict_types=1);
 
 namespace App\Http\Controllers\Web;
 
+use App\Enums\Role;
+use App\Service\DashboardService;
+use App\Service\PermissionStore;
+use Illuminate\Auth\Access\AuthorizationException;
 use Inertia\Inertia;
 use Inertia\Response;
 
 class DashboardController extends Controller
 {
-    public function dashboard(): Response
+    /**
+     * @throws AuthorizationException
+     */
+    public function dashboard(DashboardService $dashboardService, PermissionStore $permissionStore): Response
     {
+        $user = $this->user();
+        $organization = $this->currentOrganization();
+
+        $latestTeamActivity = null;
+        if ($permissionStore->has($organization, 'time-entries:view:all')) {
+            $latestTeamActivity = $dashboardService->latestTeamActivity($organization);
+        }
+
+        $showBillableRate = $this->member($organization)->role !== Role::Employee->value || $organization->employees_can_see_billable_rates;
+
         return Inertia::render('Dashboard');
     }
 }

app/Http/Controllers/Web/OrganizationInvitationController.php

@@ -1,64 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Http\Controllers\Web;
-
-use App\Enums\Role;
-use App\Models\OrganizationInvitation;
-use App\Models\User;
-use App\Service\MemberService;
-use Illuminate\Http\RedirectResponse;
-use RuntimeException;
-
-class OrganizationInvitationController extends Controller
-{
-    public function accept(OrganizationInvitation $invitation, MemberService $memberService): RedirectResponse
-    {
-        $email = strtolower($invitation->email);
-        $role = Role::tryFrom($invitation->role);
-        if ($role === null || $role === Role::Owner || $role === Role::Placeholder) {
-            throw new RuntimeException('Invalid role');
-        }
-
-        $newOrganizationMember = User::query()
-            ->where('email', $email)
-            ->where('is_placeholder', '=', false)
-            ->first();
-
-        if ($newOrganizationMember === null) {
-            if ($invitation->accepted_at === null) {
-                $invitation->accepted_at = now();
-                $invitation->save();
-            }
-
-            return redirect(route('register', [
-                'bannerStyle' => 'info',
-                'bannerText' => __('Please create an account to finish joining the :organization organization.', [
-                    'organization' => $invitation->organization->name,
-                ]),
-            ]));
-        } else {
-            $organization = $invitation->organization;
-            if ($memberService->isEmailAlreadyMember($organization, $email)) {
-                return redirect(route('dashboard', [
-                    'bannerStyle' => 'danger',
-                    'bannerText' => __('You are already a member of the :organization organization.', [
-                        'organization' => $organization->name,
-                    ]),
-                ]));
-            }
-
-            $memberService->addMember($newOrganizationMember, $organization, $role);
-
-            $invitation->delete();
-
-            return redirect(route('dashboard', [
-                'bannerStyle' => 'success',
-                'bannerText' => __('Great! You have accepted the invitation to join the :organization organization.', [
-                    'organization' => $invitation->organization->name,
-                ]),
-            ]));
-        }
-    }
-}

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

@@ -21,11 +21,6 @@ class InvitationIndexRequest extends BaseFormRequest
     public function rules(): array
     {
         return [
-            'page' => [
-                'integer',
-                'min:1',
-                'max:2147483647',
-            ],
         ];
     }
 }

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

@@ -21,11 +21,6 @@ class MemberIndexRequest extends BaseFormRequest
     public function rules(): array
     {
         return [
-            'page' => [
-                'integer',
-                'min:1',
-                'max:2147483647',
-            ],
         ];
     }
 }

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

@@ -1,35 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Http\Requests\V1\Organization;
-
-use App\Http\Requests\V1\BaseFormRequest;
-use App\Models\Organization;
-
-/**
- * @property Organization $organization Organization from model binding
- */
-class OrganizationStoreRequest extends BaseFormRequest
-{
-    /**
-     * Get the validation rules that apply to the request.
-     *
-     * @return array<string, array<string|\Illuminate\Contracts\Validation\Rule>>
-     */
-    public function rules(): array
-    {
-        return [
-            'name' => [
-                'required',
-                'string',
-                'max:255',
-            ],
-        ];
-    }
-
-    public function getName(): string
-    {
-        return (string) $this->input('name');
-    }
-}

app/Http/Requests/V1/ProjectMember/ProjectMemberIndexRequest.php

@@ -1,27 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Http\Requests\V1\ProjectMember;
-
-use App\Http\Requests\V1\BaseFormRequest;
-use Illuminate\Contracts\Validation\ValidationRule;
-
-class ProjectMemberIndexRequest extends BaseFormRequest
-{
-    /**
-     * Get the validation rules that apply to the request.
-     *
-     * @return array<string, array<string|ValidationRule>>
-     */
-    public function rules(): array
-    {
-        return [
-            'page' => [
-                'integer',
-                'min:1',
-                'max:2147483647',
-            ],
-        ];
-    }
-}

app/Http/Requests/V1/Report/ReportIndexRequest.php

@@ -1,27 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Http\Requests\V1\Report;
-
-use App\Http\Requests\V1\BaseFormRequest;
-use Illuminate\Contracts\Validation\ValidationRule;
-
-class ReportIndexRequest extends BaseFormRequest
-{
-    /**
-     * Get the validation rules that apply to the request.
-     *
-     * @return array<string, array<string|ValidationRule>>
-     */
-    public function rules(): array
-    {
-        return [
-            'page' => [
-                'integer',
-                'min:1',
-                'max:2147483647',
-            ],
-        ];
-    }
-}

app/Http/Requests/V1/Tag/TagIndexRequest.php

@@ -1,27 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Http\Requests\V1\Tag;
-
-use App\Http\Requests\V1\BaseFormRequest;
-use Illuminate\Contracts\Validation\ValidationRule;
-
-class TagIndexRequest extends BaseFormRequest
-{
-    /**
-     * Get the validation rules that apply to the request.
-     *
-     * @return array<string, array<string|ValidationRule>>
-     */
-    public function rules(): array
-    {
-        return [
-            'page' => [
-                'integer',
-                'min:1',
-                'max:2147483647',
-            ],
-        ];
-    }
-}

app/Http/Requests/V1/Task/TaskIndexRequest.php

@@ -26,11 +26,6 @@ class TaskIndexRequest extends BaseFormRequest
     public function rules(): array
     {
         return [
-            'page' => [
-                'integer',
-                'min:1',
-                'max:2147483647',
-            ],
             'project_id' => [
                 ExistsEloquent::make(Project::class, null, function (Builder $builder): Builder {
                     /** @var Builder<Project> $builder */

app/Http/Resources/V1/Client/ClientCollection.php

@@ -4,10 +4,9 @@ declare(strict_types=1);
 
 namespace App\Http\Resources\V1\Client;
 
-use App\Http\Resources\PaginatedResourceCollection;
 use Illuminate\Http\Resources\Json\ResourceCollection;
 
-class ClientCollection extends ResourceCollection implements PaginatedResourceCollection
+class ClientCollection extends ResourceCollection
 {
     /**
      * The resource that this resource collects.

app/Http/Resources/V1/Tag/TagCollection.php

@@ -4,10 +4,9 @@ declare(strict_types=1);
 
 namespace App\Http\Resources\V1\Tag;
 
-use App\Http\Resources\PaginatedResourceCollection;
 use Illuminate\Http\Resources\Json\ResourceCollection;
 
-class TagCollection extends ResourceCollection implements PaginatedResourceCollection
+class TagCollection extends ResourceCollection
 {
     /**
      * The resource that this resource collects.

app/Listeners/RemovePlaceholder.php

@@ -0,0 +1,43 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Listeners;
+
+use App\Models\Member;
+use App\Models\User;
+use App\Service\MemberService;
+use Illuminate\Database\Eloquent\Builder;
+use Laravel\Jetstream\Events\TeamMemberAdded;
+
+class RemovePlaceholder
+{
+    /**
+     * Handle the event.
+     */
+    public function handle(TeamMemberAdded $event): void
+    {
+        $memberService = app(MemberService::class);
+        $member = Member::query()
+            ->whereBelongsTo($event->team, 'organization')
+            ->whereBelongsTo($event->user, 'user')
+            ->firstOrFail();
+        $placeholders = Member::query()
+            ->whereHas('user', function (Builder $query) use ($event): void {
+                /** @var Builder<User> $query */
+                $query->where('is_placeholder', '=', true)
+                    ->where('email', '=', $event->user->email);
+            })
+            ->whereBelongsTo($event->team, 'organization')
+            ->with(['user'])
+            ->get();
+
+        foreach ($placeholders as $placeholder) {
+            /** @var Member $placeholder */
+            $placeholderUser = $placeholder->user;
+            $memberService->assignOrganizationEntitiesToDifferentMember($event->team, $placeholder, $member);
+            $placeholder->delete();
+            $placeholderUser->delete();
+        }
+    }
+}

app/Mail/OrganizationInvitationMail.php

@@ -8,7 +8,6 @@ use App\Models\OrganizationInvitation;
 use Illuminate\Bus\Queueable;
 use Illuminate\Mail\Mailable;
 use Illuminate\Queue\SerializesModels;
-use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\URL;
 
 class OrganizationInvitationMail extends Mailable
@@ -33,12 +32,9 @@ class OrganizationInvitationMail extends Mailable
     public function build(): self
     {
         return $this->markdown('emails.organization-invitation', [
-            'acceptUrl' => URL::to(URL::signedRoute(
-                'organization-invitations.accept',
-                ['invitation' => $this->invitation->getKey()],
-                Carbon::now()->addDays(90),
-                false
-            )),
+            'acceptUrl' => URL::signedRoute('team-invitations.accept', [
+                'invitation' => $this->invitation,
+            ]),
         ])->subject(__('Organization Invitation'));
     }
 }

app/Models/Organization.php

@@ -36,7 +36,6 @@ use OwenIt\Auditing\Contracts\Auditable as AuditableContract;
  * @property string $user_id
  * @property bool $employees_can_see_billable_rates
  * @property bool $employees_can_manage_tasks
- * @property bool $prevent_overlapping_time_entries
  * @property User $owner
  * @property Carbon|null $created_at
  * @property Carbon|null $updated_at

app/Models/OrganizationInvitation.php

@@ -18,7 +18,6 @@ use OwenIt\Auditing\Contracts\Auditable as AuditableContract;
  * @property string $email
  * @property string $role
  * @property string $organization_id
- * @property Carbon|null $accepted_at
  * @property Carbon|null $updated_at
  * @property Carbon|null $created_at
  * @property-read Organization $organization
@@ -42,16 +41,14 @@ class OrganizationInvitation extends JetstreamTeamInvitation implements Auditabl
     protected $table = 'organization_invitations';
 
     /**
-     * Get the attributes that should be cast.
+     * The attributes that are mass assignable.
      *
-     * @return array<string, string>
+     * @var array<int, string>
      */
-    public function casts(): array
-    {
-        return [
-            'accepted_at' => 'datetime',
-        ];
-    }
+    protected $fillable = [
+        'email',
+        'role',
+    ];
 
     /**
      * Get the organization that the invitation belongs to.

app/Policies/OrganizationPolicy.php

@@ -6,7 +6,6 @@ namespace App\Policies;
 
 use App\Models\Organization;
 use App\Models\User;
-use App\Service\PermissionStore;
 use Filament\Facades\Filament;
 use Illuminate\Auth\Access\HandlesAuthorization;
 
@@ -59,7 +58,19 @@ class OrganizationPolicy
             return true;
         }
 
-        return app(PermissionStore::class)->userHas($organization, $user, 'organizations:update');
+        return $user->ownsTeam($organization);
+    }
+
+    /**
+     * Determine whether the user can add team members.
+     */
+    public function addTeamMember(User $user, Organization $organization): bool
+    {
+        if (Filament::isServing()) {
+            return true;
+        }
+
+        return true;
     }
 
     /**

app/Providers/EventServiceProvider.php

@@ -4,9 +4,11 @@ declare(strict_types=1);
 
 namespace App\Providers;
 
+use App\Listeners\RemovePlaceholder;
 use Illuminate\Auth\Events\Registered;
 use Illuminate\Auth\Listeners\SendEmailVerificationNotification;
 use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
+use Laravel\Jetstream\Events\TeamMemberAdded;
 
 class EventServiceProvider extends ServiceProvider
 {
@@ -19,6 +21,9 @@ class EventServiceProvider extends ServiceProvider
         Registered::class => [
             SendEmailVerificationNotification::class,
         ],
+        TeamMemberAdded::class => [
+            RemovePlaceholder::class,
+        ],
     ];
 
     /**

app/Service/InvitationService.php

@@ -8,11 +8,9 @@ use App\Enums\Role;
 use App\Exceptions\Api\InvitationForTheEmailAlreadyExistsApiException;
 use App\Exceptions\Api\UserIsAlreadyMemberOfOrganizationApiException;
 use App\Mail\OrganizationInvitationMail;
+use App\Models\Member;
 use App\Models\Organization;
 use App\Models\OrganizationInvitation;
-use App\Models\User;
-use Illuminate\Support\Collection;
-use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Mail;
 use Laravel\Jetstream\Events\InvitingTeamMember;
 
@@ -23,7 +21,11 @@ class InvitationService
      */
     public function inviteUser(Organization $organization, string $email, Role $role): OrganizationInvitation
     {
-        if (app(MemberService::class)->isEmailAlreadyMember($organization, $email)) {
+        if (Member::query()
+            ->whereBelongsTo($organization, 'organization')
+            ->whereRelation('user', 'email', '=', $email)
+            ->where('role', '!=', Role::Placeholder->value)
+            ->exists()) {
             throw new UserIsAlreadyMemberOfOrganizationApiException;
         }
 
@@ -46,37 +48,4 @@ class InvitationService
 
         return $invitation;
     }
-
-    /**
-     * @return Collection<int, Organization>
-     */
-    public function processAcceptedInvitations(User $user): Collection
-    {
-        $organizations = new Collection;
-
-        $invitations = OrganizationInvitation::query()
-            ->where('email', $user->email)
-            ->whereNotNull('accepted_at')
-            ->get();
-
-        foreach ($invitations as $invitation) {
-            $organization = $invitation->organization;
-            $role = Role::tryFrom($invitation->role);
-            if ($role === null) {
-                Log::error('Invalid role in invitation', [
-                    'invitation' => $invitation->getKey(),
-                    'role' => $invitation->role,
-                ]);
-
-                continue;
-            }
-            app(MemberService::class)->addMember($user, $organization, $role);
-
-            $invitation->delete();
-
-            $organizations->push($organization);
-        }
-
-        return $organizations;
-    }
 }

app/Service/MemberService.php

@@ -5,8 +5,6 @@ declare(strict_types=1);
 namespace App\Service;
 
 use App\Enums\Role;
-use App\Events\MemberAdded;
-use App\Events\MemberAdding;
 use App\Events\MemberRemoved;
 use App\Exceptions\Api\CanNotRemoveOwnerFromOrganization;
 use App\Exceptions\Api\ChangingRoleOfPlaceholderIsNotAllowed;
@@ -38,8 +36,7 @@ class MemberService
     public function addMember(User $user, Organization $organization, Role $role, bool $asSuperAdmin = false): Member
     {
         if (! $asSuperAdmin) {
-            MemberAdding::dispatch($user, $organization, $role);
-            AddingTeamMember::dispatch($organization, $user); // Legacy event
+            AddingTeamMember::dispatch($organization, $user);
         }
 
         $member = new Member;
@@ -52,37 +49,14 @@ class MemberService
             $user->currentOrganization()->associate($organization);
             $user->save();
         });
-        $this->mergePlaceholderMembersIntoExistingMember($member, $organization, $user);
 
         if (! $asSuperAdmin) {
-            MemberAdded::dispatch($member, $organization, $user);
-            TeamMemberAdded::dispatch($organization, $user); // Legacy event
+            TeamMemberAdded::dispatch($organization, $user);
         }
 
         return $member;
     }
 
-    private function mergePlaceholderMembersIntoExistingMember(Member $member, Organization $organization, User $user): void
-    {
-        $placeholders = Member::query()
-            ->whereHas('user', function (Builder $query) use ($user): void {
-                /** @var Builder<User> $query */
-                $query->where('is_placeholder', '=', true)
-                    ->where('email', '=', $user->email);
-            })
-            ->whereBelongsTo($organization, 'organization')
-            ->with(['user'])
-            ->get();
-
-        foreach ($placeholders as $placeholder) {
-            /** @var Member $placeholder */
-            $placeholderUser = $placeholder->user;
-            $this->assignOrganizationEntitiesToDifferentMember($organization, $placeholder, $member);
-            $placeholder->delete();
-            $placeholderUser->delete();
-        }
-    }
-
     /**
      * @throws CanNotRemoveOwnerFromOrganization
      * @throws EntityStillInUseApiException
@@ -222,7 +196,6 @@ class MemberService
 
         $placeholderUser = $user->replicate();
         $placeholderUser->is_placeholder = true;
-        $placeholderUser->current_team_id = $member->organization_id;
         $placeholderUser->save();
 
         $member->user()->associate($placeholderUser);
@@ -235,13 +208,4 @@ class MemberService
             $this->userService->makeSureUserHasCurrentOrganization($user);
         }
     }
-
-    public function isEmailAlreadyMember(Organization $organization, string $email): bool
-    {
-        return Member::query()
-            ->whereBelongsTo($organization, 'organization')
-            ->whereRelation('user', 'email', '=', $email)
-            ->where('role', '!=', Role::Placeholder->value)
-            ->exists();
-    }
 }

app/Service/TimeEntryService.php

@@ -31,17 +31,12 @@ class TimeEntryService
             throw new LogicException('Rounding minutes must be greater than 0');
         }
         $end = 'coalesce("end", \''.Carbon::now()->toDateTimeString().'\')';
-        $start = $this->getStartSelectRawForRounding($roundingType, $roundingMinutes);
         if ($roundingType === TimeEntryRoundingType::Down) {
-            return 'date_bin(\''.$roundingMinutes.' minutes\', '.$end.', '.$start.')';
+            return 'date_bin(\''.$roundingMinutes.' minutes\', '.$end.', '.$this->getStartSelectRawForRounding($roundingType, $roundingMinutes).')';
         } elseif ($roundingType === TimeEntryRoundingType::Up) {
-            // If end is already on a boundary, keep it; otherwise round up to next boundary
-            return 'CASE WHEN '.$end.' = date_bin(\''.$roundingMinutes.' minutes\', '.$end.', '.$start.') '.
-                   'THEN '.$end.' '.
-                   'ELSE date_bin(\''.$roundingMinutes.' minutes\', '.$end.' + interval \''.$roundingMinutes.' minutes\', '.$start.') '.
-                   'END';
+            return 'date_bin(\''.$roundingMinutes.' minutes\', '.$end.' + interval \''.$roundingMinutes.' minutes\', '.$this->getStartSelectRawForRounding($roundingType, $roundingMinutes).')';
         } elseif ($roundingType === TimeEntryRoundingType::Nearest) {
-            return 'date_bin(\''.$roundingMinutes.' minutes\', '.$end.' + interval \''.($roundingMinutes / 2).' minutes\', '.$start.')';
+            return 'date_bin(\''.$roundingMinutes.' minutes\', '.$end.' + interval \''.($roundingMinutes / 2).' minutes\', '.$this->getStartSelectRawForRounding($roundingType, $roundingMinutes).')';
         }
     }
 }

app/Service/UserService.php

@@ -38,7 +38,7 @@ class UserService
     ): User {
         $user = new User;
         $user->name = $name;
-        $user->email = strtolower($email);
+        $user->email = $email;
         $user->password = Hash::make($password);
         $user->timezone = $timezone;
         $user->week_start = $weekStart;
@@ -47,22 +47,19 @@ class UserService
         }
         $user->save();
 
-        $organizations = app(InvitationService::class)->processAcceptedInvitations($user);
+        $organization = app(OrganizationService::class)->createOrganization(
+            $this->getOrganizationNameForUserName($user->name),
+            $user,
+            true,
+            $currency,
+            $numberFormat,
+            $currencyFormat,
+            $dateFormat,
+            $intervalFormat,
+            $timeFormat,
+        );
 
-        if ($organizations->isEmpty()) {
-            $organization = app(OrganizationService::class)->createOrganization(
-                $this->getOrganizationNameForUserName($user->name),
-                $user,
-                true,
-                $currency,
-                $numberFormat,
-                $currencyFormat,
-                $dateFormat,
-                $intervalFormat,
-                $timeFormat,
-            );
-            $user->ownedTeams()->save($organization);
-        }
+        $user->ownedTeams()->save($organization);
 
         return $user;
     }

database/factories/OrganizationInvitationFactory.php

@@ -25,24 +25,9 @@ class OrganizationInvitationFactory extends Factory
             'email' => $this->faker->unique()->safeEmail(),
             'role' => Role::Employee->value,
             'organization_id' => Organization::factory(),
-            'accepted_at' => null,
         ];
     }
 
-    public function role(Role $role): self
-    {
-        return $this->state(fn (array $attributes) => [
-            'role' => $role->value,
-        ]);
-    }
-
-    public function accepted(): self
-    {
-        return $this->state(fn (array $attributes): array => [
-            'accepted_at' => $this->faker->dateTime(),
-        ]);
-    }
-
     public function forOrganization(Organization $organization): self
     {
         return $this->state(fn (array $attributes) => [

database/migrations/2026_02_11_143746_add_accepted_at_to_organization_invitations_table.php

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

e2e/calendar-settings.spec.ts

@@ -1,172 +0,0 @@
-import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
-import { test } from '../playwright/fixtures';
-import { expect } from '@playwright/test';
-import type { Page } from '@playwright/test';
-
-async function goToCalendar(page: Page) {
-    await page.goto(PLAYWRIGHT_BASE_URL + '/calendar');
-    await expect(page.locator('.fc')).toBeVisible();
-}
-
-async function openSettingsPopover(page: Page) {
-    await page.getByRole('button', { name: 'Calendar settings' }).click();
-    await expect(page.getByText('Calendar Settings')).toBeVisible();
-}
-
-async function clearCalendarSettings(page: Page) {
-    await page.evaluate(() => localStorage.removeItem('solidtime:calendar-settings'));
-}
-
-test.describe('Calendar Settings', () => {
-    test.beforeEach(async ({ page }) => {
-        await clearCalendarSettings(page);
-    });
-
-    test('settings popover shows all fields with correct defaults', async ({ page }) => {
-        await goToCalendar(page);
-        await openSettingsPopover(page);
-
-        await expect(page.getByLabel('Snap Interval')).toContainText('15 min');
-        await expect(page.getByLabel('Start Time')).toContainText('12:00 AM');
-        await expect(page.getByLabel('End Time')).toContainText('12:00 AM (next)');
-        await expect(page.getByLabel('Grid Scale')).toContainText('15 min');
-    });
-
-    test('snap interval can be changed and persists across reload', async ({ page }) => {
-        await goToCalendar(page);
-        await openSettingsPopover(page);
-
-        // Change snap interval to 30 min
-        await page.getByLabel('Snap Interval').click();
-        await page.getByRole('option', { name: '30 min' }).click();
-        await page.locator('.fc-toolbar-title').click();
-
-        // Verify localStorage was updated
-        const stored = await page.evaluate(() =>
-            JSON.parse(localStorage.getItem('solidtime:calendar-settings') || '{}')
-        );
-        expect(stored.snapMinutes).toBe(30);
-
-        // Reload and verify persistence
-        await page.reload();
-        await expect(page.locator('.fc')).toBeVisible();
-        await openSettingsPopover(page);
-        await expect(page.getByLabel('Snap Interval')).toContainText('30 min');
-    });
-
-    test('start time change is applied to calendar and rejects values >= end time', async ({
-        page,
-    }) => {
-        await goToCalendar(page);
-
-        // Verify 7 AM slot exists with default start (00:00)
-        await expect(page.locator('.fc-timegrid-slot[data-time="07:00:00"]')).not.toHaveCount(0);
-
-        await openSettingsPopover(page);
-
-        // Set end time to 6 PM first
-        await page.getByLabel('End Time').click();
-        await page.getByRole('option', { name: '6:00 PM' }).click();
-
-        // Change start time to 8 AM (valid)
-        await page.getByLabel('Start Time').click();
-        await page.getByRole('option', { name: '8:00 AM' }).click();
-        await page.locator('.fc-toolbar-title').click();
-
-        // Calendar should no longer show hours before 8 AM
-        await expect(page.locator('.fc-timegrid-slot[data-time="07:00:00"]')).toHaveCount(0);
-        await expect(page.locator('.fc-timegrid-slot[data-time="08:00:00"]')).not.toHaveCount(0);
-
-        // Try to set start time to 6 PM (invalid: equals end time)
-        await openSettingsPopover(page);
-        await page.getByLabel('Start Time').click();
-        await page.getByRole('option', { name: '6:00 PM' }).click();
-
-        // Should be rejected — start time stays at 8 AM
-        await expect(page.getByLabel('Start Time')).toContainText('8:00 AM');
-    });
-
-    test('end time change is applied to calendar and rejects values <= start time', async ({
-        page,
-    }) => {
-        await goToCalendar(page);
-
-        // Verify 19:00 slot exists with default end (24:00)
-        await expect(page.locator('.fc-timegrid-slot[data-time="19:00:00"]')).not.toHaveCount(0);
-
-        await openSettingsPopover(page);
-
-        // Set start time to 8 AM first
-        await page.getByLabel('Start Time').click();
-        await page.getByRole('option', { name: '8:00 AM' }).click();
-
-        // Change end time to 6 PM (valid)
-        await page.getByLabel('End Time').click();
-        await page.getByRole('option', { name: '6:00 PM' }).click();
-        await page.locator('.fc-toolbar-title').click();
-
-        // Calendar should no longer show hours at or after 6 PM
-        await expect(page.locator('.fc-timegrid-slot[data-time="18:00:00"]')).toHaveCount(0);
-        await expect(page.locator('.fc-timegrid-slot[data-time="17:00:00"]')).not.toHaveCount(0);
-
-        // Try to set end time to 8 AM (invalid: equals start time)
-        await openSettingsPopover(page);
-        await page.getByLabel('End Time').click();
-        await page.getByRole('option', { name: '8:00 AM' }).click();
-
-        // Should be rejected — end time stays at 6 PM
-        await expect(page.getByLabel('End Time')).toContainText('6:00 PM');
-    });
-
-    test('grid scale affects number of calendar slots', async ({ page }) => {
-        await goToCalendar(page);
-
-        // Count slots with default 15-min scale
-        const defaultSlotCount = await page.locator('.fc-timegrid-slot').count();
-
-        // Change to 30 min scale (should halve the slots)
-        await openSettingsPopover(page);
-        await page.getByLabel('Grid Scale').click();
-        await page.getByRole('option', { name: '30 min' }).click();
-        await page.locator('.fc-toolbar-title').click();
-
-        const largerSlotCount = await page.locator('.fc-timegrid-slot').count();
-        expect(largerSlotCount).toBeLessThan(defaultSlotCount);
-
-        // Change to 5 min scale (should have many more slots)
-        await openSettingsPopover(page);
-        await page.getByLabel('Grid Scale').click();
-        await page.getByRole('option', { name: '5 min', exact: true }).click();
-        await page.locator('.fc-toolbar-title').click();
-
-        const smallerSlotCount = await page.locator('.fc-timegrid-slot').count();
-        expect(smallerSlotCount).toBeGreaterThan(defaultSlotCount);
-    });
-
-    test('all settings persist across navigation', async ({ page }) => {
-        await goToCalendar(page);
-        await openSettingsPopover(page);
-
-        // Change every setting
-        await page.getByLabel('Snap Interval').click();
-        await page.getByRole('option', { name: '5 min', exact: true }).click();
-        await page.getByLabel('Start Time').click();
-        await page.getByRole('option', { name: '6:00 AM' }).click();
-        await page.getByLabel('End Time').click();
-        await page.getByRole('option', { name: '10:00 PM' }).click();
-        await page.getByLabel('Grid Scale').click();
-        await page.getByRole('option', { name: '30 min' }).click();
-        await page.locator('.fc-toolbar-title').click();
-
-        // Navigate away and back
-        await page.goto(PLAYWRIGHT_BASE_URL + '/time');
-        await goToCalendar(page);
-
-        // Verify all settings persisted
-        await openSettingsPopover(page);
-        await expect(page.getByLabel('Snap Interval')).toContainText('5 min');
-        await expect(page.getByLabel('Start Time')).toContainText('6:00 AM');
-        await expect(page.getByLabel('End Time')).toContainText('10:00 PM');
-        await expect(page.getByLabel('Grid Scale')).toContainText('30 min');
-    });
-});

e2e/clients.spec.ts

@@ -8,7 +8,6 @@ import {
     createProjectViaApi,
     createPublicProjectViaApi,
 } from './utils/api';
-import { getTableRowNames } from './utils/table';
 
 async function goToClientsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/clients');
@@ -132,92 +131,6 @@ test('test that deleting a client via actions menu works', async ({ page, ctx })
     await expect(page.getByTestId('client_table')).not.toContainText(clientName);
 });
 
-// =============================================
-// Sorting Tests
-// =============================================
-
-async function clearClientTableState(page: Page) {
-    await page.evaluate(() => {
-        localStorage.removeItem('client-table-state');
-    });
-}
-
-test('test that sorting clients by name and status works', async ({ page, ctx }) => {
-    await createClientViaApi(ctx, { name: 'AAA SortClient' });
-    await createClientViaApi(ctx, { name: 'ZZZ SortClient' });
-
-    await goToClientsOverview(page);
-    await clearClientTableState(page);
-    await page.reload();
-
-    const table = page.getByTestId('client_table');
-    await expect(table).toBeVisible();
-
-    // -- Name sorting (default is name asc) --
-    let names = await getTableRowNames(table);
-    expect(names.indexOf('AAA SortClient')).toBeLessThan(names.indexOf('ZZZ SortClient'));
-
-    const nameHeader = table.getByText('Name').first();
-    await nameHeader.click(); // toggle to desc
-    names = await getTableRowNames(table);
-    expect(names.indexOf('ZZZ SortClient')).toBeLessThan(names.indexOf('AAA SortClient'));
-
-    // -- Status sorting --
-    const statusHeader = table.getByText('Status').first();
-    await statusHeader.click(); // asc
-    await expect(statusHeader.locator('svg')).toBeVisible();
-    await statusHeader.click(); // desc
-    await expect(statusHeader.locator('svg')).toBeVisible();
-});
-
-test('test that sorting clients by project count works', async ({ page, ctx }) => {
-    const clientWithMany = await createClientViaApi(ctx, { name: 'ManyProjects Client' });
-    const clientWithNone = await createClientViaApi(ctx, { name: 'NoProjects Client' });
-
-    // Create projects for the first client
-    await createProjectViaApi(ctx, { name: 'Proj1', client_id: clientWithMany.id });
-    await createProjectViaApi(ctx, { name: 'Proj2', client_id: clientWithMany.id });
-
-    await goToClientsOverview(page);
-    await clearClientTableState(page);
-    await page.reload();
-
-    const table = page.getByTestId('client_table');
-    await expect(table).toBeVisible();
-
-    // Click Projects header - first click should sort desc (most projects first)
-    const projectsHeader = table.getByText('Projects').first();
-    await projectsHeader.click();
-    await expect(projectsHeader.locator('svg')).toBeVisible();
-    let names = await getTableRowNames(table);
-    expect(names.indexOf('ManyProjects Client')).toBeLessThan(names.indexOf('NoProjects Client'));
-
-    // Second click toggles to asc (least projects first)
-    await projectsHeader.click();
-    names = await getTableRowNames(table);
-    expect(names.indexOf('NoProjects Client')).toBeLessThan(names.indexOf('ManyProjects Client'));
-});
-
-test('test that client sort state persists after page reload', async ({ page }) => {
-    await goToClientsOverview(page);
-    await clearClientTableState(page);
-    await page.reload();
-
-    const table = page.getByTestId('client_table');
-    await expect(table).toBeVisible();
-
-    const nameHeader = table.getByText('Name').first();
-    await nameHeader.click(); // toggle to desc
-    await expect(nameHeader.locator('svg')).toBeVisible();
-
-    await page.reload();
-
-    await expect(page.getByTestId('client_table')).toBeVisible();
-    await expect(
-        page.getByTestId('client_table').getByText('Name').first().locator('svg')
-    ).toBeVisible();
-});
-
 // =============================================
 // Employee Permission Tests
 // =============================================

e2e/command-palette.spec.ts

@@ -31,21 +31,15 @@ async function selectCommand(page: Page, name: string) {
 }
 
 async function assertTimerIsRunning(page: Page) {
-    await expect(page.locator(TIMER_BUTTON_SELECTOR).and(page.locator(':visible'))).toHaveClass(
-        /bg-red-400\/80/,
-        {
-            timeout: 10000,
-        }
-    );
+    await expect(page.locator(TIMER_BUTTON_SELECTOR)).toHaveClass(/bg-red-400\/80/, {
+        timeout: 10000,
+    });
 }
 
 async function assertTimerIsStopped(page: Page) {
-    await expect(page.locator(TIMER_BUTTON_SELECTOR).and(page.locator(':visible'))).toHaveClass(
-        /bg-accent-300\/70/,
-        {
-            timeout: 10000,
-        }
-    );
+    await expect(page.locator(TIMER_BUTTON_SELECTOR)).toHaveClass(/bg-accent-300\/70/, {
+        timeout: 10000,
+    });
 }
 
 test.describe('Command Palette', () => {

e2e/dashboard.spec.ts

@@ -25,12 +25,7 @@ test('test that dashboard loads with all expected sections', async ({ page }) =>
 
     // Timer section (scoped to dashboard_timer to avoid matching sidebar timer)
     await expect(page.getByTestId('time_entry_description')).toBeVisible();
-    await expect(
-        page
-            .getByTestId('dashboard_timer')
-            .getByTestId('timer_button')
-            .and(page.locator(':visible'))
-    ).toBeVisible();
+    await expect(page.getByTestId('dashboard_timer').getByTestId('timer_button')).toBeVisible();
 
     // Dashboard cards
     await expect(page.getByText('Recent Time Entries', { exact: true })).toBeVisible();
@@ -109,10 +104,7 @@ test.describe('Employee Dashboard Restrictions', () => {
 
         // Timer should be available
         await expect(
-            employee.page
-                .getByTestId('dashboard_timer')
-                .getByTestId('timer_button')
-                .and(employee.page.locator(':visible'))
+            employee.page.getByTestId('dashboard_timer').getByTestId('timer_button')
         ).toBeVisible();
         await expect(employee.page.getByTestId('time_entry_description')).toBeEditable();
     });

e2e/members.spec.ts

@@ -5,13 +5,7 @@ import { expect, test } from '../playwright/fixtures';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 import type { Page } from '@playwright/test';
 import { inviteAndAcceptMember } from './utils/members';
-import {
-    createPlaceholderMemberViaImportApi,
-    getMembersViaApi,
-    updateMemberBillableRateViaApi,
-    updateOrganizationSettingViaApi,
-} from './utils/api';
-import { getTableRowNames } from './utils/table';
+import { createPlaceholderMemberViaImportApi } from './utils/api';
 
 // Tests that invite + accept members need more time
 test.describe.configure({ timeout: 45000 });
@@ -85,8 +79,8 @@ test('test that organization billable rate can be updated with all existing time
     const newBillableRate = Math.round(Math.random() * 10000);
     await page.getByRole('row').first().getByRole('button').click();
     await page.getByRole('menuitem').getByText('Edit').click();
-    await page.getByRole('combobox').last().click();
-    await page.getByRole('option', { name: 'Custom Rate' }).click();
+    await page.getByText('Organization Default Rate').click();
+    await page.getByText('Custom Rate').click();
     await page.getByPlaceholder('Billable Rate').fill(newBillableRate.toString());
     await page.getByRole('button', { name: 'Update Member' }).click();
 
@@ -108,136 +102,6 @@ test('test that organization billable rate can be updated with all existing time
     ]);
 });
 
-test('test that switching member billable rate from custom back to default rate works', async ({
-    page,
-    ctx,
-}) => {
-    // Set a known org billable rate
-    await updateOrganizationSettingViaApi(ctx, { billable_rate: 12000 });
-
-    // Create a placeholder member with a custom billable rate
-    await createPlaceholderMemberViaImportApi(ctx, 'CustomToDefault Member');
-    const members = await getMembersViaApi(ctx);
-    const member = members.find((m) => m.name === 'CustomToDefault Member');
-    expect(member).toBeDefined();
-    await updateMemberBillableRateViaApi(ctx, member!.id, 25000);
-
-    await goToMembersPage(page);
-    const memberRow = page.getByRole('row').filter({ hasText: 'CustomToDefault Member' });
-    await expect(memberRow).toBeVisible();
-
-    // Open edit modal
-    await memberRow.getByRole('button').click();
-    await page.getByRole('menuitem').getByText('Edit').click();
-    await expect(page.getByRole('heading', { name: 'Update Member' })).toBeVisible();
-
-    // Verify it starts on Custom Rate
-    const billableCombobox = page.getByRole('dialog').getByRole('combobox').last();
-    await expect(billableCombobox).toContainText('Custom Rate');
-
-    // Switch to Default Rate
-    await billableCombobox.click();
-    await page.getByRole('option', { name: 'Default Rate' }).click();
-    await expect(billableCombobox).toContainText('Default Rate');
-
-    // Verify the billable rate input is disabled
-    await expect(page.getByPlaceholder('Billable Rate')).toBeDisabled();
-
-    // Submit — billable_rate changes from 25000 to null, so confirmation dialog appears
-    await page.getByRole('button', { name: 'Update Member' }).click();
-    await expect(page.getByRole('heading', { name: 'Update Member Billable Rate' })).toBeVisible();
-    await expect(page.getByText('the default rate of the organization')).toBeVisible();
-
-    // Confirm the update
-    await Promise.all([
-        page.getByRole('button', { name: 'Yes, update existing time' }).click(),
-        page.waitForRequest(
-            (request) =>
-                request.url().includes('/members/') &&
-                request.method() === 'PUT' &&
-                request.postDataJSON().billable_rate === null
-        ),
-    ]);
-
-    // Verify both dialogs are closed
-    await expect(page.getByRole('dialog')).not.toBeVisible();
-});
-
-test('test that default rate shows disabled input with organization billable rate', async ({
-    page,
-    ctx,
-}) => {
-    // Set a known org billable rate (150.00)
-    await updateOrganizationSettingViaApi(ctx, { billable_rate: 15000 });
-
-    await goToMembersPage(page);
-
-    // Open edit modal for the owner (who uses default rate by default)
-    await page.getByRole('row').first().getByRole('button').click();
-    await page.getByRole('menuitem').getByText('Edit').click();
-    await expect(page.getByRole('heading', { name: 'Update Member' })).toBeVisible();
-
-    // Verify it's on Default Rate
-    const billableCombobox = page.getByRole('dialog').getByRole('combobox').last();
-    await expect(billableCombobox).toContainText('Default Rate');
-
-    // Verify the input is disabled and shows the org rate (formatted with currency)
-    const billableInput = page.getByPlaceholder('Billable Rate');
-    await expect(billableInput).toBeDisabled();
-    await expect(billableInput).toHaveAttribute('aria-valuenow', '150');
-
-    // Close the dialog
-    await page.getByRole('button', { name: 'Cancel' }).click();
-    await expect(page.getByRole('dialog')).not.toBeVisible();
-});
-
-test('test that cancelling the billable rate confirmation dialog does not update the member', async ({
-    page,
-    ctx,
-}) => {
-    // Create a placeholder member with a custom billable rate
-    await createPlaceholderMemberViaImportApi(ctx, 'CancelConfirm Member');
-    const members = await getMembersViaApi(ctx);
-    const member = members.find((m) => m.name === 'CancelConfirm Member');
-    expect(member).toBeDefined();
-    await updateMemberBillableRateViaApi(ctx, member!.id, 10000);
-
-    await goToMembersPage(page);
-    const memberRow = page.getByRole('row').filter({ hasText: 'CancelConfirm Member' });
-    await expect(memberRow).toBeVisible();
-
-    // Open edit modal
-    await memberRow.getByRole('button').click();
-    await page.getByRole('menuitem').getByText('Edit').click();
-    await expect(page.getByRole('heading', { name: 'Update Member' })).toBeVisible();
-
-    // Change the billable rate
-    await page.getByPlaceholder('Billable Rate').fill('200');
-
-    // Click Update Member — confirmation dialog should appear
-    await page.getByRole('button', { name: 'Update Member' }).click();
-    await expect(page.getByRole('heading', { name: 'Update Member Billable Rate' })).toBeVisible();
-
-    // Set up listener to verify no PUT request is sent after cancel
-    let putRequestSent = false;
-    page.on('request', (request) => {
-        if (request.url().includes('/members/') && request.method() === 'PUT') {
-            putRequestSent = true;
-        }
-    });
-
-    // Click Cancel on the confirmation dialog
-    await page.getByRole('button', { name: 'Cancel' }).click();
-
-    // Verify confirmation dialog is closed
-    await expect(
-        page.getByRole('heading', { name: 'Update Member Billable Rate' })
-    ).not.toBeVisible();
-
-    // Verify no API call was made
-    expect(putRequestSent).toBe(false);
-});
-
 test('test that changing role of placeholder member is rejected', async ({ page, ctx }) => {
     const placeholderName = 'RoleChange ' + Math.floor(Math.random() * 10000);
 
@@ -623,125 +487,6 @@ test('test that accepted invitation disappears from invitations tab', async ({ p
     await expect(page.getByText(memberEmail)).not.toBeVisible();
 });
 
-// =============================================
-// Sorting Tests
-// =============================================
-
-// Helper to clear localStorage before tests that check sorting
-async function clearMemberTableState(page: Page) {
-    await page.evaluate(() => {
-        localStorage.removeItem('member-table-state');
-    });
-}
-
-test('test that sorting members by name, role, and status works', async ({ page, ctx }) => {
-    // Create two placeholder members with names that sort predictably around "John Doe"
-    await createPlaceholderMemberViaImportApi(ctx, 'AAA SortFirst');
-    await createPlaceholderMemberViaImportApi(ctx, 'ZZZ SortLast');
-
-    await goToMembersPage(page);
-    await clearMemberTableState(page);
-    await page.reload();
-
-    const table = page.getByTestId('member_table');
-    await expect(table).toBeVisible();
-
-    // -- Name sorting (default is already name asc after clearing state) --
-    const nameHeader = table.getByText('Name').first();
-    let names = await getTableRowNames(table);
-    expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
-
-    await nameHeader.click(); // toggle to desc
-    names = await getTableRowNames(table);
-    expect(names.indexOf('ZZZ SortLast')).toBeLessThan(names.indexOf('AAA SortFirst'));
-
-    // -- Role sorting --
-    const roleHeader = table.getByText('Role').first();
-    await roleHeader.click(); // asc: Owner(0) < Placeholder(4)
-    names = await getTableRowNames(table);
-    const ownerIdx = names.indexOf('John Doe');
-    const placeholderIdx = names.indexOf('AAA SortFirst');
-    expect(ownerIdx).toBeLessThan(placeholderIdx);
-
-    await roleHeader.click(); // desc: Placeholder first
-    names = await getTableRowNames(table);
-    expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('John Doe'));
-
-    // -- Status sorting --
-    const statusHeader = table.getByText('Status').first();
-    await statusHeader.click(); // asc: Active(0) < Inactive(1)
-    names = await getTableRowNames(table);
-    expect(names.indexOf('John Doe')).toBeLessThan(names.indexOf('AAA SortFirst'));
-
-    await statusHeader.click(); // desc: Inactive first
-    names = await getTableRowNames(table);
-    expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('John Doe'));
-
-    // -- Email: just verify sort indicator appears --
-    const emailHeader = table.getByText('Email').first();
-    await emailHeader.click();
-    await expect(emailHeader.locator('svg')).toBeVisible();
-});
-
-test('test that member sort state persists after page reload', async ({ page }) => {
-    await goToMembersPage(page);
-    await clearMemberTableState(page);
-    await page.reload();
-
-    const table = page.getByTestId('member_table');
-    await expect(table).toBeVisible();
-
-    // Click Role header twice to set descending sort
-    const roleHeader = table.getByText('Role').first();
-    await roleHeader.click();
-    await expect(roleHeader.locator('svg')).toBeVisible();
-    await roleHeader.click();
-    await expect(roleHeader.locator('svg')).toBeVisible();
-
-    // Reload the page
-    await page.reload();
-
-    // Verify the sort indicator is still visible on Role column
-    await expect(page.getByTestId('member_table')).toBeVisible();
-    await expect(
-        page.getByTestId('member_table').getByText('Role').first().locator('svg')
-    ).toBeVisible();
-});
-
-test('test that sorting members by billable rate works', async ({ page, ctx }) => {
-    // Create two placeholder members and set different billable rates
-    await createPlaceholderMemberViaImportApi(ctx, 'HighRate Member');
-    await createPlaceholderMemberViaImportApi(ctx, 'LowRate Member');
-
-    const members = await getMembersViaApi(ctx);
-    const highRateMember = members.find((m) => m.name === 'HighRate Member');
-    const lowRateMember = members.find((m) => m.name === 'LowRate Member');
-    expect(highRateMember).toBeDefined();
-    expect(lowRateMember).toBeDefined();
-
-    await updateMemberBillableRateViaApi(ctx, highRateMember!.id, 20000);
-    await updateMemberBillableRateViaApi(ctx, lowRateMember!.id, 5000);
-
-    await goToMembersPage(page);
-    await clearMemberTableState(page);
-    await page.reload();
-
-    const table = page.getByTestId('member_table');
-    await expect(table).toBeVisible();
-
-    // First click = desc (highest first), null rates last
-    const billableHeader = table.getByText('Billable Rate').first();
-    await billableHeader.click();
-    await expect(billableHeader.locator('svg')).toBeVisible();
-    let names = await getTableRowNames(table);
-    expect(names.indexOf('HighRate Member')).toBeLessThan(names.indexOf('LowRate Member'));
-
-    // Second click = asc (lowest first), null rates still last
-    await billableHeader.click();
-    names = await getTableRowNames(table);
-    expect(names.indexOf('LowRate Member')).toBeLessThan(names.indexOf('HighRate Member'));
-});
-
 // =============================================
 // Employee Permission Tests
 // =============================================
@@ -777,7 +522,7 @@ test.describe('Employee Sidebar Navigation', () => {
         });
 
         // Member table is empty — no rows rendered (only headers)
-        await expect(employee.page.getByTestId('member_table').locator('[role="row"]')).toHaveCount(
+        await expect(employee.page.getByTestId('client_table').locator('[role="row"]')).toHaveCount(
             0
         );
 

e2e/organization.spec.ts

@@ -369,40 +369,6 @@ test('test that format settings persist after page reload', async ({ page }) =>
     await expect(page.getByLabel('Date Format')).toContainText('DD/MM/YYYY');
 });
 
-// =============================================
-// Admin Permission Tests
-// =============================================
-
-test.describe('Admin Organization Settings Access', () => {
-    test('admin can see and edit organization settings', async ({ ctx, admin }) => {
-        await admin.page.goto(PLAYWRIGHT_BASE_URL + '/teams/' + ctx.orgId);
-
-        // Organization Name section is visible
-        await expect(
-            admin.page.getByRole('heading', { name: 'Organization Name', level: 3 })
-        ).toBeVisible({ timeout: 10000 });
-
-        // Editable settings sections should be visible
-        await expect(
-            admin.page.getByRole('heading', { name: 'Billable Rate', level: 3 })
-        ).toBeVisible();
-        await expect(
-            admin.page.getByRole('heading', { name: 'Format Settings', level: 3 })
-        ).toBeVisible();
-        await expect(
-            admin.page.getByRole('heading', { name: 'Organization Settings', level: 3 })
-        ).toBeVisible();
-
-        // Save buttons should be visible (admin can update)
-        await expect(admin.page.getByRole('button', { name: 'Save' }).first()).toBeVisible();
-
-        // Delete organization should NOT be visible (owner only)
-        await expect(
-            admin.page.getByRole('heading', { name: 'Delete Organization' })
-        ).not.toBeVisible();
-    });
-});
-
 // =============================================
 // Employee Permission Tests
 // =============================================

e2e/projects.spec.ts

@@ -3,13 +3,11 @@ import type { Page } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 import { test } from '../playwright/fixtures';
 import { formatCentsWithOrganizationDefaults } from './utils/money';
+import type { CurrencyFormat } from '../resources/js/packages/ui/src/utils/money';
 import {
     createProjectViaApi,
     createPublicProjectViaApi,
     createTaskViaApi,
-    createClientViaApi,
-    createTimeEntryViaApi,
-    archiveProjectViaApi,
     updateOrganizationSettingViaApi,
 } from './utils/api';
 
@@ -337,179 +335,61 @@ test('test that editing an existing billable project with default rate loads cor
 });
 
 // Sorting tests
-test('test that sorting projects by all columns works', async ({ page, ctx }) => {
-    // Seed projects with distinct values for each sortable column
-    const clientAlpha = await createClientViaApi(ctx, { name: 'Alpha Client' });
-    const clientBeta = await createClientViaApi(ctx, { name: 'Beta Client' });
-
-    // Project A: client Alpha, low billable rate, has estimated time, active
-    const projectA = await createProjectViaApi(ctx, {
-        name: 'AAA Project',
-        client_id: clientAlpha.id,
-        is_billable: true,
-        billable_rate: 5000,
-        estimated_time: 36000, // 10h
-    });
-    // Add 1h of time entries (10% progress)
-    await createTimeEntryViaApi(ctx, {
-        duration: '1h',
-        projectId: projectA.id,
-    });
-
-    // Project B: client Beta, high billable rate, has estimated time, archived
-    const projectB = await createProjectViaApi(ctx, {
-        name: 'BBB Project',
-        client_id: clientBeta.id,
-        is_billable: true,
-        billable_rate: 15000,
-        estimated_time: 7200, // 2h
-    });
-    // Add 1h of time entries (50% progress)
-    await createTimeEntryViaApi(ctx, {
-        duration: '1h',
-        projectId: projectB.id,
-    });
-    await archiveProjectViaApi(ctx, {
-        ...projectB,
-        client_id: clientBeta.id,
-        billable_rate: 15000,
-        estimated_time: 7200,
-    });
-
-    // Project C: no client, medium billable rate, no estimated time, active
-    const projectC = await createProjectViaApi(ctx, {
-        name: 'CCC Project',
-        is_billable: true,
-        billable_rate: 10000,
-    });
-    // Add 3h of time entries
-    await createTimeEntryViaApi(ctx, {
-        duration: '3h',
-        projectId: projectC.id,
-    });
-
+test('test that sorting projects by name works', async ({ page }) => {
     await goToProjectsOverview(page);
     await clearProjectTableState(page);
     await page.reload();
+
+    // Wait for the table to load
     await expect(page.getByTestId('project_table')).toBeVisible();
-    await expect(page.getByText('AAA Project')).toBeVisible();
-    await expect(page.getByText('BBB Project')).toBeVisible();
-    await expect(page.getByText('CCC Project')).toBeVisible();
 
-    // Helper to get the visual order of our seeded projects by reading
-    // all row text in a single evaluate call (avoids locator timing issues)
-    const seededNames = ['AAA Project', 'BBB Project', 'CCC Project'];
-    const getOrder = async (): Promise<string[]> => {
-        const allRowTexts = await page.evaluate(() => {
-            const table = document.querySelector('[data-testid="project_table"]');
-            if (!table) return [];
-            const rows = table.querySelectorAll('[role="row"]');
-            return Array.from(rows).map((row) => row.textContent ?? '');
-        });
-        const order: string[] = [];
-        for (const text of allRowTexts) {
-            const match = seededNames.find((name) => text.includes(name));
-            if (match) order.push(match);
+    // Get initial project names
+    const getProjectNames = async () => {
+        const rows = page
+            .getByTestId('project_table')
+            .locator('[data-testid="project_table"] > div')
+            .filter({ hasNot: page.locator('.border-t') });
+        const names: string[] = [];
+        const count = await page.getByTestId('project_table').getByRole('row').count();
+        for (let i = 0; i < count; i++) {
+            const row = page.getByTestId('project_table').getByRole('row').nth(i);
+            const nameCell = row.locator('div').first();
+            const text = await nameCell.textContent();
+            if (text) {
+                names.push(text.trim());
+            }
         }
-        return order;
+        return names;
     };
 
-    // Helper: click a column header and wait for sort to apply.
-    // expectedFirstAmongSeeded = which of our 3 seeded projects should appear first
-    const clickSortHeader = async (headerText: string, expectedFirstAmongSeeded: string) => {
-        const header = page
-            .locator('[data-testid="project_table"] .select-none', {
-                hasText: headerText,
-            })
-            .first();
-        await header.click();
-        // Wait until the expected project appears before the others among our seeded set
-        await page.waitForFunction(
-            ({ expected, names }) => {
-                const table = document.querySelector('[data-testid="project_table"]');
-                if (!table) return false;
-                const rows = table.querySelectorAll('[role="row"]');
-                let firstSeededIdx = -1;
-                for (let i = 0; i < rows.length; i++) {
-                    const text = rows[i].textContent ?? '';
-                    if (names.some((n: string) => text.includes(n))) {
-                        firstSeededIdx = i;
-                        break;
-                    }
-                }
-                if (firstSeededIdx === -1) return false;
-                return (rows[firstSeededIdx].textContent ?? '').includes(expected);
-            },
-            { expected: expectedFirstAmongSeeded, names: seededNames },
-            { timeout: 5000 }
-        );
-    };
+    // Click on Name header to sort ascending (default should already be ascending)
+    const nameHeader = page.getByText('Name').first();
+    await nameHeader.click();
 
-    // --- Sort by Name ---
-    // Default is name asc (A-Z)
-    let order = await getOrder();
-    expect(order).toEqual(['AAA Project', 'BBB Project', 'CCC Project']);
+    // Wait for sort indicator to appear
+    await expect(nameHeader.locator('svg')).toBeVisible();
 
-    // Click to toggle to Z-A
-    await clickSortHeader('Name', 'CCC Project');
-    order = await getOrder();
-    expect(order).toEqual(['CCC Project', 'BBB Project', 'AAA Project']);
+    // Click again to sort descending
+    await nameHeader.click();
 
-    // --- Sort by Client (text: first click = A-Z, no-client last) ---
-    await clickSortHeader('Client', 'AAA Project');
-    order = await getOrder();
-    expect(order).toEqual(['AAA Project', 'BBB Project', 'CCC Project']); // Alpha, Beta, No client
+    // Verify the sort indicator is still visible (showing descending)
+    await expect(nameHeader.locator('svg')).toBeVisible();
+});
 
-    // Reverse: Z-A, no-client still last
-    await clickSortHeader('Client', 'BBB Project');
-    order = await getOrder();
-    expect(order).toEqual(['BBB Project', 'AAA Project', 'CCC Project']); // Beta, Alpha, No client
+test('test that sorting projects by status works', async ({ page }) => {
+    await goToProjectsOverview(page);
+    await clearProjectTableState(page);
+    await page.reload();
 
-    // --- Sort by Total Time (numeric: first click = highest first) ---
-    await clickSortHeader('Total Time', 'CCC Project');
-    order = await getOrder();
-    expect(order[0]).toBe('CCC Project'); // C=3h first, A and B tied at 1h
+    // Default is "all" so no filter needed - Wait for the table to load
+    await expect(page.getByTestId('project_table')).toBeVisible();
 
-    // Reverse: lowest first
-    await clickSortHeader('Total Time', 'AAA Project');
-    order = await getOrder();
-    expect(order[2]).toBe('CCC Project'); // C=3h last
+    // Click on Status header to sort
+    const statusHeader = page.getByText('Status').first();
+    await statusHeader.click();
 
-    // --- Sort by Billable Rate (numeric: first click = highest first) ---
-    await clickSortHeader('Billable Rate', 'BBB Project');
-    order = await getOrder();
-    expect(order).toEqual(['BBB Project', 'CCC Project', 'AAA Project']); // 15000, 10000, 5000
-
-    // Reverse: lowest first
-    await clickSortHeader('Billable Rate', 'AAA Project');
-    order = await getOrder();
-    expect(order).toEqual(['AAA Project', 'CCC Project', 'BBB Project']); // 5000, 10000, 15000
-
-    // --- Sort by Progress (numeric: first click = highest first, no-estimate last) ---
-    await clickSortHeader('Progress', 'BBB Project');
-    order = await getOrder();
-    expect(order).toEqual(['BBB Project', 'AAA Project', 'CCC Project']); // 50%, 10%, no estimate
-
-    // Reverse: lowest first, no-estimate still last
-    await clickSortHeader('Progress', 'AAA Project');
-    order = await getOrder();
-    expect(order).toEqual(['AAA Project', 'BBB Project', 'CCC Project']); // 10%, 50%, no estimate
-
-    // --- Sort by Status (first click = active first, archived last) ---
-    await expect(async () => {
-        await clickSortHeader('Status', 'AAA Project');
-        order = await getOrder();
-        expect(order.indexOf('BBB Project')).toBeGreaterThan(order.indexOf('AAA Project'));
-        expect(order.indexOf('BBB Project')).toBeGreaterThan(order.indexOf('CCC Project'));
-    }).toPass({ timeout: 5000 });
-
-    // Reverse: archived first
-    await expect(async () => {
-        await clickSortHeader('Status', 'BBB Project');
-        order = await getOrder();
-        expect(order.indexOf('BBB Project')).toBeLessThan(order.indexOf('AAA Project'));
-        expect(order.indexOf('BBB Project')).toBeLessThan(order.indexOf('CCC Project'));
-    }).toPass({ timeout: 5000 });
+    // Sort indicator should be visible
+    await expect(statusHeader.locator('svg')).toBeVisible();
 });
 
 // Filter tests
@@ -762,6 +642,22 @@ test('test that estimated time input displays formatted value after blur', async
     await expect(estimatedTimeInput).toHaveValue(/1h.*30/);
 });
 
+// Create new project with new Client
+
+// Create new project with existing Client
+
+// Delete project via More Options
+
+// Test that project task count is displayed correctly
+
+// Edit Project Modal Test
+
+// Add Project with billable rate
+
+// Edit Project with billable rate
+
+// Edit Project Member Billable Rate
+
 test('test that editing a task name on the project detail page works', async ({ page, ctx }) => {
     const projectName = 'Task Edit Project ' + Math.floor(1 + Math.random() * 10000);
     const originalTaskName = 'Original Task ' + Math.floor(1 + Math.random() * 10000);

e2e/shared-reports.spec.ts

@@ -8,9 +8,6 @@ import {
     createTimeEntryViaApi,
     createTimeEntryWithTagViaApi,
     createBareTimeEntryViaApi,
-    createBillableProjectViaApi,
-    createTimeEntryWithBillableStatusViaApi,
-    createTagViaApi,
 } from './utils/api';
 import {
     goToReporting,
@@ -249,191 +246,6 @@ test('test that shared report with No Task filter shows entries without a task',
     await expect(page.getByText('Total')).toBeVisible();
 });
 
-test('test that shared report respects task filter', async ({ page, ctx }) => {
-    const projectName = 'TaskFilterProj ' + Math.floor(Math.random() * 10000);
-    const taskA = 'TaskA ' + Math.floor(Math.random() * 10000);
-    const taskB = 'TaskB ' + Math.floor(Math.random() * 10000);
-    const reportName = 'TaskFilterReport ' + Math.floor(Math.random() * 10000);
-
-    const project = await createProjectViaApi(ctx, { name: projectName });
-    const task = await createTaskViaApi(ctx, { name: taskA, project_id: project.id });
-    await createTaskViaApi(ctx, { name: taskB, project_id: project.id });
-    await createTimeEntryViaApi(ctx, {
-        description: `Entry for ${taskA}`,
-        duration: '1h',
-        projectId: project.id,
-        taskId: task.id,
-    });
-    await createTimeEntryViaApi(ctx, {
-        description: `Entry for ${projectName} no task`,
-        duration: '2h',
-        projectId: project.id,
-    });
-
-    await goToReporting(page);
-    await expect(page.getByTestId('reporting_view').getByText(projectName)).toBeVisible();
-
-    // Filter by task A
-    await page.getByRole('button', { name: 'Tasks' }).first().click();
-    await Promise.all([
-        page.getByRole('option').filter({ hasText: taskA }).click(),
-        waitForReportingUpdate(page),
-    ]);
-    await page.keyboard.press('Escape');
-
-    const { shareableLink } = await saveAsSharedReport(page, reportName);
-
-    // View the shared report
-    await page.goto(shareableLink);
-    await expect(page.getByText('Reporting')).toBeVisible();
-    await expect(page.getByText('Total')).toBeVisible();
-    await expect(page.getByText('1h 00min').first()).toBeVisible();
-    await expect(page.getByText('3h 00min')).not.toBeVisible();
-});
-
-test('test that shared report respects client filter', async ({ page, ctx }) => {
-    const clientA = 'ClientA ' + Math.floor(Math.random() * 10000);
-    const clientB = 'ClientB ' + Math.floor(Math.random() * 10000);
-    const projectA = 'ClientFilterProjA ' + Math.floor(Math.random() * 10000);
-    const projectB = 'ClientFilterProjB ' + Math.floor(Math.random() * 10000);
-    const reportName = 'ClientFilterReport ' + Math.floor(Math.random() * 10000);
-
-    const cliA = await createClientViaApi(ctx, { name: clientA });
-    const cliB = await createClientViaApi(ctx, { name: clientB });
-    const projA = await createProjectViaApi(ctx, { name: projectA, client_id: cliA.id });
-    const projB = await createProjectViaApi(ctx, { name: projectB, client_id: cliB.id });
-    await createTimeEntryViaApi(ctx, {
-        description: `Entry for ${clientA}`,
-        duration: '1h',
-        projectId: projA.id,
-    });
-    await createTimeEntryViaApi(ctx, {
-        description: `Entry for ${clientB}`,
-        duration: '2h',
-        projectId: projB.id,
-    });
-
-    await goToReporting(page);
-    await expect(page.getByTestId('reporting_view').getByText(projectA)).toBeVisible();
-
-    // Filter by client A
-    await page.getByRole('button', { name: 'Clients' }).first().click();
-    await Promise.all([
-        page.getByRole('option').filter({ hasText: clientA }).click(),
-        waitForReportingUpdate(page),
-    ]);
-    await page.keyboard.press('Escape');
-
-    const { shareableLink } = await saveAsSharedReport(page, reportName);
-
-    // View the shared report
-    await page.goto(shareableLink);
-    await expect(page.getByText('Reporting')).toBeVisible();
-    await expect(page.getByText(projectA)).toBeVisible();
-    await expect(page.getByText(projectB)).not.toBeVisible();
-});
-
-test('test that shared report respects tag filter', async ({ page, ctx }) => {
-    const tagA = 'TagA ' + Math.floor(Math.random() * 10000);
-    const tagB = 'TagB ' + Math.floor(Math.random() * 10000);
-    const reportName = 'TagFilterReport ' + Math.floor(Math.random() * 10000);
-
-    const tagObjA = await createTagViaApi(ctx, { name: tagA });
-    await createTagViaApi(ctx, { name: tagB });
-    await createTimeEntryViaApi(ctx, {
-        description: `Entry with ${tagA}`,
-        duration: '1h',
-        tags: [tagObjA.id],
-    });
-    await createBareTimeEntryViaApi(ctx, 'Entry no tags', '2h');
-
-    await goToReporting(page);
-    await expect(page.getByTestId('reporting_view').getByText('Total')).toBeVisible();
-
-    // Filter by tag A
-    await page.getByRole('button', { name: 'Tags' }).first().click();
-    await Promise.all([
-        page.getByRole('option').filter({ hasText: tagA }).click(),
-        waitForReportingUpdate(page),
-    ]);
-    await page.keyboard.press('Escape');
-
-    const { shareableLink } = await saveAsSharedReport(page, reportName);
-
-    // View the shared report
-    await page.goto(shareableLink);
-    await expect(page.getByText('Reporting')).toBeVisible();
-    await expect(page.getByText('Total')).toBeVisible();
-    await expect(page.getByText('1h 00min').first()).toBeVisible();
-    await expect(page.getByText('3h 00min')).not.toBeVisible();
-});
-
-test('test that shared report respects member filter', async ({ page, ctx }) => {
-    const projectName = 'MemberFilterProj ' + Math.floor(Math.random() * 10000);
-    const reportName = 'MemberFilterReport ' + Math.floor(Math.random() * 10000);
-
-    const project = await createProjectViaApi(ctx, { name: projectName });
-    await createTimeEntryViaApi(ctx, {
-        description: `Entry for ${projectName}`,
-        duration: '1h',
-        projectId: project.id,
-    });
-
-    await goToReporting(page);
-    await expect(page.getByTestId('reporting_view').getByText(projectName)).toBeVisible();
-
-    // Filter by current member (John Doe)
-    await page.getByRole('button', { name: 'Members' }).first().click();
-    await Promise.all([
-        page.getByRole('option').filter({ hasText: 'John Doe' }).click(),
-        waitForReportingUpdate(page),
-    ]);
-    await page.keyboard.press('Escape');
-
-    const { shareableLink } = await saveAsSharedReport(page, reportName);
-
-    // View the shared report — should still show data since all entries belong to this member
-    await page.goto(shareableLink);
-    await expect(page.getByText('Reporting')).toBeVisible();
-    await expect(page.getByText(projectName)).toBeVisible();
-    await expect(page.getByText('Total')).toBeVisible();
-});
-
-test('test that shared report with billable filter only shows billable entries', async ({
-    page,
-    ctx,
-}) => {
-    const reportName = 'BillableFilterReport ' + Math.floor(Math.random() * 10000);
-
-    // Create one billable (1h) and one non-billable (2h) entry
-    await createTimeEntryWithBillableStatusViaApi(ctx, true, '1h');
-    await createTimeEntryWithBillableStatusViaApi(ctx, false, '2h');
-
-    await goToReporting(page);
-    await expect(page.getByTestId('reporting_view').getByText('Total')).toBeVisible();
-
-    // Filter by billable only
-    await page.getByRole('combobox').filter({ hasText: 'Billable' }).click();
-    await Promise.all([
-        page.getByRole('option', { name: 'Billable', exact: true }).click(),
-        waitForReportingUpdate(page),
-    ]);
-
-    // Verify only 1h shows before saving
-    await expect(page.getByTestId('reporting_view').getByText('1h 00min').first()).toBeVisible();
-
-    const { shareableLink } = await saveAsSharedReport(page, reportName);
-
-    // Navigate to the shared report
-    await page.goto(shareableLink);
-    await expect(page.getByText('Reporting')).toBeVisible();
-    await expect(page.getByText('Total')).toBeVisible();
-
-    // Shared report should only show the 1h billable entry, not the 2h non-billable
-    await expect(page.getByText('1h 00min').first()).toBeVisible();
-    await expect(page.getByText('3h 00min')).not.toBeVisible();
-});
-
 // ──────────────────────────────────────────────────
 // Report Date Picker Tests
 // ──────────────────────────────────────────────────
@@ -765,58 +577,3 @@ test('test that updating expiration date on already-public report works', async
     const now = new Date();
     expect(returnedDate.getTime()).toBeGreaterThan(now.getTime());
 });
-
-// ──────────────────────────────────────────────────
-// Shared Report Cost Column Tests
-// ──────────────────────────────────────────────────
-
-test('test that shared report displays cost column correctly aligned with data rows', async ({
-    page,
-    ctx,
-}) => {
-    const projectName = 'BillableProj ' + Math.floor(Math.random() * 10000);
-    const reportName = 'BillableReport ' + Math.floor(Math.random() * 10000);
-
-    const project = await createBillableProjectViaApi(ctx, {
-        name: projectName,
-        billable_rate: 10000, // 100.00 per hour
-    });
-    await createTimeEntryViaApi(ctx, {
-        description: `Entry for ${projectName}`,
-        duration: '1h',
-        projectId: project.id,
-        billable: true,
-    });
-
-    await goToReporting(page);
-    await expect(page.getByTestId('reporting_view').getByText(projectName)).toBeVisible();
-
-    const { shareableLink } = await saveAsSharedReport(page, reportName);
-
-    // Navigate to the shared report
-    await page.goto(shareableLink);
-    await expect(page.getByText('Reporting')).toBeVisible();
-    await expect(page.getByText(projectName)).toBeVisible();
-
-    // Verify the table header has all three columns
-    await expect(page.getByText('Name', { exact: true })).toBeVisible();
-    await expect(page.getByText('Duration', { exact: true })).toBeVisible();
-    await expect(page.getByText('Cost', { exact: true })).toBeVisible();
-
-    // Verify the Total row displays both duration and cost
-    await expect(page.getByText('Total')).toBeVisible();
-
-    // The data rows should render cost values (not just header + duration)
-    // With 1h at 100/h the cost should be displayed somewhere in the table
-    // If showCost is not passed to ReportingRow, only the header "Cost" and
-    // the Total row cost will render, but individual row costs will be missing
-    const table = page.locator('[style*="grid-template-columns"]');
-    // Count elements containing the cost value - header "Cost" + project row cost + total row cost = 3
-    // If broken (showCost not passed), the project row won't render its cost cell
-    await expect(table.getByText(/100/).first()).toBeVisible();
-
-    // Verify the cost value appears at least twice in the table
-    // (once for the data row, once for the total) beyond just the header
-    const costValues = table.getByText(/100/);
-    await expect(costValues).toHaveCount(2);
-});

e2e/tags.spec.ts

@@ -3,7 +3,6 @@ import type { Page } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 import { test } from '../playwright/fixtures';
 import { createTagViaApi } from './utils/api';
-import { getTableRowNames } from './utils/table';
 
 async function goToTagsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/tags');
@@ -90,57 +89,6 @@ test('test that multiple tags can be created via API and displayed in the table'
     await expect(page.getByTestId('tag_table')).toContainText(tagName2);
 });
 
-// =============================================
-// Sorting Tests
-// =============================================
-
-async function clearTagTableState(page: Page) {
-    await page.evaluate(() => {
-        localStorage.removeItem('tag-table-state');
-    });
-}
-
-test('test that sorting tags by name works', async ({ page, ctx }) => {
-    await createTagViaApi(ctx, { name: 'AAA SortTag' });
-    await createTagViaApi(ctx, { name: 'ZZZ SortTag' });
-
-    await goToTagsOverview(page);
-    await clearTagTableState(page);
-    await page.reload();
-
-    const table = page.getByTestId('tag_table');
-    await expect(table).toBeVisible();
-
-    // Default is name asc
-    let names = await getTableRowNames(table);
-    expect(names.indexOf('AAA SortTag')).toBeLessThan(names.indexOf('ZZZ SortTag'));
-
-    const nameHeader = table.getByText('Name').first();
-    await nameHeader.click(); // toggle to desc
-    names = await getTableRowNames(table);
-    expect(names.indexOf('ZZZ SortTag')).toBeLessThan(names.indexOf('AAA SortTag'));
-});
-
-test('test that tag sort state persists after page reload', async ({ page }) => {
-    await goToTagsOverview(page);
-    await clearTagTableState(page);
-    await page.reload();
-
-    const table = page.getByTestId('tag_table');
-    await expect(table).toBeVisible();
-
-    const nameHeader = table.getByText('Name').first();
-    await nameHeader.click(); // toggle to desc
-    await expect(nameHeader.locator('svg')).toBeVisible();
-
-    await page.reload();
-
-    await expect(page.getByTestId('tag_table')).toBeVisible();
-    await expect(
-        page.getByTestId('tag_table').getByText('Name').first().locator('svg')
-    ).toBeVisible();
-});
-
 // =============================================
 // Employee Permission Tests
 // =============================================

e2e/time.spec.ts

@@ -1159,8 +1159,6 @@ test('test that end time picker works in create modal', async ({ page }) => {
     await endTimeInput.press('Tab');
 
     // Set duration (this will adjust based on the times)
-    // clear() before fill() needed because fill() appends on Firefox instead of replacing
-    await page.locator('[role="dialog"] input[name="Duration"]').clear();
     await page.locator('[role="dialog"] input[name="Duration"]').fill('1h');
     await page.locator('[role="dialog"] input[name="Duration"]').press('Tab');
 
@@ -1452,10 +1450,7 @@ test.describe('Employee Time Entry Isolation', () => {
 
         await employee.page.goto(PLAYWRIGHT_BASE_URL + '/time');
         await expect(
-            employee.page
-                .getByTestId('dashboard_timer')
-                .getByTestId('timer_button')
-                .and(employee.page.locator(':visible'))
+            employee.page.getByTestId('dashboard_timer').getByTestId('timer_button')
         ).toBeVisible({ timeout: 10000 });
 
         // Employee's time entry IS visible

e2e/timetracker.spec.ts

@@ -354,10 +354,7 @@ test('test that timer started on dashboard is visible on time page', async ({ pa
 
     // Timer should still be running (the timer button should be red/active)
     await expect(
-        page
-            .getByTestId('dashboard_timer')
-            .getByTestId('timer_button')
-            .and(page.locator(':visible'))
+        page.locator('[data-testid="dashboard_timer"] [data-testid="timer_button"]')
     ).toHaveClass(/bg-red-400\/80/);
 
     // Stop the timer

e2e/utils/api.ts

@@ -201,37 +201,6 @@ export async function createProjectViaApi(
     return body.data as { id: string; name: string; color: string; is_billable: boolean };
 }
 
-export async function archiveProjectViaApi(
-    ctx: TestContext,
-    project: {
-        id: string;
-        name: string;
-        color: string;
-        is_billable: boolean;
-        client_id?: string | null;
-        billable_rate?: number | null;
-        estimated_time?: number | null;
-    }
-) {
-    const response = await ctx.request.put(
-        `${PLAYWRIGHT_BASE_URL}/api/v1/organizations/${ctx.orgId}/projects/${project.id}`,
-        {
-            data: {
-                name: project.name,
-                color: project.color,
-                is_billable: project.is_billable,
-                is_archived: true,
-                client_id: project.client_id ?? null,
-                billable_rate: project.billable_rate ?? null,
-                estimated_time: project.estimated_time ?? null,
-            },
-        }
-    );
-    expect(response.status()).toBe(200);
-    const body = await response.json();
-    return body.data;
-}
-
 export async function createBillableProjectViaApi(
     ctx: TestContext,
     data: { name: string; billable_rate?: number | null }
@@ -345,36 +314,6 @@ export async function createProjectMemberViaApi(
     return body.data as { id: string; billable_rate: number | null };
 }
 
-export async function getMembersViaApi(ctx: TestContext) {
-    const response = await ctx.request.get(
-        `${PLAYWRIGHT_BASE_URL}/api/v1/organizations/${ctx.orgId}/members`
-    );
-    expect(response.status()).toBe(200);
-    const body = await response.json();
-    return body.data as Array<{
-        id: string;
-        name: string;
-        email: string;
-        role: string;
-        billable_rate: number | null;
-        is_placeholder: boolean;
-    }>;
-}
-
-export async function updateMemberBillableRateViaApi(
-    ctx: TestContext,
-    memberId: string,
-    billableRate: number | null
-) {
-    const response = await ctx.request.put(
-        `${PLAYWRIGHT_BASE_URL}/api/v1/organizations/${ctx.orgId}/members/${memberId}`,
-        { data: { billable_rate: billableRate } }
-    );
-    expect(response.status()).toBe(200);
-    const body = await response.json();
-    return body.data;
-}
-
 // ──────────────────────────────────────────────────
 // Composite helpers (matching existing UI helper signatures)
 // ──────────────────────────────────────────────────

e2e/utils/currentTimeEntry.ts

@@ -2,19 +2,12 @@ import { expect } from '@playwright/test';
 import type { Page } from '@playwright/test';
 
 export async function startOrStopTimerWithButton(page: Page) {
-    await page
-        .getByTestId('dashboard_timer')
-        .getByTestId('timer_button')
-        .and(page.locator(':visible'))
-        .click();
+    await page.locator('[data-testid="dashboard_timer"] [data-testid="timer_button"]').click();
 }
 
 export async function assertThatTimerHasStarted(page: Page) {
     await expect(
-        page
-            .getByTestId('dashboard_timer')
-            .getByTestId('timer_button')
-            .and(page.locator(':visible'))
+        page.locator('[data-testid="dashboard_timer"] [data-testid="timer_button"]')
     ).toHaveClass(/bg-red-400\/80/);
 }
 
@@ -41,10 +34,7 @@ export function newTimeEntryResponse(
 
 export async function assertThatTimerIsStopped(page: Page) {
     await expect(
-        page
-            .getByTestId('dashboard_timer')
-            .getByTestId('timer_button')
-            .and(page.locator(':visible'))
+        page.locator('[data-testid="dashboard_timer"] [data-testid="timer_button"]')
     ).toHaveClass(/bg-accent-300\/70/);
 }
 

e2e/utils/members.ts

@@ -68,85 +68,6 @@ export async function inviteAndAcceptMember(
     await secondUser.close();
 }
 
-/**
- * Set up an admin member in the owner's organization.
- * Returns the admin's page, their member ID, and a cleanup function.
- */
-export async function setupAdminUser(
-    ownerPage: Page,
-    ownerCtx: TestContext,
-    browser: Browser
-): Promise<{
-    adminPage: Page;
-    adminMemberId: string;
-    closeAdmin: () => Promise<void>;
-}> {
-    const memberId = Math.floor(Math.random() * 100000);
-    const memberEmail = `admin+${memberId}@admin-perms.test`;
-    const memberName = 'Admin ' + memberId;
-
-    const admin = await registerUser(browser, memberName, memberEmail);
-
-    await ownerPage.goto(PLAYWRIGHT_BASE_URL + '/members');
-    await ownerPage.getByRole('button', { name: 'Invite Member' }).click();
-    await expect(ownerPage.getByPlaceholder('Member Email')).toBeVisible();
-    await ownerPage.getByPlaceholder('Member Email').fill(memberEmail);
-    await ownerPage.getByRole('button', { name: 'Administrator' }).click();
-    await Promise.all([
-        ownerPage.waitForResponse(
-            (response) =>
-                response.url().includes('/invitations') &&
-                response.request().method() === 'POST' &&
-                response.status() === 204
-        ),
-        ownerPage.getByRole('button', { name: 'Invite Member', exact: true }).click(),
-    ]);
-
-    const acceptUrl = await getInvitationAcceptUrl(admin.page.request, memberEmail);
-    await admin.page.goto(acceptUrl);
-    await admin.page.waitForURL(/dashboard/);
-
-    await admin.page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
-    await expect(admin.page.getByTestId('dashboard_view')).toBeVisible({ timeout: 15000 });
-
-    const orgSwitcherText = await admin.page
-        .getByTestId('organization_switcher')
-        .first()
-        .textContent();
-    if (!orgSwitcherText?.includes("John's Organization")) {
-        const cookies = await admin.page.context().cookies();
-        const xsrfCookie = cookies.find((c) => c.name === 'XSRF-TOKEN');
-        const xsrfToken = xsrfCookie ? decodeURIComponent(xsrfCookie.value) : '';
-
-        await admin.page.request.put(`${PLAYWRIGHT_BASE_URL}/current-team`, {
-            headers: {
-                'X-XSRF-TOKEN': xsrfToken,
-                Accept: 'text/html',
-            },
-            data: { team_id: ownerCtx.orgId },
-        });
-
-        await admin.page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
-        await expect(admin.page.getByTestId('dashboard_view')).toBeVisible({ timeout: 15000 });
-    }
-
-    const membersResponse = await ownerCtx.request.get(
-        `${PLAYWRIGHT_BASE_URL}/api/v1/organizations/${ownerCtx.orgId}/members`
-    );
-    expect(membersResponse.status()).toBe(200);
-    const membersBody = await membersResponse.json();
-    const adminMember = membersBody.data.find(
-        (m: { role: string; name: string }) => m.role === 'admin' && m.name === memberName
-    );
-    expect(adminMember).toBeTruthy();
-
-    return {
-        adminPage: admin.page,
-        adminMemberId: adminMember.id,
-        closeAdmin: admin.close,
-    };
-}
-
 /**
  * Set up an employee member in the owner's organization.
  * Returns the employee's page, their member ID, and a cleanup function.

e2e/utils/table.ts

@@ -1,16 +0,0 @@
-import type { Locator } from '@playwright/test';
-
-/**
- * Extract the first cell's text content from each row in a table.
- * Useful for reading the ordered names/labels from a sorted table.
- */
-export async function getTableRowNames(table: Locator): Promise<string[]> {
-    const rows = table.getByRole('row');
-    const count = await rows.count();
-    const names: string[] = [];
-    for (let i = 0; i < count; i++) {
-        const text = await rows.nth(i).locator('div').first().textContent();
-        if (text) names.push(text.trim());
-    }
-    return names;
-}

playwright.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
     /* Retry on CI only */
     retries: process.env.CI ? 1 : 0,
     /* Run tests in parallel */
-    workers: process.env.CI ? 2 : 4,
+    workers: 4,
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
     reporter: process.env.CI ? 'blob' : 'html',
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

playwright/fixtures.ts

@@ -2,7 +2,7 @@ import { test as baseTest } from '@playwright/test';
 import type { Page } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL, TEST_USER_PASSWORD } from './config';
 import { type TestContext, setupTestContext } from '../e2e/utils/api';
-import { setupAdminUser, setupEmployeeUser } from '../e2e/utils/members';
+import { setupEmployeeUser } from '../e2e/utils/members';
 
 export * from '@playwright/test';
 export type { TestContext };
@@ -12,11 +12,6 @@ export interface EmployeeFixture {
     memberId: string;
 }
 
-export interface AdminFixture {
-    page: Page;
-    memberId: string;
-}
-
 /**
  * API-based authentication fixture - creates a new user via HTTP requests instead of UI interactions.
  * This is ~10-25x faster than UI-based authentication (~100-200ms vs ~3-5s).
@@ -24,7 +19,7 @@ export interface AdminFixture {
  * Uses page.context().request() to ensure cookies are shared between the API request and page.
  */
 export const test = baseTest.extend<
-    { ctx: TestContext; employee: EmployeeFixture; admin: AdminFixture },
+    { ctx: TestContext; employee: EmployeeFixture },
     { workerStorageState: string }
 >({
     page: async ({ page }, use) => {
@@ -105,10 +100,4 @@ export const test = baseTest.extend<
         await use({ page: employeePage, memberId: employeeMemberId });
         await closeEmployee();
     },
-
-    admin: async ({ page, ctx, browser }, use) => {
-        const { adminPage, adminMemberId, closeAdmin } = await setupAdminUser(page, ctx, browser);
-        await use({ page: adminPage, memberId: adminMemberId });
-        await closeAdmin();
-    },
 });

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

@@ -2,104 +2,17 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { UserCircleIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { type Component, computed, ref } from 'vue';
+import { type Component, ref } from 'vue';
 import { type Client } from '@/packages/api/src';
 import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
 import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
 import ClientTableHeading from '@/Components/Common/Client/ClientTableHeading.vue';
 import { canCreateClients } from '@/utils/permissions';
-import { useProjectsQuery } from '@/utils/useProjectsQuery';
-import {
-    useVueTable,
-    getCoreRowModel,
-    getSortedRowModel,
-    type SortingState,
-} from '@tanstack/vue-table';
 
-export type SortColumn = 'name' | 'projects_count' | 'status';
-export type SortDirection = 'asc' | 'desc';
-
-const props = defineProps<{
+defineProps<{
     clients: Client[];
-    sortColumn: SortColumn;
-    sortDirection: SortDirection;
 }>();
-
-const emit = defineEmits<{
-    sort: [column: SortColumn, direction: SortDirection];
-}>();
-
 const createClient = ref(false);
-
-const { projects } = useProjectsQuery();
-
-const projectCountMap = computed(() => {
-    const map = new Map<string, number>();
-    projects.value.forEach((project) => {
-        if (project.client_id) {
-            map.set(project.client_id, (map.get(project.client_id) ?? 0) + 1);
-        }
-    });
-    return map;
-});
-
-const sorting = computed<SortingState>(() => [
-    {
-        id: props.sortColumn,
-        desc: props.sortDirection === 'desc',
-    },
-]);
-
-const columns = computed(() => [
-    {
-        id: 'name',
-        accessorFn: (row: Client) => row.name.toLowerCase(),
-    },
-    {
-        id: 'projects_count',
-        sortDescFirst: true,
-        accessorFn: (row: Client) => projectCountMap.value.get(row.id) ?? 0,
-    },
-    {
-        id: 'status',
-        accessorFn: (row: Client) => (row.is_archived ? 1 : 0),
-    },
-]);
-
-const descFirstColumns = new Set<SortColumn>(
-    columns.value
-        .filter((c) => 'sortDescFirst' in c && c.sortDescFirst)
-        .map((c) => c.id as SortColumn)
-);
-
-function handleSort(column: SortColumn) {
-    if (props.sortColumn === column) {
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
-    }
-}
-
-const table = useVueTable({
-    get data() {
-        return props.clients;
-    },
-    get columns() {
-        return columns.value;
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-        get sorting() {
-            return sorting.value;
-        },
-    },
-    manualSorting: false,
-});
-
-const sortedClients = computed(() => {
-    return table.getRowModel().rows.map((row) => row.original);
-});
 </script>
 
 <template>
@@ -110,12 +23,8 @@ const sortedClients = computed(() => {
                 data-testid="client_table"
                 class="grid min-w-full"
                 style="grid-template-columns: 1fr 150px 200px 80px">
-                <ClientTableHeading
-                    :sort-column="props.sortColumn"
-                    :sort-direction="props.sortDirection"
-                    :desc-first-columns="descFirstColumns"
-                    @sort="handleSort"></ClientTableHeading>
-                <div v-if="sortedClients.length === 0" class="col-span-3 py-24 text-center">
+                <ClientTableHeading></ClientTableHeading>
+                <div v-if="clients.length === 0" class="col-span-3 py-24 text-center">
                     <UserCircleIcon class="w-8 text-icon-default inline pb-2"></UserCircleIcon>
                     <h3 class="text-text-primary font-semibold">No clients found</h3>
                     <p v-if="canCreateClients()" class="pb-5">Create your first client now!</p>
@@ -126,7 +35,7 @@ const sortedClients = computed(() => {
                         >Create your First Client
                     </SecondaryButton>
                 </div>
-                <template v-for="client in sortedClients" :key="client.id">
+                <template v-for="client in clients" :key="client.id">
                     <ClientTableRow :client="client"></ClientTableRow>
                 </template>
             </div>

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

@@ -1,67 +1,18 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
-import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
-
-const props = defineProps<{
-    sortColumn: SortColumn;
-    sortDirection: SortDirection;
-    descFirstColumns: ReadonlySet<SortColumn>;
-}>();
-
-const emit = defineEmits<{
-    sort: [column: SortColumn];
-}>();
-
-function handleSort(column: SortColumn) {
-    emit('sort', column);
-}
-
-function isSorted(column: SortColumn): boolean {
-    return props.sortColumn === column;
-}
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
     <TableHeading>
-        <div
-            class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('name')">
+        <div class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('projects_count')">
-            Projects
-            <ChevronDownIcon v-if="isChevronDown('projects_count')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('projects_count')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('status')">
-            Status
-            <ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
         </div>
+        <div class="px-3 py-1.5 text-left text-text-tertiary"></div>
+        <div class="px-3 py-1.5 text-left text-text-tertiary">Status</div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>
     </TableHeading>
 </template>
+
+<style scoped></style>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Client } from '@/packages/api/src';
 import { computed, ref } from 'vue';
-import { CheckCircleIcon, ArchiveBoxIcon } from '@heroicons/vue/24/outline';
+import { CheckCircleIcon } from '@heroicons/vue/20/solid';
 import { useClientsStore } from '@/utils/useClients';
 import ClientMoreOptionsDropdown from '@/Components/Common/Client/ClientMoreOptionsDropdown.vue';
 import { useProjectsQuery } from '@/utils/useProjectsQuery';
@@ -36,25 +36,19 @@ const showEditModal = ref(false);
     <TableRow>
         <ClientEditModal v-model:show="showEditModal" :client="client"></ClientEditModal>
         <div
-            class="whitespace-nowrap flex items-center space-x-5 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            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>
                 {{ client.name }}
             </span>
         </div>
         <div
-            class="whitespace-nowrap flex items-center px-3 py-4 text-sm font-medium text-text-primary">
+            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 class="text-text-secondary"> {{ projectCount }} Projects </span>
         </div>
         <div
-            class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1.5 items-center font-medium">
-            <template v-if="client.is_archived">
-                <ArchiveBoxIcon class="w-4 text-icon-default"></ArchiveBoxIcon>
-                <span>Archived</span>
-            </template>
-            <template v-else>
-                <CheckCircleIcon class="w-4 text-icon-default"></CheckCircleIcon>
-                <span>Active</span>
-            </template>
+            class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1 items-center font-medium">
+            <CheckCircleIcon class="w-5"></CheckCircleIcon>
+            <span>Active</span>
         </div>
         <div
             class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">

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

@@ -1,35 +1,20 @@
 <script setup lang="ts">
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import type { Member, UpdateMemberBody } from '@/packages/api/src';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { type MemberBillableKey, useMembersStore } from '@/utils/useMembers';
 import BillableRateInput from '@/packages/ui/src/Input/BillableRateInput.vue';
-import { Field, FieldLabel, FieldDescription } from '@/packages/ui/src/field';
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from '@/packages/ui/src/tooltip';
+import { Field, FieldLabel } from '@/packages/ui/src/field';
 import MemberBillableRateModal from '@/Components/Common/Member/MemberBillableRateModal.vue';
+import MemberBillableSelect from '@/Components/Common/Member/MemberBillableSelect.vue';
+import { onMounted, watch } from 'vue';
 import MemberRoleSelect from '@/Components/Common/Member/MemberRoleSelect.vue';
 import MemberOwnershipTransferConfirmModal from '@/Components/Common/Member/MemberOwnershipTransferConfirmModal.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
-import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
-import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
-import { getCurrentOrganizationId } from '@/utils/useUser';
 
 const { updateMember } = useMembersStore();
-const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
 const show = defineModel('show', { default: false });
 const saving = ref(false);
 
@@ -90,26 +75,10 @@ watch(billableRateSelect, () => {
     if (billableRateSelect.value === 'default-rate') {
         memberBody.value.billable_rate = null;
     } else if (billableRateSelect.value === 'custom-rate') {
-        if (!memberBody.value.billable_rate) {
-            memberBody.value.billable_rate = organization.value?.billable_rate ?? 0;
-        }
+        memberBody.value.billable_rate = props.member.billable_rate ?? 0;
     }
 });
 
-const displayedRate = computed({
-    get() {
-        if (billableRateSelect.value === 'default-rate') {
-            return organization.value?.billable_rate ?? null;
-        }
-        return memberBody.value.billable_rate;
-    },
-    set(value: number | null) {
-        if (billableRateSelect.value === 'custom-rate') {
-            memberBody.value.billable_rate = value;
-        }
-    },
-});
-
 const roleDescriptionTexts = {
     'owner':
         'The owner has full access of the organization. The owner is the only role that can: delete the organization, transfer the ownership to another user and access to the billing settings',
@@ -151,55 +120,34 @@ const roleDescription = computed(() => {
 
         <template #content>
             <div class="pb-5 pt-2 divide-y divide-border-secondary">
-                <div class="pb-5">
+                <div class="pb-5 flex space-x-6">
                     <Field>
                         <FieldLabel for="role">Role</FieldLabel>
                         <MemberRoleSelect v-model="memberBody.role" name="role"></MemberRoleSelect>
-                        <FieldDescription v-if="roleDescription">{{
-                            roleDescription
-                        }}</FieldDescription>
                     </Field>
+                    <div class="flex-1 text-xs flex items-center pt-6">
+                        <p>{{ roleDescription }}</p>
+                    </div>
                 </div>
-                <div class="pt-5">
-                    <Field>
-                        <FieldLabel :icon="BillableIcon" for="billableRateType"
-                            >Billable Rate</FieldLabel
-                        >
-                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-                            <Select v-model="billableRateSelect">
-                                <SelectTrigger id="billableRateType">
-                                    <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem value="default-rate">Default Rate</SelectItem>
-                                    <SelectItem value="custom-rate">Custom Rate</SelectItem>
-                                </SelectContent>
-                            </Select>
-                            <TooltipProvider v-if="billableRateSelect === 'default-rate'">
-                                <Tooltip>
-                                    <TooltipTrigger as-child>
-                                        <div>
-                                            <BillableRateInput
-                                                v-model="displayedRate"
-                                                :currency="getOrganizationCurrencyString()"
-                                                disabled
-                                                name="memberBillableRate" />
-                                        </div>
-                                    </TooltipTrigger>
-                                    <TooltipContent
-                                        >Uses the default rate of the organization</TooltipContent
-                                    >
-                                </Tooltip>
-                            </TooltipProvider>
+                <div class="flex items-center space-x-4 pt-5">
+                    <div class="col-span-6 sm:col-span-4 flex-1 flex space-x-5">
+                        <Field>
+                            <FieldLabel for="billableType">Billable</FieldLabel>
+                            <MemberBillableSelect
+                                v-model="billableRateSelect"
+                                name="billableType"></MemberBillableSelect>
+                        </Field>
+                        <Field v-if="billableRateSelect === 'custom-rate'" class="flex-1">
+                            <FieldLabel for="memberBillableRate">Billable Rate</FieldLabel>
                             <BillableRateInput
-                                v-else
-                                v-model="displayedRate"
+                                v-model="memberBody.billable_rate"
                                 focus
+                                class="w-full"
                                 :currency="getOrganizationCurrencyString()"
                                 name="memberBillableRate"
-                                @keydown.enter="saveWithChecks()" />
-                        </div>
-                    </Field>
+                                @keydown.enter="saveWithChecks()"></BillableRateInput>
+                        </Field>
+                    </div>
                 </div>
             </div>
         </template>

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

@@ -2,117 +2,19 @@
 import MemberTableHeading from '@/Components/Common/Member/MemberTableHeading.vue';
 import MemberTableRow from '@/Components/Common/Member/MemberTableRow.vue';
 import { useMembersQuery } from '@/utils/useMembersQuery';
-import type { Member } from '@/packages/api/src';
-import { computed } from 'vue';
-import {
-    useVueTable,
-    getCoreRowModel,
-    getSortedRowModel,
-    type SortingState,
-} from '@tanstack/vue-table';
-
-export type SortColumn = 'name' | 'email' | 'role' | 'billable_rate' | 'status';
-export type SortDirection = 'asc' | 'desc';
-
-const props = defineProps<{
-    sortColumn: SortColumn;
-    sortDirection: SortDirection;
-}>();
-
-const emit = defineEmits<{
-    sort: [column: SortColumn, direction: SortDirection];
-}>();
 
 const { members } = useMembersQuery();
-
-const roleOrder: Record<string, number> = {
-    owner: 0,
-    admin: 1,
-    manager: 2,
-    employee: 3,
-    placeholder: 4,
-};
-
-const sorting = computed<SortingState>(() => [
-    {
-        id: props.sortColumn,
-        desc: props.sortDirection === 'desc',
-    },
-]);
-
-const columns = [
-    {
-        id: 'name',
-        accessorFn: (row: Member) => row.name.toLowerCase(),
-    },
-    {
-        id: 'email',
-        accessorFn: (row: Member) => row.email.toLowerCase(),
-    },
-    {
-        id: 'role',
-        accessorFn: (row: Member) => roleOrder[row.role] ?? 99,
-    },
-    {
-        id: 'billable_rate',
-        sortDescFirst: true,
-        sortUndefined: 'last' as const,
-        accessorFn: (row: Member) => {
-            if (row.billable_rate === null) return undefined;
-            return row.billable_rate;
-        },
-    },
-    {
-        id: 'status',
-        accessorFn: (row: Member) => (row.is_placeholder ? 1 : 0),
-    },
-];
-
-const descFirstColumns = new Set<SortColumn>(
-    columns.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
-);
-
-function handleSort(column: SortColumn) {
-    if (props.sortColumn === column) {
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
-    }
-}
-
-const table = useVueTable({
-    get data() {
-        return members.value;
-    },
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-        get sorting() {
-            return sorting.value;
-        },
-    },
-    manualSorting: false,
-});
-
-const sortedMembers = computed(() => {
-    return table.getRowModel().rows.map((row) => row.original);
-});
 </script>
 
 <template>
     <div class="flow-root max-w-[100vw] overflow-x-auto">
         <div class="inline-block min-w-full align-middle">
             <div
-                data-testid="member_table"
+                data-testid="client_table"
                 class="grid min-w-full"
                 style="grid-template-columns: 1fr 1fr 180px 180px 150px 130px">
-                <MemberTableHeading
-                    :sort-column="props.sortColumn"
-                    :sort-direction="props.sortDirection"
-                    :desc-first-columns="descFirstColumns"
-                    @sort="handleSort"></MemberTableHeading>
-                <template v-for="member in sortedMembers" :key="member.id">
+                <MemberTableHeading></MemberTableHeading>
+                <template v-for="member in members" :key="member.id">
                     <MemberTableRow :member="member"></MemberTableRow>
                 </template>
             </div>

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

@@ -1,83 +1,20 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
-import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
-
-const props = defineProps<{
-    sortColumn: SortColumn;
-    sortDirection: SortDirection;
-    descFirstColumns: ReadonlySet<SortColumn>;
-}>();
-
-const emit = defineEmits<{
-    sort: [column: SortColumn];
-}>();
-
-function handleSort(column: SortColumn) {
-    emit('sort', column);
-}
-
-function isSorted(column: SortColumn): boolean {
-    return props.sortColumn === column;
-}
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
     <TableHeading>
-        <div
-            class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('name')">
+        <div class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('email')">
-            Email
-            <ChevronDownIcon v-if="isChevronDown('email')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('email')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('role')">
-            Role
-            <ChevronDownIcon v-if="isChevronDown('role')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('role')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('billable_rate')">
-            Billable Rate
-            <ChevronDownIcon v-if="isChevronDown('billable_rate')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('billable_rate')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('status')">
-            Status
-            <ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
         </div>
+        <div class="px-3 py-1.5 text-left text-text-tertiary">Email</div>
+        <div class="px-3 py-1.5 text-left text-text-tertiary">Role</div>
+        <div class="px-3 py-1.5 text-left text-text-tertiary">Billable Rate</div>
+        <div class="px-3 py-1.5 text-left text-text-tertiary">Status</div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
             <span class="sr-only">Edit</span>
         </div>
     </TableHeading>
 </template>
+
+<style scoped></style>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Member, Organization } from '@/packages/api/src';
 import { api } from '@/packages/api/src';
-import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/24/outline';
+import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/20/solid';
 import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
 import TableRow from '@/Components/TableRow.vue';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
@@ -82,15 +82,11 @@ const userHasValidMailAddress = computed(() => {
             }}
         </div>
         <div
-            class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1.5 items-center font-medium">
-            <template v-if="member.is_placeholder === false">
-                <CheckCircleIcon class="w-4 text-icon-default"></CheckCircleIcon>
-                <span>Active</span>
-            </template>
-            <template v-else>
-                <UserCircleIcon class="w-4 text-icon-default"></UserCircleIcon>
-                <span>Inactive</span>
-            </template>
+            class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1 items-center font-medium">
+            <CheckCircleIcon v-if="member.is_placeholder === false" class="w-5"></CheckCircleIcon>
+            <span v-if="member.is_placeholder === false">Active</span>
+            <UserCircleIcon v-if="member.is_placeholder === true" class="w-5"></UserCircleIcon>
+            <span v-if="member.is_placeholder === true">Inactive</span>
         </div>
         <div
             class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">

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

@@ -4,17 +4,11 @@ import { FolderPlusIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
 import { computed, ref } from 'vue';
 import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
-import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
+import ProjectTableHeading, {
+    type SortColumn,
+    type SortDirection,
+} from '@/Components/Common/Project/ProjectTableHeading.vue';
 import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
-
-export type SortColumn =
-    | 'name'
-    | 'client_name'
-    | 'spent_time'
-    | 'progress'
-    | 'billable_rate'
-    | 'status';
-export type SortDirection = 'asc' | 'desc';
 import { canCreateProjects } from '@/utils/permissions';
 import type { CreateProjectBody, Project, Client, CreateClientBody } from '@/packages/api/src';
 import { useProjectsStore } from '@/utils/useProjects';
@@ -37,7 +31,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    sort: [column: SortColumn, direction: SortDirection];
+    sort: [column: SortColumn];
 }>();
 
 const { clients } = useClientsQuery();
@@ -51,7 +45,7 @@ const clientNameMap = computed(() => {
     return map;
 });
 
-// Convert sort props to TanStack Table format
+// Convert our sort state to TanStack Table format
 const sorting = computed<SortingState>(() => [
     {
         id: props.sortColumn,
@@ -59,67 +53,38 @@ const sorting = computed<SortingState>(() => [
     },
 ]);
 
-// Define column accessors for sorting.
-// Numeric columns use sortDescFirst so that the first click (chevron down) sorts highest-first,
-// while text columns default to ascending (A-Z) on first click (chevron down).
-const columns = computed(() => [
+// Define column accessors for sorting
+const columns = [
     {
         id: 'name',
         accessorFn: (row: Project) => row.name.toLowerCase(),
     },
     {
         id: 'client_name',
-        sortUndefined: 'last' as const,
         accessorFn: (row: Project) => {
-            if (!row.client_id) return undefined;
+            if (!row.client_id) return '';
             return (clientNameMap.value.get(row.client_id) ?? '').toLowerCase();
         },
     },
     {
         id: 'spent_time',
-        sortDescFirst: true,
         accessorFn: (row: Project) => row.spent_time ?? 0,
     },
-    {
-        id: 'progress',
-        sortDescFirst: true,
-        sortUndefined: 'last' as const,
-        accessorFn: (row: Project) => {
-            if (!row.estimated_time) return undefined;
-            return (row.spent_time / row.estimated_time) * 100;
-        },
-    },
     {
         id: 'billable_rate',
-        sortDescFirst: true,
         accessorFn: (row: Project) => row.billable_rate ?? 0,
     },
     {
         id: 'status',
         accessorFn: (row: Project) => (row.is_archived ? 1 : 0),
     },
-]);
-
-// Columns with sortDescFirst get desc as default direction on first click.
-const descFirstColumns = new Set<SortColumn>(
-    columns.value.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
-);
-
-function handleSort(column: SortColumn) {
-    if (props.sortColumn === column) {
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
-    }
-}
+];
 
 const table = useVueTable({
     get data() {
         return props.projects;
     },
-    get columns() {
-        return columns.value;
-    },
+    columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     state: {
@@ -134,6 +99,10 @@ const sortedProjects = computed(() => {
     return table.getRowModel().rows.map((row) => row.original);
 });
 
+function handleSort(column: SortColumn) {
+    emit('sort', column);
+}
+
 const showCreateProjectModal = ref(false);
 
 async function createProject(project: CreateProjectBody): Promise<Project | undefined> {
@@ -164,7 +133,6 @@ const gridTemplate = computed(() => {
                     :show-billable-rate="props.showBillableRate"
                     :sort-column="props.sortColumn"
                     :sort-direction="props.sortDirection"
-                    :desc-first-columns="descFirstColumns"
                     @sort="handleSort"></ProjectTableHeading>
                 <div v-if="sortedProjects.length === 0" class="col-span-5 py-24 text-center">
                     <FolderPlusIcon class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>

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

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
 import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
-import type { SortColumn, SortDirection } from '@/Components/Common/Project/ProjectTable.vue';
+
+export type SortColumn = 'name' | 'client_name' | 'spent_time' | 'billable_rate' | 'status';
+export type SortDirection = 'asc' | 'desc';
 
 const props = defineProps<{
     showBillableRate: boolean;
     sortColumn: SortColumn;
     sortDirection: SortDirection;
-    descFirstColumns: ReadonlySet<SortColumn>;
 }>();
 
 const emit = defineEmits<{
@@ -21,18 +22,6 @@ function handleSort(column: SortColumn) {
 function isSorted(column: SortColumn): boolean {
     return props.sortColumn === column;
 }
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
@@ -41,49 +30,58 @@ function isChevronUp(column: SortColumn): boolean {
             class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
             @click="handleSort('name')">
             Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
+            <ChevronDownIcon v-if="isSorted('name') && sortDirection === 'asc'" class="w-4 h-4" />
+            <ChevronUpIcon
+                v-else-if="isSorted('name') && sortDirection === 'desc'"
+                class="w-4 h-4" />
             <span v-else class="w-4 h-4"></span>
         </div>
         <div
             class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
             @click="handleSort('client_name')">
             Client
-            <ChevronDownIcon v-if="isChevronDown('client_name')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('client_name')" class="w-4 h-4" />
+            <ChevronDownIcon
+                v-if="isSorted('client_name') && sortDirection === 'asc'"
+                class="w-4 h-4" />
+            <ChevronUpIcon
+                v-else-if="isSorted('client_name') && sortDirection === 'desc'"
+                class="w-4 h-4" />
             <span v-else class="w-4 h-4"></span>
         </div>
         <div
             class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
             @click="handleSort('spent_time')">
             Total Time
-            <ChevronDownIcon v-if="isChevronDown('spent_time')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('spent_time')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('progress')">
-            Progress
-            <ChevronDownIcon v-if="isChevronDown('progress')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('progress')" class="w-4 h-4" />
+            <ChevronDownIcon
+                v-if="isSorted('spent_time') && sortDirection === 'asc'"
+                class="w-4 h-4" />
+            <ChevronUpIcon
+                v-else-if="isSorted('spent_time') && sortDirection === 'desc'"
+                class="w-4 h-4" />
             <span v-else class="w-4 h-4"></span>
         </div>
+        <div class="px-3 py-1.5 text-left text-text-tertiary">Progress</div>
         <div
             v-if="showBillableRate"
             class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
             @click="handleSort('billable_rate')">
             Billable Rate
-            <ChevronDownIcon v-if="isChevronDown('billable_rate')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('billable_rate')" class="w-4 h-4" />
+            <ChevronDownIcon
+                v-if="isSorted('billable_rate') && sortDirection === 'asc'"
+                class="w-4 h-4" />
+            <ChevronUpIcon
+                v-else-if="isSorted('billable_rate') && sortDirection === 'desc'"
+                class="w-4 h-4" />
             <span v-else class="w-4 h-4"></span>
         </div>
         <div
             class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
             @click="handleSort('status')">
             Status
-            <ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
+            <ChevronDownIcon v-if="isSorted('status') && sortDirection === 'asc'" class="w-4 h-4" />
+            <ChevronUpIcon
+                v-else-if="isSorted('status') && sortDirection === 'desc'"
+                class="w-4 h-4" />
             <span v-else class="w-4 h-4"></span>
         </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">

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

@@ -6,7 +6,7 @@ import { ref } from 'vue';
 import PrimaryButton from '../../../packages/ui/src/Buttons/PrimaryButton.vue';
 import { Field, FieldLabel } from '@/packages/ui/src/field';
 import type { CreateReportBody, CreateReportBodyProperties } from '@/packages/api/src';
-import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import { useMutation } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { api } from '@/packages/api/src';
 import { Checkbox } from '@/packages/ui/src';
@@ -17,7 +17,6 @@ import { router } from '@inertiajs/vue3';
 
 const show = defineModel('show', { default: false });
 const saving = ref(false);
-const queryClient = useQueryClient();
 
 const createReportMutation = useMutation({
     mutationFn: async (report: CreateReportBody) => {
@@ -31,11 +30,6 @@ const createReportMutation = useMutation({
             },
         });
     },
-    onSuccess: () => {
-        queryClient.invalidateQueries({
-            queryKey: ['reports'],
-        });
-    },
 });
 
 const props = defineProps<{

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

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
-    ChartBarIcon,
-    ArrowDownTrayIcon,
-    EllipsisVerticalIcon,
-    LockClosedIcon,
-} from '@heroicons/vue/20/solid';
-import { SaveIcon } from 'lucide-vue-next';
+import { ChartBarIcon } from '@heroicons/vue/20/solid';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import {
     formatHumanReadableDuration,
@@ -14,25 +8,17 @@ import {
 } from '@/packages/ui/src/utils/time';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
+import ReportingExportButton from '@/Components/Common/Reporting/ReportingExportButton.vue';
 import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import ReportingChart from '@/Components/Common/Reporting/ReportingChart.vue';
 import ReportingGroupBySelect from '@/Components/Common/Reporting/ReportingGroupBySelect.vue';
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import ReportingExportModal from '@/Components/Common/Reporting/ReportingExportModal.vue';
+import ReportSaveButton from '@/Components/Common/Report/ReportSaveButton.vue';
 import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
 import ReportingFilterBar from '@/Components/Common/Reporting/ReportingFilterBar.vue';
-import { SecondaryButton } from '@/packages/ui/src';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/Components/ui/dropdown-menu';
-import ReportCreateModal from '@/Components/Common/Report/ReportCreateModal.vue';
-import UpgradeModal from '@/Components/Common/UpgradeModal.vue';
-import { canCreateReports } from '@/utils/permissions';
-import { isAllowedToPerformPremiumAction } from '@/utils/billing';
+
 import { computed, type ComputedRef, inject, ref, watch } from 'vue';
 import { type GroupingOption, useReportingStore } from '@/utils/useReporting';
 import {
@@ -157,18 +143,8 @@ const aggregatedTableTimeEntries = computed<AggregatedTimeEntries | undefined>((
 });
 
 const reportProperties = computed(() => {
-    const { billable: billableFilter, ...rest } = filterParams.value;
-
-    let billableValue: boolean | null = null;
-    if (billableFilter === 'true') {
-        billableValue = true;
-    } else if (billableFilter === 'false') {
-        billableValue = false;
-    }
-
     return {
-        ...rest,
-        billable: billableValue,
+        ...filterParams.value,
         group: group.value,
         sub_group: subGroup.value,
         history_group: getOptimalGroupingOption(startDate.value, endDate.value),
@@ -206,28 +182,6 @@ async function downloadExport(format: ExportFormat) {
 const { projects } = useProjectsQuery();
 const showExportModal = ref(false);
 const exportUrl = ref<string | null>(null);
-const showCreateReportModal = ref(false);
-const showPremiumModal = ref(false);
-const exportLoading = ref(false);
-
-function triggerExport(format: ExportFormat) {
-    if (format === 'pdf' && !isAllowedToPerformPremiumAction()) {
-        showPremiumModal.value = true;
-        return;
-    }
-    exportLoading.value = true;
-    downloadExport(format).finally(() => {
-        exportLoading.value = false;
-    });
-}
-
-function onSaveReportClick() {
-    if (isAllowedToPerformPremiumAction()) {
-        showCreateReportModal.value = true;
-    } else {
-        showPremiumModal.value = true;
-    }
-}
 
 const groupedPieChartData = computed(() => {
     return (
@@ -286,79 +240,16 @@ const tableData = computed(() => {
     <ReportingExportModal
         v-model:show="showExportModal"
         :export-url="exportUrl"></ReportingExportModal>
-    <ReportCreateModal
-        v-model:show="showCreateReportModal"
-        :properties="reportProperties"></ReportCreateModal>
-    <UpgradeModal v-model:show="showPremiumModal">
-        This feature is only available in solidtime Professional.
-    </UpgradeModal>
     <MainContainer
-        class="h-14 sm:h-16 border-b border-default-background-separator flex flex-wrap gap-y-3 justify-between items-center">
+        class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
         <div class="flex items-center space-x-3 sm:space-x-6">
             <PageTitle :icon="ChartBarIcon" title="Reporting"></PageTitle>
-            <ReportingTabNavbar active="reporting" class="hidden sm:flex"></ReportingTabNavbar>
+            <ReportingTabNavbar active="reporting"></ReportingTabNavbar>
         </div>
-        <div class="hidden sm:flex space-x-2">
-            <DropdownMenu>
-                <DropdownMenuTrigger as-child>
-                    <SecondaryButton :icon="ArrowDownTrayIcon" :loading="exportLoading">
-                        Export
-                    </SecondaryButton>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                    <DropdownMenuItem @click="triggerExport('pdf')">
-                        <div class="flex items-center space-x-2">
-                            <span>Export as PDF</span>
-                            <LockClosedIcon
-                                v-if="!isAllowedToPerformPremiumAction()"
-                                class="w-3.5 text-text-tertiary" />
-                        </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem @click="triggerExport('xlsx')">
-                        Export as Excel
-                    </DropdownMenuItem>
-                    <DropdownMenuItem @click="triggerExport('csv')">
-                        Export as CSV
-                    </DropdownMenuItem>
-                    <DropdownMenuItem @click="triggerExport('ods')">
-                        Export as ODS
-                    </DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-            <SecondaryButton v-if="canCreateReports()" :icon="SaveIcon" @click="onSaveReportClick">
-                Save Report
-            </SecondaryButton>
+        <div class="flex space-x-2">
+            <ReportingExportButton :download="downloadExport"></ReportingExportButton>
+            <ReportSaveButton :report-properties="reportProperties"></ReportSaveButton>
         </div>
-        <DropdownMenu>
-            <DropdownMenuTrigger as-child class="sm:hidden">
-                <button
-                    class="p-1.5 rounded-lg border border-border-tertiary text-text-secondary hover:text-text-primary hover:bg-secondary transition"
-                    aria-label="More options">
-                    <EllipsisVerticalIcon class="w-5 h-5" />
-                </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-                <DropdownMenuItem @click="triggerExport('pdf')">
-                    <div class="flex items-center space-x-2">
-                        <span>Export as PDF</span>
-                        <LockClosedIcon
-                            v-if="!isAllowedToPerformPremiumAction()"
-                            class="w-3.5 text-text-tertiary" />
-                    </div>
-                </DropdownMenuItem>
-                <DropdownMenuItem @click="triggerExport('xlsx')">
-                    Export as Excel
-                </DropdownMenuItem>
-                <DropdownMenuItem @click="triggerExport('csv')"> Export as CSV </DropdownMenuItem>
-                <DropdownMenuItem @click="triggerExport('ods')"> Export as ODS </DropdownMenuItem>
-                <DropdownMenuItem v-if="canCreateReports()" @click="onSaveReportClick">
-                    Save Report
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
-    </MainContainer>
-    <MainContainer class="sm:hidden py-2 border-b border-default-background-separator">
-        <ReportingTabNavbar active="reporting"></ReportingTabNavbar>
     </MainContainer>
     <ReportingFilterBar
         v-model:selected-members="selectedMembers"
@@ -437,7 +328,8 @@ const tableData = computed(() => {
                                 v-if="showBillableRate"
                                 class="justify-end pr-6 flex items-center font-medium">
                                 {{
-                                    aggregatedTableTimeEntries.cost
+                                    aggregatedTableTimeEntries.cost !== null &&
+                                    aggregatedTableTimeEntries.cost !== undefined
                                         ? formatCents(
                                               aggregatedTableTimeEntries.cost,
                                               getOrganizationCurrencyString(),

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

@@ -16,7 +16,7 @@ const props = defineProps<{
         :icon="icon"
         :class="
             twMerge(
-                'rounded-md px-2 sm:px-3 border 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',
+                '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
             )
         ">

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

@@ -2,80 +2,18 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { FolderPlusIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useTagsQuery } from '@/utils/useTagsQuery';
 import TagTableRow from '@/Components/Common/Tag/TagTableRow.vue';
 import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
 import TagTableHeading from '@/Components/Common/Tag/TagTableHeading.vue';
 import { canCreateTags } from '@/utils/permissions';
 import type { Tag } from '@/packages/api/src';
-import {
-    useVueTable,
-    getCoreRowModel,
-    getSortedRowModel,
-    type SortingState,
-} from '@tanstack/vue-table';
-
-export type SortColumn = 'name';
-export type SortDirection = 'asc' | 'desc';
-
-const props = defineProps<{
+defineProps<{
     createTag: (name: string) => Promise<Tag | undefined>;
-    sortColumn: SortColumn;
-    sortDirection: SortDirection;
 }>();
-
-const emit = defineEmits<{
-    sort: [column: SortColumn, direction: SortDirection];
-}>();
-
 const { tags } = useTagsQuery();
 const showCreateTagModal = ref(false);
-
-const sorting = computed<SortingState>(() => [
-    {
-        id: props.sortColumn,
-        desc: props.sortDirection === 'desc',
-    },
-]);
-
-const columns = [
-    {
-        id: 'name',
-        accessorFn: (row: Tag) => row.name.toLowerCase(),
-    },
-];
-
-const descFirstColumns = new Set<SortColumn>(
-    columns.filter((c) => 'sortDescFirst' in c && c.sortDescFirst).map((c) => c.id as SortColumn)
-);
-
-function handleSort(column: SortColumn) {
-    if (props.sortColumn === column) {
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
-    }
-}
-
-const table = useVueTable({
-    get data() {
-        return tags.value;
-    },
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-        get sorting() {
-            return sorting.value;
-        },
-    },
-    manualSorting: false,
-});
-
-const sortedTags = computed(() => {
-    return table.getRowModel().rows.map((row) => row.original);
-});
 </script>
 
 <template>
@@ -86,12 +24,8 @@ const sortedTags = computed(() => {
                 data-testid="tag_table"
                 class="grid min-w-full"
                 style="grid-template-columns: 1fr 80px">
-                <TagTableHeading
-                    :sort-column="props.sortColumn"
-                    :sort-direction="props.sortDirection"
-                    :desc-first-columns="descFirstColumns"
-                    @sort="handleSort"></TagTableHeading>
-                <div v-if="sortedTags.length === 0" class="col-span-5 py-24 text-center">
+                <TagTableHeading></TagTableHeading>
+                <div v-if="tags.length === 0" class="col-span-5 py-24 text-center">
                     <FolderPlusIcon class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
                     <h3 class="text-text-primary font-semibold">No tags found</h3>
                     <p v-if="canCreateTags()" class="pb-5">Create your first tag now!</p>
@@ -102,7 +36,7 @@ const sortedTags = computed(() => {
                         >Create your First Tag</SecondaryButton
                     >
                 </div>
-                <template v-for="tag in sortedTags" :key="tag.id">
+                <template v-for="tag in tags" :key="tag.id">
                     <TagTableRow :tag="tag"></TagTableRow>
                 </template>
             </div>

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

@@ -1,51 +1,16 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
-import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
-
-const props = defineProps<{
-    sortColumn: SortColumn;
-    sortDirection: SortDirection;
-    descFirstColumns: ReadonlySet<SortColumn>;
-}>();
-
-const emit = defineEmits<{
-    sort: [column: SortColumn];
-}>();
-
-function handleSort(column: SortColumn) {
-    emit('sort', column);
-}
-
-function isSorted(column: SortColumn): boolean {
-    return props.sortColumn === column;
-}
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
     <TableHeading>
-        <div
-            class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('name')">
+        <div class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
             Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
         </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>
     </TableHeading>
 </template>
+
+<style scoped></style>

resources/js/Components/Dashboard/ActivityGraphCard.vue

@@ -106,29 +106,15 @@ const option = computed(() => {
     return {
         tooltip: {},
         visualMap: {
+            min: 0,
+            max: max.value,
             type: 'piecewise',
             orient: 'horizontal',
             left: 'center',
             top: 'center',
-            pieces: [
-                { value: 0, color: chartEmptyColor.value },
-                {
-                    gt: 0,
-                    lte: max.value * 0.25,
-                    color: chroma.mix(chartEmptyColor.value, chartColor.value, 0.3).hex(),
-                },
-                {
-                    gt: max.value * 0.25,
-                    lte: max.value * 0.5,
-                    color: chroma.mix(chartEmptyColor.value, chartColor.value, 0.6).hex(),
-                },
-                {
-                    gt: max.value * 0.5,
-                    lte: max.value * 0.75,
-                    color: chroma.mix(chartEmptyColor.value, chartColor.value, 0.8).hex(),
-                },
-                { gt: max.value * 0.75, lte: max.value, color: chartColor.value },
-            ],
+            inRange: {
+                color: [chartEmptyColor.value, chartColor.value],
+            },
             show: false,
         },
         calendar: {

resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue

@@ -85,11 +85,11 @@ window.addEventListener('dashboard:refresh', () => {
                     filteredLatestTasks.length === 4 ? 'last:border-0' : ''
                 "></RecentlyTrackedTasksCardEntry>
         </div>
-        <div v-else class="text-center flex flex-1 justify-center items-center py-5">
+        <div v-else class="text-center flex flex-1 justify-center items-center">
             <div>
                 <PlusCircleIcon class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
                 <h3 class="text-text-primary font-semibold text-sm">No recent time entries</h3>
-                <p class="text-sm">Start tracking your time!</p>
+                <p class="pb-5 text-sm">Start tracking your time!</p>
             </div>
         </div>
     </DashboardCard>

resources/js/Components/Dashboard/TeamActivityCard.vue

@@ -44,7 +44,6 @@ const { data: latestTeamActivity, isLoading } = useQuery({
         <div v-else class="text-center text-gray-500 py-8">No team activity found</div>
         <div
             v-if="latestTeamActivity && latestTeamActivity.length <= 1"
-            :class="latestTeamActivity?.length === 1 ? 'pb-5' : 'py-5'"
             class="text-center flex flex-1 justify-center items-center">
             <div>
                 <UserGroupIcon class="w-8 text-icon-default inline pb-2"></UserGroupIcon>

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

@@ -31,14 +31,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         <div
             :class="
                 cn(
-                    'fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start px-2 pt-3 md:pt-20 xl:pt-32 justify-center overflow-auto'
+                    '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'
                 )
             ">
             <DialogContent
                 v-bind="forwarded"
                 :class="
                     cn(
-                        'pointer-events-auto bg-default-background grid w-full max-w-lg border border-border-tertiary shadow-lg duration-200 rounded-lg outline-none 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',
+                        'pointer-events-auto bg-default-background grid w-full max-w-lg border border-border-tertiary shadow-lg duration-200 sm:rounded-lg outline-none 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
                     )
                 ">

resources/js/Components/ui/number-field/NumberFieldInput.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
         data-slot="input"
         :class="
             cn(
-                'flex h-9 w-full rounded-md border border-input-border bg-input-background px-3 py-1 text-base sm:text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus:border-input-border focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                'flex h-9 w-full rounded-md border border-input-border bg-input-background px-3 py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus:border-input-border focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
                 props.class
             )
         " />

resources/js/Layouts/AppLayout.vue

@@ -4,6 +4,7 @@ import Banner from '@/Components/Banner.vue';
 import OrganizationSwitcher from '@/Components/OrganizationSwitcher.vue';
 import CurrentSidebarTimer from '@/Components/CurrentSidebarTimer.vue';
 import {
+    Bars3Icon,
     CalendarIcon,
     ChartBarIcon,
     ClockIcon,
@@ -18,11 +19,10 @@ import {
     XMarkIcon,
     DocumentTextIcon,
 } from '@heroicons/vue/20/solid';
-import { PanelLeft } from 'lucide-vue-next';
 import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
 import UserSettingsIcon from '@/Components/UserSettingsIcon.vue';
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
-import { nextTick, onMounted, provide, ref } from 'vue';
+import { onMounted, provide, ref } from 'vue';
 import NotificationContainer from '@/Components/NotificationContainer.vue';
 import { initializeStores } from '@/utils/init';
 import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
@@ -61,24 +61,6 @@ defineProps({
 });
 
 const showSidebarMenu = ref(false);
-const sidebarVisible = ref(false);
-
-function openSidebar() {
-    showSidebarMenu.value = true;
-    nextTick(() => {
-        requestAnimationFrame(() => {
-            sidebarVisible.value = true;
-        });
-    });
-}
-
-function closeSidebar() {
-    sidebarVisible.value = false;
-    setTimeout(() => {
-        showSidebarMenu.value = false;
-    }, 200);
-}
-
 const isUnloading = ref(false);
 
 const { organization, isLoading: isOrganizationLoading } = useOrganizationQuery(
@@ -120,23 +102,11 @@ const page = usePage<{
 
 <template>
     <div v-bind="$attrs" class="flex flex-wrap bg-background text-text-secondary">
-        <!-- Mobile sidebar overlay -->
-        <Teleport to="body">
-            <div v-if="showSidebarMenu" class="fixed inset-0 z-40 lg:hidden" @click="closeSidebar">
-                <div
-                    class="absolute inset-0 bg-default-background transition-opacity duration-200"
-                    :class="sidebarVisible ? 'opacity-50' : 'opacity-0'" />
-            </div>
-        </Teleport>
-
         <div
-            :class="[
-                sidebarVisible
-                    ? 'max-lg:translate-x-0 max-lg:shadow-xl'
-                    : 'max-lg:-translate-x-full',
-            ]"
-            class="flex-shrink-0 h-screen fixed w-[280px] px-2.5 py-4 hidden lg:flex flex-col justify-between bg-background border-r border-default-background-separator max-lg:z-50 max-lg:transition-transform max-lg:duration-200 max-lg:ease-in-out lg:w-[230px] 2xl:w-[250px] 2xl:px-3 lg:border-r-0"
-            :style="showSidebarMenu ? { display: 'flex' } : undefined">
+            :class="{
+                '!flex bg-default-background w-full z-30': showSidebarMenu,
+            }"
+            class="flex-shrink-0 h-screen hidden fixed w-[230px] 2xl:w-[250px] px-2.5 2xl:px-3 py-4 lg:flex flex-col justify-between">
             <div class="flex flex-col h-full">
                 <div
                     class="border-b border-default-background-separator pb-2 flex items-center gap-1">
@@ -151,13 +121,9 @@ const page = usePage<{
                         @click="openPalette">
                         <MagnifyingGlassIcon class="h-4 w-4 text-icon-default" />
                     </Button>
-                    <Button
-                        variant="ghost"
-                        size="icon"
-                        class="h-7 w-7 flex-shrink-0 lg:hidden"
-                        @click="closeSidebar">
-                        <XMarkIcon class="h-4 w-4 text-icon-default" />
-                    </Button>
+                    <XMarkIcon
+                        class="w-8 lg:hidden flex-shrink-0"
+                        @click="showSidebarMenu = false"></XMarkIcon>
                 </div>
                 <div class="border-b border-default-background-separator">
                     <CurrentSidebarTimer></CurrentSidebarTimer>
@@ -313,13 +279,9 @@ const page = usePage<{
                 class="h-screen overflow-y-auto flex flex-col bg-default-background border-l border-default-background-separator">
                 <div
                     class="lg:hidden w-full px-3 py-1 border-b border-b-default-background-separator text-text-secondary flex justify-between items-center">
-                    <Button
-                        variant="ghost"
-                        size="icon"
-                        class="h-7 w-7 shrink-0"
-                        @click="openSidebar">
-                        <PanelLeft class="h-4 w-4 text-icon-default" />
-                    </Button>
+                    <Bars3Icon
+                        class="w-7 text-text-secondary"
+                        @click="showSidebarMenu = !showSidebarMenu"></Bars3Icon>
                     <div class="flex items-center gap-1">
                         <OrganizationSwitcher></OrganizationSwitcher>
                         <Button

resources/js/Pages/Clients.vue

@@ -12,8 +12,6 @@ import PageTitle from '@/Components/Common/PageTitle.vue';
 import { canCreateClients } from '@/utils/permissions';
 import TabBarItem from '@/Components/Common/TabBar/TabBarItem.vue';
 import TabBar from '@/Components/Common/TabBar/TabBar.vue';
-import { useStorage } from '@vueuse/core';
-import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
 
 const { clients } = useClientsQuery();
 
@@ -21,26 +19,6 @@ const activeTab = ref<'active' | 'archived'>('active');
 
 const createClient = ref(false);
 
-interface ClientTableState {
-    sortColumn: SortColumn;
-    sortDirection: SortDirection;
-}
-
-const tableState = useStorage<ClientTableState>(
-    'client-table-state',
-    {
-        sortColumn: 'name',
-        sortDirection: 'asc',
-    },
-    undefined,
-    { mergeDefaults: true }
-);
-
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
-}
-
 const shownClients = computed(() => {
     return clients.value.filter((client) => {
         if (activeTab.value === 'active') {
@@ -67,10 +45,6 @@ const shownClients = computed(() => {
             >
             <ClientCreateModal v-model:show="createClient"></ClientCreateModal>
         </MainContainer>
-        <ClientTable
-            :clients="shownClients"
-            :sort-column="tableState.sortColumn"
-            :sort-direction="tableState.sortDirection"
-            @sort="handleSort"></ClientTable>
+        <ClientTable :clients="shownClients"></ClientTable>
     </AppLayout>
 </template>

resources/js/Pages/Members.vue

@@ -13,8 +13,6 @@ import type { Role } from '@/types/jetstream';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import InvitationTable from '@/Components/Common/Invitation/InvitationTable.vue';
 import { canCreateInvitations } from '@/utils/permissions';
-import { useStorage } from '@vueuse/core';
-import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
 
 const inviteMember = ref(false);
 
@@ -23,26 +21,6 @@ defineProps<{
 }>();
 
 const activeTab = ref<'all' | 'invitations'>('all');
-
-interface MemberTableState {
-    sortColumn: SortColumn;
-    sortDirection: SortDirection;
-}
-
-const tableState = useStorage<MemberTableState>(
-    'member-table-state',
-    {
-        sortColumn: 'name',
-        sortDirection: 'asc',
-    },
-    undefined,
-    { mergeDefaults: true }
-);
-
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
-}
 </script>
 
 <template>
@@ -67,11 +45,7 @@ function handleSort(column: SortColumn, direction: SortDirection) {
                 :available-roles="availableRoles"
                 @close="activeTab = 'invitations'"></MemberInviteModal>
         </MainContainer>
-        <MemberTable
-            v-if="activeTab === 'all'"
-            :sort-column="tableState.sortColumn"
-            :sort-direction="tableState.sortDirection"
-            @sort="handleSort"></MemberTable>
+        <MemberTable v-if="activeTab === 'all'"></MemberTable>
         <InvitationTable v-if="activeTab === 'invitations'"></InvitationTable>
     </AppLayout>
 </template>

resources/js/Pages/ProjectShow.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
-import { FolderIcon, PlusIcon } from '@heroicons/vue/20/solid';
+import { FolderIcon, PlusIcon } from '@heroicons/vue/16/solid';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { computed, ref } from 'vue';
 import { useProjectsQuery } from '@/utils/useProjectsQuery';
@@ -84,11 +84,9 @@ const shownTasks = computed(() => {
                 <ol role="list" class="flex items-center space-x-2">
                     <li>
                         <div class="flex items-center space-x-6">
-                            <Link
-                                :href="route('projects')"
-                                class="flex items-center space-x-2 sm:space-x-2.5">
-                                <FolderIcon class="w-5 text-icon-default"></FolderIcon>
-                                <span class="text-sm sm:text-base font-medium">Projects</span>
+                            <Link :href="route('projects')" class="flex items-center space-x-2.5">
+                                <FolderIcon class="w-6 text-icon-default"></FolderIcon>
+                                <span class="font-medium">Projects</span>
                             </Link>
                         </div>
                     </li>

resources/js/Pages/Projects.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
-import { FolderIcon, PlusIcon } from '@heroicons/vue/20/solid';
+import { FolderIcon, PlusIcon } from '@heroicons/vue/24/outline';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import ProjectTable from '@/Components/Common/Project/ProjectTable.vue';
+import type {
+    SortColumn,
+    SortDirection,
+} from '@/Components/Common/Project/ProjectTableHeading.vue';
 import { computed } from 'vue';
 import { useProjectsQuery } from '@/utils/useProjectsQuery';
 import { useProjectsStore } from '@/utils/useProjects';
@@ -22,7 +26,6 @@ import ProjectsFilterDropdown from '@/Components/Common/Project/ProjectsFilterDr
 import ProjectStatusFilterBadge from '@/Components/Common/Project/ProjectStatusFilterBadge.vue';
 import ProjectClientFilterBadge from '@/Components/Common/Project/ProjectClientFilterBadge.vue';
 import { NO_CLIENT_ID } from '@/Components/Common/Project/constants';
-import type { SortColumn, SortDirection } from '@/Components/Common/Project/ProjectTable.vue';
 
 // Fetch data using TanStack Query
 const { projects } = useProjectsQuery();
@@ -53,9 +56,14 @@ const tableState = useStorage<ProjectTableState>(
     { mergeDefaults: true }
 );
 
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
+// Handle sorting - toggle direction if same column, otherwise set new column with asc
+function handleSort(column: SortColumn) {
+    if (tableState.value.sortColumn === column) {
+        tableState.value.sortDirection = tableState.value.sortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+        tableState.value.sortColumn = column;
+        tableState.value.sortDirection = 'asc';
+    }
 }
 
 // Filter projects based on current filters

resources/js/Pages/ReportingDetailed.vue

@@ -9,17 +9,7 @@ import {
     ChevronRightIcon,
     ChevronDoubleRightIcon,
     ClockIcon,
-    EllipsisVerticalIcon,
-    ArrowDownTrayIcon,
-    LockClosedIcon,
 } from '@heroicons/vue/20/solid';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/Components/ui/dropdown-menu';
-import { SecondaryButton } from '@/packages/ui/src';
 import { computed, onMounted, ref, watch } from 'vue';
 import { getDayJsInstance, getLocalizedDayJs } from '@/packages/ui/src/utils/time';
 import { storeToRefs } from 'pinia';
@@ -56,7 +46,7 @@ import {
 import { useQueryClient } from '@tanstack/vue-query';
 import { getCurrentOrganizationId, getCurrentMembershipId } from '@/utils/useUser';
 import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
-import UpgradeModal from '@/Components/Common/UpgradeModal.vue';
+import ReportingExportButton from '@/Components/Common/Reporting/ReportingExportButton.vue';
 import type { ExportFormat } from '@/types/reporting';
 import { useNotificationsStore } from '@/utils/notification';
 import TimeEntryMassActionRow from '@/packages/ui/src/TimeEntry/TimeEntryMassActionRow.vue';
@@ -170,19 +160,6 @@ const selectedTimeEntries = ref<TimeEntry[]>([]);
 
 const showExportModal = ref(false);
 const exportUrl = ref<string | null>(null);
-const showPremiumModal = ref(false);
-const exportLoading = ref(false);
-
-function triggerExport(format: ExportFormat) {
-    if (format === 'pdf' && !isAllowedToPerformPremiumAction()) {
-        showPremiumModal.value = true;
-        return;
-    }
-    exportLoading.value = true;
-    downloadExport(format).finally(() => {
-        exportLoading.value = false;
-    });
-}
 
 async function createTag(name: string) {
     return await useTagsStore().createTag(name);
@@ -259,74 +236,13 @@ async function downloadExport(format: ExportFormat) {
         <ReportingExportModal
             v-model:show="showExportModal"
             :export-url="exportUrl"></ReportingExportModal>
-        <UpgradeModal v-model:show="showPremiumModal">
-            <strong>PDF Reports</strong> are only available in solidtime Professional.
-        </UpgradeModal>
         <MainContainer
-            class="h-14 sm:h-16 border-b border-default-background-separator flex flex-wrap gap-y-3 justify-between items-center">
+            class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-3 sm:space-x-6">
                 <PageTitle :icon="ChartBarIcon" title="Reporting"></PageTitle>
-                <ReportingTabNavbar active="detailed" class="hidden sm:flex"></ReportingTabNavbar>
+                <ReportingTabNavbar active="detailed"></ReportingTabNavbar>
             </div>
-            <div class="hidden sm:block">
-                <DropdownMenu>
-                    <DropdownMenuTrigger as-child>
-                        <SecondaryButton :icon="ArrowDownTrayIcon" :loading="exportLoading">
-                            Export
-                        </SecondaryButton>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                        <DropdownMenuItem @click="triggerExport('pdf')">
-                            <div class="flex items-center space-x-2">
-                                <span>Export as PDF</span>
-                                <LockClosedIcon
-                                    v-if="!isAllowedToPerformPremiumAction()"
-                                    class="w-3.5 text-text-tertiary" />
-                            </div>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem @click="triggerExport('xlsx')">
-                            Export as Excel
-                        </DropdownMenuItem>
-                        <DropdownMenuItem @click="triggerExport('csv')">
-                            Export as CSV
-                        </DropdownMenuItem>
-                        <DropdownMenuItem @click="triggerExport('ods')">
-                            Export as ODS
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            </div>
-            <DropdownMenu>
-                <DropdownMenuTrigger as-child class="sm:hidden">
-                    <button
-                        class="p-1.5 rounded-lg border border-border-tertiary text-text-secondary hover:text-text-primary hover:bg-secondary transition"
-                        aria-label="More options">
-                        <EllipsisVerticalIcon class="w-5 h-5" />
-                    </button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                    <DropdownMenuItem @click="triggerExport('pdf')">
-                        <div class="flex items-center space-x-2">
-                            <span>Export as PDF</span>
-                            <LockClosedIcon
-                                v-if="!isAllowedToPerformPremiumAction()"
-                                class="w-3.5 text-text-tertiary" />
-                        </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem @click="triggerExport('xlsx')">
-                        Export as Excel
-                    </DropdownMenuItem>
-                    <DropdownMenuItem @click="triggerExport('csv')">
-                        Export as CSV
-                    </DropdownMenuItem>
-                    <DropdownMenuItem @click="triggerExport('ods')">
-                        Export as ODS
-                    </DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </MainContainer>
-        <MainContainer class="sm:hidden py-2 border-b border-default-background-separator">
-            <ReportingTabNavbar active="detailed"></ReportingTabNavbar>
+            <ReportingExportButton :download="downloadExport"></ReportingExportButton>
         </MainContainer>
 
         <ReportingFilterBar

resources/js/Pages/ReportingShared.vue

@@ -2,10 +2,29 @@
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
-import { ChartBarIcon, CreditCardIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
-import { computed } from 'vue';
+import {
+    ChartBarIcon,
+    ChevronLeftIcon,
+    ChevronDoubleLeftIcon,
+    ChevronRightIcon,
+    ChevronDoubleRightIcon,
+    CreditCardIcon,
+    UserGroupIcon,
+} from '@heroicons/vue/20/solid';
+import { computed, ref, watch } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
+import { api, type ReportIndexResponse } from '@/packages/api/src';
+import {
+    PaginationEllipsis,
+    PaginationFirst,
+    PaginationLast,
+    PaginationList,
+    PaginationListItem,
+    PaginationNext,
+    PaginationPrev,
+    PaginationRoot,
+} from 'radix-vue';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
 import ReportTable from '@/Components/Common/Report/ReportTable.vue';
@@ -13,37 +32,49 @@ import { isAllowedToPerformPremiumAction, isBillingActivated } from '@/utils/bil
 import { canManageBilling, canUpdateOrganization } from '@/utils/permissions';
 import PrimaryButton from '../packages/ui/src/Buttons/PrimaryButton.vue';
 import { Link } from '@inertiajs/vue3';
-import { fetchAllReports } from '@/utils/useReportsQuery';
 
-const { data: reportsData } = useQuery({
-    queryKey: computed(() => ['reports', getCurrentOrganizationId()]),
+const pageLimit = 15;
+const currentPage = ref(1);
+
+const { data: reportsResponse } = useQuery<ReportIndexResponse>({
+    queryKey: ['reports', currentPage],
     enabled: !!getCurrentOrganizationId(),
-    queryFn: async () => {
-        const organizationId = getCurrentOrganizationId();
-        if (!organizationId) throw new Error('No organization');
-        const data = await fetchAllReports(organizationId);
-        return { data };
-    },
-    staleTime: 1000 * 30,
+    queryFn: () =>
+        api.getReports({
+            params: {
+                organization: getCurrentOrganizationId() || '',
+            },
+        }),
 });
 
 const reports = computed(() => {
-    return reportsData.value?.data ?? [];
+    return reportsResponse.value?.data ?? [];
+});
+
+const totalPages = computed(() => {
+    return 1;
+});
+
+const queryClient = useQueryClient();
+async function updateFilteredTimeEntries() {
+    await queryClient.invalidateQueries({
+        queryKey: ['reports'],
+    });
+}
+watch(currentPage, () => {
+    updateFilteredTimeEntries();
 });
 </script>
 
 <template>
     <AppLayout title="Reporting" data-testid="reporting_view" class="overflow-hidden">
         <MainContainer
-            class="h-14 sm:h-16 border-b border-default-background-separator flex flex-wrap gap-y-3 justify-between items-center">
+            class="py-3 sm:py-5 min-h-[79px] border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-3 sm:space-x-6">
                 <PageTitle :icon="ChartBarIcon" title="Reporting"></PageTitle>
-                <ReportingTabNavbar active="shared" class="hidden sm:flex"></ReportingTabNavbar>
+                <ReportingTabNavbar active="shared"></ReportingTabNavbar>
             </div>
         </MainContainer>
-        <MainContainer class="sm:hidden py-2 border-b border-default-background-separator">
-            <ReportingTabNavbar active="shared"></ReportingTabNavbar>
-        </MainContainer>
 
         <div v-if="!isAllowedToPerformPremiumAction()">
             <div class="py-12">
@@ -76,5 +107,64 @@ const reports = computed(() => {
         <ReportTable
             v-if="reports.length > 0 || isAllowedToPerformPremiumAction()"
             :reports="reports"></ReportTable>
+
+        <PaginationRoot
+            v-if="reports.length > 0 || isAllowedToPerformPremiumAction()"
+            v-model:page="currentPage"
+            :total="totalPages"
+            :items-per-page="pageLimit"
+            class="flex justify-center items-center py-8"
+            :sibling-count="1"
+            show-edges>
+            <PaginationList v-slot="{ items }" class="flex items-center space-x-1 relative">
+                <div class="pr-2 flex items-center space-x-1 border-r border-border-primary mr-1">
+                    <PaginationFirst class="navigation-item">
+                        <ChevronDoubleLeftIcon class="w-4"> </ChevronDoubleLeftIcon>
+                    </PaginationFirst>
+                    <PaginationPrev class="mr-4 navigation-item">
+                        <ChevronLeftIcon class="w-4 text-text-tertiary hover:text-text-primary">
+                        </ChevronLeftIcon>
+                    </PaginationPrev>
+                </div>
+                <template v-for="(page, index) in items">
+                    <PaginationListItem
+                        v-if="page.type === 'page'"
+                        :key="index"
+                        class="pagination-item"
+                        :value="page.value">
+                        {{ page.value }}
+                    </PaginationListItem>
+                    <PaginationEllipsis
+                        v-else
+                        :key="page.type"
+                        :index="index"
+                        class="PaginationEllipsis">
+                        <div class="px-2">&#8230;</div>
+                    </PaginationEllipsis>
+                </template>
+                <div class="!ml-2 pl-2 flex items-center space-x-1 border-l border-border-primary">
+                    <PaginationNext class="navigation-item">
+                        <ChevronRightIcon
+                            class="w-4 text-text-tertiary hover:text-text-primary"></ChevronRightIcon>
+                    </PaginationNext>
+                    <PaginationLast class="navigation-item">
+                        <ChevronDoubleRightIcon
+                            class="w-4 text-text-tertiary hover:text-text-primary"></ChevronDoubleRightIcon>
+                    </PaginationLast>
+                </div>
+            </PaginationList>
+        </PaginationRoot>
     </AppLayout>
 </template>
+<style lang="postcss">
+.navigation-item {
+    @apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
+}
+
+.pagination-item {
+    @apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
+}
+.pagination-item[data-selected] {
+    @apply text-text-primary bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-ring transition ease-in-out duration-150;
+}
+</style>

resources/js/Pages/SharedReport.vue

@@ -222,7 +222,6 @@ onMounted(async () => {
                                 :key="entry.description ?? 'none'"
                                 :currency="reportCurrency"
                                 :currency-format="reportCurrencyFormat"
-                                :show-cost="true"
                                 :entry="entry"></ReportingRow>
                             <div
                                 class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
@@ -240,15 +239,12 @@ onMounted(async () => {
                                 </div>
                                 <div class="justify-end pr-6 flex items-center font-medium">
                                     {{
-                                        aggregatedTableTimeEntries.cost
-                                            ? formatCents(
-                                                  aggregatedTableTimeEntries.cost,
-                                                  reportCurrency,
-                                                  reportCurrencyFormat,
-                                                  reportCurrencySymbol,
-                                                  reportNumberFormat
-                                              )
-                                            : '--'
+                                        formatCents(
+                                            aggregatedTableTimeEntries.cost,
+                                            reportCurrency,
+                                            reportCurrencyFormat,
+                                            reportCurrencySymbol
+                                        )
                                     }}
                                 </div>
                             </div>

resources/js/Pages/Tags.vue

@@ -9,31 +9,9 @@ import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import { canCreateTags } from '@/utils/permissions';
 import { useTagsStore } from '@/utils/useTags';
-import { useStorage } from '@vueuse/core';
-import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
 
 const showCreateTagModal = ref(false);
 
-interface TagTableState {
-    sortColumn: SortColumn;
-    sortDirection: SortDirection;
-}
-
-const tableState = useStorage<TagTableState>(
-    'tag-table-state',
-    {
-        sortColumn: 'name',
-        sortDirection: 'asc',
-    },
-    undefined,
-    { mergeDefaults: true }
-);
-
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
-}
-
 async function createTag(tag: string) {
     return await useTagsStore().createTag(tag);
 }
@@ -56,10 +34,6 @@ async function createTag(tag: string) {
                 v-model:show="showCreateTagModal"
                 :create-tag="createTag"></TagCreateModal>
         </MainContainer>
-        <TagTable
-            :create-tag="createTag"
-            :sort-column="tableState.sortColumn"
-            :sort-direction="tableState.sortDirection"
-            @sort="handleSort"></TagTable>
+        <TagTable :create-tag="createTag"></TagTable>
     </AppLayout>
 </template>

resources/js/Pages/Time.vue

@@ -32,8 +32,7 @@ import { useClientsStore } from '@/utils/useClients';
 import { useTimeEntriesInfiniteQuery } from '@/utils/useTimeEntriesInfiniteQuery';
 import { useTimeEntriesMutations } from '@/utils/useTimeEntriesMutations';
 
-const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isPending } =
-    useTimeEntriesInfiniteQuery();
+const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useTimeEntriesInfiniteQuery();
 const {
     createTimeEntry: createTimeEntryMutation,
     updateTimeEntry,
@@ -146,10 +145,7 @@ function deleteSelected() {
             :currency="getOrganizationCurrencyString()"
             :time-entries="timeEntries"
             :tags="tags"></TimeEntryGroupedTable>
-        <div v-if="isPending" class="flex justify-center items-center py-12">
-            <LoadingSpinner></LoadingSpinner>
-        </div>
-        <div v-else-if="timeEntries.length === 0" class="text-center pt-12">
+        <div v-if="timeEntries.length === 0" class="text-center pt-12">
             <ClockIcon class="w-8 text-icon-default inline pb-2"></ClockIcon>
             <h3 class="text-text-primary font-semibold">No time entries found</h3>
             <p class="pb-5">Create your first time entry now!</p>
@@ -162,7 +158,7 @@ function deleteSelected() {
                 <span> Loading more time entries... </span>
             </div>
             <div
-                v-else-if="!hasNextPage && timeEntries.length > 0"
+                v-else-if="!hasNextPage"
                 class="flex justify-center items-center py-5 text-sm text-text-tertiary">
                 All time entries are loaded!
             </div>

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

@@ -33,6 +33,7 @@ const ClientResource = z
         updated_at: z.string(),
     })
     .passthrough();
+const ClientCollection = z.array(ClientResource);
 const ClientStoreRequest = z.object({ name: z.string().min(1).max(255) }).passthrough();
 const ClientUpdateRequest = z
     .object({ name: z.string().min(1).max(255), is_archived: z.boolean().optional() })
@@ -597,6 +598,7 @@ const DetailedWithDataReportResource = z
 const TagResource = z
     .object({ id: z.string(), name: z.string(), created_at: z.string(), updated_at: z.string() })
     .passthrough();
+const TagCollection = z.array(TagResource);
 const TagStoreRequest = z.object({ name: z.string().min(1).max(255) }).passthrough();
 const TagUpdateRequest = z.object({ name: z.string().min(1).max(255) }).passthrough();
 const TaskResource = z
@@ -709,6 +711,7 @@ export const schemas = {
     ApiTokenStoreRequest,
     ApiTokenWithAccessTokenResource,
     ClientResource,
+    ClientCollection,
     ClientStoreRequest,
     ClientUpdateRequest,
     ImportRequest,
@@ -752,6 +755,7 @@ export const schemas = {
     ReportUpdateRequest,
     DetailedWithDataReportResource,
     TagResource,
+    TagCollection,
     TagStoreRequest,
     TagUpdateRequest,
     TaskResource,
@@ -1197,39 +1201,7 @@ const endpoints = makeApi([
                 schema: z.enum(['true', 'false', 'all']).optional(),
             },
         ],
-        response: z
-            .object({
-                data: z.array(ClientResource),
-                links: z
-                    .object({
-                        first: z.union([z.string(), z.null()]),
-                        last: z.union([z.string(), z.null()]),
-                        prev: z.union([z.string(), z.null()]),
-                        next: z.union([z.string(), z.null()]),
-                    })
-                    .passthrough(),
-                meta: z
-                    .object({
-                        current_page: z.number().int(),
-                        from: z.union([z.number(), z.null()]),
-                        last_page: z.number().int(),
-                        links: z.array(
-                            z
-                                .object({
-                                    url: z.union([z.string(), z.null()]),
-                                    label: z.string(),
-                                    active: z.boolean(),
-                                })
-                                .passthrough()
-                        ),
-                        path: z.union([z.string(), z.null()]),
-                        per_page: z.number().int(),
-                        to: z.union([z.number(), z.null()]),
-                        total: z.number().int(),
-                    })
-                    .passthrough(),
-            })
-            .passthrough(),
+        response: z.object({ data: ClientCollection }).passthrough(),
         errors: [
             {
                 status: 401,
@@ -1540,11 +1512,6 @@ const endpoints = makeApi([
                 type: 'Path',
                 schema: z.string(),
             },
-            {
-                name: 'page',
-                type: 'Query',
-                schema: z.number().int().gte(1).lte(2147483647).optional(),
-            },
         ],
         response: z
             .object({
@@ -2170,11 +2137,6 @@ const endpoints = makeApi([
                 type: 'Path',
                 schema: z.string(),
             },
-            {
-                name: 'page',
-                type: 'Query',
-                schema: z.number().int().gte(1).lte(2147483647).optional(),
-            },
         ],
         response: z
             .object({
@@ -2780,11 +2742,6 @@ const endpoints = makeApi([
                 type: 'Path',
                 schema: z.string(),
             },
-            {
-                name: 'page',
-                type: 'Query',
-                schema: z.number().int().gte(1).lte(2147483647).optional(),
-            },
         ],
         response: z
             .object({
@@ -2835,13 +2792,6 @@ 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(),
-            },
         ],
     },
     {
@@ -2910,11 +2860,6 @@ const endpoints = makeApi([
                 type: 'Path',
                 schema: z.string(),
             },
-            {
-                name: 'page',
-                type: 'Query',
-                schema: z.number().int().gte(1).lte(2147483647).optional(),
-            },
         ],
         response: z
             .object({
@@ -2965,13 +2910,6 @@ 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(),
-            },
         ],
     },
     {
@@ -3148,45 +3086,8 @@ const endpoints = makeApi([
                 type: 'Path',
                 schema: z.string(),
             },
-            {
-                name: 'page',
-                type: 'Query',
-                schema: z.number().int().gte(1).lte(2147483647).optional(),
-            },
         ],
-        response: z
-            .object({
-                data: z.array(TagResource),
-                links: z
-                    .object({
-                        first: z.union([z.string(), z.null()]),
-                        last: z.union([z.string(), z.null()]),
-                        prev: z.union([z.string(), z.null()]),
-                        next: z.union([z.string(), z.null()]),
-                    })
-                    .passthrough(),
-                meta: z
-                    .object({
-                        current_page: z.number().int(),
-                        from: z.union([z.number(), z.null()]),
-                        last_page: z.number().int(),
-                        links: z.array(
-                            z
-                                .object({
-                                    url: z.union([z.string(), z.null()]),
-                                    label: z.string(),
-                                    active: z.boolean(),
-                                })
-                                .passthrough()
-                        ),
-                        path: z.union([z.string(), z.null()]),
-                        per_page: z.number().int(),
-                        to: z.union([z.number(), z.null()]),
-                        total: z.number().int(),
-                    })
-                    .passthrough(),
-            })
-            .passthrough(),
+        response: z.object({ data: TagCollection }).passthrough(),
         errors: [
             {
                 status: 401,
@@ -3203,13 +3104,6 @@ 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(),
-            },
         ],
     },
     {
@@ -3357,11 +3251,6 @@ const endpoints = makeApi([
                 type: 'Path',
                 schema: z.string(),
             },
-            {
-                name: 'page',
-                type: 'Query',
-                schema: z.number().int().gte(1).lte(2147483647).optional(),
-            },
             {
                 name: 'project_id',
                 type: 'Query',
@@ -4341,11 +4230,6 @@ If the group parameters are all set to `null` or are all missing, the
                 type: 'Query',
                 schema: z.array(z.string().uuid()).min(1).optional(),
             },
-            {
-                name: 'client_ids',
-                type: 'Query',
-                schema: z.array(z.string()).min(1).optional(),
-            },
             {
                 name: 'project_ids',
                 type: 'Query',

resources/js/packages/ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@solidtime/ui",
-    "version": "0.0.16",
+    "version": "0.0.15",
     "description": "Package containing the solidtime ui components",
     "main": "./dist/solidtime-ui-lib.umd.cjs",
     "module": "./dist/solidtime-ui-lib.js",

resources/js/packages/ui/postcss.config.js

@@ -0,0 +1,8 @@
+export default {
+    plugins: {
+        'postcss-import': {},
+        'tailwindcss/nesting': {},
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

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

@@ -21,7 +21,7 @@ const props = withDefaults(
     <button
         :type="type"
         :disabled="loading"
-        class="inline-flex items-center h-9 px-3 text-sm bg-button-primary-background border border-button-primary-border rounded-md font-medium text-button-primary-text hover:bg-button-primary-background-hover active:bg-button-primary-background-hover focus:outline-none focus-visible:ring-2 focus-visible:border-transparent focus-visible:ring-ring transition ease-in-out duration-150">
+        class="inline-flex items-center px-3 py-2 bg-button-primary-background border border-button-primary-border rounded-md font-medium text-xs sm:text-sm text-button-primary-text hover:bg-button-primary-background-hover active:bg-button-primary-background-hover focus:outline-none focus-visible:ring-2 focus-visible:border-transparent focus-visible:ring-ring transition ease-in-out duration-150">
         <span :class="twMerge('flex items-center ', props.icon ? 'space-x-1.5' : '')">
             <LoadingSpinner v-if="loading"></LoadingSpinner>
             <component

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

@@ -22,7 +22,7 @@ const props = withDefaults(
 
 const sizeClasses = {
     small: 'text-xs px-2.5 py-1.5',
-    base: 'h-9 px-3 text-sm',
+    base: 'text-xs sm:text-sm px-3 py-2',
 };
 </script>
 

resources/js/packages/ui/src/FullCalendar/CalendarSettingsPopover.vue

@@ -1,198 +0,0 @@
-<script setup lang="ts">
-import { Popover, PopoverContent, PopoverTrigger, Button } from '..';
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/Components/ui/select';
-import { Field, FieldLabel } from '../field';
-import { Settings } from 'lucide-vue-next';
-import { ref, watch } from 'vue';
-import type { CalendarSettings } from './calendarSettings';
-
-export type { CalendarSettings };
-
-const props = defineProps<{
-    settings: CalendarSettings;
-}>();
-
-const emit = defineEmits<{
-    'update:settings': [value: CalendarSettings];
-}>();
-
-const snapMinutes = ref(String(props.settings.snapMinutes));
-const startHour = ref(String(props.settings.startHour));
-const endHour = ref(String(props.settings.endHour));
-const slotMinutes = ref(String(props.settings.slotMinutes));
-
-watch(
-    () => props.settings,
-    (s) => {
-        snapMinutes.value = String(s.snapMinutes);
-        startHour.value = String(s.startHour);
-        endHour.value = String(s.endHour);
-        slotMinutes.value = String(s.slotMinutes);
-    }
-);
-
-function emitUpdate(partial: Partial<CalendarSettings>) {
-    emit('update:settings', { ...props.settings, ...partial });
-}
-
-function onSnapChange(value: string) {
-    snapMinutes.value = value;
-    emitUpdate({ snapMinutes: parseInt(value) });
-}
-
-function onStartHourChange(value: string) {
-    const newStart = parseInt(value);
-    // Ensure start < end
-    if (newStart >= parseInt(endHour.value)) {
-        startHour.value = String(props.settings.startHour);
-        return;
-    }
-    startHour.value = value;
-    emitUpdate({ startHour: newStart });
-}
-
-function onEndHourChange(value: string) {
-    const newEnd = parseInt(value);
-    // Ensure end > start
-    if (newEnd <= parseInt(startHour.value)) {
-        endHour.value = String(props.settings.endHour);
-        return;
-    }
-    endHour.value = value;
-    emitUpdate({ endHour: newEnd });
-}
-
-function onSlotChange(value: string) {
-    slotMinutes.value = value;
-    emitUpdate({ slotMinutes: parseInt(value) });
-}
-
-const snapOptions = [
-    { value: '1', label: '1 min' },
-    { value: '5', label: '5 min' },
-    { value: '10', label: '10 min' },
-    { value: '15', label: '15 min' },
-    { value: '30', label: '30 min' },
-    { value: '60', label: '1 hour' },
-];
-
-const slotOptions = [
-    { value: '5', label: '5 min' },
-    { value: '10', label: '10 min' },
-    { value: '15', label: '15 min' },
-    { value: '30', label: '30 min' },
-    { value: '60', label: '1 hour' },
-];
-
-// Generate hour options 0-24
-const hourOptions = Array.from({ length: 25 }, (_, i) => ({
-    value: String(i),
-    label:
-        i === 0
-            ? '12:00 AM'
-            : i === 12
-              ? '12:00 PM'
-              : i === 24
-                ? '12:00 AM (next)'
-                : i < 12
-                  ? `${i}:00 AM`
-                  : `${i - 12}:00 PM`,
-}));
-</script>
-
-<template>
-    <Popover>
-        <PopoverTrigger as-child>
-            <Button variant="outline" size="sm" aria-label="Calendar settings" class="h-8 w-8 p-0">
-                <Settings class="h-4 w-4 text-muted-foreground" />
-            </Button>
-        </PopoverTrigger>
-        <PopoverContent align="end" class="w-72 p-4">
-            <div class="space-y-4">
-                <div class="text-sm font-semibold">Calendar Settings</div>
-
-                <Field>
-                    <FieldLabel for="calendar-snap">Snap Interval</FieldLabel>
-                    <Select
-                        :model-value="snapMinutes"
-                        @update:model-value="(v) => onSnapChange(v as string)">
-                        <SelectTrigger id="calendar-snap" size="sm" class="w-full">
-                            <SelectValue placeholder="Snap interval" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem
-                                v-for="opt in snapOptions"
-                                :key="opt.value"
-                                :value="opt.value">
-                                {{ opt.label }}
-                            </SelectItem>
-                        </SelectContent>
-                    </Select>
-                </Field>
-
-                <Field>
-                    <FieldLabel for="calendar-start-hour">Start Time</FieldLabel>
-                    <Select
-                        :model-value="startHour"
-                        @update:model-value="(v) => onStartHourChange(v as string)">
-                        <SelectTrigger id="calendar-start-hour" size="sm" class="w-full">
-                            <SelectValue placeholder="Start time" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem
-                                v-for="opt in hourOptions.slice(0, -1)"
-                                :key="opt.value"
-                                :value="opt.value">
-                                {{ opt.label }}
-                            </SelectItem>
-                        </SelectContent>
-                    </Select>
-                </Field>
-
-                <Field>
-                    <FieldLabel for="calendar-end-hour">End Time</FieldLabel>
-                    <Select
-                        :model-value="endHour"
-                        @update:model-value="(v) => onEndHourChange(v as string)">
-                        <SelectTrigger id="calendar-end-hour" size="sm" class="w-full">
-                            <SelectValue placeholder="End time" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem
-                                v-for="opt in hourOptions.slice(1)"
-                                :key="opt.value"
-                                :value="opt.value">
-                                {{ opt.label }}
-                            </SelectItem>
-                        </SelectContent>
-                    </Select>
-                </Field>
-
-                <Field>
-                    <FieldLabel for="calendar-scale">Grid Scale</FieldLabel>
-                    <Select
-                        :model-value="slotMinutes"
-                        @update:model-value="(v) => onSlotChange(v as string)">
-                        <SelectTrigger id="calendar-scale" size="sm" class="w-full">
-                            <SelectValue placeholder="Grid scale" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem
-                                v-for="opt in slotOptions"
-                                :key="opt.value"
-                                :value="opt.value">
-                                {{ opt.label }}
-                            </SelectItem>
-                        </SelectContent>
-                    </Select>
-                </Field>
-            </div>
-        </PopoverContent>
-    </Popover>
-</template>

resources/js/packages/ui/src/FullCalendar/FullCalendarDayHeader.vue

@@ -6,10 +6,10 @@ import type { Dayjs } from 'dayjs';
 
 const props = defineProps<{
     date: Dayjs;
-    totalSeconds?: number;
+    totalMinutes?: number;
 }>();
 
-const totalSecondsValue = computed(() => props.totalSeconds ?? 0);
+const totalSeconds = computed(() => (props.totalMinutes ?? 0) * 60);
 
 // Injected organization for formatting settings
 const organization = inject('organization') as ComputedRef<Organization | undefined> | undefined;
@@ -25,7 +25,7 @@ const dateFormat = computed(() => organization?.value?.date_format);
         </div>
         <span class="text-xs">{{ formatDate(date.toISOString(), dateFormat) }}</span>
         <span class="block text-xs text-muted-foreground font-medium mt-1">
-            {{ formatHumanReadableDuration(totalSecondsValue, intervalFormat, numberFormat) }}
+            {{ formatHumanReadableDuration(totalSeconds, intervalFormat, numberFormat) }}
         </span>
     </div>
 </template>

resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue

@@ -15,22 +15,13 @@ import {
     onActivated,
     onUnmounted,
 } from 'vue';
-import { useLocalStorage } from '@vueuse/core';
 import chroma from 'chroma-js';
 import { useCssVariable } from '@/utils/useCssVariable';
-import {
-    getDayJsInstance,
-    getLocalizedDayJs,
-    formatHumanReadableDuration,
-    formatDuration,
-} from '../utils/time';
+import { getDayJsInstance, getLocalizedDayJs } from '../utils/time';
 import { getUserTimezone, getWeekStart } from '../utils/settings';
 import { LoadingSpinner, TimeEntryCreateModal, TimeEntryEditModal } from '..';
 import FullCalendarEventContent from './FullCalendarEventContent.vue';
 import FullCalendarDayHeader from './FullCalendarDayHeader.vue';
-import CalendarSettingsPopover from './CalendarSettingsPopover.vue';
-import type { CalendarSettings } from './calendarSettings';
-import { useVisualSnap } from './useVisualSnap';
 import activityStatusPlugin, {
     type ActivityPeriod,
     renderActivityStatusBoxes,
@@ -90,22 +81,6 @@ const selectedTimeEntry = ref<TimeEntry | null>(null);
 
 const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null);
 
-// Calendar settings with localStorage persistence via VueUse
-const calendarSettings = useLocalStorage<CalendarSettings>(
-    'solidtime:calendar-settings',
-    {
-        snapMinutes: 15,
-        startHour: 0,
-        endHour: 24,
-        slotMinutes: 15,
-    },
-    { mergeDefaults: true }
-);
-
-function onSettingsUpdate(newSettings: CalendarSettings) {
-    calendarSettings.value = newSettings;
-}
-
 // Reactive "now" for running time entry - updates every minute
 const currentTime = ref(getDayJsInstance()());
 let currentTimeInterval: ReturnType<typeof setInterval> | null = null;
@@ -204,20 +179,20 @@ const dailyTotals = computed(() => {
     const totals: Record<string, number> = {};
     props.timeEntries.forEach((entry) => {
         const date = getDayJsInstance()(entry.start).format('YYYY-MM-DD');
-        let durationSeconds: number;
+        let duration: number;
 
         if (entry.end !== null) {
             // Completed entry
-            durationSeconds = getDayJsInstance()(entry.end).diff(
+            duration = getDayJsInstance()(entry.end).diff(
                 getDayJsInstance()(entry.start),
-                'seconds'
+                'minutes'
             );
         } else {
             // Running entry - use current time
-            durationSeconds = currentTime.value.diff(getDayJsInstance()(entry.start), 'seconds');
+            duration = currentTime.value.diff(getDayJsInstance()(entry.start), 'minutes');
         }
 
-        totals[date] = (totals[date] || 0) + durationSeconds;
+        totals[date] = (totals[date] || 0) + duration;
     });
     return totals;
 });
@@ -229,19 +204,16 @@ function emitDatesChange(arg: DatesSetArg) {
 }
 
 function handleDateSelect(arg: { start: Date; end: Date }) {
-    stopVisualSnap();
-    const snap = calendarSettings.value.snapMinutes;
-    const startLocal = getDayJsInstance()(arg.start.toISOString())
+    const startTime = getDayJsInstance()(arg.start.toISOString())
         .utc()
-        .tz(getUserTimezone(), true);
-    const endLocal = getDayJsInstance()(arg.end.toISOString()).utc().tz(getUserTimezone(), true);
-    const snappedStart = snapStartToGrid(startLocal, snap);
-    let snappedEnd = snapEndToGrid(endLocal, snap);
-    if (!snappedEnd.isAfter(snappedStart)) {
-        snappedEnd = snappedStart.add(snap, 'minute');
-    }
-    newEventStart.value = snappedStart.utc();
-    newEventEnd.value = snappedEnd.utc();
+        .tz(getUserTimezone(), true)
+        .utc();
+    const endTime = getDayJsInstance()(arg.end.toISOString())
+        .utc()
+        .tz(getUserTimezone(), true)
+        .utc();
+    newEventStart.value = startTime;
+    newEventEnd.value = endTime;
     showCreateTimeEntryModal.value = true;
 }
 
@@ -255,143 +227,90 @@ function handleEventClick(arg: EventClickArg) {
     showEditTimeEntryModal.value = true;
 }
 
-// Snap a dayjs time down to the previous snap boundary (for start times)
-function snapStartToGrid(time: Dayjs, snapMinutes: number): Dayjs {
-    const minutes = time.hour() * 60 + time.minute();
-    const snapped = Math.floor(minutes / snapMinutes) * snapMinutes;
-    return time.startOf('day').add(snapped, 'minute');
-}
-
-// Snap a dayjs time up to the next snap boundary (for end times)
-function snapEndToGrid(time: Dayjs, snapMinutes: number): Dayjs {
-    const minutes = time.hour() * 60 + time.minute();
-    const snapped = Math.ceil(minutes / snapMinutes) * snapMinutes;
-    return time.startOf('day').add(snapped, 'minute');
-}
-
-// --- Visual snap (composable) ---
-const {
-    startDragSnap: startVisualDragSnap,
-    startResizeSnap: startVisualResizeSnap,
-    stop: stopVisualSnap,
-} = useVisualSnap({
-    calendarRef,
-    snapMinutes: () => calendarSettings.value.snapMinutes,
-    slotMinutes: () => calendarSettings.value.slotMinutes,
-    formatDuration: (seconds) =>
-        formatHumanReadableDuration(
-            seconds,
-            organization?.value?.interval_format,
-            organization?.value?.number_format
-        ),
-});
-
 async function handleEventDrop(arg: EventDropArg) {
-    stopVisualSnap();
     const ext = arg.event.extendedProps as CalendarExtendedProps;
     const timeEntry = ext.timeEntry;
     if (!arg.event.start || !arg.event.end) return;
-    // Running entries have no end time — can't compute duration for drop
-    if (!timeEntry.end) return;
-    const snap = calendarSettings.value.snapMinutes;
-    const startLocal = getDayJsInstance()(arg.event.start.toISOString())
-        .utc()
-        .tz(getUserTimezone(), true)
-        .second(0);
-    const snappedStart = snapStartToGrid(startLocal, snap);
-    const durationMs = getLocalizedDayJs(timeEntry.end).diff(getLocalizedDayJs(timeEntry.start));
-    const snappedEnd = snappedStart.add(durationMs, 'millisecond');
-    // Set FC event to snapped position immediately to avoid flash
-    arg.event.setDates(snappedStart.utc(true).toDate(), snappedEnd.utc(true).toDate());
     const updatedTimeEntry = {
         ...timeEntry,
-        start: snappedStart.utc().format(),
-        end: snappedEnd.utc().format(),
+        start: getDayJsInstance()(arg.event.start.toISOString())
+            .utc()
+            .tz(getUserTimezone(), true)
+            .second(0)
+            .utc()
+            .format(),
+        end: getDayJsInstance()(arg.event.end.toISOString())
+            .utc()
+            .tz(getUserTimezone(), true)
+            .second(0)
+            .utc()
+            .format(),
     } as TimeEntry;
     await props.updateTimeEntry(updatedTimeEntry);
     emit('refresh');
 }
 
 async function handleEventResize(arg: EventChangeArg) {
-    stopVisualSnap();
     const ext = arg.event.extendedProps as CalendarExtendedProps;
     const timeEntry = ext.timeEntry;
     if (!arg.event.start || !arg.event.end) return;
-    const snap = calendarSettings.value.snapMinutes;
-
-    const newStartLocal = getDayJsInstance()(arg.event.start.toISOString())
-        .utc()
-        .tz(getUserTimezone(), true)
-        .second(0);
-    const newEndLocal = getDayJsInstance()(arg.event.end.toISOString())
-        .utc()
-        .tz(getUserTimezone(), true)
-        .second(0);
-    const origStartLocal = getLocalizedDayJs(timeEntry.start).second(0);
-
-    const startChanged = !newStartLocal.isSame(origStartLocal, 'minute');
-
-    // Snap only the changed edge once, reuse for both setDates and API update
-    const snappedStart = startChanged ? snapStartToGrid(newStartLocal, snap) : null;
-    const snappedEnd = !startChanged && !ext.isRunning ? snapEndToGrid(newEndLocal, snap) : null;
-
-    // Set FC event to snapped position immediately to avoid flash.
-    // Use the original event date for the edge that wasn't resized.
-    if (snappedStart) {
-        arg.event.setDates(snappedStart.utc(true).toDate(), arg.oldEvent.end!);
-    } else if (snappedEnd) {
-        arg.event.setDates(arg.oldEvent.start!, snappedEnd.utc(true).toDate());
-    }
     const updatedTimeEntry = {
         ...timeEntry,
-        start: snappedStart ? snappedStart.utc().format() : timeEntry.start,
-        end: ext.isRunning ? null : snappedEnd ? snappedEnd.utc().format() : timeEntry.end,
+        start: getDayJsInstance()(arg.event.start.toISOString())
+            .utc()
+            .tz(getUserTimezone(), true)
+            .second(0)
+            .utc()
+            .format(),
+        // Preserve null end for running entries
+        end: ext.isRunning
+            ? null
+            : getDayJsInstance()(arg.event.end.toISOString())
+                  .utc()
+                  .tz(getUserTimezone(), true)
+                  .second(0)
+                  .utc()
+                  .format(),
     } as TimeEntry;
     await props.updateTimeEntry(updatedTimeEntry);
     emit('refresh');
 }
 
-const calendarOptions = computed(() => {
-    const s = calendarSettings.value;
+const calendarOptions = computed(() => ({
+    plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, activityStatusPlugin],
+    initialView: 'timeGridWeek',
+    headerToolbar: {
+        left: 'prev,next today',
+        center: 'title',
+        right: 'timeGridWeek,timeGridDay',
+    },
+    height: 'parent',
+    slotMinTime: '00:00:00',
+    slotMaxTime: '24:00:00',
+    slotDuration: '00:15:00',
+    slotLabelInterval: '01:00:00',
+    slotLabelFormat: getSlotLabelFormat(),
+    snapDuration: '00:01:00',
+    firstDay: getFirstDay(),
+    allDaySlot: false,
+    nowIndicator: true,
+    eventMinHeight: 1,
+    selectable: true,
+    selectMirror: true,
+    editable: true,
+    eventResizableFromStart: true,
+    eventDurationEditable: true,
+    timeZone: getUserTimezone(),
+    eventStartEditable: true,
+    select: handleDateSelect,
+    eventClick: handleEventClick,
+    eventDrop: handleEventDrop,
+    eventResize: handleEventResize,
+    datesSet: emitDatesChange,
 
-    return {
-        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, activityStatusPlugin],
-        initialView: 'timeGridWeek',
-        headerToolbar: {
-            left: 'prev,next today',
-            center: 'title',
-            right: 'timeGridWeek,timeGridDay',
-        },
-        height: 'parent',
-        slotMinTime: formatDuration(s.startHour * 3600),
-        slotMaxTime: formatDuration(s.endHour * 3600),
-        slotDuration: formatDuration(s.slotMinutes * 60),
-        slotLabelInterval: '01:00:00',
-        slotLabelFormat: getSlotLabelFormat(),
-        snapDuration: '00:01:00',
-        firstDay: getFirstDay(),
-        allDaySlot: false,
-        nowIndicator: true,
-        eventMinHeight: 1,
-        selectable: true,
-        selectMirror: true,
-        editable: true,
-        eventResizableFromStart: true,
-        eventDurationEditable: true,
-        timeZone: getUserTimezone(),
-        eventStartEditable: true,
-        select: handleDateSelect,
-        eventClick: handleEventClick,
-        eventDragStart: startVisualDragSnap,
-        eventDrop: handleEventDrop,
-        eventResizeStart: startVisualResizeSnap,
-        eventResize: handleEventResize,
-        datesSet: emitDatesChange,
-
-        events: events.value,
-        activityPeriods: props.activityPeriods || [],
-    };
-});
+    events: events.value,
+    activityPeriods: props.activityPeriods || [],
+}));
 
 watch(showCreateTimeEntryModal, (value) => {
     if (!value) {
@@ -457,6 +376,7 @@ onActivated(() => {
 });
 
 onUnmounted(() => {
+    // Clean up interval
     if (currentTimeInterval) {
         clearInterval(currentTimeInterval);
         currentTimeInterval = null;
@@ -504,11 +424,6 @@ onUnmounted(() => {
             :clients="clients"
             :currency="currency"
             :can-create-project="canCreateProject" />
-        <div class="calendar-settings-trigger">
-            <CalendarSettingsPopover
-                :settings="calendarSettings"
-                @update:settings="onSettingsUpdate" />
-        </div>
         <FullCalendar ref="calendarRef" class="fullcalendar" :options="calendarOptions">
             <template #eventContent="arg">
                 <FullCalendarEventContent
@@ -529,7 +444,7 @@ onUnmounted(() => {
                     :date="
                         getDayJsInstance()(arg.date.toISOString()).utc().tz(getUserTimezone(), true)
                     "
-                    :total-seconds="
+                    :total-minutes="
                         dailyTotals[
                             getDayJsInstance()(arg.date)
                                 .utc()
@@ -543,13 +458,6 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.calendar-settings-trigger {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    z-index: 20;
-}
-
 .fullcalendar {
     height: 100%;
     --fc-border-color: var(--border);
@@ -574,7 +482,6 @@ onUnmounted(() => {
 .fullcalendar :deep(.fc-toolbar) {
     background-color: var(--background);
     padding: 0.5rem;
-    padding-right: 2.75rem;
     margin-bottom: 0;
 }
 
@@ -673,65 +580,36 @@ onUnmounted(() => {
     line-height: 1.2;
 }
 
-/* Resize handle hit areas */
+/* Enhanced FullCalendar resize handles */
 .fullcalendar :deep(.fc-event-resizer) {
     position: absolute;
     z-index: 99;
+    background: '#FFF';
+    border-radius: 2px;
     width: 100%;
-    height: 12px;
+    height: 4px;
     left: 0;
-    cursor: row-resize;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    transition: all 0.2s ease;
     opacity: 0;
-    transition: opacity 0.15s ease;
 }
 
 .fullcalendar :deep(.fc-event-resizer-start) {
     top: -2px;
+    cursor: n-resize;
 }
 
 .fullcalendar :deep(.fc-event-resizer-end) {
     bottom: -2px;
-}
-
-/* Visual grip indicator */
-.fullcalendar :deep(.fc-event-resizer::after) {
-    content: '';
-    width: 24px;
-    height: 3px;
-    border-radius: 1.5px;
-    background: rgba(255, 255, 255, 0.6);
-    transition: background 0.15s ease;
+    cursor: s-resize;
 }
 
 .fullcalendar :deep(.fc-event:hover .fc-event-resizer) {
     opacity: 1;
 }
 
-.fullcalendar :deep(.fc-event-resizer:hover::after) {
-    background: rgba(255, 255, 255, 0.9);
-}
-
-/* Keep resize cursor during active resize */
-.fullcalendar :deep(.fc-event-resizing),
-.fullcalendar :deep(.fc-event-resizing .fc-event-resizer) {
-    cursor: row-resize !important;
-}
-
-/* Keep event in hover state while resizing */
-.fullcalendar :deep(.fc-event-resizing) {
-    opacity: 1;
-    box-shadow: var(--theme-shadow-dropdown);
-}
-
-.fullcalendar :deep(.fc-event-resizing .fc-event-resizer) {
-    opacity: 1;
-}
-
-.fullcalendar :deep(.fc-event-resizing .fc-event-resizer::after) {
-    background: rgba(255, 255, 255, 0.9);
+.fullcalendar :deep(.fc-event-resizer:hover) {
+    background: '#FFF';
+    height: 6px;
 }
 
 /* Update the earlier hover rule to include the shadow */
@@ -754,10 +632,6 @@ onUnmounted(() => {
     border: 1px solid var(--primary);
 }
 
-.fullcalendar :deep(.fc-event-mirror) {
-    pointer-events: none;
-}
-
 .fullcalendar :deep(.fc-scrollgrid) {
     border: 1px solid var(--border);
     border-left: 1px solid transparent;
@@ -889,11 +763,3 @@ onUnmounted(() => {
     border-bottom-right-radius: 0px;
 }
 </style>
-
-<style>
-/* Global cursor override during resize — must be unscoped to affect body */
-body.fc-resizing-active,
-body.fc-resizing-active * {
-    cursor: row-resize !important;
-}
-</style>

resources/js/packages/ui/src/FullCalendar/calendarSettings.ts

@@ -1,6 +0,0 @@
-export interface CalendarSettings {
-    snapMinutes: number;
-    startHour: number;
-    endHour: number;
-    slotMinutes: number;
-}

resources/js/packages/ui/src/FullCalendar/useVisualSnap.ts

@@ -1,189 +0,0 @@
-import { onActivated, onDeactivated, onMounted, onUnmounted, type Ref } from 'vue';
-import type FullCalendar from '@fullcalendar/vue3';
-
-interface VisualSnapOptions {
-    calendarRef: Ref<InstanceType<typeof FullCalendar> | null>;
-    snapMinutes: () => number;
-    slotMinutes: () => number;
-    formatDuration: (durationSeconds: number) => string;
-}
-
-export function useVisualSnap({
-    calendarRef,
-    snapMinutes,
-    slotMinutes,
-    formatDuration,
-}: VisualSnapOptions) {
-    let rafId: number | null = null;
-
-    function getCalendarEl(): HTMLElement | null {
-        return (calendarRef.value?.$el as HTMLElement) ?? null;
-    }
-
-    function getSnapPixels(): number {
-        const calendarEl = getCalendarEl();
-        if (!calendarEl) return 25;
-        const slot = calendarEl.querySelector('.fc-timegrid-slot-lane') as HTMLElement;
-        if (!slot) return 25;
-        const slotHeightPx = slot.getBoundingClientRect().height;
-        return (snapMinutes() / slotMinutes()) * slotHeightPx;
-    }
-
-    function findMirrorHarness(calendarEl: HTMLElement) {
-        const mirror = calendarEl.querySelector('.fc-event-mirror') as HTMLElement | null;
-        const harness = mirror?.closest('.fc-timegrid-event-harness') as HTMLElement | null;
-        if (harness) {
-            harness.style.pointerEvents = 'none';
-        }
-        return { mirror, harness };
-    }
-
-    function updateMirrorDurationLabel(
-        mirror: HTMLElement,
-        snappedTop: number,
-        snappedEnd: number,
-        snapPx: number
-    ) {
-        const snappedDurationMin = Math.round((snappedEnd - snappedTop) / snapPx) * snapMinutes();
-        const durationText = formatDuration(snappedDurationMin * 60);
-        const durationEl = mirror.querySelector('.fc-event-main')?.querySelector('div:last-child');
-        if (durationEl) {
-            durationEl.textContent = durationText;
-        }
-    }
-
-    function startLoop(onFrame: (calendarEl: HTMLElement, snapPx: number) => void) {
-        const calendarEl = getCalendarEl();
-        if (!calendarEl) return;
-        const snapPx = getSnapPixels();
-        if (snapPx <= 0) return;
-
-        const loop = () => {
-            onFrame(calendarEl, snapPx);
-            rafId = requestAnimationFrame(loop);
-        };
-        rafId = requestAnimationFrame(loop);
-    }
-
-    function stop() {
-        document.body.classList.remove('fc-resizing-active');
-        if (rafId !== null) {
-            cancelAnimationFrame(rafId);
-            rafId = null;
-        }
-    }
-
-    // --- Public snap starters ---
-
-    function startSelectSnap() {
-        // Don't start if another snap loop is already running
-        if (rafId !== null) return;
-        startLoop((calendarEl, snapPx) => {
-            const { mirror, harness } = findMirrorHarness(calendarEl);
-            if (!harness || !mirror) return;
-
-            const top = parseFloat(harness.style.top) || 0;
-            const endPos = -(parseFloat(harness.style.bottom) || 0);
-            const snappedTop = Math.floor(top / snapPx) * snapPx;
-            const snappedEnd = Math.ceil(endPos / snapPx) * snapPx;
-            const clampedEnd = Math.max(snappedTop + snapPx, snappedEnd);
-            harness.style.top = snappedTop + 'px';
-            harness.style.bottom = -clampedEnd + 'px';
-            updateMirrorDurationLabel(mirror, snappedTop, clampedEnd, snapPx);
-        });
-    }
-
-    function startDragSnap() {
-        stop();
-        startLoop((calendarEl, snapPx) => {
-            const { harness } = findMirrorHarness(calendarEl);
-            if (!harness) return;
-
-            const top = parseFloat(harness.style.top) || 0;
-            const endPos = -(parseFloat(harness.style.bottom) || 0);
-            const height = endPos - top;
-            const snappedTop = Math.floor(top / snapPx) * snapPx;
-            harness.style.top = snappedTop + 'px';
-            harness.style.bottom = -(snappedTop + height) + 'px';
-        });
-    }
-
-    function startResizeSnap() {
-        stop();
-        document.body.classList.add('fc-resizing-active');
-
-        let initialTop: number | null = null;
-        let initialEnd: number | null = null;
-        let resizeEdge: 'top' | 'bottom' | null = null;
-
-        startLoop((calendarEl, snapPx) => {
-            const { mirror, harness } = findMirrorHarness(calendarEl);
-            if (!harness) return;
-
-            const top = parseFloat(harness.style.top) || 0;
-            const endPos = -(parseFloat(harness.style.bottom) || 0);
-
-            // Detect which edge is being resized
-            if (initialTop === null) {
-                initialTop = top;
-                initialEnd = endPos;
-            } else if (resizeEdge === null) {
-                const topDelta = Math.abs(top - initialTop);
-                const endDelta = Math.abs(endPos - initialEnd!);
-                if (topDelta > 0.5) {
-                    resizeEdge = 'top';
-                } else if (endDelta > 0.5) {
-                    resizeEdge = 'bottom';
-                }
-            }
-
-            if (resizeEdge === 'bottom') {
-                const snappedEnd = Math.ceil(endPos / snapPx) * snapPx;
-                const clampedEnd = Math.max(top + snapPx, snappedEnd);
-                harness.style.bottom = -clampedEnd + 'px';
-                if (mirror) updateMirrorDurationLabel(mirror, top, clampedEnd, snapPx);
-            } else if (resizeEdge === 'top') {
-                const snappedTop = Math.floor(top / snapPx) * snapPx;
-                const clampedTop = Math.min(endPos - snapPx, snappedTop);
-                harness.style.top = clampedTop + 'px';
-                if (mirror) updateMirrorDurationLabel(mirror, clampedTop, endPos, snapPx);
-            }
-        });
-    }
-
-    // Pointerdown handler for starting select snap on timegrid background
-    function handleTimegridPointerDown(e: PointerEvent) {
-        const target = e.target as HTMLElement;
-        if (target.closest('.fc-event')) return;
-        startSelectSnap();
-    }
-
-    // Lifecycle: attach/detach pointerdown listener
-    function attachListener() {
-        const calendarEl = getCalendarEl();
-        calendarEl?.addEventListener('pointerdown', handleTimegridPointerDown);
-    }
-
-    function detachListener() {
-        const calendarEl = getCalendarEl();
-        calendarEl?.removeEventListener('pointerdown', handleTimegridPointerDown);
-    }
-
-    onMounted(attachListener);
-    onActivated(attachListener);
-    onDeactivated(() => {
-        stop();
-        detachListener();
-    });
-    onUnmounted(() => {
-        stop();
-        detachListener();
-    });
-
-    return {
-        startSelectSnap,
-        startDragSnap,
-        startResizeSnap,
-        stop,
-    };
-}

resources/js/packages/ui/src/Icons/BillableIcon.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { computed, inject, type ComputedRef } from 'vue';
-import type { Organization } from '@/packages/api/src';
+import { computed } from 'vue';
+import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
+import { getCurrentOrganizationId } from '@/utils/useUser';
 import DollarIcon from './DollarIcon.vue';
 import EuroIcon from './EuroIcon.vue';
 
-const organization = inject<ComputedRef<Organization>>('organization');
-const icon = computed(() => (organization?.value?.currency === 'EUR' ? EuroIcon : DollarIcon));
+const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
+const icon = computed(() => (organization.value?.currency === 'EUR' ? EuroIcon : DollarIcon));
 </script>
 
 <template>

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

@@ -25,7 +25,7 @@ const model = defineModel();
         v-model="model"
         :class="
             twMerge(
-                'h-9 px-3 py-1 text-base sm:text-sm border-input-border border bg-input-background text-text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent rounded-md shadow-sm',
+                'h-9 px-3 py-1 text-sm border-input-border border bg-input-background text-text-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent rounded-md shadow-sm',
                 props.class
             )
         "