Updated invitation flow, Moved jetstream function to REST endpoints; Lower case email

the synced snapDuration cause incorrect noops on updates f.e. 15:55-16:00 on a 15 minute snap

app/Actions/Jetstream/AddOrganizationMember.php

@@ -4,18 +4,9 @@ declare(strict_types=1);
 
 namespace App\Actions\Jetstream;
 
-use App\Enums\Role;
+use App\Exceptions\MovedToApiException;
 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
@@ -25,70 +16,6 @@ class AddOrganizationMember implements AddsTeamMembers
      */
     public function add(User $owner, Organization $organization, string $email, ?string $role = null): void
     {
-        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.')
-            );
-        };
+        throw new MovedToApiException;
     }
 }

app/Actions/Jetstream/CreateOrganization.php

@@ -25,6 +25,8 @@ 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,6 +12,8 @@ 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,6 +16,8 @@ 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,6 +18,8 @@ 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

@@ -0,0 +1,28 @@
+<?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

@@ -0,0 +1,28 @@
+<?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,6 +35,7 @@ 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,6 +41,7 @@ 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,6 +60,7 @@ 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,11 +5,17 @@ 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
 {
@@ -80,4 +86,48 @@ 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,7 +60,9 @@ class ProjectController extends Controller
             $projectsQuery->whereNull('archived_at');
         }
 
-        $projects = $projectsQuery->paginate(config('app.pagination_per_page_default'));
+        $projects = $projectsQuery
+            ->orderBy('created_at', 'desc')
+            ->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,6 +6,7 @@ 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;
@@ -41,12 +42,13 @@ class ProjectMemberController extends Controller
      *
      * @operationId getProjectMembers
      */
-    public function index(Organization $organization, Project $project): ProjectMemberCollection
+    public function index(Organization $organization, Project $project, ProjectMemberIndexRequest $request): 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,6 +5,7 @@ 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;
@@ -40,7 +41,7 @@ class ReportController extends Controller
      *
      * @operationId getReports
      */
-    public function index(Organization $organization): ReportCollection
+    public function index(Organization $organization, ReportIndexRequest $request): ReportCollection
     {
         $this->checkPermission($organization, 'reports:view');
 

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

@@ -5,6 +5,7 @@ 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;
@@ -34,7 +35,7 @@ class TagController extends Controller
      *
      * @throws AuthorizationException
      */
-    public function index(Organization $organization): TagCollection
+    public function index(Organization $organization, TagIndexRequest $request): TagCollection
     {
         $this->checkPermission($organization, 'tags:view');
 

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

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

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

@@ -4,8 +4,12 @@ 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
 {
@@ -24,4 +28,29 @@ 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,30 +4,13 @@ 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
 {
-    /**
-     * @throws AuthorizationException
-     */
-    public function dashboard(DashboardService $dashboardService, PermissionStore $permissionStore): Response
+    public function dashboard(): 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

@@ -0,0 +1,64 @@
+<?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,6 +21,11 @@ class InvitationIndexRequest extends BaseFormRequest
     public function rules(): array
     {
         return [
+            'page' => [
+                'integer',
+                'min:1',
+                'max:2147483647',
+            ],
         ];
     }
 }

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

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

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

@@ -0,0 +1,35 @@
+<?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

@@ -0,0 +1,27 @@
+<?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

@@ -0,0 +1,27 @@
+<?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

@@ -0,0 +1,27 @@
+<?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,6 +26,11 @@ 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,9 +4,10 @@ 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
+class ClientCollection extends ResourceCollection implements PaginatedResourceCollection
 {
     /**
      * The resource that this resource collects.

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

@@ -4,9 +4,10 @@ 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
+class TagCollection extends ResourceCollection implements PaginatedResourceCollection
 {
     /**
      * The resource that this resource collects.

app/Listeners/RemovePlaceholder.php

@@ -1,43 +0,0 @@
-<?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,6 +8,7 @@ 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
@@ -32,9 +33,12 @@ class OrganizationInvitationMail extends Mailable
     public function build(): self
     {
         return $this->markdown('emails.organization-invitation', [
-            'acceptUrl' => URL::signedRoute('team-invitations.accept', [
-                'invitation' => $this->invitation,
-            ]),
+            'acceptUrl' => URL::to(URL::signedRoute(
+                'organization-invitations.accept',
+                ['invitation' => $this->invitation->getKey()],
+                Carbon::now()->addDays(90),
+                false
+            )),
         ])->subject(__('Organization Invitation'));
     }
 }

app/Models/Organization.php

@@ -36,6 +36,7 @@ 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,6 +18,7 @@ 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
@@ -41,14 +42,16 @@ class OrganizationInvitation extends JetstreamTeamInvitation implements Auditabl
     protected $table = 'organization_invitations';
 
     /**
-     * The attributes that are mass assignable.
+     * Get the attributes that should be cast.
      *
-     * @var array<int, string>
+     * @return array<string, string>
      */
-    protected $fillable = [
-        'email',
-        'role',
-    ];
+    public function casts(): array
+    {
+        return [
+            'accepted_at' => 'datetime',
+        ];
+    }
 
     /**
      * Get the organization that the invitation belongs to.

app/Policies/OrganizationPolicy.php

@@ -6,6 +6,7 @@ namespace App\Policies;
 
 use App\Models\Organization;
 use App\Models\User;
+use App\Service\PermissionStore;
 use Filament\Facades\Filament;
 use Illuminate\Auth\Access\HandlesAuthorization;
 
@@ -58,19 +59,7 @@ class OrganizationPolicy
             return true;
         }
 
-        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;
+        return app(PermissionStore::class)->userHas($organization, $user, 'organizations:update');
     }
 
     /**

app/Providers/EventServiceProvider.php

@@ -4,11 +4,9 @@ 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
 {
@@ -21,9 +19,6 @@ class EventServiceProvider extends ServiceProvider
         Registered::class => [
             SendEmailVerificationNotification::class,
         ],
-        TeamMemberAdded::class => [
-            RemovePlaceholder::class,
-        ],
     ];
 
     /**

app/Service/InvitationService.php

@@ -8,9 +8,11 @@ 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;
 
@@ -21,11 +23,7 @@ class InvitationService
      */
     public function inviteUser(Organization $organization, string $email, Role $role): OrganizationInvitation
     {
-        if (Member::query()
-            ->whereBelongsTo($organization, 'organization')
-            ->whereRelation('user', 'email', '=', $email)
-            ->where('role', '!=', Role::Placeholder->value)
-            ->exists()) {
+        if (app(MemberService::class)->isEmailAlreadyMember($organization, $email)) {
             throw new UserIsAlreadyMemberOfOrganizationApiException;
         }
 
@@ -48,4 +46,37 @@ 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,6 +5,8 @@ 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;
@@ -36,7 +38,8 @@ class MemberService
     public function addMember(User $user, Organization $organization, Role $role, bool $asSuperAdmin = false): Member
     {
         if (! $asSuperAdmin) {
-            AddingTeamMember::dispatch($organization, $user);
+            MemberAdding::dispatch($user, $organization, $role);
+            AddingTeamMember::dispatch($organization, $user); // Legacy event
         }
 
         $member = new Member;
@@ -49,14 +52,37 @@ class MemberService
             $user->currentOrganization()->associate($organization);
             $user->save();
         });
+        $this->mergePlaceholderMembersIntoExistingMember($member, $organization, $user);
 
         if (! $asSuperAdmin) {
-            TeamMemberAdded::dispatch($organization, $user);
+            MemberAdded::dispatch($member, $organization, $user);
+            TeamMemberAdded::dispatch($organization, $user); // Legacy event
         }
 
         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
@@ -209,4 +235,13 @@ 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/UserService.php

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

database/factories/OrganizationInvitationFactory.php

@@ -25,9 +25,24 @@ 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

@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('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

@@ -0,0 +1,172 @@
+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,6 +8,7 @@ import {
     createProjectViaApi,
     createPublicProjectViaApi,
 } from './utils/api';
+import { getTableRowNames } from './utils/table';
 
 async function goToClientsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/clients');
@@ -131,6 +132,92 @@ 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/members.spec.ts

@@ -5,7 +5,13 @@ 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 } from './utils/api';
+import {
+    createPlaceholderMemberViaImportApi,
+    getMembersViaApi,
+    updateMemberBillableRateViaApi,
+    updateOrganizationSettingViaApi,
+} from './utils/api';
+import { getTableRowNames } from './utils/table';
 
 // Tests that invite + accept members need more time
 test.describe.configure({ timeout: 45000 });
@@ -79,8 +85,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.getByText('Organization Default Rate').click();
-    await page.getByText('Custom Rate').click();
+    await page.getByRole('combobox').last().click();
+    await page.getByRole('option', { name: 'Custom Rate' }).click();
     await page.getByPlaceholder('Billable Rate').fill(newBillableRate.toString());
     await page.getByRole('button', { name: 'Update Member' }).click();
 
@@ -102,6 +108,136 @@ 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);
 
@@ -487,6 +623,125 @@ 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
 // =============================================
@@ -522,7 +777,7 @@ test.describe('Employee Sidebar Navigation', () => {
         });
 
         // Member table is empty — no rows rendered (only headers)
-        await expect(employee.page.getByTestId('client_table').locator('[role="row"]')).toHaveCount(
+        await expect(employee.page.getByTestId('member_table').locator('[role="row"]')).toHaveCount(
             0
         );
 

e2e/organization.spec.ts

@@ -369,6 +369,40 @@ 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,11 +3,13 @@ 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';
 
@@ -335,61 +337,179 @@ test('test that editing an existing billable project with default rate loads cor
 });
 
 // Sorting tests
-test('test that sorting projects by name works', async ({ page }) => {
+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,
+    });
+
     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();
 
-    // 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());
-            }
+    // 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);
         }
-        return names;
+        return order;
     };
 
-    // Click on Name header to sort ascending (default should already be ascending)
-    const nameHeader = page.getByText('Name').first();
-    await nameHeader.click();
+    // 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 }
+        );
+    };
 
-    // Wait for sort indicator to appear
-    await expect(nameHeader.locator('svg')).toBeVisible();
+    // --- Sort by Name ---
+    // Default is name asc (A-Z)
+    let order = await getOrder();
+    expect(order).toEqual(['AAA Project', 'BBB Project', 'CCC Project']);
 
-    // Click again to sort descending
-    await nameHeader.click();
+    // Click to toggle to Z-A
+    await clickSortHeader('Name', 'CCC Project');
+    order = await getOrder();
+    expect(order).toEqual(['CCC Project', 'BBB Project', 'AAA Project']);
 
-    // Verify the sort indicator is still visible (showing descending)
-    await expect(nameHeader.locator('svg')).toBeVisible();
-});
+    // --- 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
 
-test('test that sorting projects by status works', async ({ page }) => {
-    await goToProjectsOverview(page);
-    await clearProjectTableState(page);
-    await page.reload();
+    // 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
 
-    // Default is "all" so no filter needed - Wait for the table to load
-    await expect(page.getByTestId('project_table')).toBeVisible();
+    // --- 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
 
-    // Click on Status header to sort
-    const statusHeader = page.getByText('Status').first();
-    await statusHeader.click();
+    // Reverse: lowest first
+    await clickSortHeader('Total Time', 'AAA Project');
+    order = await getOrder();
+    expect(order[2]).toBe('CCC Project'); // C=3h last
 
-    // Sort indicator should be visible
-    await expect(statusHeader.locator('svg')).toBeVisible();
+    // --- 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 });
 });
 
 // Filter tests
@@ -642,22 +762,6 @@ 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,6 +8,9 @@ import {
     createTimeEntryViaApi,
     createTimeEntryWithTagViaApi,
     createBareTimeEntryViaApi,
+    createBillableProjectViaApi,
+    createTimeEntryWithBillableStatusViaApi,
+    createTagViaApi,
 } from './utils/api';
 import {
     goToReporting,
@@ -246,6 +249,191 @@ 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
 // ──────────────────────────────────────────────────
@@ -577,3 +765,58 @@ 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,6 +3,7 @@ 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');
@@ -89,6 +90,57 @@ 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,6 +1159,8 @@ 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');
 

e2e/utils/api.ts

@@ -201,6 +201,37 @@ 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 }
@@ -314,6 +345,36 @@ 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/members.ts

@@ -68,6 +68,85 @@ 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

@@ -0,0 +1,16 @@
+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/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 { setupEmployeeUser } from '../e2e/utils/members';
+import { setupAdminUser, setupEmployeeUser } from '../e2e/utils/members';
 
 export * from '@playwright/test';
 export type { TestContext };
@@ -12,6 +12,11 @@ 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).
@@ -19,7 +24,7 @@ export interface EmployeeFixture {
  * Uses page.context().request() to ensure cookies are shared between the API request and page.
  */
 export const test = baseTest.extend<
-    { ctx: TestContext; employee: EmployeeFixture },
+    { ctx: TestContext; employee: EmployeeFixture; admin: AdminFixture },
     { workerStorageState: string }
 >({
     page: async ({ page }, use) => {
@@ -100,4 +105,10 @@ 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,17 +2,104 @@
 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, ref } from 'vue';
+import { type Component, computed, 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';
 
-defineProps<{
+export type SortColumn = 'name' | 'projects_count' | 'status';
+export type SortDirection = 'asc' | 'desc';
+
+const props = 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>
@@ -23,8 +110,12 @@ const createClient = ref(false);
                 data-testid="client_table"
                 class="grid min-w-full"
                 style="grid-template-columns: 1fr 150px 200px 80px">
-                <ClientTableHeading></ClientTableHeading>
-                <div v-if="clients.length === 0" class="col-span-3 py-24 text-center">
+                <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">
                     <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>
@@ -35,7 +126,7 @@ const createClient = ref(false);
                         >Create your First Client
                     </SecondaryButton>
                 </div>
-                <template v-for="client in clients" :key="client.id">
+                <template v-for="client in sortedClients" :key="client.id">
                     <ClientTableRow :client="client"></ClientTableRow>
                 </template>
             </div>

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

@@ -1,18 +1,67 @@
 <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">
+        <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')">
             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

@@ -36,13 +36,13 @@ const showEditModal = ref(false);
     <TableRow>
         <ClientEditModal v-model:show="showEditModal" :client="client"></ClientEditModal>
         <div
-            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            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">
             <span>
                 {{ client.name }}
             </span>
         </div>
         <div
-            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-text-primary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            class="whitespace-nowrap flex items-center px-3 py-4 text-sm font-medium text-text-primary">
             <span class="text-text-secondary"> {{ projectCount }} Projects </span>
         </div>
         <div

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

@@ -1,20 +1,35 @@
 <script setup lang="ts">
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import DialogModal from '@/packages/ui/src/DialogModal.vue';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref, watch } 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 } from '@/packages/ui/src/field';
+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 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);
 
@@ -75,10 +90,26 @@ watch(billableRateSelect, () => {
     if (billableRateSelect.value === 'default-rate') {
         memberBody.value.billable_rate = null;
     } else if (billableRateSelect.value === 'custom-rate') {
-        memberBody.value.billable_rate = props.member.billable_rate ?? 0;
+        if (!memberBody.value.billable_rate) {
+            memberBody.value.billable_rate = organization.value?.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',
@@ -120,34 +151,55 @@ const roleDescription = computed(() => {
 
         <template #content>
             <div class="pb-5 pt-2 divide-y divide-border-secondary">
-                <div class="pb-5 flex space-x-6">
+                <div class="pb-5">
                     <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="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>
+                <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>
                             <BillableRateInput
-                                v-model="memberBody.billable_rate"
+                                v-else
+                                v-model="displayedRate"
                                 focus
-                                class="w-full"
                                 :currency="getOrganizationCurrencyString()"
                                 name="memberBillableRate"
-                                @keydown.enter="saveWithChecks()"></BillableRateInput>
-                        </Field>
-                    </div>
+                                @keydown.enter="saveWithChecks()" />
+                        </div>
+                    </Field>
                 </div>
             </div>
         </template>

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

@@ -2,19 +2,117 @@
 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="client_table"
+                data-testid="member_table"
                 class="grid min-w-full"
                 style="grid-template-columns: 1fr 1fr 180px 180px 150px 130px">
-                <MemberTableHeading></MemberTableHeading>
-                <template v-for="member in members" :key="member.id">
+                <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">
                     <MemberTableRow :member="member"></MemberTableRow>
                 </template>
             </div>

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

@@ -1,20 +1,83 @@
 <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">
+        <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')">
             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/20/solid';
+import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/24/outline';
 import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
 import TableRow from '@/Components/TableRow.vue';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
@@ -82,11 +82,15 @@ const userHasValidMailAddress = computed(() => {
             }}
         </div>
         <div
-            class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1 items-center font-medium">
-            <CheckCircleIcon v-if="member.is_placeholder === false" class="w-5"></CheckCircleIcon>
-            <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>
+            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>
         </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,11 +4,17 @@ 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, {
-    type SortColumn,
-    type SortDirection,
-} from '@/Components/Common/Project/ProjectTableHeading.vue';
+import ProjectTableHeading 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';
@@ -31,7 +37,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-    sort: [column: SortColumn];
+    sort: [column: SortColumn, direction: SortDirection];
 }>();
 
 const { clients } = useClientsQuery();
@@ -45,7 +51,7 @@ const clientNameMap = computed(() => {
     return map;
 });
 
-// Convert our sort state to TanStack Table format
+// Convert sort props to TanStack Table format
 const sorting = computed<SortingState>(() => [
     {
         id: props.sortColumn,
@@ -53,38 +59,67 @@ const sorting = computed<SortingState>(() => [
     },
 ]);
 
-// Define column accessors for sorting
-const columns = [
+// 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(() => [
     {
         id: 'name',
         accessorFn: (row: Project) => row.name.toLowerCase(),
     },
     {
         id: 'client_name',
+        sortUndefined: 'last' as const,
         accessorFn: (row: Project) => {
-            if (!row.client_id) return '';
+            if (!row.client_id) return undefined;
             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;
     },
-    columns,
+    get columns() {
+        return columns.value;
+    },
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     state: {
@@ -99,10 +134,6 @@ 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> {
@@ -133,6 +164,7 @@ 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,14 +1,13 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
 import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
-
-export type SortColumn = 'name' | 'client_name' | 'spent_time' | 'billable_rate' | 'status';
-export type SortDirection = 'asc' | 'desc';
+import type { SortColumn, SortDirection } from '@/Components/Common/Project/ProjectTable.vue';
 
 const props = defineProps<{
     showBillableRate: boolean;
     sortColumn: SortColumn;
     sortDirection: SortDirection;
+    descFirstColumns: ReadonlySet<SortColumn>;
 }>();
 
 const emit = defineEmits<{
@@ -22,6 +21,18 @@ 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>
@@ -30,58 +41,49 @@ function isSorted(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="isSorted('name') && sortDirection === 'asc'" class="w-4 h-4" />
-            <ChevronUpIcon
-                v-else-if="isSorted('name') && sortDirection === 'desc'"
-                class="w-4 h-4" />
+            <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('client_name')">
             Client
-            <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" />
+            <ChevronDownIcon v-if="isChevronDown('client_name')" class="w-4 h-4" />
+            <ChevronUpIcon v-else-if="isChevronUp('client_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('spent_time')">
             Total Time
-            <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" />
+            <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" />
             <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="isSorted('billable_rate') && sortDirection === 'asc'"
-                class="w-4 h-4" />
-            <ChevronUpIcon
-                v-else-if="isSorted('billable_rate') && sortDirection === 'desc'"
-                class="w-4 h-4" />
+            <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="isSorted('status') && sortDirection === 'asc'" class="w-4 h-4" />
-            <ChevronUpIcon
-                v-else-if="isSorted('status') && sortDirection === 'desc'"
-                class="w-4 h-4" />
+            <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="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 } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { api } from '@/packages/api/src';
 import { Checkbox } from '@/packages/ui/src';
@@ -17,6 +17,7 @@ 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) => {
@@ -30,6 +31,11 @@ const createReportMutation = useMutation({
             },
         });
     },
+    onSuccess: () => {
+        queryClient.invalidateQueries({
+            queryKey: ['reports'],
+        });
+    },
 });
 
 const props = defineProps<{

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

@@ -157,8 +157,18 @@ 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 {
-        ...filterParams.value,
+        ...rest,
+        billable: billableValue,
         group: group.value,
         sub_group: subGroup.value,
         history_group: getOptimalGroupingOption(startDate.value, endDate.value),
@@ -427,8 +437,7 @@ const tableData = computed(() => {
                                 v-if="showBillableRate"
                                 class="justify-end pr-6 flex items-center font-medium">
                                 {{
-                                    aggregatedTableTimeEntries.cost !== null &&
-                                    aggregatedTableTimeEntries.cost !== undefined
+                                    aggregatedTableTimeEntries.cost
                                         ? formatCents(
                                               aggregatedTableTimeEntries.cost,
                                               getOrganizationCurrencyString(),

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

@@ -2,18 +2,80 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { FolderPlusIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { ref } from 'vue';
+import { computed, 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';
-defineProps<{
+import {
+    useVueTable,
+    getCoreRowModel,
+    getSortedRowModel,
+    type SortingState,
+} from '@tanstack/vue-table';
+
+export type SortColumn = 'name';
+export type SortDirection = 'asc' | 'desc';
+
+const props = 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>
@@ -24,8 +86,12 @@ const showCreateTagModal = ref(false);
                 data-testid="tag_table"
                 class="grid min-w-full"
                 style="grid-template-columns: 1fr 80px">
-                <TagTableHeading></TagTableHeading>
-                <div v-if="tags.length === 0" class="col-span-5 py-24 text-center">
+                <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">
                     <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>
@@ -36,7 +102,7 @@ const showCreateTagModal = ref(false);
                         >Create your First Tag</SecondaryButton
                     >
                 </div>
-                <template v-for="tag in tags" :key="tag.id">
+                <template v-for="tag in sortedTags" :key="tag.id">
                     <TagTableRow :tag="tag"></TagTableRow>
                 </template>
             </div>

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

@@ -1,16 +1,51 @@
 <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">
+        <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')">
             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/Pages/Clients.vue

@@ -12,6 +12,8 @@ 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();
 
@@ -19,6 +21,26 @@ 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') {
@@ -45,6 +67,10 @@ const shownClients = computed(() => {
             >
             <ClientCreateModal v-model:show="createClient"></ClientCreateModal>
         </MainContainer>
-        <ClientTable :clients="shownClients"></ClientTable>
+        <ClientTable
+            :clients="shownClients"
+            :sort-column="tableState.sortColumn"
+            :sort-direction="tableState.sortDirection"
+            @sort="handleSort"></ClientTable>
     </AppLayout>
 </template>

resources/js/Pages/Members.vue

@@ -13,6 +13,8 @@ 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);
 
@@ -21,6 +23,26 @@ 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>
@@ -45,7 +67,11 @@ const activeTab = ref<'all' | 'invitations'>('all');
                 :available-roles="availableRoles"
                 @close="activeTab = 'invitations'"></MemberInviteModal>
         </MainContainer>
-        <MemberTable v-if="activeTab === 'all'"></MemberTable>
+        <MemberTable
+            v-if="activeTab === 'all'"
+            :sort-column="tableState.sortColumn"
+            :sort-direction="tableState.sortDirection"
+            @sort="handleSort"></MemberTable>
         <InvitationTable v-if="activeTab === 'invitations'"></InvitationTable>
     </AppLayout>
 </template>

resources/js/Pages/Projects.vue

@@ -4,10 +4,6 @@ import AppLayout from '@/Layouts/AppLayout.vue';
 import { FolderIcon, PlusIcon } from '@heroicons/vue/20/solid';
 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';
@@ -26,6 +22,7 @@ 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();
@@ -56,14 +53,9 @@ const tableState = useStorage<ProjectTableState>(
     { mergeDefaults: true }
 );
 
-// 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';
-    }
+function handleSort(column: SortColumn, direction: SortDirection) {
+    tableState.value.sortColumn = column;
+    tableState.value.sortDirection = direction;
 }
 
 // Filter projects based on current filters

resources/js/Pages/ReportingShared.vue

@@ -2,29 +2,10 @@
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
-import {
-    ChartBarIcon,
-    ChevronLeftIcon,
-    ChevronDoubleLeftIcon,
-    ChevronRightIcon,
-    ChevronDoubleRightIcon,
-    CreditCardIcon,
-    UserGroupIcon,
-} from '@heroicons/vue/20/solid';
-import { computed, ref, watch } from 'vue';
+import { ChartBarIcon, CreditCardIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
+import { computed } from 'vue';
 
-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 { useQuery } 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';
@@ -32,37 +13,22 @@ 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 pageLimit = 15;
-const currentPage = ref(1);
-
-const { data: reportsResponse } = useQuery<ReportIndexResponse>({
-    queryKey: ['reports', currentPage],
+const { data: reportsData } = useQuery({
+    queryKey: computed(() => ['reports', getCurrentOrganizationId()]),
     enabled: !!getCurrentOrganizationId(),
-    queryFn: () =>
-        api.getReports({
-            params: {
-                organization: getCurrentOrganizationId() || '',
-            },
-        }),
+    queryFn: async () => {
+        const organizationId = getCurrentOrganizationId();
+        if (!organizationId) throw new Error('No organization');
+        const data = await fetchAllReports(organizationId);
+        return { data };
+    },
+    staleTime: 1000 * 30,
 });
 
 const reports = computed(() => {
-    return reportsResponse.value?.data ?? [];
-});
-
-const totalPages = computed(() => {
-    return 1;
-});
-
-const queryClient = useQueryClient();
-async function updateFilteredTimeEntries() {
-    await queryClient.invalidateQueries({
-        queryKey: ['reports'],
-    });
-}
-watch(currentPage, () => {
-    updateFilteredTimeEntries();
+    return reportsData.value?.data ?? [];
 });
 </script>
 
@@ -110,64 +76,5 @@ watch(currentPage, () => {
         <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,6 +222,7 @@ 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]">
@@ -239,12 +240,15 @@ onMounted(async () => {
                                 </div>
                                 <div class="justify-end pr-6 flex items-center font-medium">
                                     {{
-                                        formatCents(
-                                            aggregatedTableTimeEntries.cost,
-                                            reportCurrency,
-                                            reportCurrencyFormat,
-                                            reportCurrencySymbol
-                                        )
+                                        aggregatedTableTimeEntries.cost
+                                            ? formatCents(
+                                                  aggregatedTableTimeEntries.cost,
+                                                  reportCurrency,
+                                                  reportCurrencyFormat,
+                                                  reportCurrencySymbol,
+                                                  reportNumberFormat
+                                              )
+                                            : '--'
                                     }}
                                 </div>
                             </div>

resources/js/Pages/Tags.vue

@@ -9,9 +9,31 @@ 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);
 }
@@ -34,6 +56,10 @@ async function createTag(tag: string) {
                 v-model:show="showCreateTagModal"
                 :create-tag="createTag"></TagCreateModal>
         </MainContainer>
-        <TagTable :create-tag="createTag"></TagTable>
+        <TagTable
+            :create-tag="createTag"
+            :sort-column="tableState.sortColumn"
+            :sort-direction="tableState.sortDirection"
+            @sort="handleSort"></TagTable>
     </AppLayout>
 </template>

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

@@ -33,7 +33,6 @@ 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() })
@@ -598,7 +597,6 @@ 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
@@ -711,7 +709,6 @@ export const schemas = {
     ApiTokenStoreRequest,
     ApiTokenWithAccessTokenResource,
     ClientResource,
-    ClientCollection,
     ClientStoreRequest,
     ClientUpdateRequest,
     ImportRequest,
@@ -755,7 +752,6 @@ export const schemas = {
     ReportUpdateRequest,
     DetailedWithDataReportResource,
     TagResource,
-    TagCollection,
     TagStoreRequest,
     TagUpdateRequest,
     TaskResource,
@@ -1201,7 +1197,39 @@ const endpoints = makeApi([
                 schema: z.enum(['true', 'false', 'all']).optional(),
             },
         ],
-        response: z.object({ data: ClientCollection }).passthrough(),
+        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(),
         errors: [
             {
                 status: 401,
@@ -1512,6 +1540,11 @@ const endpoints = makeApi([
                 type: 'Path',
                 schema: z.string(),
             },
+            {
+                name: 'page',
+                type: 'Query',
+                schema: z.number().int().gte(1).lte(2147483647).optional(),
+            },
         ],
         response: z
             .object({
@@ -2137,6 +2170,11 @@ const endpoints = makeApi([
                 type: 'Path',
                 schema: z.string(),
             },
+            {
+                name: 'page',
+                type: 'Query',
+                schema: z.number().int().gte(1).lte(2147483647).optional(),
+            },
         ],
         response: z
             .object({
@@ -2742,6 +2780,11 @@ const endpoints = makeApi([
                 type: 'Path',
                 schema: z.string(),
             },
+            {
+                name: 'page',
+                type: 'Query',
+                schema: z.number().int().gte(1).lte(2147483647).optional(),
+            },
         ],
         response: z
             .object({
@@ -2792,6 +2835,13 @@ 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(),
+            },
         ],
     },
     {
@@ -2860,6 +2910,11 @@ const endpoints = makeApi([
                 type: 'Path',
                 schema: z.string(),
             },
+            {
+                name: 'page',
+                type: 'Query',
+                schema: z.number().int().gte(1).lte(2147483647).optional(),
+            },
         ],
         response: z
             .object({
@@ -2910,6 +2965,13 @@ 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(),
+            },
         ],
     },
     {
@@ -3086,8 +3148,45 @@ 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: TagCollection }).passthrough(),
+        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(),
         errors: [
             {
                 status: 401,
@@ -3104,6 +3203,13 @@ 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(),
+            },
         ],
     },
     {
@@ -3251,6 +3357,11 @@ 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',
@@ -4230,6 +4341,11 @@ 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.15",
+    "version": "0.0.16",
     "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

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

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

@@ -0,0 +1,198 @@
+<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/TimeEntryCalendar.vue

@@ -15,13 +15,22 @@ import {
     onActivated,
     onUnmounted,
 } from 'vue';
+import { useLocalStorage } from '@vueuse/core';
 import chroma from 'chroma-js';
 import { useCssVariable } from '@/utils/useCssVariable';
-import { getDayJsInstance, getLocalizedDayJs } from '../utils/time';
+import {
+    getDayJsInstance,
+    getLocalizedDayJs,
+    formatHumanReadableDuration,
+    formatDuration,
+} 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,
@@ -81,6 +90,22 @@ 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,16 +229,19 @@ function emitDatesChange(arg: DatesSetArg) {
 }
 
 function handleDateSelect(arg: { start: Date; end: Date }) {
-    const startTime = getDayJsInstance()(arg.start.toISOString())
+    stopVisualSnap();
+    const snap = calendarSettings.value.snapMinutes;
+    const startLocal = getDayJsInstance()(arg.start.toISOString())
         .utc()
-        .tz(getUserTimezone(), true)
-        .utc();
-    const endTime = getDayJsInstance()(arg.end.toISOString())
-        .utc()
-        .tz(getUserTimezone(), true)
-        .utc();
-    newEventStart.value = startTime;
-    newEventEnd.value = endTime;
+        .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();
     showCreateTimeEntryModal.value = true;
 }
 
@@ -227,90 +255,143 @@ 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: 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(),
+        start: snappedStart.utc().format(),
+        end: snappedEnd.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: 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(),
+        start: snappedStart ? snappedStart.utc().format() : timeEntry.start,
+        end: ext.isRunning ? null : snappedEnd ? snappedEnd.utc().format() : timeEntry.end,
     } as TimeEntry;
     await props.updateTimeEntry(updatedTimeEntry);
     emit('refresh');
 }
 
-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,
+const calendarOptions = computed(() => {
+    const s = calendarSettings.value;
 
-    events: events.value,
-    activityPeriods: props.activityPeriods || [],
-}));
+    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 || [],
+    };
+});
 
 watch(showCreateTimeEntryModal, (value) => {
     if (!value) {
@@ -376,7 +457,6 @@ onActivated(() => {
 });
 
 onUnmounted(() => {
-    // Clean up interval
     if (currentTimeInterval) {
         clearInterval(currentTimeInterval);
         currentTimeInterval = null;
@@ -424,6 +504,11 @@ 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
@@ -458,6 +543,13 @@ 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);
@@ -482,6 +574,7 @@ onUnmounted(() => {
 .fullcalendar :deep(.fc-toolbar) {
     background-color: var(--background);
     padding: 0.5rem;
+    padding-right: 2.75rem;
     margin-bottom: 0;
 }
 
@@ -580,36 +673,65 @@ onUnmounted(() => {
     line-height: 1.2;
 }
 
-/* Enhanced FullCalendar resize handles */
+/* Resize handle hit areas */
 .fullcalendar :deep(.fc-event-resizer) {
     position: absolute;
     z-index: 99;
-    background: '#FFF';
-    border-radius: 2px;
     width: 100%;
-    height: 4px;
+    height: 12px;
     left: 0;
-    transition: all 0.2s ease;
+    cursor: row-resize;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     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;
-    cursor: s-resize;
+}
+
+/* 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;
 }
 
 .fullcalendar :deep(.fc-event:hover .fc-event-resizer) {
     opacity: 1;
 }
 
-.fullcalendar :deep(.fc-event-resizer:hover) {
-    background: '#FFF';
-    height: 6px;
+.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);
 }
 
 /* Update the earlier hover rule to include the shadow */
@@ -632,6 +754,10 @@ 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;
@@ -763,3 +889,11 @@ 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

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

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

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

resources/js/packages/ui/src/Tag/TagDropdown.vue

@@ -91,6 +91,7 @@ const showCreateTagModal = ref(false);
 
 <template>
     <TagCreateModal
+        v-if="showCreateTagModal"
         v-model:show="showCreateTagModal"
         :create-tag="createAndAddTag"></TagCreateModal>
     <Dropdown

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

@@ -228,6 +228,7 @@ async function handleDeleteTimeEntry() {
     </div>
 
     <TimeEntryEditModal
+        v-if="showEditModal"
         v-model:show="showEditModal"
         :time-entry="timeEntry"
         :enable-estimated-time="enableEstimatedTime"

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
-import { computed, nextTick, ref, watch, watchEffect } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import ProjectDropdownItem from '@/packages/ui/src/Project/ProjectDropdownItem.vue';
 import type {
     CreateClientBody,
@@ -33,6 +33,7 @@ const searchValue = ref('');
 
 watch(open, (isOpen) => {
     if (isOpen) {
+        updateFilteredResults();
         nextTick(() => {
             initializeHighlightedItem();
             searchInput.value?.focus({ preventScroll: true });
@@ -148,7 +149,7 @@ function addProjectToFilterObject(
     }
 }
 
-watchEffect(() => {
+function updateFilteredResults() {
     const tempFilteredClients: ClientsWithProjectsWithTasks = [];
 
     if (searchValue.value.length === 0) {
@@ -243,6 +244,13 @@ watchEffect(() => {
     });
 
     filteredResults.value = tempFilteredClients;
+}
+
+// Recompute filtered results when search value changes while open
+watch(searchValue, () => {
+    if (open.value) {
+        updateFilteredResults();
+    }
 });
 
 async function addClientIfNoneExists() {
@@ -648,6 +656,7 @@ const showCreateProject = ref(false);
         </template>
     </Dropdown>
     <ProjectCreateModal
+        v-if="showCreateProject"
         v-model:show="showCreateProject"
         :create-client
         :enable-estimated-time="enableEstimatedTime"

resources/js/packages/ui/src/index.ts

@@ -36,6 +36,7 @@ import TimeEntryEditModal from './TimeEntry/TimeEntryEditModal.vue';
 import FullCalendarEventContent from './FullCalendar/FullCalendarEventContent.vue';
 import FullCalendarDayHeader from './FullCalendar/FullCalendarDayHeader.vue';
 import TimeEntryCalendar from './FullCalendar/TimeEntryCalendar.vue';
+import CalendarSettingsPopover from './FullCalendar/CalendarSettingsPopover.vue';
 import DateRangePicker from './Input/DateRangePicker.vue';
 import TimezoneMismatchModal from './TimezoneMismatchModal.vue';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip/index';
@@ -59,6 +60,7 @@ import {
 } from './field/index';
 export type { FieldVariants } from './field/index';
 export type { ActivityPeriod } from './FullCalendar/idleStatusPlugin';
+export type { CalendarSettings } from './FullCalendar/calendarSettings';
 export type {
     CommandPaletteCommand,
     CommandPaletteGroup,
@@ -92,6 +94,7 @@ export {
     FullCalendarEventContent,
     FullCalendarDayHeader,
     TimeEntryCalendar,
+    CalendarSettingsPopover,
     DateRangePicker,
     TimezoneMismatchModal,
     Tooltip,

resources/js/utils/fetchAllPages.ts

@@ -0,0 +1,22 @@
+/**
+ * Fetches all pages from a paginated Laravel API endpoint.
+ * Uses `meta.last_page` to determine the total number of pages,
+ * so only a single request is made when all data fits on one page.
+ */
+export async function fetchAllPages<T>(
+    fetchPage: (page: number) => Promise<{
+        data: T[];
+        meta: { per_page: number; last_page: number };
+    }>
+): Promise<T[]> {
+    const firstResponse = await fetchPage(1);
+    const allItems: T[] = [...firstResponse.data];
+    const { last_page } = firstResponse.meta;
+
+    for (let page = 2; page <= last_page; page++) {
+        const response = await fetchPage(page);
+        allItems.push(...response.data);
+    }
+
+    return allItems;
+}

resources/js/utils/prefetch.ts

@@ -8,6 +8,13 @@ import {
     createCalendarQueryKey,
     fetchAllCalendarEntries,
 } from '@/utils/useTimeEntriesCalendarQuery';
+import { fetchAllProjects } from '@/utils/useProjectsQuery';
+import { fetchAllTasks } from '@/utils/useTasksQuery';
+import { fetchAllTags } from '@/utils/useTagsQuery';
+import { fetchAllClients } from '@/utils/useClientsQuery';
+import { fetchAllMembers } from '@/utils/useMembersQuery';
+import { fetchAllReports } from '@/utils/useReportsQuery';
+import { fetchAllProjectMembers } from '@/utils/useProjectMembersQuery';
 
 /**
  * Route patterns mapped to their prefetch functions.
@@ -151,13 +158,9 @@ function prefetchProjects(queryClient: QueryClient) {
     if (!organizationId) return;
 
     queryClient.prefetchQuery({
-        queryKey: ['projects'],
-        queryFn: () =>
-            api.getProjects({
-                params: { organization: organizationId },
-                queries: { archived: 'all' },
-            }),
-        staleTime: 30000, // Consider fresh for 30 seconds
+        queryKey: ['projects', organizationId],
+        queryFn: async () => ({ data: await fetchAllProjects(organizationId) }),
+        staleTime: 30000,
     });
 }
 
@@ -166,12 +169,8 @@ function prefetchTasks(queryClient: QueryClient) {
     if (!organizationId) return;
 
     queryClient.prefetchQuery({
-        queryKey: ['tasks'],
-        queryFn: () =>
-            api.getTasks({
-                params: { organization: organizationId },
-                queries: { done: 'all' },
-            }),
+        queryKey: ['tasks', organizationId],
+        queryFn: async () => ({ data: await fetchAllTasks(organizationId) }),
         staleTime: 30000,
     });
 }
@@ -181,11 +180,8 @@ function prefetchTags(queryClient: QueryClient) {
     if (!organizationId) return;
 
     queryClient.prefetchQuery({
-        queryKey: ['tags'],
-        queryFn: () =>
-            api.getTags({
-                params: { organization: organizationId },
-            }),
+        queryKey: ['tags', organizationId],
+        queryFn: async () => ({ data: await fetchAllTags(organizationId) }),
         staleTime: 30000,
     });
 }
@@ -195,12 +191,8 @@ function prefetchClients(queryClient: QueryClient) {
     if (!organizationId || !canViewClients()) return;
 
     queryClient.prefetchQuery({
-        queryKey: ['clients'],
-        queryFn: () =>
-            api.getClients({
-                params: { organization: organizationId },
-                queries: { archived: 'all' },
-            }),
+        queryKey: ['clients', organizationId],
+        queryFn: async () => ({ data: await fetchAllClients(organizationId) }),
         staleTime: 30000,
     });
 }
@@ -210,11 +202,8 @@ function prefetchMembers(queryClient: QueryClient) {
     if (!organizationId || !canViewMembers()) return;
 
     queryClient.prefetchQuery({
-        queryKey: ['members'],
-        queryFn: () =>
-            api.getMembers({
-                params: { organization: organizationId },
-            }),
+        queryKey: ['members', organizationId],
+        queryFn: async () => ({ data: await fetchAllMembers(organizationId) }),
         staleTime: 30000,
     });
 }
@@ -224,11 +213,8 @@ function prefetchReports(queryClient: QueryClient) {
     if (!organizationId) return;
 
     queryClient.prefetchQuery({
-        queryKey: ['reports', 1],
-        queryFn: () =>
-            api.getReports({
-                params: { organization: organizationId },
-            }),
+        queryKey: ['reports', organizationId],
+        queryFn: async () => ({ data: await fetchAllReports(organizationId) }),
         staleTime: 30000,
     });
 }
@@ -276,11 +262,10 @@ function prefetchProjectMembers(queryClient: QueryClient, projectId: string) {
     if (!organizationId || !canViewMembers()) return;
 
     queryClient.prefetchQuery({
-        queryKey: ['projectMembers', projectId],
-        queryFn: () =>
-            api.getProjectMembers({
-                params: { organization: organizationId, project: projectId },
-            }),
+        queryKey: ['projectMembers', organizationId, projectId],
+        queryFn: async () => ({
+            data: await fetchAllProjectMembers(organizationId, projectId),
+        }),
         staleTime: 30000,
     });
 }

resources/js/utils/useClientsQuery.ts

@@ -3,19 +3,27 @@ import { api } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import type { Client } from '@/packages/api/src';
 import { computed } from 'vue';
+import { fetchAllPages } from '@/utils/fetchAllPages';
+
+export async function fetchAllClients(organizationId: string): Promise<Client[]> {
+    return fetchAllPages((page) =>
+        api.getClients({
+            params: { organization: organizationId },
+            queries: { archived: 'all', page },
+        })
+    );
+}
 
 export function useClientsQuery() {
     const queryClient = useQueryClient();
 
     const query = useQuery({
-        queryKey: ['clients'],
+        queryKey: computed(() => ['clients', getCurrentOrganizationId()]),
         queryFn: async () => {
             const organizationId = getCurrentOrganizationId();
             if (!organizationId) throw new Error('No organization');
-            return api.getClients({
-                params: { organization: organizationId },
-                queries: { archived: 'all' },
-            });
+            const data = await fetchAllClients(organizationId);
+            return { data };
         },
         enabled: () => !!getCurrentOrganizationId(),
         staleTime: 1000 * 30, // 30 seconds

resources/js/utils/useInvitations.ts

@@ -1,31 +1,35 @@
 import { defineStore } from 'pinia';
 import { api } from '@/packages/api/src';
 import { computed, ref } from 'vue';
-import type {
-    InvitationsIndexResponse,
-    CreateInvitationBody,
-    Invitation,
-} from '@/packages/api/src';
+import type { CreateInvitationBody, Invitation } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
+import { fetchAllPages } from '@/utils/fetchAllPages';
+
+export async function fetchAllInvitations(organizationId: string): Promise<Invitation[]> {
+    return fetchAllPages((page) =>
+        api.getInvitations({
+            params: { organization: organizationId },
+            queries: { page },
+        })
+    );
+}
 
 export const useInvitationsStore = defineStore('invitations', () => {
-    const invitationsResponse = ref<InvitationsIndexResponse | null>(null);
+    const invitationsData = ref<Invitation[]>([]);
     const { handleApiRequestNotifications } = useNotificationsStore();
 
     async function fetchInvitations() {
         const organization = getCurrentOrganizationId();
         if (organization) {
-            invitationsResponse.value = await handleApiRequestNotifications(
-                () =>
-                    api.getInvitations({
-                        params: {
-                            organization: organization,
-                        },
-                    }),
+            const data = await handleApiRequestNotifications(
+                () => fetchAllInvitations(organization),
                 undefined,
                 'Failed to fetch invitations'
             );
+            if (data) {
+                invitationsData.value = data;
+            }
         }
     }
 
@@ -47,7 +51,7 @@ export const useInvitationsStore = defineStore('invitations', () => {
     }
 
     const invitations = computed<Invitation[]>(() => {
-        return invitationsResponse.value?.data || [];
+        return invitationsData.value;
     });
 
     return { invitations, fetchInvitations, createInvitation };

resources/js/utils/useMembersQuery.ts

@@ -3,18 +3,27 @@ import { api } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import type { Member } from '@/packages/api/src';
 import { computed } from 'vue';
+import { fetchAllPages } from '@/utils/fetchAllPages';
+
+export async function fetchAllMembers(organizationId: string): Promise<Member[]> {
+    return fetchAllPages((page) =>
+        api.getMembers({
+            params: { organization: organizationId },
+            queries: { page },
+        })
+    );
+}
 
 export function useMembersQuery() {
     const queryClient = useQueryClient();
 
     const query = useQuery({
-        queryKey: ['members'],
+        queryKey: computed(() => ['members', getCurrentOrganizationId()]),
         queryFn: async () => {
             const organizationId = getCurrentOrganizationId();
             if (!organizationId) throw new Error('No organization');
-            return api.getMembers({
-                params: { organization: organizationId },
-            });
+            const data = await fetchAllMembers(organizationId);
+            return { data };
         },
         enabled: () => !!getCurrentOrganizationId(),
         staleTime: 1000 * 30, // 30 seconds

resources/js/utils/useOrganization.ts

@@ -12,6 +12,10 @@ import { getCurrentOrganizationId } from '@/utils/useUser';
 import { api } from '@/packages/api/src';
 
 export function switchOrganization(organizationId: string) {
+    // Clear Inertia's prefetch cache to prevent stale pages from the old
+    // organization being served when navigating after the switch.
+    router.flushAll();
+
     router.put(
         route('current-team.update'),
         {

resources/js/utils/useProjectMembers.ts

@@ -26,7 +26,9 @@ export const useProjectMembersStore = defineStore('project-members', () => {
                 'Project member added successfully',
                 'Failed to add project member'
             );
-            queryClient.invalidateQueries({ queryKey: ['projectMembers', projectId] });
+            queryClient.invalidateQueries({
+                queryKey: ['projectMembers', organization, projectId],
+            });
         }
     }
 
@@ -49,7 +51,7 @@ export const useProjectMembersStore = defineStore('project-members', () => {
             );
             if (response?.data?.project_id) {
                 queryClient.invalidateQueries({
-                    queryKey: ['projectMembers', response.data.project_id],
+                    queryKey: ['projectMembers', organization, response.data.project_id],
                 });
             }
         }
@@ -69,7 +71,9 @@ export const useProjectMembersStore = defineStore('project-members', () => {
                 'Project member removed successfully',
                 'Failed to remove project member'
             );
-            queryClient.invalidateQueries({ queryKey: ['projectMembers', projectId] });
+            queryClient.invalidateQueries({
+                queryKey: ['projectMembers', organizationId, projectId],
+            });
         }
     }
 

resources/js/utils/useProjectMembersQuery.ts

@@ -3,6 +3,19 @@ import { api } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import type { ProjectMember } from '@/packages/api/src';
 import { computed, type Ref } from 'vue';
+import { fetchAllPages } from '@/utils/fetchAllPages';
+
+export async function fetchAllProjectMembers(
+    organizationId: string,
+    projectId: string
+): Promise<ProjectMember[]> {
+    return fetchAllPages((page) =>
+        api.getProjectMembers({
+            params: { organization: organizationId, project: projectId },
+            queries: { page },
+        })
+    );
+}
 
 export function useProjectMembersQuery(projectId: Ref<string | null> | string) {
     const queryClient = useQueryClient();
@@ -12,14 +25,17 @@ export function useProjectMembersQuery(projectId: Ref<string | null> | string) {
     });
 
     const query = useQuery({
-        queryKey: ['projectMembers', projectIdValue],
+        queryKey: computed(() => [
+            'projectMembers',
+            getCurrentOrganizationId(),
+            projectIdValue.value,
+        ]),
         queryFn: async () => {
             const organizationId = getCurrentOrganizationId();
             const pid = projectIdValue.value;
             if (!organizationId || !pid) throw new Error('No organization or project');
-            return api.getProjectMembers({
-                params: { organization: organizationId, project: pid },
-            });
+            const data = await fetchAllProjectMembers(organizationId, pid);
+            return { data };
         },
         enabled: () => !!getCurrentOrganizationId() && !!projectIdValue.value,
         staleTime: 1000 * 30, // 30 seconds
@@ -28,7 +44,9 @@ export function useProjectMembersQuery(projectId: Ref<string | null> | string) {
     const projectMembers = computed<ProjectMember[]>(() => query.data.value?.data ?? []);
 
     const invalidateProjectMembers = () => {
-        queryClient.invalidateQueries({ queryKey: ['projectMembers', projectIdValue.value] });
+        queryClient.invalidateQueries({
+            queryKey: ['projectMembers', getCurrentOrganizationId(), projectIdValue.value],
+        });
     };
 
     return {

resources/js/utils/useProjectsQuery.ts

@@ -3,19 +3,27 @@ import { api } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import type { Project } from '@/packages/api/src';
 import { computed } from 'vue';
+import { fetchAllPages } from '@/utils/fetchAllPages';
+
+export async function fetchAllProjects(organizationId: string): Promise<Project[]> {
+    return fetchAllPages((page) =>
+        api.getProjects({
+            params: { organization: organizationId },
+            queries: { archived: 'all', page },
+        })
+    );
+}
 
 export function useProjectsQuery() {
     const queryClient = useQueryClient();
 
     const query = useQuery({
-        queryKey: ['projects'],
+        queryKey: computed(() => ['projects', getCurrentOrganizationId()]),
         queryFn: async () => {
             const organizationId = getCurrentOrganizationId();
             if (!organizationId) throw new Error('No organization');
-            return api.getProjects({
-                params: { organization: organizationId },
-                queries: { archived: 'all' },
-            });
+            const data = await fetchAllProjects(organizationId);
+            return { data };
         },
         enabled: () => !!getCurrentOrganizationId(),
         staleTime: 1000 * 30, // 30 seconds

resources/js/utils/useReportsQuery.ts

@@ -0,0 +1,12 @@
+import { api } from '@/packages/api/src';
+import type { Report } from '@/packages/api/src';
+import { fetchAllPages } from '@/utils/fetchAllPages';
+
+export async function fetchAllReports(organizationId: string): Promise<Report[]> {
+    return fetchAllPages((page) =>
+        api.getReports({
+            params: { organization: organizationId },
+            queries: { page },
+        })
+    );
+}

resources/js/utils/useTagsQuery.ts

@@ -3,18 +3,27 @@ import { api } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import type { Tag } from '@/packages/api/src';
 import { computed } from 'vue';
+import { fetchAllPages } from '@/utils/fetchAllPages';
+
+export async function fetchAllTags(organizationId: string): Promise<Tag[]> {
+    return fetchAllPages((page) =>
+        api.getTags({
+            params: { organization: organizationId },
+            queries: { page },
+        })
+    );
+}
 
 export function useTagsQuery() {
     const queryClient = useQueryClient();
 
     const query = useQuery({
-        queryKey: ['tags'],
+        queryKey: computed(() => ['tags', getCurrentOrganizationId()]),
         queryFn: async () => {
             const organizationId = getCurrentOrganizationId();
             if (!organizationId) throw new Error('No organization');
-            return api.getTags({
-                params: { organization: organizationId },
-            });
+            const data = await fetchAllTags(organizationId);
+            return { data };
         },
         enabled: () => !!getCurrentOrganizationId(),
         staleTime: 1000 * 30, // 30 seconds

resources/js/utils/useTasksQuery.ts

@@ -3,19 +3,27 @@ import { api } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import type { Task } from '@/packages/api/src';
 import { computed } from 'vue';
+import { fetchAllPages } from '@/utils/fetchAllPages';
+
+export async function fetchAllTasks(organizationId: string): Promise<Task[]> {
+    return fetchAllPages((page) =>
+        api.getTasks({
+            params: { organization: organizationId },
+            queries: { done: 'all', page },
+        })
+    );
+}
 
 export function useTasksQuery() {
     const queryClient = useQueryClient();
 
     const query = useQuery({
-        queryKey: ['tasks'],
+        queryKey: computed(() => ['tasks', getCurrentOrganizationId()]),
         queryFn: async () => {
             const organizationId = getCurrentOrganizationId();
             if (!organizationId) throw new Error('No organization');
-            return api.getTasks({
-                params: { organization: organizationId },
-                queries: { done: 'all' },
-            });
+            const data = await fetchAllTasks(organizationId);
+            return { data };
         },
         enabled: () => !!getCurrentOrganizationId(),
         staleTime: 1000 * 30, // 30 seconds

resources/js/utils/useTimeEntriesReportQuery.ts

@@ -7,7 +7,12 @@ export function useTimeEntriesReportQuery(
     filterParams: Ref<Record<string, unknown>> | ComputedRef<Record<string, unknown>>
 ) {
     return useQuery<TimeEntryResponse>({
-        queryKey: computed(() => ['timeEntries', 'detailed-report', unref(filterParams)]),
+        queryKey: computed(() => [
+            'timeEntries',
+            'detailed-report',
+            getCurrentOrganizationId(),
+            unref(filterParams),
+        ]),
         enabled: computed(() => !!getCurrentOrganizationId()),
         queryFn: () =>
             api.getTimeEntries({

resources/views/emails/auth-api-expiration-reminder.blade.php

@@ -1,7 +1,8 @@
 @component('mail::message')
 
-{{ __('The API token ":token" expired.', ['token' => $tokenName]) }}
+{{ __('The API token ":token" will expire in 7 days!', ['token' => $tokenName]) }}
 
+{{ __('Please make sure to create a new API token and use the new one instead before it expires to avoid any disruptions in service.') }}
 
 {{ __('You can create a new API token in your profile:') }}
 

resources/views/emails/auth-api-token-expired.blade.php

@@ -1,8 +1,7 @@
 @component('mail::message')
 
-{{ __('The API token ":token" will expire in 7 days!', ['token' => $tokenName]) }}
+{{ __('The API token ":token" expired.', ['token' => $tokenName]) }}
 
-{{ __('Please make sure to create a new API token and use the new one instead before it expires to avoid any disruptions in service.') }}
 
 {{ __('You can create a new API token in your profile:') }}
 

resources/views/emails/organization-invitation.blade.php

@@ -1,20 +1,6 @@
 @component('mail::message')
 {{ __('You have been invited to join the :organization organization!', ['organization' => $invitation->organization->name]) }}
 
-@if (Laravel\Fortify\Features::enabled(Laravel\Fortify\Features::registration()))
-{{ __('If you do not have an account, you may create one by clicking the button below. After creating an account, you may click the invitation acceptance button in this email to accept the team invitation:') }}
-
-@component('mail::button', ['url' => route('register')])
-{{ __('Create Account') }}
-@endcomponent
-
-{{ __('If you already have an account, you may accept this invitation by clicking the button below:') }}
-
-@else
-{{ __('You may accept this invitation by clicking the button below:') }}
-@endif
-
-
 @component('mail::button', ['url' => $acceptUrl])
 {{ __('Accept Invitation') }}
 @endcomponent

routes/api.php

@@ -42,8 +42,10 @@ Route::prefix('v1')->name('v1.')->group(static function (): void {
     ])->group(static function (): void {
         // Organization routes
         Route::name('organizations.')->group(static function (): void {
+            Route::post('/organizations', [OrganizationController::class, 'store'])->name('store');
             Route::get('/organizations/{organization}', [OrganizationController::class, 'show'])->name('show');
             Route::put('/organizations/{organization}', [OrganizationController::class, 'update'])->name('update');
+            Route::delete('/organizations/{organization}', [OrganizationController::class, 'destroy'])->name('destroy');
         });
 
         // Member routes
@@ -59,6 +61,8 @@ Route::prefix('v1')->name('v1.')->group(static function (): void {
         // User routes
         Route::name('users.')->group(static function (): void {
             Route::get('/users/me', [UserController::class, 'me'])->name('me');
+            Route::put('/users/{user}', [UserController::class, 'update'])->name('update');
+            Route::delete('/users/{user}', [UserController::class, 'destroy'])->name('destroy');
         });
 
         // Api token routes