Add permissions to all GitHub actions

.github/workflows/build-private.yml

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

.github/workflows/build-public.yml

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

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

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

.github/workflows/npm-build.yml

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

.github/workflows/npm-lint.yml

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

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

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

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

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

.github/workflows/npm-typecheck.yml

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

.github/workflows/phpstan.yml

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

.github/workflows/phpunit.yml

@@ -1,5 +1,7 @@
 name: PHPUnit Tests
 on: push
+permissions:
+  contents: read
 jobs:
   phpunit:
     runs-on: ubuntu-latest

.github/workflows/pint.yml

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

.github/workflows/playwright.yml

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

app/Console/Commands/SelfHost/SelfHostDatabaseConsistency.php

@@ -0,0 +1,123 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Console\Commands\SelfHost;
+
+use Illuminate\Console\Command;
+use Illuminate\Database\Query\Builder;
+use Illuminate\Database\Query\JoinClause;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Log;
+
+class SelfHostDatabaseConsistency extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'self-host:database-consistency';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = '';
+
+    /**
+     * Execute the console command.
+     */
+    public function handle(): int
+    {
+        $hadAProblem = false;
+
+        // Task need to be part of project in time entries
+        $problems = DB::table('time_entries')
+            ->select(['time_entries.id as id'])
+            ->join('tasks', 'time_entries.task_id', '=', 'tasks.id')
+            ->where('tasks.project_id', '!=', DB::raw('time_entries.project_id'))
+            ->get();
+        $this->logProblems($problems, 'Time entries have a task that does not belong to the project of the time entry', $hadAProblem);
+
+        // Client id is the client id of the project
+        $problems = DB::table('time_entries')
+            ->select(['time_entries.id as id'])
+            ->join('projects', 'time_entries.project_id', '=', 'projects.id')
+            ->where(DB::raw('coalesce(projects.client_id::varchar, \'\')'), '!=', DB::raw('coalesce(time_entries.client_id::varchar, \'\')'))
+            ->get();
+        $this->logProblems($problems, 'Time entries have a client that does not match the client of the project', $hadAProblem);
+
+        // Client id can only be not null if the project id is not null
+        $problems = DB::table('time_entries')
+            ->select(['time_entries.id as id'])
+            ->whereNotNull('client_id')
+            ->whereNull('project_id')
+            ->get();
+        $this->logProblems($problems, 'Time entries have a client but no project', $hadAProblem);
+
+        // Every user needs to be a member of at least one organization
+        $problems = DB::table('users')
+            ->select(['users.id as id'])
+            ->leftJoin('members', 'users.id', '=', 'members.user_id')
+            ->whereNull('members.id')
+            ->get();
+        $this->logProblems($problems, 'Users are not member of any organization', $hadAProblem);
+
+        // Every organization needs at least an owner
+        $problems = DB::table('organizations')
+            ->select(['organizations.id as id'])
+            ->leftJoin('members', function (JoinClause $join): void {
+                $join->on('organizations.id', '=', 'members.organization_id')
+                    ->where('members.role', '=', 'owner');
+            })
+            ->whereNull('members.id')
+            ->get();
+        $this->logProblems($problems, 'Organizations without an owner', $hadAProblem);
+
+        // Every member can only have one running time entry
+        $problems = DB::table('time_entries')
+            ->select(['user_id as id'])
+            ->whereNull('end')
+            ->groupBy('user_id')
+            ->havingRaw('count(*) > 1')
+            ->get(['user_id', DB::raw('count(*) as count')]);
+        $this->logProblems($problems, 'Users with more than one running time entry', $hadAProblem);
+
+        // Users have a current organization that they are not a member of
+        $problems = DB::table('users')
+            ->select(['users.id as id'])
+            ->whereNotNull('current_team_id')
+            ->whereNotIn('current_team_id', function (Builder $query): void {
+                $query->select('organization_id')
+                    ->from('members')
+                    ->whereColumn('members.user_id', 'users.id');
+            })->get();
+        $this->logProblems($problems, 'Users have a current organization that they are not a member of', $hadAProblem);
+
+        return $hadAProblem ? self::FAILURE : self::SUCCESS;
+    }
+
+    /**
+     * @param  Collection<int, \stdClass>  $problems
+     */
+    private function logProblems(Collection $problems, string $message, bool &$hadAProblem): void
+    {
+        $message = 'Consistency problem: '.$message;
+        if ($problems->isNotEmpty()) {
+            $ids = $problems->pluck('id');
+            $hadAProblem = true;
+            Log::error($message, [
+                'ids' => $ids,
+            ]);
+
+            $error = $message;
+            foreach ($ids as $id) {
+                $error .= "\n  - ".$id;
+            }
+            $this->error($error);
+        }
+    }
+}

app/Console/Kernel.php

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

app/Enums/DateFormat.php

@@ -10,26 +10,26 @@ enum DateFormat: string
 {
     use LaravelEnumHelper;
 
-    case PointSeperatedDMYYYY = 'point-seperated-d-m-yyyy';
+    case PointSeparatedDMYYYY = 'point-separated-d-m-yyyy';
-    case SlashSeperatedMMDDYYYY = 'slash-seperated-mm-dd-yyyy';
+    case SlashSeparatedMMDDYYYY = 'slash-separated-mm-dd-yyyy';
 
-    case SlashSeperatedDDMMYYYY = 'slash-seperated-dd-mm-yyyy';
+    case SlashSeparatedDDMMYYYY = 'slash-separated-dd-mm-yyyy';
 
-    case HyphenSeperatedDDMMYYY = 'hyphen-seperated-dd-mm-yyyy';
+    case HyphenSeparatedDDMMYYY = 'hyphen-separated-dd-mm-yyyy';
 
-    case HyphenSeperatedMMDDDYYYY = 'hyphen-seperated-mm-dd-yyyy';
+    case HyphenSeparatedMMDDDYYYY = 'hyphen-separated-mm-dd-yyyy';
 
-    case HyphenSeperatedYYYYMMDD = 'hyphen-seperated-yyyy-mm-dd';
+    case HyphenSeparatedYYYYMMDD = 'hyphen-separated-yyyy-mm-dd';
 
     public function toCarbonFormat(): string
     {
         return match ($this->value) {
-            self::PointSeperatedDMYYYY->value => 'j.n.Y',
+            self::PointSeparatedDMYYYY->value => 'j.n.Y',
-            self::SlashSeperatedMMDDYYYY->value => 'm/d/Y',
+            self::SlashSeparatedMMDDYYYY->value => 'm/d/Y',
-            self::SlashSeperatedDDMMYYYY->value => 'd/m/Y',
+            self::SlashSeparatedDDMMYYYY->value => 'd/m/Y',
-            self::HyphenSeperatedDDMMYYY->value => 'd-m-Y',
+            self::HyphenSeparatedDDMMYYY->value => 'd-m-Y',
-            self::HyphenSeperatedMMDDDYYYY->value => 'm-d-Y',
+            self::HyphenSeparatedMMDDDYYYY->value => 'm-d-Y',
-            self::HyphenSeperatedYYYYMMDD->value => 'Y-m-d',
+            self::HyphenSeparatedYYYYMMDD->value => 'Y-m-d',
         };
     }
 

app/Enums/IntervalFormat.php

@@ -13,9 +13,9 @@ enum IntervalFormat: string
     case Decimal = 'decimal';
     case HoursMinutes = 'hours-minutes';
 
-    case HoursMinutesColonSeperated = 'hours-minutes-colon-seperated';
+    case HoursMinutesColonSeparated = 'hours-minutes-colon-separated';
 
-    case HoursMinutesSecondsColonSeperated = 'hours-minutes-seconds-colon-seperated';
+    case HoursMinutesSecondsColonSeparated = 'hours-minutes-seconds-colon-separated';
 
     /**
      * @return array<string, string>

app/Events/DatabaseSeederAfterSeed.php

@@ -0,0 +1,14 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Events;
+
+use Illuminate\Foundation\Events\Dispatchable;
+
+class DatabaseSeederAfterSeed
+{
+    use Dispatchable;
+
+    public function __construct() {}
+}

app/Events/DatabaseSeederBeforeDelete.php

@@ -0,0 +1,14 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Events;
+
+use Illuminate\Foundation\Events\Dispatchable;
+
+class DatabaseSeederBeforeDelete
+{
+    use Dispatchable;
+
+    public function __construct() {}
+}

app/Filament/Resources/UserResource.php

@@ -23,6 +23,7 @@ use Filament\Tables;
 use Filament\Tables\Filters\TernaryFilter;
 use Filament\Tables\Table;
 use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Hash;
 use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
@@ -207,6 +208,14 @@ class UserResource extends Resource
                     }),
             ])
             ->bulkActions([
+                Tables\Actions\BulkAction::make('Resend verification email')
+                    ->icon('heroicon-o-paper-airplane')
+                    ->action(function (Collection $records): void {
+                        foreach ($records as $user) {
+                            /** @var User $user */
+                            $user->sendEmailVerificationNotification();
+                        }
+                    }),
             ]);
     }
 

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

@@ -0,0 +1,37 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers\Api\V1;
+
+use App\Http\Controllers\Controller;
+use App\Service\CurrencyService;
+use Brick\Money\Currency;
+use Brick\Money\ISOCurrencyProvider;
+use Illuminate\Http\JsonResponse;
+
+class CurrencyController extends Controller
+{
+    /**
+     * Get all currencies
+     *
+     * @response array{code: string, name: string, symbol: string}[]
+     *
+     * @operationId getCurrencies
+     */
+    public function index(): JsonResponse
+    {
+        $currencyService = app(CurrencyService::class);
+
+        $currencies = array_values(array_map(
+            fn (Currency $currency): array => [
+                'code' => $currency->getCurrencyCode(),
+                'name' => $currency->getName(),
+                'symbol' => $currencyService->getCurrencySymbol($currency->getCurrencyCode()),
+            ],
+            ISOCurrencyProvider::getInstance()->getAvailableCurrencies()
+        ));
+
+        return response()->json($currencies);
+    }
+}

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

@@ -226,6 +226,7 @@ class TimeEntryController extends Controller
                 'start' => $request->getStart()->timezone($timezone),
                 'end' => $request->getEnd()->timezone($timezone),
                 'localization' => $localizationService,
+                'showBillableRate' => $showBillableRate,
             ]);
             $footerViewFile = file_get_contents(resource_path('views/reports/time-entry-index/pdf-footer.blade.php'));
             if ($footerViewFile === false) {
@@ -428,6 +429,7 @@ class TimeEntryController extends Controller
                 'end' => $request->getEnd()->timezone($timezone),
                 'debug' => $debug,
                 'localization' => $localizationService,
+                'showBillableRate' => $showBillableRate,
             ]);
             $footerViewFile = file_get_contents(resource_path('views/reports/time-entry-aggregate/pdf-footer.blade.php'));
             if ($footerViewFile === false) {
@@ -456,7 +458,7 @@ class TimeEntryController extends Controller
                 ->putFileAs($folderPath, new File($tempFolder->path($filenameTemp)), $filename);
         } else {
             Excel::store(
-                new TimeEntriesReportExport($aggregatedData, $format, $currency, $group, $subGroup),
+                new TimeEntriesReportExport($aggregatedData, $format, $currency, $group, $subGroup, $showBillableRate),
                 $path,
                 config('filesystems.private'),
                 $format->getExportPackageType(),

app/Http/Requests/V1/ApiToken/ApiTokenStoreRequest.php

@@ -4,9 +4,9 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\ApiToken;
 
-use Illuminate\Foundation\Http\FormRequest;
+use App\Http\Requests\V1\BaseFormRequest;
 
-class ApiTokenStoreRequest extends FormRequest
+class ApiTokenStoreRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

app/Http/Requests/V1/BaseFormRequest.php

@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Requests\V1;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class BaseFormRequest extends FormRequest
+{
+    /**
+     * @return list<string>
+     */
+    protected function moneyRules(bool $bigInt = false): array
+    {
+        $rules = [
+            'integer',
+            'min:0',
+        ];
+        if ($bigInt) {
+            $rules[] = 'max:9223372036854775807';
+        } else {
+            $rules[] = 'max:2147483647';
+        }
+
+        return $rules;
+    }
+}

app/Http/Requests/V1/Client/ClientIndexRequest.php

@@ -4,10 +4,10 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Client;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use Illuminate\Contracts\Validation\ValidationRule;
-use Illuminate\Foundation\Http\FormRequest;
 
-class ClientIndexRequest extends FormRequest
+class ClientIndexRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

app/Http/Requests/V1/Client/ClientStoreRequest.php

@@ -4,17 +4,17 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Client;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Client;
 use App\Models\Organization;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class ClientStoreRequest extends FormRequest
+class ClientStoreRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

app/Http/Requests/V1/Client/ClientUpdateRequest.php

@@ -4,18 +4,18 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Client;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Client;
 use App\Models\Organization;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
 
 /**
  * @property Organization $organization Organization from model binding
  * @property Client|null $client Client from model binding
  */
-class ClientUpdateRequest extends FormRequest
+class ClientUpdateRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

app/Http/Requests/V1/Import/ImportRequest.php

@@ -4,10 +4,10 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Import;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use Illuminate\Contracts\Validation\ValidationRule;
-use Illuminate\Foundation\Http\FormRequest;
 
-class ImportRequest extends FormRequest
+class ImportRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,14 +4,14 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Invitation;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use Illuminate\Contracts\Validation\ValidationRule;
-use Illuminate\Foundation\Http\FormRequest;
 
 /**
  * @property Organization $organization
  */
-class InvitationIndexRequest extends FormRequest
+class InvitationIndexRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -5,18 +5,18 @@ declare(strict_types=1);
 namespace App\Http\Requests\V1\Invitation;
 
 use App\Enums\Role;
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use App\Models\OrganizationInvitation;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Validation\Rule;
 use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
 
 /**
  * @property Organization $organization
  */
-class InvitationStoreRequest extends FormRequest
+class InvitationStoreRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,14 +4,14 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Member;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use Illuminate\Contracts\Validation\ValidationRule;
-use Illuminate\Foundation\Http\FormRequest;
 
 /**
  * @property Organization $organization
  */
-class MemberIndexRequest extends FormRequest
+class MemberIndexRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,17 +4,17 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Member;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Member;
 use App\Models\Organization;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 
 /**
  * @property Organization $organization
  */
-class MemberMergeIntoRequest extends FormRequest
+class MemberMergeIntoRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -5,15 +5,15 @@ declare(strict_types=1);
 namespace App\Http\Requests\V1\Member;
 
 use App\Enums\Role;
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use Illuminate\Contracts\Validation\ValidationRule;
-use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Validation\Rule;
 
 /**
  * @property Organization $organization
  */
-class MemberUpdateRequest extends FormRequest
+class MemberUpdateRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -27,12 +27,12 @@ class MemberUpdateRequest extends FormRequest
                 'string',
                 Rule::enum(Role::class),
             ],
-            'billable_rate' => [
+            'billable_rate' => array_merge(
-                'nullable',
+                [
-                'integer',
+                    'nullable',
-                'min:0',
+                ],
-                'max:2147483647',
+                $this->moneyRules()
-            ],
+            ),
         ];
     }
 

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

@@ -9,14 +9,14 @@ use App\Enums\DateFormat;
 use App\Enums\IntervalFormat;
 use App\Enums\NumberFormat;
 use App\Enums\TimeFormat;
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
-use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Validation\Rule;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class OrganizationUpdateRequest extends FormRequest
+class OrganizationUpdateRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -30,12 +30,12 @@ class OrganizationUpdateRequest extends FormRequest
                 'string',
                 'max:255',
             ],
-            'billable_rate' => [
+            'billable_rate' => array_merge(
-                'nullable',
+                [
-                'integer',
+                    'nullable',
-                'min:0',
+                ],
-                'max:2147483647',
+                $this->moneyRules()
-            ],
+            ),
             'employees_can_see_billable_rates' => [
                 'boolean',
             ],

app/Http/Requests/V1/Project/ProjectIndexRequest.php

@@ -4,10 +4,10 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Project;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use Illuminate\Contracts\Validation\ValidationRule;
-use Illuminate\Foundation\Http\FormRequest;
 
-class ProjectIndexRequest extends FormRequest
+class ProjectIndexRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

app/Http/Requests/V1/Project/ProjectStoreRequest.php

@@ -4,13 +4,13 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Project;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Client;
 use App\Models\Organization;
 use App\Models\Project;
 use App\Rules\ColorRule;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Support\Str;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
@@ -18,7 +18,7 @@ use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
 /**
  * @property Organization $organization Organization from model binding
  */
-class ProjectStoreRequest extends FormRequest
+class ProjectStoreRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -55,12 +55,12 @@ class ProjectStoreRequest extends FormRequest
                 'required',
                 'boolean',
             ],
-            'billable_rate' => [
+            'billable_rate' => array_merge(
-                'nullable',
+                [
-                'integer',
+                    'nullable',
-                'min:0',
+                ],
-                'max:2147483647',
+                $this->moneyRules()
-            ],
+            ),
             // ID of the client
             'client_id' => [
                 'present',

app/Http/Requests/V1/Project/ProjectUpdateRequest.php

@@ -4,13 +4,13 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Project;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Client;
 use App\Models\Organization;
 use App\Models\Project;
 use App\Rules\ColorRule;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Support\Str;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
@@ -19,7 +19,7 @@ use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
  * @property Organization $organization Organization from model binding
  * @property Project|null $project Project from model binding
  */
-class ProjectUpdateRequest extends FormRequest
+class ProjectUpdateRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -68,12 +68,11 @@ class ProjectUpdateRequest extends FormRequest
                     return $builder->whereBelongsTo($this->organization, 'organization');
                 })->uuid(),
             ],
-            'billable_rate' => [
+            'billable_rate' => array_merge([
                 'nullable',
-                'integer',
-                'min:0',
-                'max:2147483647',
             ],
+                $this->moneyRules()
+            ),
             // Estimated time in seconds
             'estimated_time' => [
                 'nullable',

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

@@ -4,17 +4,17 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\ProjectMember;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Member;
 use App\Models\Organization;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class ProjectMemberStoreRequest extends FormRequest
+class ProjectMemberStoreRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -31,12 +31,12 @@ class ProjectMemberStoreRequest extends FormRequest
                     return $builder->whereBelongsTo($this->organization, 'organization');
                 })->uuid(),
             ],
-            'billable_rate' => [
+            'billable_rate' => array_merge(
-                'nullable',
+                [
-                'integer',
+                    'nullable',
-                'min:0',
+                ],
-                'max:2147483647',
+                $this->moneyRules()
-            ],
+            ),
         ];
     }
 

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

@@ -4,14 +4,14 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\ProjectMember;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use Illuminate\Contracts\Validation\ValidationRule;
-use Illuminate\Foundation\Http\FormRequest;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class ProjectMemberUpdateRequest extends FormRequest
+class ProjectMemberUpdateRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -21,12 +21,12 @@ class ProjectMemberUpdateRequest extends FormRequest
     public function rules(): array
     {
         return [
-            'billable_rate' => [
+            'billable_rate' => array_merge(
-                'nullable',
+                [
-                'integer',
+                    'nullable',
-                'min:0',
+                ],
-                'max:2147483647',
+                $this->moneyRules()
-            ],
+            ),
         ];
     }
 

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

@@ -7,17 +7,17 @@ namespace App\Http\Requests\V1\Report;
 use App\Enums\TimeEntryAggregationType;
 use App\Enums\TimeEntryAggregationTypeInterval;
 use App\Enums\Weekday;
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use Illuminate\Contracts\Validation\Rule as LegacyValidationRule;
 use Illuminate\Contracts\Validation\ValidationRule;
-use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Support\Carbon;
 use Illuminate\Validation\Rule;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class ReportStoreRequest extends FormRequest
+class ReportStoreRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,15 +4,15 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Report;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use Illuminate\Contracts\Validation\ValidationRule;
-use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Support\Carbon;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class ReportUpdateRequest extends FormRequest
+class ReportUpdateRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,17 +4,17 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Tag;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use App\Models\Tag;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class TagStoreRequest extends FormRequest
+class TagStoreRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,18 +4,18 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Tag;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use App\Models\Tag;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
 
 /**
  * @property Organization $organization Organization from model binding
  * @property Tag|null $tag Tag from model binding
  */
-class TagUpdateRequest extends FormRequest
+class TagUpdateRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,19 +4,19 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Task;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use App\Models\Project;
 use App\Service\PermissionStore;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Support\Facades\Auth;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class TaskIndexRequest extends FormRequest
+class TaskIndexRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,19 +4,19 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Task;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use App\Models\Project;
 use App\Models\Task;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class TaskStoreRequest extends FormRequest
+class TaskStoreRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,18 +4,18 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\Task;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use App\Models\Task;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
 
 /**
  * @property Organization $organization Organization from model binding
  * @property Task|null $task Task from model binding
  */
-class TaskUpdateRequest extends FormRequest
+class TaskUpdateRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -7,6 +7,7 @@ namespace App\Http\Requests\V1\TimeEntry;
 use App\Enums\ExportFormat;
 use App\Enums\TimeEntryAggregationType;
 use App\Enums\TimeEntryAggregationTypeInterval;
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Client;
 use App\Models\Member;
 use App\Models\Organization;
@@ -16,7 +17,6 @@ use App\Models\Task;
 use App\Models\User;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Support\Carbon;
 use Illuminate\Validation\Rule;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
@@ -24,7 +24,7 @@ use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 /**
  * @property Organization $organization
  */
-class TimeEntryAggregateExportRequest extends FormRequest
+class TimeEntryAggregateExportRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -5,6 +5,7 @@ declare(strict_types=1);
 namespace App\Http\Requests\V1\TimeEntry;
 
 use App\Enums\TimeEntryAggregationType;
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Client;
 use App\Models\Member;
 use App\Models\Organization;
@@ -14,7 +15,6 @@ use App\Models\Task;
 use App\Models\User;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Illuminate\Support\Carbon;
 use Illuminate\Validation\Rule;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
@@ -22,7 +22,7 @@ use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 /**
  * @property Organization $organization
  */
-class TimeEntryAggregateRequest extends FormRequest
+class TimeEntryAggregateRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,14 +4,14 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\TimeEntry;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Organization;
 use Illuminate\Contracts\Validation\ValidationRule;
-use Illuminate\Foundation\Http\FormRequest;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class TimeEntryDestroyMultipleRequest extends FormRequest
+class TimeEntryDestroyMultipleRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,6 +4,7 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\TimeEntry;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Client;
 use App\Models\Member;
 use App\Models\Organization;
@@ -12,13 +13,12 @@ use App\Models\Tag;
 use App\Models\Task;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 
 /**
  * @property Organization $organization
  */
-class TimeEntryIndexRequest extends FormRequest
+class TimeEntryIndexRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,6 +4,7 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\TimeEntry;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Member;
 use App\Models\Organization;
 use App\Models\Project;
@@ -11,13 +12,12 @@ use App\Models\Tag;
 use App\Models\Task;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class TimeEntryStoreRequest extends FormRequest
+class TimeEntryStoreRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,6 +4,7 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\TimeEntry;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Member;
 use App\Models\Organization;
 use App\Models\Project;
@@ -11,13 +12,12 @@ use App\Models\Tag;
 use App\Models\Task;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class TimeEntryUpdateMultipleRequest extends FormRequest
+class TimeEntryUpdateMultipleRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,6 +4,7 @@ declare(strict_types=1);
 
 namespace App\Http\Requests\V1\TimeEntry;
 
+use App\Http\Requests\V1\BaseFormRequest;
 use App\Models\Member;
 use App\Models\Organization;
 use App\Models\Project;
@@ -11,13 +12,12 @@ use App\Models\Tag;
 use App\Models\Task;
 use Illuminate\Contracts\Validation\ValidationRule;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class TimeEntryUpdateRequest extends FormRequest
+class TimeEntryUpdateRequest extends BaseFormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,8 +4,14 @@ declare(strict_types=1);
 
 namespace App\Http\Resources\V1\Organization;
 
+use App\Enums\CurrencyFormat;
+use App\Enums\DateFormat;
+use App\Enums\IntervalFormat;
+use App\Enums\NumberFormat;
+use App\Enums\TimeFormat;
 use App\Http\Resources\V1\BaseResource;
 use App\Models\Organization;
+use App\Service\CurrencyService;
 use Illuminate\Http\Request;
 
 /**
@@ -34,6 +40,8 @@ class OrganizationResource extends BaseResource
      */
     public function toArray(Request $request): array
     {
+        $currencyService = app(CurrencyService::class);
+
         return [
             /** @var string $id ID */
             'id' => $this->resource->id,
@@ -47,15 +55,17 @@ class OrganizationResource extends BaseResource
             'employees_can_see_billable_rates' => $this->resource->employees_can_see_billable_rates,
             /** @var string $currency Currency code (ISO 4217) */
             'currency' => $this->resource->currency,
-            /** @var string $number_format Number format */
+            /** @var string $currency_symbol Currency symbol */
+            'currency_symbol' => $currencyService->getCurrencySymbol($this->resource->currency),
+            /** @var NumberFormat $number_format Number format */
             'number_format' => $this->resource->number_format->value,
-            /** @var string $currency_format Currency format */
+            /** @var CurrencyFormat $currency_format Currency format */
             'currency_format' => $this->resource->currency_format->value,
-            /** @var string $date_format Date format */
+            /** @var DateFormat $date_format Date format */
             'date_format' => $this->resource->date_format->value,
-            /** @var string $interval_format Interval format */
+            /** @var IntervalFormat $interval_format Interval format */
             'interval_format' => $this->resource->interval_format->value,
-            /** @var string $time_format Time format */
+            /** @var TimeFormat $time_format Time format */
             'time_format' => $this->resource->time_format->value,
         ];
     }

app/Http/Resources/V1/Report/DetailedWithDataReportResource.php

@@ -4,8 +4,14 @@ declare(strict_types=1);
 
 namespace App\Http\Resources\V1\Report;
 
+use App\Enums\CurrencyFormat;
+use App\Enums\DateFormat;
+use App\Enums\IntervalFormat;
+use App\Enums\NumberFormat;
+use App\Enums\TimeFormat;
 use App\Http\Resources\V1\BaseResource;
 use App\Models\Report;
+use App\Service\CurrencyService;
 use Illuminate\Http\Request;
 
 /**
@@ -64,6 +70,8 @@ class DetailedWithDataReportResource extends BaseResource
      */
     public function toArray(Request $request): array
     {
+        $currencyService = app(CurrencyService::class);
+
         return [
             /** @var string $name Name */
             'name' => $this->resource->name,
@@ -73,6 +81,18 @@ class DetailedWithDataReportResource extends BaseResource
             'public_until' => $this->formatDateTime($this->resource->public_until),
             /** @var string $currency Currency code (ISO 4217) */
             'currency' => $this->resource->organization->currency,
+            /** @var NumberFormat $number_format Number format */
+            'number_format' => $this->resource->organization->number_format->value,
+            /** @var CurrencyFormat $currency_format Currency format */
+            'currency_format' => $this->resource->organization->currency_format->value,
+            /** @var string $currency_symbol Currency symbol */
+            'currency_symbol' => $currencyService->getCurrencySymbol($this->resource->organization->currency),
+            /** @var DateFormat $date_format Date format */
+            'date_format' => $this->resource->organization->date_format->value,
+            /** @var IntervalFormat $interval_format Interval format */
+            'interval_format' => $this->resource->organization->interval_format->value,
+            /** @var TimeFormat $time_format Time format */
+            'time_format' => $this->resource->organization->time_format->value,
             'properties' => [
                 /** @var string $group Type of first grouping */
                 'group' => $this->resource->properties->group->value,

app/Service/DeletionService.php

@@ -100,12 +100,18 @@ class DeletionService
 
         // Make sure all users have at least one organization and delete placeholders
         foreach ($users as $user) {
+            /** @var User $user */
             if ($ignoreUser !== null && $user->is($ignoreUser)) {
                 continue;
             }
             if ($user->is_placeholder) {
                 $user->delete();
             } else {
+                if ($user->current_team_id === $organization->getKey()) {
+                    $user->currentOrganization()->disassociate();
+                    $user->save();
+                }
+
                 $this->userService->makeSureUserHasAtLeastOneOrganization($user);
                 $this->userService->makeSureUserHasCurrentOrganization($user);
             }

app/Service/LocalizationService.php

@@ -80,16 +80,16 @@ class LocalizationService
         if ($this->intervalFormat === IntervalFormat::Decimal) {
             $interval->cascade();
 
-            return $this->formatNumber($interval->totalHours);
+            return $this->formatNumber($interval->totalHours).' h';
         } elseif ($this->intervalFormat === IntervalFormat::HoursMinutes) {
             $interval->cascade();
 
             return ((int) floor($interval->totalHours)).'h '.$interval->format('%I').'m';
-        } elseif ($this->intervalFormat === IntervalFormat::HoursMinutesColonSeperated) {
+        } elseif ($this->intervalFormat === IntervalFormat::HoursMinutesColonSeparated) {
             $interval->cascade();
 
             return ((int) floor($interval->totalHours)).':'.$interval->format('%I');
-        } elseif ($this->intervalFormat === IntervalFormat::HoursMinutesSecondsColonSeperated) {
+        } elseif ($this->intervalFormat === IntervalFormat::HoursMinutesSecondsColonSeparated) {
             $interval->cascade();
 
             return ((int) floor($interval->totalHours)).':'.$interval->format('%I:%S');

app/Service/MemberService.php

@@ -164,6 +164,11 @@ class MemberService
     public function makeMemberToPlaceholder(Member $member, bool $makeSureUserHasAtLeastOneOrganization = true): void
     {
         $user = $member->user;
+        if ($user->current_team_id === $member->organization_id) {
+            $user->currentTeam()->disassociate();
+            $user->save();
+        }
+
         $placeholderUser = $user->replicate();
         $placeholderUser->is_placeholder = true;
         $placeholderUser->save();
@@ -175,6 +180,7 @@ class MemberService
         $this->userService->assignOrganizationEntitiesToDifferentUser($member->organization, $user, $placeholderUser);
         if ($makeSureUserHasAtLeastOneOrganization) {
             $this->userService->makeSureUserHasAtLeastOneOrganization($user);
+            $this->userService->makeSureUserHasCurrentOrganization($user);
         }
     }
 }

app/Service/ReportExport/TimeEntriesReportExport.php

@@ -46,6 +46,8 @@ class TimeEntriesReportExport implements FromView, ShouldAutoSize, WithCustomCsv
 
     private TimeEntryAggregationType $subGroup;
 
+    private bool $showBillableRate;
+
     /**
      * @param array{
      *         grouped_type: string|null,
@@ -66,13 +68,14 @@ class TimeEntriesReportExport implements FromView, ShouldAutoSize, WithCustomCsv
      *         cost: int|null
      *   } $data
      */
-    public function __construct(array $data, ExportFormat $exportFormat, string $currency, TimeEntryAggregationType $group, TimeEntryAggregationType $subGroup)
+    public function __construct(array $data, ExportFormat $exportFormat, string $currency, TimeEntryAggregationType $group, TimeEntryAggregationType $subGroup, bool $showBillableRate)
     {
         $this->data = $data;
         $this->exportFormat = $exportFormat;
         $this->currency = $currency;
         $this->group = $group;
         $this->subGroup = $subGroup;
+        $this->showBillableRate = $showBillableRate;
     }
 
     public function view(): View
@@ -83,6 +86,7 @@ class TimeEntriesReportExport implements FromView, ShouldAutoSize, WithCustomCsv
             'group' => $this->group,
             'subGroup' => $this->subGroup,
             'exportFormat' => $this->exportFormat,
+            'showBillableRate' => $this->showBillableRate,
         ]);
     }
 

app/Service/UserService.php

@@ -114,13 +114,15 @@ class UserService
 
     public function makeSureUserHasCurrentOrganization(User $user): void
     {
-        if ($user->currentOrganization !== null) {
+        if ($user->current_team_id !== null) {
             return;
         }
 
         $organization = $user->organizations()->first();
-        $user->currentOrganization()->associate($organization);
+        if ($organization !== null) {
-        $user->save();
+            $user->currentOrganization()->associate($organization);
+            $user->save();
+        }
     }
 
     /**

config/app.php

@@ -147,7 +147,7 @@ return [
         'default_currency' => env('LOCALIZATION_DEFAULT_CURRENCY', 'EUR'),
         'default_number_format' => env('LOCALIZATION_DEFAULT_NUMBER_FORMAT', NumberFormat::ThousandsPointDecimalComma->value),
         'default_currency_format' => env('LOCALIZATION_DEFAULT_CURRENCY_FORMAT', CurrencyFormat::ISOCodeAfterWithSpace->value),
-        'default_date_format' => env('LOCALIZATION_DEFAULT_DATE_FORMAT', DateFormat::HyphenSeperatedYYYYMMDD->value),
+        'default_date_format' => env('LOCALIZATION_DEFAULT_DATE_FORMAT', DateFormat::HyphenSeparatedYYYYMMDD->value),
         'default_time_format' => env('LOCALIZATION_DEFAULT_TIME_FORMAT', TimeFormat::TwentyFourHours->value),
         'default_interval_format' => env('LOCALIZATION_DEFAULT_INTERVAL_FORMAT', IntervalFormat::HoursMinutes->value),
     ],

config/scheduling.php

@@ -8,5 +8,6 @@ return [
         'time_entry_send_still_running_mails' => (bool) env('SCHEDULING_TASK_TIME_ENTRY_SEND_STILL_RUNNING_MAILS', true),
         'self_hosting_check_for_update' => (bool) env('SCHEDULING_TASK_SELF_HOSTING_CHECK_FOR_UPDATE', true),
         'self_hosting_telemetry' => (bool) env('SCHEDULING_TASK_SELF_HOSTING_TELEMETRY', true),
+        'self_hosting_database_consistency' => (bool) env('SCHEDULING_TASK_SELF_HOSTING_DATABASE_CONSISTENCY', false),
     ],
 ];

database/migrations/2025_05_06_152804_fix_typos_in_organizations_table_format_columns.php

@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        // date_format
+        DB::statement("update organizations set date_format = 'point-separated-d-m-yyyy' where date_format = 'point-seperated-d-m-yyyy'");
+        DB::statement("update organizations set date_format = 'slash-separated-mm-dd-yyyy' where date_format = 'slash-seperated-mm-dd-yyyy'");
+        DB::statement("update organizations set date_format = 'slash-separated-dd-mm-yyyy' where date_format = 'slash-seperated-dd-mm-yyyy'");
+        DB::statement("update organizations set date_format = 'hyphen-separated-dd-mm-yyyy'where date_format = 'hyphen-seperated-dd-mm-yyyy'");
+        DB::statement("update organizations set date_format = 'hyphen-separated-mm-dd-yyyy' where date_format = 'hyphen-seperated-mm-dd-yyyy'");
+        DB::statement("update organizations set date_format = 'hyphen-separated-yyyy-mm-dd' where date_format = 'hyphen-seperated-yyyy-mm-dd'");
+
+        // interval_format
+        DB::statement("update organizations set interval_format = 'hours-minutes-colon-separated' where interval_format = 'hours-minutes-colon-seperated'");
+        DB::statement("update organizations set interval_format = 'hours-minutes-seconds-colon-separated' where interval_format = 'hours-minutes-seconds-colon-seperated'");
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        // date_format
+        DB::statement("update organizations set date_format = 'point-seperated-d-m-yyyy' where date_format = 'point-separated-d-m-yyyy'");
+        DB::statement("update organizations set date_format = 'slash-seperated-mm-dd-yyyy' where date_format = 'slash-separated-mm-dd-yyyy'");
+        DB::statement("update organizations set date_format = 'slash-seperated-dd-mm-yyyy' where date_format = 'slash-separated-dd-mm-yyyy'");
+        DB::statement("update organizations set date_format = 'hyphen-seperated-dd-mm-yyyy'where date_format = 'hyphen-separated-dd-mm-yyyy'");
+        DB::statement("update organizations set date_format = 'hyphen-seperated-mm-dd-yyyy' where date_format = 'hyphen-separated-mm-dd-yyyy'");
+        DB::statement("update organizations set date_format = 'hyphen-seperated-yyyy-mm-dd' where date_format = 'hyphen-separated-yyyy-mm-dd'");
+
+        // interval_format
+        DB::statement("update organizations set interval_format = 'hours-minutes-colon-seperated' where interval_format = 'hours-minutes-colon-separated'");
+        DB::statement("update organizations set interval_format = 'hours-minutes-seconds-colon-seperated' where interval_format = 'hours-minutes-seconds-colon-separated'");
+    }
+};

database/migrations/2025_05_16_075757_add_foreign_key_for_current_team_id_in_users_table.php

@@ -0,0 +1,43 @@
+<?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
+    {
+        DB::statement('
+            update users
+            set current_team_id = null
+            where id in (
+                select users.id from users
+                left join organizations on users.current_team_id = organizations.id
+                where users.current_team_id is not null and organizations.id is null
+            )
+        ');
+        Schema::table('users', function (Blueprint $table): void {
+            $table->foreign('current_team_id', 'organizations_current_organization_id_foreign')
+                ->references('id')
+                ->on('organizations')
+                ->onDelete('restrict')
+                ->onUpdate('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table): void {
+            $table->dropForeign('organizations_current_organization_id_foreign');
+        });
+    }
+};

database/seeders/DatabaseSeeder.php

@@ -5,6 +5,8 @@ declare(strict_types=1);
 namespace Database\Seeders;
 
 use App\Enums\Role;
+use App\Events\DatabaseSeederAfterSeed;
+use App\Events\DatabaseSeederBeforeDelete;
 use App\Models\Audit;
 use App\Models\Client;
 use App\Models\Member;
@@ -184,10 +186,13 @@ class DatabaseSeeder extends Seeder
             'email' => 'admin@example.com',
         ]);
 
+        DatabaseSeederAfterSeed::dispatch();
     }
 
     private function deleteAll(): void
     {
+        DatabaseSeederBeforeDelete::dispatch();
+
         // Laravel Passport tables
         DB::table((new RefreshToken)->getTable())->delete();
         DB::table((new Token)->getTable())->delete();
@@ -213,6 +218,9 @@ class DatabaseSeeder extends Seeder
         DB::table((new Client)->getTable())->delete();
         DB::table((new Member)->getTable())->delete();
         DB::table((new OrganizationInvitation)->getTable())->delete();
+        DB::table((new User)->getTable())->update([
+            'current_team_id' => null,
+        ]);
         DB::table((new Organization)->getTable())->delete();
         DB::table((new User)->getTable())->delete();
     }

e2e/organization.spec.ts

@@ -7,6 +7,29 @@ async function goToOrganizationSettings(page) {
     await page.getByText('Organization Settings').click();
 }
 
+async function createTimeEntry(page, duration: string) {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/time');
+    await page.getByRole('button', { name: 'Manual time entry' }).click();
+
+    // Fill in the time entry details
+    await page.getByTestId('time_entry_description').fill('Test time entry');
+
+    // Set duration
+    await page.locator('[role="dialog"] input[name="Duration"]').fill(duration);
+    await page.locator('[role="dialog"] input[name="Duration"]').press('Tab');
+
+    // Submit the time entry
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Time Entry' }).click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/time-entries') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201
+        ),
+    ]);
+}
+
 test('test that organization name can be updated', async ({ page }) => {
     await goToOrganizationSettings(page);
     await page.getByLabel('Organization Name').fill('NEW ORG NAME');
@@ -27,9 +50,11 @@ test('test that organization billable rate can be updated with all existing time
         .getByLabel('Organization Billable Rate')
         .fill(newBillableRate.toString());
     await page
-        .locator('button')
+        .locator('form')
-        .filter({ hasText: /^Save$/ })
+        .filter({ hasText: 'Organization Billable' })
+        .getByRole('button', { name: 'Save' })
         .click();
+
     await Promise.all([
         page
             .getByRole('button', { name: 'Yes, update existing time entries' })
@@ -51,4 +76,173 @@ test('test that organization billable rate can be updated with all existing time
     ]);
 });
 
-// TODO: Add Test for import
+test('test that organization format settings can be updated', async ({
+    page,
+}) => {
+    await goToOrganizationSettings(page);
+
+    // Test number format
+    await page.getByLabel('Number Format').click();
+    await page.getByRole('option', { name: '1,111.11' }).click();
+    await Promise.all([
+        page
+            .locator('form')
+            .filter({ hasText: 'Number Format' })
+            .getByRole('button', { name: 'Save' })
+            .click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/organizations/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.number_format === 'comma-point'
+        ),
+    ]);
+
+    // Test currency format
+    await page.getByLabel('Currency Format').click();
+    await page.getByRole('option', { name: '111 EUR' }).click();
+    await Promise.all([
+        page
+            .locator('form')
+            .filter({ hasText: 'Currency Format' })
+            .getByRole('button', { name: 'Save' })
+            .click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/organizations/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.currency_format ===
+                    'iso-code-after-with-space'
+        ),
+    ]);
+
+    // Test date format
+    await page.getByLabel('Date Format').click();
+    await page.getByRole('option', { name: 'DD/MM/YYYY' }).click();
+    await Promise.all([
+        page
+            .locator('form')
+            .filter({ hasText: 'Date Format' })
+            .getByRole('button', { name: 'Save' })
+            .click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/organizations/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.date_format ===
+                    'slash-separated-dd-mm-yyyy'
+        ),
+    ]);
+
+    // Test time format
+    await page.getByLabel('Time Format').click();
+    await page.getByRole('option', { name: '24-hour clock' }).click();
+    await Promise.all([
+        page
+            .locator('form')
+            .filter({ hasText: 'Time Format' })
+            .getByRole('button', { name: 'Save' })
+            .click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/organizations/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.time_format === '24-hours'
+        ),
+    ]);
+
+    // Test interval format
+    await page.getByLabel('Time Duration Format').click();
+    await page.getByRole('option', { name: '12:03', exact: true }).click();
+    await Promise.all([
+        page
+            .locator('form')
+            .filter({ hasText: 'Time Duration Format' })
+            .getByRole('button', { name: 'Save' })
+            .click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/organizations/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.interval_format ===
+                    'hours-minutes-colon-separated'
+        ),
+    ]);
+});
+
+test('test that format settings are reflected in the dashboard', async ({
+    page,
+}) => {
+    // check that 0h 00min is displayed
+    await expect(
+        page.getByText('0h 00min', { exact: true }).nth(0)
+    ).toBeVisible();
+
+    // First set the format settings
+    await goToOrganizationSettings(page);
+
+    // Set number format to comma-point
+    await page.getByLabel('Number Format').click();
+    await page.getByRole('option', { name: '1,111.11' }).click();
+
+    // Set currency format to symbol-after
+    await page.getByLabel('Currency Format').click();
+    await page.getByRole('option', { name: '111€' }).click();
+
+    // Set interval format to hours-minutes-colon-separated
+    await page.getByLabel('Time Duration Format').click();
+    await page.getByRole('option', { name: '12:03', exact: true }).click();
+
+    // Set date format to DD/MM/YYYY
+    await page.getByLabel('Date Format').click();
+    await page.getByRole('option', { name: 'DD/MM/YYYY' }).click();
+
+    await Promise.all([
+        page
+            .locator('form')
+            .filter({ hasText: 'Time Duration Format' })
+            .getByRole('button', { name: 'Save' })
+            .click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/organizations/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 200 &&
+                (await response.json()).data.interval_format ===
+                    'hours-minutes-colon-separated' &&
+                (await response.json()).data.currency_format ===
+                    'symbol-after' &&
+                (await response.json()).data.number_format === 'comma-point'
+        ),
+    ]);
+
+    await createTimeEntry(page, '00:00');
+
+    // Go to dashboard and check the formats
+    await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
+
+    // Check billable amount format (number and currency)
+    await expect(page.getByText('0.00€')).toBeVisible();
+
+    // check that 00:00 is displayed
+    await expect(page.getByText('0:00', { exact: true }).nth(0)).toBeVisible();
+    // check that 0h 00min is not displayed
+    await expect(
+        page.getByText('0h 00min', { exact: true }).nth(0)
+    ).not.toBeVisible();
+
+    // check that the current date is displayed in the dd/mm/yyyy format on the time page
+    await page.goto(PLAYWRIGHT_BASE_URL + '/time');
+    await expect(
+        page
+            .getByText(new Date().toLocaleDateString('en-GB'), { exact: true })
+            .nth(0)
+    ).toBeVisible();
+});
+
+// TODO: Test 12-hour clock format

e2e/project-members.spec.ts

@@ -1,7 +1,9 @@
 import { expect, Page } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 import { test } from '../playwright/fixtures';
-import { formatCents } from '../resources/js/packages/ui/src/utils/money';
+import { formatCentsWithOrganizationDefaults } from './utils/money';
+import type { CurrencyFormat } from '../resources/js/packages/ui/src/utils/money';
+import { NumberFormat } from '@/packages/ui/src/utils/number';
 
 async function goToProjectsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
@@ -61,6 +63,6 @@ test('test that updating project member billable rate works for existing time en
         page
             .getByRole('row')
             .first()
-            .getByText(formatCents(newBillableRate * 100, 'EUR'))
+            .getByText(formatCentsWithOrganizationDefaults(newBillableRate * 100))
     ).toBeVisible();
 });

e2e/projects.spec.ts

@@ -1,7 +1,8 @@
 import { expect, Page } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 import { test } from '../playwright/fixtures';
-import { formatCents } from '../resources/js/packages/ui/src/utils/money';
+import { formatCentsWithOrganizationDefaults } from './utils/money';
+import type { CurrencyFormat } from '../resources/js/packages/ui/src/utils/money';
 
 async function goToProjectsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
@@ -131,7 +132,7 @@ test('test that updating billable rate works with existing time entries', async
         page
             .getByRole('row')
             .first()
-            .getByText(formatCents(newBillableRate * 100, 'EUR'))
+            .getByText(formatCentsWithOrganizationDefaults(newBillableRate * 100))
     ).toBeVisible();
 });
 

e2e/reporting.spec.ts

@@ -1,5 +1,210 @@
-// TODO: Test filter
+import { expect, Page } from '@playwright/test';
+import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
+import { test } from '../playwright/fixtures';
 
-// TODO: Test date range
 
-// TODO: Test grouping and sub-grouping
+
+async function goToTimeOverview(page: Page) {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/time');
+}
+
+async function goToReporting(page: Page) {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/reporting');
+}
+
+async function goToReportingDetailed(page: Page) {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/reporting/detailed');
+}
+
+async function createTimeEntryWithProject(page: Page, projectName: string, duration: string) {
+    // First create the project through the Projects page
+    await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
+    await page.getByRole('button', { name: 'Create Project' }).click();
+    await page.getByLabel('Project Name').fill(projectName);
+    await page.getByRole('dialog').getByRole('button', { name: 'Create Project' }).click();
+
+    // Wait for the project to be created and visible in the list
+    await page.getByText(projectName).waitFor({ state: 'visible' });
+
+    // Then create the time entry
+    await goToTimeOverview(page);
+    await page.getByRole('button', { name: 'Manual time entry' }).click();
+
+    // Fill in the time entry details
+    await page.getByTestId('time_entry_description').fill(`Time entry for ${projectName}`);
+
+    await page.getByRole('button', { name: 'No Project' }).click();
+    await page.getByText(projectName).click();
+
+    // Set duration
+    await page.locator('[role="dialog"] input[name="Duration"]').fill(duration);
+    await page.locator('[role="dialog"] input[name="Duration"]').press('Tab');
+
+    // Submit the time entry
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Time Entry' }).click(),
+        page.waitForResponse(response => response.url().includes('/time-entries') && response.status() === 201)
+    ]);
+}
+
+async function createTimeEntryWithTag(page: Page, tagName: string, duration: string) {
+    await goToTimeOverview(page);
+    await page.getByRole('button', { name: 'Manual time entry' }).click();
+
+    // Fill in the time entry details
+    await page.getByTestId('time_entry_description').fill(`Time entry with tag ${tagName}`);
+
+    // Add tag
+    await page.getByRole('button', { name: 'Tags' }).click();
+    await page.getByText('Create new tag').click();
+    await page.getByPlaceholder('Tag Name').fill(tagName);
+    await page.getByRole('button', { name: 'Create Tag' }).click();
+    await page.waitForLoadState('networkidle');
+
+    // Set duration
+    await page.locator('[role="dialog"] input[name="Duration"]').fill(duration);
+    await page.locator('[role="dialog"] input[name="Duration"]').press('Tab');
+
+    // Submit the time entry
+    await page.getByRole('button', { name: 'Create Time Entry' }).click();
+}
+
+async function createTimeEntryWithBillableStatus(page: Page, isBillable: boolean, duration: string) {
+    await goToTimeOverview(page);
+    await page.getByRole('button', { name: 'Manual time entry' }).click();
+
+    // Fill in the time entry details
+    await page.getByTestId('time_entry_description').fill(`Time entry ${isBillable ? 'billable' : 'non-billable'}`);
+
+    // Set billable status
+    await page.getByRole('button', { name: 'Non-Billable' }).click();
+    if (!isBillable) {
+        await page.getByRole('option', { name: 'Non Billable', exact: true }).click();
+    } else {
+        await page.getByRole('option', { name: 'Billable', exact: true }).click();
+    }
+
+    // Set duration
+    await page.locator('[role="dialog"] input[name="Duration"]').fill(duration);
+    await page.locator('[role="dialog"] input[name="Duration"]').press('Tab');
+
+    // Submit the time entry
+    await page.getByRole('button', { name: 'Create Time Entry' }).click();
+}
+
+test('test that project filtering works in reporting', async ({ page }) => {
+    const project1 = 'Test Project 1 ' + Math.floor(Math.random() * 10000);
+    const project2 = 'Test Project 2 ' + Math.floor(Math.random() * 10000);
+
+    // Create time entries for both projects
+    await createTimeEntryWithProject(page, project1, '1h');
+    await createTimeEntryWithProject(page, project2, '2h');
+
+    // Go to reporting and filter by project1
+    await goToReporting(page);
+    await page.getByRole('button', { name: 'Project' }).nth(0).click();
+    await page.getByText(project1).click();
+
+    await Promise.all([
+        // escape
+        page.keyboard.press('Escape'),
+        // wait for API request to finish
+        page.waitForResponse(response => response.url().includes('/time-entries/aggregate') && response.status() === 200)
+    ]);
+    await page.waitForLoadState('networkidle');
+
+    // Verify only project1 time entries are shown
+    await expect(page.getByText(project1)).toBeVisible();
+    await expect(page.getByText(project2)).not.toBeVisible();
+});
+
+test('test that tag filtering works in reporting', async ({ page }) => {
+    const tag1 = 'Test Tag 1 ' + Math.floor(Math.random() * 10000);
+    const tag2 = 'Test Tag 2 ' + Math.floor(Math.random() * 10000);
+
+    // Create time entries with different tags
+    await createTimeEntryWithTag(page, tag1, '1h');
+    await createTimeEntryWithTag(page, tag2, '2h');
+
+    // Go to reporting and filter by tag1
+    await goToReporting(page);
+    // wait for all requests to finish
+    await page.waitForLoadState('networkidle');
+
+    await page.getByRole('button', { name: 'Tags' }).click();
+    await page.getByText(tag1).click();
+
+    await Promise.all([
+        // escape
+        page.keyboard.press('Escape'),
+        // wait for API request to finish
+        page.waitForResponse(response => response.url().includes('/time-entries/aggregate') && response.status() === 200)
+    ]);
+
+    // Verify only time entries with tag1 are shown
+    await expect(page.getByText('1h 00min').first()).toBeVisible();
+});
+
+test('test that billable status filtering works in reporting', async ({ page }) => {
+    // Create billable and non-billable time entries
+    await createTimeEntryWithBillableStatus(page, true, '1h');
+    await createTimeEntryWithBillableStatus(page, false, '2h');
+
+    // Go to reporting and filter by billable
+    await goToReporting(page);
+
+    await page.getByRole('button', { name: 'Billable' }).click();
+    await page.getByRole('option', { name: 'Billable', exact: true }).click();
+
+    await Promise.all([
+        // escape
+        page.keyboard.press('Escape'),
+        // wait for API request to finish
+        page.waitForResponse(response => response.url().includes('/time-entries/aggregate') && response.status() === 200)
+    ]);
+    await page.waitForLoadState('networkidle');
+
+    await expect(page.getByText('1h 00min').first()).toBeVisible();
+});
+
+
+test('test that detailed view shows time entries correctly', async ({ page }) => {
+    const projectName = 'Detailed View Project ' + Math.floor(Math.random() * 10000);
+
+    // Create a time entry
+    await createTimeEntryWithProject(page, projectName, '1h');
+
+    // Go to detailed reporting view
+    await goToReportingDetailed(page);
+
+    // Verify the time entry is shown with all details
+    await expect(page.getByText(projectName, { exact: true })).toBeVisible();
+    await expect(page.locator('input[name="Duration"]')).toHaveValue('1h 00min');
+    await expect(page.getByText('Time entry for ' + projectName, { exact: true })).toBeVisible();
+});
+
+test('test that updating duration in detailed view works correctly', async ({ page }) => {
+    const projectName = 'Duration Update Project ' + Math.floor(Math.random() * 10000);
+    const initialDuration = '1h';
+    const updatedDuration = '2h 30min';
+
+    // Create a time entry with initial duration
+    await createTimeEntryWithProject(page, projectName, initialDuration);
+
+    // Go to detailed reporting view
+    await goToReportingDetailed(page);
+
+    // Find and update the duration
+    const durationInput = page.locator('input[name="Duration"]').first();
+    await durationInput.click();
+    await durationInput.fill(updatedDuration);
+    await durationInput.press('Enter');
+
+    // Wait for the update to be processed
+    await page.waitForLoadState('networkidle');
+
+    // Verify the new duration is displayed
+    await expect(durationInput).toHaveValue(updatedDuration);
+});
+
+// TODO: test that date range filtering works in reporting

e2e/time.spec.ts

@@ -218,9 +218,7 @@ test('test that updating a the duration in the overview works on blur', async ({
     const newTimeEntry = timeEntryRows.first();
     await assertThatTimeEntryRowIsStopped(newTimeEntry);
     await page.waitForTimeout(1500);
-    const timeEntryDurationInput = newTimeEntry.getByTestId(
+    const timeEntryDurationInput = newTimeEntry.locator('input[name="Duration"]');
-        'time_entry_duration_input'
-    );
     await timeEntryDurationInput.fill('20min');
 
     await Promise.all([
@@ -238,9 +236,7 @@ test('test that updating a the duration in the overview works on blur', async ({
         timeEntryDurationInput.press('Tab'),
     ]);
 
-    await expect(
+    await expect(timeEntryDurationInput).toHaveValue('0h 20min');
-        newTimeEntry.getByTestId('time_entry_duration_input')
-    ).toHaveValue('0h 20min');
 });
 
 // Test that start stop button stops running timer

e2e/utils/money.ts

@@ -0,0 +1,17 @@
+import { formatCents } from '../../resources/js/packages/ui/src/utils/money';
+import type { CurrencyFormat } from '../../resources/js/packages/ui/src/utils/money';
+import { NumberFormat } from '../../resources/js/packages/ui/src/utils/number';
+
+export function formatCentsWithOrganizationDefaults(
+    cents: number,
+    currencyCode: string = 'EUR',
+    currencySymbol: string = '€'
+): string {
+    return formatCents(
+        cents,
+        currencyCode,
+        'iso-code-after-with-space' as CurrencyFormat,
+        currencySymbol,
+        'point-comma' as NumberFormat
+    );
+} 

lang/en/enum.php

@@ -30,12 +30,12 @@ return [
     ],
 
     'date_format' => [
-        DateFormat::PointSeperatedDMYYYY->value => 'D.M.YYYY',
+        DateFormat::PointSeparatedDMYYYY->value => 'D.M.YYYY',
-        DateFormat::SlashSeperatedMMDDYYYY->value => 'MM/DD/YYYY',
+        DateFormat::SlashSeparatedMMDDYYYY->value => 'MM/DD/YYYY',
-        DateFormat::SlashSeperatedDDMMYYYY->value => 'DD/MM/YYYY',
+        DateFormat::SlashSeparatedDDMMYYYY->value => 'DD/MM/YYYY',
-        DateFormat::HyphenSeperatedDDMMYYY->value => 'DD-MM-YYYY',
+        DateFormat::HyphenSeparatedDDMMYYY->value => 'DD-MM-YYYY',
-        DateFormat::HyphenSeperatedMMDDDYYYY->value => 'MM-DD-YYYY',
+        DateFormat::HyphenSeparatedMMDDDYYYY->value => 'MM-DD-YYYY',
-        DateFormat::HyphenSeperatedYYYYMMDD->value => 'YYYY-MM-DD',
+        DateFormat::HyphenSeparatedYYYYMMDD->value => 'YYYY-MM-DD',
     ],
 
     'time_format' => [
@@ -46,8 +46,8 @@ return [
     'interval_format' => [
         IntervalFormat::Decimal->value => 'Decimal',
         IntervalFormat::HoursMinutes->value => '12h 3m',
-        IntervalFormat::HoursMinutesColonSeperated->value => '12:03',
+        IntervalFormat::HoursMinutesColonSeparated->value => '12:03',
-        IntervalFormat::HoursMinutesSecondsColonSeperated->value => '12:03:45',
+        IntervalFormat::HoursMinutesSecondsColonSeparated->value => '12:03:45',
     ],
 
     'currency_format' => [

lang/en/importer.php

@@ -9,7 +9,8 @@ return [
             '2. In the same preferences page change the language of Clockfiy to English.<br>'.
             '3. Go to REPORTS -> TIME -> Detailed in the navigation on the left. <br>'.
             '4. Now select the date range that you want to export in the right top. '.
-            'It is currently not possible to select more than one year. You can export each year separately and import them one after another .'.
+            'In the free Clockify plan it\'s currently not possible to select more than one year. '.
+            'You can export each year separately and import them one after another.'.
             '<br> 4. Now click Export -> Save as CSV. The Export dropdown is in the header of the export table left of the printer symbol. '.
             '<br><br>Before you import make sure that the Timezone settings in Clockify are the same as in solidtime.',
     ],

resources/css/app.css

@@ -43,6 +43,9 @@
 
     --theme-color-input-select-active: rgb(var(--color-accent-300));
     --theme-color-input-select-active-hover: rgb(var(--color-accent-200));
+
+    --color-accent-default: rgba(var(--color-accent-300), 0.2);
+    --color-accent-foreground: rgb(var(--color-accent-100));
 }
 
 :root.light {
@@ -86,6 +89,9 @@
 
     --theme-color-input-select-active: rgb(var(--color-accent-400));
     --theme-color-input-select-active-hover: rgb(var(--color-accent-500));
+
+    --color-accent-default: rgb(var(--color-accent-100));
+    --color-accent-foreground: rgb(var(--color-accent-800));
 }
 
 :root {

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

@@ -26,10 +26,12 @@ const createClient = ref(false);
                 <ClientTableHeading></ClientTableHeading>
                 <div
                     v-if="clients.length === 0"
-                    class="col-span-2 py-24 text-center">
+                    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>
+                    <h3 class="text-text-primary font-semibold">
+                        No clients found
+                    </h3>
                     <p v-if="canCreateClients()" class="pb-5">
                         Create your first client now!
                     </p>

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

@@ -2,10 +2,14 @@
 import { getOrganizationCurrencyString } from '@/utils/money';
 import BillableRateModal from '@/packages/ui/src/BillableRateModal.vue';
 import { formatCents } from '@/packages/ui/src/utils/money';
+import { inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 defineProps<{
     newBillableRate?: number | null;
     memberName: string;
@@ -28,7 +32,10 @@ defineEmits<{
                 newBillableRate
                     ? formatCents(
                           newBillableRate,
-                          getOrganizationCurrencyString()
+                          getOrganizationCurrencyString(),
+                          organization?.currency_format,
+                          organization?.currency_symbol,
+                          organization?.number_format
                       )
                     : ' the default rate of the organization'
             }}</strong

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

@@ -154,7 +154,6 @@ const roleDescription = computed(() => {
                             class="flex-1">
                             <InputLabel
                                 for="memberBillableRate"
-                                class="mb-2"
                                 value="Billable Rate" />
                             <BillableRateInput
                                 v-model="

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

@@ -1,26 +1,27 @@
 <script setup lang="ts">
-import type { Member } from '@/packages/api/src';
+import type { Member, Organization } from '@/packages/api/src';
+import { api } from '@/packages/api/src';
 import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/20/solid';
 import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
 import TableRow from '@/Components/TableRow.vue';
-import { capitalizeFirstLetter } from '../../../utils/format';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
-import { api } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
 import { canInvitePlaceholderMembers } from '@/utils/permissions';
 import { useMembersStore } from '@/utils/useMembers';
-import {computed, ref} from 'vue';
+import { computed, type ComputedRef, inject, ref } from 'vue';
 import MemberEditModal from '@/Components/Common/Member/MemberEditModal.vue';
-import { getOrganizationCurrencyString } from '@/utils/money';
+import MemberMergeModal from '@/Components/Common/Member/MemberMergeModal.vue';
-import { formatCents } from '@/packages/ui/src/utils/money';
+import MemberMakePlaceholderModal from '@/Components/Common/Member/MemberMakePlaceholderModal.vue';
-import MemberMergeModal from "@/Components/Common/Member/MemberMergeModal.vue";
+import { capitalizeFirstLetter } from '../../../utils/format';
-import MemberMakePlaceholderModal from "@/Components/Common/Member/MemberMakePlaceholderModal.vue";
+import { formatCents } from '../../../packages/ui/src/utils/money';
 
 const props = defineProps<{
     member: Member;
 }>();
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 const showEditMemberModal = ref(false);
 const showMergeMemberModal = ref(false);
 const showMakeMemberPlaceholderModal = ref(false);
@@ -35,15 +36,12 @@ async function invitePlaceholder(id: string) {
     if (organizationId) {
         await handleApiRequestNotifications(
             () =>
-                api.invitePlaceholder(
+                api.invitePlaceholder(undefined, {
-                    undefined,
+                    params: {
-                    {
+                        organization: organizationId,
-                        params: {
+                        member: id,
-                            organization: organizationId,
+                    },
-                            member: id,
+                }),
-                        },
-                    }
-                ),
             'Member invited successfully',
             'Error inviting member'
         );
@@ -52,8 +50,7 @@ async function invitePlaceholder(id: string) {
 
 const userHasValidMailAddress = computed(() => {
     return !props.member.email.endsWith('@solidtime-import.test');
-})
+});
-
 </script>
 
 <template>
@@ -75,7 +72,10 @@ const userHasValidMailAddress = computed(() => {
                 member.billable_rate
                     ? formatCents(
                           member.billable_rate,
-                          getOrganizationCurrencyString()
+                          organization?.currency,
+                          organization?.currency_format,
+                          organization?.currency_symbol,
+                          organization?.number_format
                       )
                     : '--'
             }}
@@ -101,21 +101,26 @@ const userHasValidMailAddress = computed(() => {
                 "
                 size="small"
                 @click="invitePlaceholder(member.id)"
-                >Invite</SecondaryButton
+                >Invite
-            >
+            </SecondaryButton>
             <MemberMoreOptionsDropdown
                 :member="member"
                 @edit="showEditMemberModal = true"
                 @delete="removeMember"
                 @merge="showMergeMemberModal = true"
-                @make-placeholder="showMakeMemberPlaceholderModal = true"
+                @make-placeholder="
-            ></MemberMoreOptionsDropdown>
+                    showMakeMemberPlaceholderModal = true
+                "></MemberMoreOptionsDropdown>
         </div>
         <MemberEditModal
             v-model:show="showEditMemberModal"
             :member="member"></MemberEditModal>
-        <MemberMergeModal v-model:show="showMergeMemberModal" :member="member"></MemberMergeModal>
+        <MemberMergeModal
-        <MemberMakePlaceholderModal v-model:show="showMakeMemberPlaceholderModal" :member="member"></MemberMakePlaceholderModal>
+            v-model:show="showMergeMemberModal"
+            :member="member"></MemberMergeModal>
+        <MemberMakePlaceholderModal
+            v-model:show="showMakeMemberPlaceholderModal"
+            :member="member"></MemberMakePlaceholderModal>
     </TableRow>
 </template>
 

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

@@ -2,10 +2,14 @@
 import { getOrganizationCurrencyString } from '@/utils/money';
 import BillableRateModal from '@/packages/ui/src/BillableRateModal.vue';
 import { formatCents } from '@/packages/ui/src/utils/money';
+import { inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 defineProps<{
     newBillableRate?: number | null;
 }>();
@@ -27,7 +31,10 @@ defineEmits<{
                 newBillableRate
                     ? formatCents(
                           newBillableRate,
-                          getOrganizationCurrencyString()
+                          getOrganizationCurrencyString(),
+                          organization?.currency_format,
+                          organization?.currency_symbol,
+                          organization?.number_format
                       )
                     : ' none.'
             }}</strong

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

@@ -48,7 +48,7 @@ const project = ref<CreateProjectBody>({
 
 async function submit() {
     if (props.originalProject.billable_rate !== project.value.billable_rate) {
-        // 
+        // make sure that the alert modal is not immediately submitted when user presses enter
         setTimeout(() => {
             showBillableRateModal.value = true;
         }, 0);
@@ -133,7 +133,7 @@ async function submitBillableRate() {
                     </ClientDropdown>
                 </div>
             </div>
-            <div class="lg:grid grid-cols-2 gap-12">
+            <div>
                 <div>
                     <ProjectEditBillableSection
                         v-model:is-billable="project.is_billable"

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ProjectMoreOptionsDropdown from '@/Components/Common/Project/ProjectMoreOptionsDropdown.vue';
 import type { Project } from '@/packages/api/src';
-import { computed, ref } from 'vue';
+import { computed, ref, inject, type ComputedRef } from 'vue';
 import { CheckCircleIcon } from '@heroicons/vue/20/solid';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
@@ -15,6 +15,7 @@ import EstimatedTimeProgress from '@/packages/ui/src/EstimatedTimeProgress.vue';
 import UpgradeBadge from '@/Components/Common/UpgradeBadge.vue';
 import { formatHumanReadableDuration } from '../../../packages/ui/src/utils/time';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
+import type { Organization } from '@/packages/api/src';
 
 const { clients } = storeToRefs(useClientsStore());
 const { tasks } = storeToRefs(useTasksStore());
@@ -46,12 +47,17 @@ function archiveProject() {
     });
 }
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 const billableRateInfo = computed(() => {
     if (props.project.is_billable) {
         if (props.project.billable_rate) {
             return formatCents(
                 props.project.billable_rate,
-                getOrganizationCurrencyString()
+                getOrganizationCurrencyString(),
+                organization?.value?.currency_format,
+                organization?.value?.currency_symbol,
+                organization?.value?.number_format
             );
         } else {
             return 'Default Rate';
@@ -61,6 +67,7 @@ const billableRateInfo = computed(() => {
 });
 
 const showEditProjectModal = ref(false);
+
 </script>
 
 <template>
@@ -79,9 +86,12 @@ const showEditProjectModal = ref(false);
             <span class="overflow-ellipsis overflow-hidden">
                 {{ project.name }}
             </span>
-            <span class="text-text-secondary"> {{ projectTasksCount }} Tasks </span>
+            <span class="text-text-secondary">
+                {{ projectTasksCount }} Tasks
+            </span>
         </div>
-        <div class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-text-secondary">
+        <div
+            class="whitespace-nowrap min-w-0 px-3 py-4 text-sm text-text-secondary">
             <div
                 v-if="project.client_id"
                 class="overflow-ellipsis overflow-hidden">
@@ -91,7 +101,13 @@ const showEditProjectModal = ref(false);
         </div>
         <div class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary">
             <div v-if="project.spent_time">
-                {{ formatHumanReadableDuration(project.spent_time) }}
+                {{
+                    formatHumanReadableDuration(
+                        project.spent_time,
+                        organization?.interval_format,
+                        organization?.number_format
+                    )
+                }}
             </div>
             <div v-else>--</div>
         </div>

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

@@ -2,10 +2,14 @@
 import { getOrganizationCurrencyString } from '@/utils/money';
 import BillableRateModal from '@/packages/ui/src/BillableRateModal.vue';
 import { formatCents } from '@/packages/ui/src/utils/money';
+import { inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 defineProps<{
     newBillableRate?: number | null;
     memberName?: string;
@@ -28,7 +32,10 @@ defineEmits<{
                 newBillableRate
                     ? formatCents(
                           newBillableRate,
-                          getOrganizationCurrencyString()
+                          getOrganizationCurrencyString(),
+                          organization?.currency_format,
+                          organization?.currency_symbol,
+                          organization?.number_format
                       )
                     : ' the default rate of the project'
             }}</strong

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ProjectMember } from '@/packages/api/src';
-import { computed, ref } from 'vue';
+import { computed, ref, inject, type ComputedRef } from 'vue';
 import { storeToRefs } from 'pinia';
 import TableRow from '@/Components/TableRow.vue';
 import { useMembersStore } from '@/utils/useMembers';
@@ -10,10 +10,14 @@ import { formatCents } from '@/packages/ui/src/utils/money';
 import { capitalizeFirstLetter } from '@/utils/format';
 import ProjectMemberEditModal from '@/Components/Common/ProjectMember/ProjectMemberEditModal.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
+import type { Organization } from '@/packages/api/src';
 
 const props = defineProps<{
     projectMember: ProjectMember;
 }>();
+
+const organization = inject<ComputedRef<Organization>>('organization');
+
 function deleteProjectMember() {
     useProjectMembersStore().deleteProjectMember(
         props.projectMember.project_id,
@@ -51,7 +55,10 @@ const showEditModal = ref(false);
                 projectMember.billable_rate
                     ? formatCents(
                           projectMember.billable_rate,
-                          getOrganizationCurrencyString()
+                          getOrganizationCurrencyString(),
+                          organization?.currency_format,
+                          organization?.currency_symbol,
+                          organization?.number_format
                       )
                     : '--'
             }}

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

@@ -5,6 +5,7 @@ import { h, ref } from 'vue';
 import type { CreateReportBodyProperties } from '@/packages/api/src';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import UpgradeModal from '@/Components/Common/UpgradeModal.vue';
+import { canCreateReports } from '@/utils/permissions';
 defineProps<{
     reportProperties: CreateReportBodyProperties;
 }>();
@@ -33,7 +34,10 @@ function onSaveReportClick() {
         <strong>Sharable Reports</strong> is only available in solidtime
         Professional.
     </UpgradeModal>
-    <SecondaryButton :icon="SaveIcon" @click="onSaveReportClick"
+    <SecondaryButton
+        v-if="canCreateReports()"
+        :icon="SaveIcon"
+        @click="onSaveReportClick"
         >Save Report</SecondaryButton
     >
 </template>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
-import { computed, provide } from 'vue';
+import { computed, provide, inject, shallowRef, type ComputedRef } from 'vue';
 import LinearGradient from 'zrender/lib/graphic/LinearGradient';
 import {
     formatDate,
@@ -16,7 +16,7 @@ import {
     TitleComponent,
     TooltipComponent,
 } from 'echarts/components';
-import type { AggregatedTimeEntries } from '@/packages/api/src';
+import type { AggregatedTimeEntries, Organization } from '@/packages/api/src';
 import { useCssVar } from '@vueuse/core';
 
 use([
@@ -30,6 +30,8 @@ use([
 
 provide(THEME_KEY, 'dark');
 
+const organization = inject<ComputedRef<Organization>>('organization');
+const chart = shallowRef(null);
 type GroupedData = AggregatedTimeEntries['grouped_data'];
 
 const props = defineProps<{
@@ -41,7 +43,9 @@ const xAxisLabels = computed(() => {
     if (props.groupedType === 'week') {
         return props?.groupedData?.map((el) => formatWeek(el.key));
     }
-    return props?.groupedData?.map((el) => formatDate(el.key ?? ''));
+    return props?.groupedData?.map((el) =>
+        formatDate(el.key ?? '', organization?.value?.date_format)
+    );
 });
 const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
 const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
@@ -143,7 +147,11 @@ const option = computed(() => ({
             type: 'bar',
             tooltip: {
                 valueFormatter: (value: number) => {
-                    return formatHumanReadableDuration(value);
+                    return formatHumanReadableDuration(
+                        value,
+                        organization?.value?.interval_format,
+                        organization?.value?.number_format
+                    );
                 },
             },
         },
@@ -155,6 +163,7 @@ const option = computed(() => ({
     <div class="w-[calc(100%-1px)]">
         <v-chart
             v-if="groupedData && groupedData?.length > 0"
+            ref="chart"
             :autoresize="true"
             class="chart"
             :option="option" />

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

@@ -28,8 +28,10 @@ const activeClass = computed(() => {
                 activeClass
             )
         ">
-        <component :is="icon" class="-ml-0.5 h-4 w-4 text-text-quaternary"></component>
+        <component
-        <span> {{ title }} </span>
+            :is="icon"
+            class="-ml-0.5 h-4 w-4 text-text-quaternary"></component>
+        <span class="text-nowrap"> {{ title }} </span>
         <div
             v-if="count"
             class="bg-accent-300/20 w-5 h-5 font-medium rounded flex items-center transition justify-center">

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

@@ -0,0 +1,508 @@
+<script setup lang="ts">
+import {
+    ChartBarIcon,
+    CheckCircleIcon,
+    TagIcon,
+    UserGroupIcon,
+} from '@heroicons/vue/20/solid';
+import { FolderIcon } from '@heroicons/vue/16/solid';
+import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
+import { getOrganizationCurrencyString } from '@/utils/money';
+import {
+    formatHumanReadableDuration,
+    getDayJsInstance,
+    getLocalizedDayJs,
+} from '@/packages/ui/src/utils/time';
+import { formatCents } from '@/packages/ui/src/utils/money';
+import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
+import ReportingExportButton from '@/Components/Common/Reporting/ReportingExportButton.vue';
+import TaskMultiselectDropdown from '@/Components/Common/Task/TaskMultiselectDropdown.vue';
+import ClientMultiselectDropdown from '@/Components/Common/Client/ClientMultiselectDropdown.vue';
+import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
+import MemberMultiselectDropdown from '@/Components/Common/Member/MemberMultiselectDropdown.vue';
+import ReportingFilterBadge from '@/Components/Common/Reporting/ReportingFilterBadge.vue';
+import PageTitle from '@/Components/Common/PageTitle.vue';
+import ProjectMultiselectDropdown from '@/Components/Common/Project/ProjectMultiselectDropdown.vue';
+import ReportingChart from '@/Components/Common/Reporting/ReportingChart.vue';
+import SelectDropdown from '../../../packages/ui/src/Input/SelectDropdown.vue';
+import ReportingGroupBySelect from '@/Components/Common/Reporting/ReportingGroupBySelect.vue';
+import MainContainer from '@/packages/ui/src/MainContainer.vue';
+import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
+import ReportingExportModal from '@/Components/Common/Reporting/ReportingExportModal.vue';
+import ReportSaveButton from '@/Components/Common/Report/ReportSaveButton.vue';
+import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
+import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
+
+import { computed, type ComputedRef, inject, onMounted, ref } from 'vue';
+import { type GroupingOption, useReportingStore } from '@/utils/useReporting';
+import { storeToRefs } from 'pinia';
+import {
+    type AggregatedTimeEntriesQueryParams,
+    api,
+    type CreateReportBodyProperties,
+    type Organization,
+} from '@/packages/api/src';
+import {
+    getCurrentMembershipId,
+    getCurrentOrganizationId,
+    getCurrentRole,
+} from '@/utils/useUser';
+import { useTagsStore } from '@/utils/useTags';
+import { useSessionStorage, useStorage } from '@vueuse/core';
+import { useNotificationsStore } from '@/utils/notification';
+import type { ExportFormat } from '@/types/reporting';
+import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
+import { useProjectsStore } from '@/utils/useProjects';
+
+const { handleApiRequestNotifications } = useNotificationsStore();
+
+const startDate = useSessionStorage<string>(
+    'reporting-start-date',
+    getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
+);
+const endDate = useSessionStorage<string>(
+    'reporting-end-date',
+    getLocalizedDayJs(getDayJsInstance()().format()).format()
+);
+const selectedTags = ref<string[]>([]);
+const selectedProjects = ref<string[]>([]);
+const selectedMembers = ref<string[]>([]);
+const selectedTasks = ref<string[]>([]);
+const selectedClients = ref<string[]>([]);
+
+const billable = ref<'true' | 'false' | null>(null);
+
+const group = useStorage<GroupingOption>('reporting-group', 'project');
+const subGroup = useStorage<GroupingOption>('reporting-sub-group', 'task');
+
+const reportingStore = useReportingStore();
+
+const { aggregatedGraphTimeEntries, aggregatedTableTimeEntries } =
+    storeToRefs(reportingStore);
+
+const { groupByOptions } = reportingStore;
+
+const organization = inject<ComputedRef<Organization>>('organization');
+
+function getFilterAttributes(): AggregatedTimeEntriesQueryParams {
+    let params: AggregatedTimeEntriesQueryParams = {
+        start: getLocalizedDayJs(startDate.value).startOf('day').utc().format(),
+        end: getLocalizedDayJs(endDate.value).endOf('day').utc().format(),
+    };
+    params = {
+        ...params,
+        member_ids:
+            selectedMembers.value.length > 0
+                ? selectedMembers.value
+                : undefined,
+        project_ids:
+            selectedProjects.value.length > 0
+                ? selectedProjects.value
+                : undefined,
+        task_ids:
+            selectedTasks.value.length > 0 ? selectedTasks.value : undefined,
+        client_ids:
+            selectedClients.value.length > 0
+                ? selectedClients.value
+                : undefined,
+        tag_ids: selectedTags.value.length > 0 ? selectedTags.value : undefined,
+        billable: billable.value !== null ? billable.value : undefined,
+        member_id:
+            getCurrentRole() === 'employee'
+                ? getCurrentMembershipId()
+                : undefined,
+    };
+    return params;
+}
+
+function updateGraphReporting() {
+    const params = getFilterAttributes();
+    if (getCurrentRole() === 'employee') {
+        params.member_id = getCurrentMembershipId();
+    }
+    params.fill_gaps_in_time_groups = 'true';
+    params.group = getOptimalGroupingOption(startDate.value, endDate.value);
+    useReportingStore().fetchGraphReporting(params);
+}
+
+function updateTableReporting() {
+    const params = getFilterAttributes();
+    if (group.value === subGroup.value) {
+        const fallbackOption = groupByOptions.find(
+            (el) => el.value !== group.value
+        );
+        if (fallbackOption?.value) {
+            subGroup.value = fallbackOption.value;
+        }
+    }
+    if (getCurrentRole() === 'employee') {
+        params.member_id = getCurrentMembershipId();
+    }
+    params.group = group.value;
+    params.sub_group = subGroup.value;
+    useReportingStore().fetchTableReporting(params);
+}
+
+function updateReporting() {
+    updateGraphReporting();
+    updateTableReporting();
+}
+
+function getOptimalGroupingOption(
+    startDate: string,
+    endDate: string
+): 'day' | 'week' | 'month' {
+    const diffInDays = getDayJsInstance()(endDate).diff(
+        getDayJsInstance()(startDate),
+        'd'
+    );
+
+    if (diffInDays <= 31) {
+        return 'day';
+    } else if (diffInDays <= 200) {
+        return 'week';
+    } else {
+        return 'month';
+    }
+}
+
+onMounted(() => {
+    updateGraphReporting();
+    updateTableReporting();
+});
+
+const { tags } = storeToRefs(useTagsStore());
+
+async function createTag(tag: string) {
+    return await useTagsStore().createTag(tag);
+}
+
+const reportProperties = computed(() => {
+    return {
+        ...getFilterAttributes(),
+        group: group.value,
+        sub_group: subGroup.value,
+        history_group: getOptimalGroupingOption(startDate.value, endDate.value),
+    } as CreateReportBodyProperties;
+});
+
+async function downloadExport(format: ExportFormat) {
+    const organizationId = getCurrentOrganizationId();
+    if (organizationId) {
+        const response = await handleApiRequestNotifications(
+            () =>
+                api.exportAggregatedTimeEntries({
+                    params: {
+                        organization: organizationId,
+                    },
+                    queries: {
+                        ...getFilterAttributes(),
+                        group: group.value,
+                        sub_group: subGroup.value,
+                        history_group: getOptimalGroupingOption(
+                            startDate.value,
+                            endDate.value
+                        ),
+                        format: format,
+                    },
+                }),
+            'Export successful',
+            'Export failed'
+        );
+
+        if (response?.download_url) {
+            showExportModal.value = true;
+            exportUrl.value = response.download_url as string;
+        }
+    }
+}
+
+const { getNameForReportingRowEntry, emptyPlaceholder } = useReportingStore();
+
+const projectsStore = useProjectsStore();
+const { projects } = storeToRefs(projectsStore);
+const showExportModal = ref(false);
+const exportUrl = ref<string | null>(null);
+
+const groupedPieChartData = computed(() => {
+    return (
+        aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
+            const name = getNameForReportingRowEntry(
+                entry.key,
+                aggregatedTableTimeEntries.value?.grouped_type
+            );
+            let color = getRandomColorWithSeed(entry.key ?? 'none');
+            if (
+                name &&
+                aggregatedTableTimeEntries.value?.grouped_type &&
+                emptyPlaceholder[
+                    aggregatedTableTimeEntries.value?.grouped_type
+                ] === name
+            ) {
+                color = '#CCCCCC';
+            } else if (
+                aggregatedTableTimeEntries.value?.grouped_type === 'project'
+            ) {
+                color =
+                    projects.value?.find((project) => project.id === entry.key)
+                        ?.color ?? '#CCCCCC';
+            }
+            return {
+                value: entry.seconds,
+                name:
+                    getNameForReportingRowEntry(
+                        entry.key,
+                        aggregatedTableTimeEntries.value?.grouped_type
+                    ) ?? '',
+                color: color,
+            };
+        }) ?? []
+    );
+});
+
+const tableData = computed(() => {
+    return aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
+        return {
+            seconds: entry.seconds,
+            cost: entry.cost,
+            description: getNameForReportingRowEntry(
+                entry.key,
+                aggregatedTableTimeEntries.value?.grouped_type
+            ),
+            grouped_data:
+                entry.grouped_data?.map((el) => {
+                    return {
+                        seconds: el.seconds,
+                        cost: el.cost,
+                        description: getNameForReportingRowEntry(
+                            el.key,
+                            entry.grouped_type
+                        ),
+                    };
+                }) ?? [],
+        };
+    });
+});
+</script>
+
+<template>
+    <ReportingExportModal
+        v-model:show="showExportModal"
+        :export-url="exportUrl"></ReportingExportModal>
+    <MainContainer
+        class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
+        <div class="flex items-center space-x-3 sm:space-x-6">
+            <PageTitle :icon="ChartBarIcon" title="Reporting"></PageTitle>
+            <ReportingTabNavbar active="reporting"></ReportingTabNavbar>
+        </div>
+        <div class="flex space-x-2">
+            <ReportingExportButton
+                :download="downloadExport"></ReportingExportButton>
+            <ReportSaveButton
+                :report-properties="reportProperties"></ReportSaveButton>
+        </div>
+    </MainContainer>
+    <div class="py-2.5 w-full border-b border-default-background-separator">
+        <MainContainer class="sm:flex space-y-4 sm:space-y-0 justify-between">
+            <div
+                class="flex flex-wrap items-center space-y-2 sm:space-y-0 space-x-4">
+                <div class="text-sm font-medium">Filters</div>
+                <MemberMultiselectDropdown
+                    v-model="selectedMembers"
+                    @submit="updateReporting">
+                    <template #trigger>
+                        <ReportingFilterBadge
+                            :count="selectedMembers.length"
+                            :active="selectedMembers.length > 0"
+                            title="Members"
+                            :icon="UserGroupIcon"></ReportingFilterBadge>
+                    </template>
+                </MemberMultiselectDropdown>
+                <ProjectMultiselectDropdown
+                    v-model="selectedProjects"
+                    @submit="updateReporting">
+                    <template #trigger>
+                        <ReportingFilterBadge
+                            :count="selectedProjects.length"
+                            :active="selectedProjects.length > 0"
+                            title="Projects"
+                            :icon="FolderIcon"></ReportingFilterBadge>
+                    </template>
+                </ProjectMultiselectDropdown>
+                <TaskMultiselectDropdown
+                    v-model="selectedTasks"
+                    @submit="updateReporting">
+                    <template #trigger>
+                        <ReportingFilterBadge
+                            :count="selectedTasks.length"
+                            :active="selectedTasks.length > 0"
+                            title="Tasks"
+                            :icon="CheckCircleIcon"></ReportingFilterBadge>
+                    </template>
+                </TaskMultiselectDropdown>
+                <ClientMultiselectDropdown
+                    v-model="selectedClients"
+                    @submit="updateReporting">
+                    <template #trigger>
+                        <ReportingFilterBadge
+                            :count="selectedClients.length"
+                            :active="selectedClients.length > 0"
+                            title="Clients"
+                            :icon="FolderIcon"></ReportingFilterBadge>
+                    </template>
+                </ClientMultiselectDropdown>
+                <TagDropdown
+                    v-model="selectedTags"
+                    :create-tag
+                    :tags="tags"
+                    @submit="updateReporting">
+                    <template #trigger>
+                        <ReportingFilterBadge
+                            :count="selectedTags.length"
+                            :active="selectedTags.length > 0"
+                            title="Tags"
+                            :icon="TagIcon"></ReportingFilterBadge>
+                    </template>
+                </TagDropdown>
+
+                <SelectDropdown
+                    v-model="billable"
+                    :get-key-from-item="(item) => item.value"
+                    :get-name-for-item="(item) => item.label"
+                    :items="[
+                        {
+                            label: 'Both',
+                            value: null,
+                        },
+                        {
+                            label: 'Billable',
+                            value: 'true',
+                        },
+                        {
+                            label: 'Non Billable',
+                            value: 'false',
+                        },
+                    ]"
+                    @changed="updateReporting">
+                    <template #trigger>
+                        <ReportingFilterBadge
+                            :active="billable !== null"
+                            :title="
+                                billable === 'false'
+                                    ? 'Non Billable'
+                                    : 'Billable'
+                            "
+                            :icon="BillableIcon"></ReportingFilterBadge>
+                    </template>
+                </SelectDropdown>
+            </div>
+            <div>
+                <DateRangePicker
+                    v-model:start="startDate"
+                    v-model:end="endDate"
+                    @submit="updateReporting"></DateRangePicker>
+            </div>
+        </MainContainer>
+    </div>
+    <MainContainer>
+        <div class="pt-10 w-full px-3 relative">
+            <ReportingChart
+                :grouped-type="aggregatedGraphTimeEntries?.grouped_type"
+                :grouped-data="
+                    aggregatedGraphTimeEntries?.grouped_data
+                "></ReportingChart>
+        </div>
+    </MainContainer>
+    <MainContainer>
+        <div class="sm:grid grid-cols-4 pt-6 items-start">
+            <div
+                class="col-span-3 bg-card-background rounded-lg border border-card-border pt-3">
+                <div
+                    class="text-sm flex text-text-primary items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3">
+                    <span>Group by</span>
+                    <ReportingGroupBySelect
+                        v-model="group"
+                        :group-by-options="groupByOptions"
+                        @changed="
+                            updateTableReporting
+                        "></ReportingGroupBySelect>
+                    <span>and</span>
+                    <ReportingGroupBySelect
+                        v-model="subGroup"
+                        :group-by-options="
+                            groupByOptions.filter((el) => el.value !== group)
+                        "
+                        @changed="
+                            updateTableReporting
+                        "></ReportingGroupBySelect>
+                </div>
+                <div
+                    class="grid items-center"
+                    style="grid-template-columns: 1fr 100px 150px">
+                    <div
+                        class="contents [&>*]:border-card-background-separator [&>*]:border-b [&>*]:bg-tertiary [&>*]:pb-1.5 [&>*]:pt-1 text-text-secondary text-sm">
+                        <div class="pl-6">Name</div>
+                        <div class="text-right">Duration</div>
+                        <div class="text-right pr-6">Cost</div>
+                    </div>
+                    <template
+                        v-if="
+                            aggregatedTableTimeEntries?.grouped_data &&
+                            aggregatedTableTimeEntries.grouped_data?.length > 0
+                        ">
+                        <ReportingRow
+                            v-for="entry in tableData"
+                            :key="entry.description ?? 'none'"
+                            :currency="getOrganizationCurrencyString()"
+                            :type="aggregatedTableTimeEntries.grouped_type"
+                            :entry="entry"></ReportingRow>
+                        <div
+                            class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
+                            <div class="flex items-center pl-6 font-medium">
+                                <span>Total</span>
+                            </div>
+                            <div
+                                class="justify-end flex items-center font-medium">
+                                {{
+                                    formatHumanReadableDuration(
+                                        aggregatedTableTimeEntries.seconds,
+                                        organization?.interval_format,
+                                        organization?.number_format
+                                    )
+                                }}
+                            </div>
+                            <div
+                                class="justify-end pr-6 flex items-center font-medium">
+                                {{
+                                    aggregatedTableTimeEntries.cost
+                                        ? formatCents(
+                                              aggregatedTableTimeEntries.cost,
+                                              getOrganizationCurrencyString(),
+                                              organization?.currency_format,
+                                              organization?.currency_symbol,
+                                              organization?.number_format
+                                          )
+                                        : '--'
+                                }}
+                            </div>
+                        </div>
+                    </template>
+                    <div
+                        v-else
+                        class="chart flex flex-col items-center justify-center py-12 col-span-3">
+                        <p class="text-lg text-text-primary font-semibold">
+                            No time entries found
+                        </p>
+                        <p>Try to change the filters and time range</p>
+                    </div>
+                </div>
+            </div>
+            <div class="px-2 lg:px-4">
+                <ReportingPieChart
+                    :data="groupedPieChartData"></ReportingPieChart>
+            </div>
+        </div>
+    </MainContainer>
+</template>
+
+<style scoped></style>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
-import { computed, provide } from 'vue';
+import { computed, provide, inject, type ComputedRef } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { PieChart } from 'echarts/charts';
@@ -11,7 +11,8 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { useCssVar } from "@vueuse/core";
+import { useCssVar } from '@vueuse/core';
+import type { Organization } from '@/packages/api/src';
 
 use([
     CanvasRenderer,
@@ -24,6 +25,8 @@ use([
 
 provide(THEME_KEY, 'dark');
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 type ReportingChartDataEntry = {
     value: number;
     name: string;
@@ -71,7 +74,11 @@ const option = computed(() => ({
             },
             tooltip: {
                 valueFormatter: (value: number) => {
-                    return formatHumanReadableDuration(value);
+                    return formatHumanReadableDuration(
+                        value,
+                        organization?.value?.interval_format,
+                        organization?.value?.number_format
+                    );
                 },
             },
             data: seriesData.value,

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

@@ -2,9 +2,9 @@
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import GroupedItemsCountButton from '@/packages/ui/src/GroupedItemsCountButton.vue';
-import { ref } from 'vue';
+import { ref, inject, type ComputedRef } from 'vue';
 import { twMerge } from 'tailwind-merge';
-import { getOrganizationCurrencyString } from '@/utils/money';
+import type { Organization } from '@/packages/api/src';
 
 type AggregatedGroupedData = GroupedData & {
     grouped_data?: GroupedData[] | null;
@@ -19,9 +19,12 @@ type GroupedData = {
 const props = defineProps<{
     entry: AggregatedGroupedData;
     indent?: boolean;
+    currency: string;
 }>();
 
 const expanded = ref(false);
+
+const organization = inject<ComputedRef<Organization>>('organization');
 </script>
 
 <template>
@@ -45,10 +48,22 @@ const expanded = ref(false);
             </span>
         </div>
         <div class="justify-end flex items-center">
-            {{ formatHumanReadableDuration(entry.seconds) }}
+            {{
+                formatHumanReadableDuration(
+                    entry.seconds,
+                    organization?.interval_format,
+                    organization?.number_format
+                )
+            }}
         </div>
         <div class="justify-end pr-6 flex items-center">
-            {{entry.cost ? formatCents(entry.cost, getOrganizationCurrencyString()) : '--' }}
+            {{ entry.cost ? formatCents(
+                entry.cost,
+                props.currency,
+                organization?.currency_format,
+                organization?.currency_symbol,
+                organization?.number_format
+            ) : '--' }}
         </div>
     </div>
     <div
@@ -58,6 +73,7 @@ const expanded = ref(false);
         <ReportingRow
             v-for="subEntry in entry.grouped_data"
             :key="subEntry.description ?? 'none'"
+            :currency="props.currency"
             indent
             :entry="subEntry"></ReportingRow>
     </div>

resources/js/Components/Common/StatCard.vue

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

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

@@ -6,16 +6,19 @@ import TaskMoreOptionsDropdown from '@/Components/Common/Task/TaskMoreOptionsDro
 import TableRow from '@/Components/TableRow.vue';
 import { canDeleteTasks } from '@/utils/permissions';
 import TaskEditModal from '@/Components/Common/Task/TaskEditModal.vue';
-import { ref } from 'vue';
+import { ref, inject, type ComputedRef } from 'vue';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import EstimatedTimeProgress from '@/packages/ui/src/EstimatedTimeProgress.vue';
 import UpgradeBadge from '@/Components/Common/UpgradeBadge.vue';
 import { formatHumanReadableDuration } from '../../../packages/ui/src/utils/time';
+import type { Organization } from '@/packages/api/src';
 
 const props = defineProps<{
     task: Task;
 }>();
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 function deleteTask() {
     useTasksStore().deleteTask(props.task.id);
 }
@@ -41,7 +44,13 @@ const showTaskEditModal = ref(false);
         <div
             class="whitespace-nowrap px-3 py-4 text-sm text-text-secondary flex space-x-1 items-center font-medium">
             <span v-if="task.spent_time">
-                {{ formatHumanReadableDuration(task.spent_time) }}
+                {{
+                    formatHumanReadableDuration(
+                        task.spent_time,
+                        organization?.interval_format,
+                        organization?.number_format
+                    )
+                }}
             </span>
             <span v-else> -- </span>
         </div>

resources/js/Components/CurrentSidebarTimer.vue

@@ -3,9 +3,10 @@ import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import dayjs from 'dayjs';
-import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
+import { formatDuration } from '@/packages/ui/src/utils/time';
 import TimeTrackerStartStop from '@/packages/ui/src/TimeTrackerStartStop.vue';
 import { getCurrentOrganizationId } from '@/utils/useUser';
+
 const store = useCurrentTimeEntryStore();
 const { currentTimeEntry, now, isActive } = storeToRefs(store);
 const { setActiveState } = store;
@@ -14,10 +15,9 @@ const currentTime = computed(() => {
     if (now.value && currentTimeEntry.value.start) {
         const startTime = dayjs(currentTimeEntry.value.start);
         const diff = now.value.diff(startTime, 's');
-        // return dayjs(diff).utc().format('HH:mm:ss');
+        return formatDuration(diff);
-        return formatHumanReadableDuration(diff);
     }
-    return formatHumanReadableDuration(0);
+    return formatDuration(0);
 });
 
 const isRunningInDifferentOrganization = computed(() => {
@@ -43,7 +43,9 @@ const isRunningInDifferentOrganization = computed(() => {
             </div>
         </div>
         <div>
-            <div class="text-text-secondary font-extrabold text-xs">Current Timer</div>
+            <div class="text-text-secondary font-extrabold text-xs">
+                Current Timer
+            </div>
             <div class="text-text-primary font-medium text-lg">
                 {{ currentTime }}
             </div>

resources/js/Components/Dashboard/ActivityGraphCard.vue

@@ -1,44 +1,45 @@
 <script lang="ts" setup>
-import VChart, { THEME_KEY } from "vue-echarts";
+import VChart, { THEME_KEY } from 'vue-echarts';
-import { provide, computed } from "vue";
+import { provide, computed, inject, type ComputedRef } from 'vue';
-import { use } from "echarts/core";
+import { use } from 'echarts/core';
-import DashboardCard from "@/Components/Dashboard/DashboardCard.vue";
+import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
-import { BoltIcon } from "@heroicons/vue/20/solid";
+import { BoltIcon } from '@heroicons/vue/20/solid';
-import { HeatmapChart } from "echarts/charts";
+import { HeatmapChart } from 'echarts/charts';
 import {
     CalendarComponent,
     TitleComponent,
     TooltipComponent,
-    VisualMapComponent
+    VisualMapComponent,
-} from "echarts/components";
+} from 'echarts/components';
-import { CanvasRenderer } from "echarts/renderers";
+import { CanvasRenderer } from 'echarts/renderers';
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
 import {
     firstDayIndex,
     formatDate,
     formatHumanReadableDuration,
-    getDayJsInstance
+    getDayJsInstance,
-} from "@/packages/ui/src/utils/time";
+} from '@/packages/ui/src/utils/time';
-import { useCssVar } from "@vueuse/core";
+import { useCssVar } from '@vueuse/core';
-import { useQuery } from "@tanstack/vue-query";
+import { useQuery } from '@tanstack/vue-query';
-import { getCurrentOrganizationId } from "@/utils/useUser";
+import { getCurrentOrganizationId } from '@/utils/useUser';
-import { api } from "@/packages/api/src";
+import { api, type Organization } from '@/packages/api/src';
-import { LoadingSpinner } from "@/packages/ui/src";
+import { LoadingSpinner } from '@/packages/ui/src';
+
+const organization = inject<ComputedRef<Organization>>('organization');
 
 // Get the organization ID using the utility function
 const organizationId = computed(() => getCurrentOrganizationId());
 
-
 const { data: dailyHoursTracked, isLoading } = useQuery({
-    queryKey: ["dailyTrackedHours", organizationId],
+    queryKey: ['dailyTrackedHours', organizationId],
     queryFn: () => {
         return api.dailyTrackedHours({
             params: {
-                organization: organizationId.value!
+                organization: organizationId.value!,
-            }
+            },
         });
     },
-    enabled: computed(() => !!organizationId.value)
+    enabled: computed(() => !!organizationId.value),
 });
 
 use([
@@ -47,96 +48,105 @@ use([
     VisualMapComponent,
     CalendarComponent,
     HeatmapChart,
-    CanvasRenderer
+    CanvasRenderer,
 ]);
 
-provide(THEME_KEY, "dark");
+provide(THEME_KEY, 'dark');
 
 const max = computed(() => {
-        if (!isLoading.value && dailyHoursTracked.value) {
+    if (!isLoading.value && dailyHoursTracked.value) {
-            return Math.max(
+        return Math.max(
-                Math.max(...dailyHoursTracked.value.map((el) => el.duration)),
+            Math.max(...dailyHoursTracked.value.map((el) => el.duration)),
-                1
+            1
-            );
+        );
-        } else {
+    } else {
-            return 1;
+        return 1;
-        }
     }
-);
+});
 
-const backgroundColor = useCssVar('--color-card-background', null, { observe: true });
+const backgroundColor = useCssVar('--color-card-background', null, {
-const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, { observe: true });
+    observe: true,
+});
+const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, {
+    observe: true,
+});
 
 const option = computed(() => {
-        return {
+    return {
-            tooltip: {},
+        tooltip: {},
-            visualMap: {
+        visualMap: {
-                min: 0,
+            min: 0,
-                max: max.value,
+            max: max.value,
-                type: "piecewise",
+            type: 'piecewise',
-                orient: "horizontal",
+            orient: 'horizontal',
-                left: "center",
+            left: 'center',
-                top: "center",
+            top: 'center',
-                inRange: {
+            inRange: {
-                    color: [itemBackgroundColor.value, "#2DBE45"]
+                color: [itemBackgroundColor.value, '#2DBE45'],
-                },
-                show: false
             },
-            calendar: {
+            show: false,
-                top: 40,
+        },
-                bottom: 20,
+        calendar: {
-                left: 40,
+            top: 40,
-                right: 10,
+            bottom: 20,
-                cellSize: [40, 40],
+            left: 40,
-                dayLabel: {
+            right: 10,
-                    firstDay: firstDayIndex.value
+            cellSize: [40, 40],
-                },
+            dayLabel: {
-                splitLine: {
+                firstDay: firstDayIndex.value,
-                    show: false
-                },
-                range: [
-                    dayjs().format("YYYY-MM-DD"),
-                    getDayJsInstance()()
-                        .subtract(50, "day")
-                        .startOf("week")
-                        .format("YYYY-MM-DD")
-                ],
-                itemStyle: {
-                    color: "transparent",
-                    borderWidth: 8,
-                    borderColor: backgroundColor.value
-                },
-                yearLabel: { show: false }
             },
-            series: {
+            splitLine: {
-                type: "heatmap",
+                show: false,
-                coordinateSystem: "calendar",
+            },
-                data: dailyHoursTracked?.value?.map((el) => [el.date, el.duration]) ?? [],
+            range: [
-                itemStyle: {
+                dayjs().format('YYYY-MM-DD'),
-                    borderRadius: 5,
+                getDayJsInstance()()
-                    borderColor: "rgba(255,255,255,0.05)",
+                    .subtract(50, 'day')
-                    borderWidth: 1
+                    .startOf('week')
-                },
+                    .format('YYYY-MM-DD'),
-                tooltip: {
+            ],
-                    valueFormatter: (value: number, dataIndex: number) => {
+            itemStyle: {
-                        if(dailyHoursTracked?.value){
+                color: 'transparent',
-                            return (
+                borderWidth: 8,
-                                formatDate(dailyHoursTracked?.value[dataIndex].date) +
+                borderColor: backgroundColor.value,
-                                ": " +
+            },
-                                formatHumanReadableDuration(value)
+            yearLabel: { show: false },
-                            );
+        },
-                        }
+        series: {
-                        else {
+            type: 'heatmap',
-                            return "";
+            coordinateSystem: 'calendar',
-                        }
+            data:
-
+                dailyHoursTracked?.value?.map((el) => [el.date, el.duration]) ??
+                [],
+            itemStyle: {
+                borderRadius: 5,
+                borderColor: 'rgba(255,255,255,0.05)',
+                borderWidth: 1,
+            },
+            tooltip: {
+                valueFormatter: (value: number, dataIndex: number) => {
+                    if (dailyHoursTracked?.value) {
+                        return (
+                            formatDate(
+                                dailyHoursTracked?.value[dataIndex].date,
+                                organization?.value?.date_format
+                            ) +
+                            ': ' +
+                            formatHumanReadableDuration(
+                                value,
+                                organization?.value?.interval_format,
+                                organization?.value?.number_format
+                            )
+                        );
+                    } else {
+                        return '';
                     }
-                }
+                },
             },
-            backgroundColor: "transparent"
+        },
-        };
+        backgroundColor: 'transparent',
-    });
+    };
-
+});
 </script>
 
 <template>

resources/js/Components/Dashboard/DayOverviewCardEntry.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import DayOverviewCardChart from '@/Components/Dashboard/DayOverviewCardChart.vue';
+import {
+    formatHumanReadableDate,
+    formatHumanReadableDuration,
+} from '@/packages/ui/src/utils/time';
+import { inject, type ComputedRef } from 'vue';
+import type { Organization } from '@/packages/api/src';
+
+const organization = inject<ComputedRef<Organization>>('organization');
 
 defineProps<{
     date: string;
     duration: number;
     history: number[];
 }>();
-import {
-    formatHumanReadableDate,
-    formatHumanReadableDuration,
-} from '@/packages/ui/src/utils/time';
 </script>
 
 <template>
@@ -25,7 +29,13 @@ import {
         </div>
         <div
             class="flex text-sm items-center justify-center text-text-secondary min-w-[65px] font-semibold">
-            {{ formatHumanReadableDuration(duration) }}
+            {{
+                formatHumanReadableDuration(
+                    duration,
+                    organization?.interval_format,
+                    organization?.number_format
+                )
+            }}
         </div>
     </div>
 </template>

resources/js/Components/Dashboard/ProjectsChartCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VChart, { THEME_KEY } from 'vue-echarts';
-import { provide } from 'vue';
+import { provide, inject, type ComputedRef } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { PieChart } from 'echarts/charts';
@@ -12,6 +12,7 @@ import {
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { useCssVar } from "@vueuse/core";
+import type { Organization } from "@/packages/api/src";
 
 use([
     CanvasRenderer,
@@ -33,6 +34,8 @@ const props = defineProps<{
     }[];
 }>();
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 const seriesData = props.weeklyProjectOverview.map((el) => {
     return {
         ...el,
@@ -69,7 +72,7 @@ const option = computed(() => ({
             },
             tooltip: {
                 valueFormatter: (value: number) => {
-                    return formatHumanReadableDuration(value);
+                    return formatHumanReadableDuration(value, organization?.value?.interval_format, organization?.value?.number_format);
                 },
             },
             data: seriesData,

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -1,23 +1,28 @@
 <script setup lang="ts">
-import { use } from "echarts/core";
+import { use } from 'echarts/core';
-import { CanvasRenderer } from "echarts/renderers";
+import { CanvasRenderer } from 'echarts/renderers';
-import { BarChart } from "echarts/charts";
+import { BarChart } from 'echarts/charts';
-import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from "echarts/components";
+import {
-import VChart, { THEME_KEY } from "vue-echarts";
+    GridComponent,
-import { computed, provide } from "vue";
+    LegendComponent,
-import StatCard from "@/Components/Common/StatCard.vue";
+    TitleComponent,
-import { ClockIcon } from "@heroicons/vue/20/solid";
+    TooltipComponent,
-import CardTitle from "@/packages/ui/src/CardTitle.vue";
+} from 'echarts/components';
-import LinearGradient from "zrender/lib/graphic/LinearGradient";
+import VChart, { THEME_KEY } from 'vue-echarts';
-import ProjectsChartCard from "@/Components/Dashboard/ProjectsChartCard.vue";
+import { computed, provide, inject, type ComputedRef } from 'vue';
-import { formatHumanReadableDuration } from "@/packages/ui/src/utils/time";
+import StatCard from '@/Components/Common/StatCard.vue';
-import { formatCents } from "@/packages/ui/src/utils/money";
+import { ClockIcon } from '@heroicons/vue/20/solid';
-import { getWeekStart } from "@/packages/ui/src/utils/settings";
+import CardTitle from '@/packages/ui/src/CardTitle.vue';
-import { useCssVar } from "@vueuse/core";
+import LinearGradient from 'zrender/lib/graphic/LinearGradient';
-import { getOrganizationCurrencyString } from "@/utils/money";
+import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
-import { useQuery } from "@tanstack/vue-query";
+import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { getCurrentOrganizationId } from "@/utils/useUser";
+import { formatCents } from '@/packages/ui/src/utils/money';
-import { api } from "@/packages/api/src";
+import { getWeekStart } from '@/packages/ui/src/utils/settings';
+import { useCssVar } from '@vueuse/core';
+import { getOrganizationCurrencyString } from '@/utils/money';
+import { useQuery } from '@tanstack/vue-query';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { api, type Organization } from '@/packages/api/src';
 
 use([
     CanvasRenderer,
@@ -25,21 +30,21 @@ use([
     TitleComponent,
     GridComponent,
     TooltipComponent,
-    LegendComponent
+    LegendComponent,
 ]);
 
-provide(THEME_KEY, "dark");
+provide(THEME_KEY, 'dark');
 
 const weekdays = computed(() => {
-    const daysOrder = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+    const daysOrder = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
     const dayMapping: Record<string, string> = {
-        monday: "Mon",
+        monday: 'Mon',
-        tuesday: "Tue",
+        tuesday: 'Tue',
-        wednesday: "Wed",
+        wednesday: 'Wed',
-        thursday: "Thu",
+        thursday: 'Thu',
-        friday: "Fri",
+        friday: 'Fri',
-        saturday: "Sat",
+        saturday: 'Sat',
-        sunday: "Sun"
+        sunday: 'Sun',
     };
     if (dayMapping[getWeekStart()]) {
         const customOrder = [];
@@ -53,78 +58,76 @@ const weekdays = computed(() => {
     } else {
         return daysOrder;
     }
-
 });
 
-
+const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
-const accentColor = useCssVar("--theme-color-chart", null, { observe: true });
 
 // Get the organization ID using the utility function
 const organizationId = computed(() => getCurrentOrganizationId());
 
+const organization = inject<ComputedRef<Organization>>('organization');
 
 // Set up the queries
 const { data: weeklyProjectOverview } = useQuery({
-    queryKey: ["weeklyProjectOverview", organizationId],
+    queryKey: ['weeklyProjectOverview', organizationId],
     queryFn: () => {
         return api.weeklyProjectOverview({
             params: {
-                organization: organizationId.value!
+                organization: organizationId.value!,
-            }
+            },
         });
     },
-    enabled: computed(() => !!organizationId.value)
+    enabled: computed(() => !!organizationId.value),
 });
 
 const { data: totalWeeklyTime } = useQuery({
-    queryKey: ["totalWeeklyTime", organizationId],
+    queryKey: ['totalWeeklyTime', organizationId],
     queryFn: () => {
         return api.totalWeeklyTime({
             params: {
-                organization: organizationId.value!
+                organization: organizationId.value!,
-            }
+            },
         });
     },
-    enabled: computed(() => !!organizationId.value)
+    enabled: computed(() => !!organizationId.value),
 });
 
 const { data: totalWeeklyBillableTime } = useQuery({
-    queryKey: ["totalWeeklyBillableTime", organizationId],
+    queryKey: ['totalWeeklyBillableTime', organizationId],
     queryFn: () => {
         return api.totalWeeklyBillableTime({
             params: {
-                organization: organizationId.value!
+                organization: organizationId.value!,
-            }
+            },
         });
     },
-    enabled: computed(() => !!organizationId.value)
+    enabled: computed(() => !!organizationId.value),
 });
 
 const { data: totalWeeklyBillableAmount } = useQuery({
-    queryKey: ["totalWeeklyBillableAmount", organizationId],
+    queryKey: ['totalWeeklyBillableAmount', organizationId],
     queryFn: () => {
         return api.totalWeeklyBillableAmount({
             params: {
-                organization: organizationId.value!
+                organization: organizationId.value!,
-            }
+            },
         });
     },
-    enabled: computed(() => !!organizationId.value)
+    enabled: computed(() => !!organizationId.value),
 });
 
 const { data: weeklyHistory } = useQuery({
-    queryKey: ["weeklyHistory", organizationId],
+    queryKey: ['weeklyHistory', organizationId],
     queryFn: () => {
         return api.weeklyHistory({
             params: {
-                organization: organizationId.value!
+                organization: organizationId.value!,
-            }
+            },
         });
     },
-    enabled: computed(() => !!organizationId.value)
+    enabled: computed(() => !!organizationId.value),
 });
 
-
 const seriesData = computed(() => {
     if (!weeklyHistory.value) {
         return [];
@@ -137,101 +140,104 @@ const seriesData = computed(() => {
                     borderColor: new LinearGradient(0, 0, 0, 1, [
                         {
                             offset: 0,
-                            color: "rgba(" + accentColor.value + ",0.7)"
+                            color: 'rgba(' + accentColor.value + ',0.7)',
                         },
                         {
                             offset: 1,
-                            color: "rgba(" + accentColor.value + ",0.5)"
+                            color: 'rgba(' + accentColor.value + ',0.5)',
-                        }
+                        },
                     ]),
                     emphasis: {
                         color: new LinearGradient(0, 0, 0, 1, [
                             {
                                 offset: 0,
-                                color: "rgba(" + accentColor.value + ",0.9)"
+                                color: 'rgba(' + accentColor.value + ',0.9)',
                             },
                             {
                                 offset: 1,
-                                color: "rgba(" + accentColor.value + ",0.7)"
+                                color: 'rgba(' + accentColor.value + ',0.7)',
-                            }
+                            },
-                        ])
+                        ]),
                     },
                     borderRadius: [12, 12, 0, 0],
                     color: new LinearGradient(0, 0, 0, 1, [
                         {
                             offset: 0,
-                            color: "rgba(" + accentColor.value + ",0.7)"
+                            color: 'rgba(' + accentColor.value + ',0.7)',
                         },
                         {
                             offset: 1,
-                            color: "rgba(" + accentColor.value + ",0.5)"
+                            color: 'rgba(' + accentColor.value + ',0.5)',
-                        }
+                        },
-                    ])
+                    ]),
-                }
+                },
-            }
+            },
         };
     });
 });
 
-
+const markLineColor = useCssVar('--color-border-secondary', null, {
-const markLineColor = useCssVar("--color-border-secondary", null, { observe: true });
+    observe: true,
-const labelColor = useCssVar("--color-text-secondary", null, { observe: true });
+});
+const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
 const option = computed(() => {
     return {
         tooltip: {
-            trigger: "item"
+            trigger: 'item',
         },
         grid: {
             top: 0,
             right: 0,
             bottom: 50,
-            left: 0
+            left: 0,
         },
-        backgroundColor: "transparent",
+        backgroundColor: 'transparent',
         xAxis: {
-            type: "category",
+            type: 'category',
             data: weekdays.value,
             axisLine: {
                 lineStyle: {
-                    color: "transparent" // Set desired color here
+                    color: 'transparent', // Set desired color here
-                }
+                },
             },
             axisLabel: {
                 fontSize: 16,
                 fontWeight: 600,
                 margin: 24,
-                fontFamily: "Outfit, sans-serif",
+                fontFamily: 'Outfit, sans-serif',
-                color: labelColor.value
+                color: labelColor.value,
             },
             axisTick: {
                 lineStyle: {
-                    color: "transparent" // Set desired color here
+                    color: 'transparent', // Set desired color here
-                }
+                },
-            }
+            },
         },
         yAxis: {
-            type: "value",
+            type: 'value',
             splitLine: {
                 lineStyle: {
-                    color: markLineColor.value
+                    color: markLineColor.value,
-                }
+                },
-            }
+            },
         },
         series: [
             {
                 data: seriesData.value,
-                type: "bar",
+                type: 'bar',
                 tooltip: {
                     valueFormatter: (value: number) => {
-                        return formatHumanReadableDuration(value);
+                        return formatHumanReadableDuration(
-                    }
+                            value,
-                }
+                            organization?.value?.interval_format,
-            }
+                            organization?.value?.number_format
-        ]
+                        );
+                    },
+                },
+            },
+        ],
     };
 });
-
-
 </script>
 
 <template>
@@ -244,28 +250,45 @@ const option = computed(() => {
                 :icon="ClockIcon"></CardTitle>
             <v-chart
                 v-if="weeklyHistory"
-                :autoresize="true" class="chart" :option="option" />
+                :autoresize="true"
+                class="chart"
+                :option="option" />
         </div>
         <div class="space-y-6">
             <StatCard
                 title="Spent Time"
                 :value="
-                totalWeeklyTime ?
+                    totalWeeklyTime
-                    formatHumanReadableDuration(totalWeeklyTime) : '--'" />
+                        ? formatHumanReadableDuration(
+                              totalWeeklyTime,
+                              organization?.interval_format,
+                              organization?.number_format
+                          )
+                        : '--'
+                " />
             <StatCard
                 title="Billable Time"
                 :value="
-                totalWeeklyBillableTime ?
+                    totalWeeklyBillableTime
-                    formatHumanReadableDuration(totalWeeklyBillableTime) : '--'
+                        ? formatHumanReadableDuration(
+                              totalWeeklyBillableTime,
+                              organization?.interval_format,
+                              organization?.number_format
+                          )
+                        : '--'
                 " />
             <StatCard
                 title="Billable Amount"
                 :value="
-                totalWeeklyBillableAmount ?
+                    totalWeeklyBillableAmount
-                    formatCents(
+                        ? formatCents(
-                        totalWeeklyBillableAmount.value,
+                              totalWeeklyBillableAmount.value,
-                        getOrganizationCurrencyString()
+                              getOrganizationCurrencyString(),
-                    ) : '--'
+                              organization?.currency_format,
+                              organization?.currency_symbol,
+                              organization?.number_format
+                          )
+                        : '--'
                 " />
             <ProjectsChartCard
                 v-if="weeklyProjectOverview"

resources/js/Components/ui/calendar/CalendarCellTrigger.vue

@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :class="cn(
       buttonVariants({ variant: 'ghost' }),
       'h-8 w-8 p-0 font-normal',
-      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      '[&[data-today]:not([data-selected])]:border-accent [&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:text-accent-foreground',
       // Selected
       'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
       // Disabled

resources/js/Components/ui/calendar/CalendarDateInput.vue

@@ -9,7 +9,8 @@ import { Calendar } from '@/Components/ui/calendar';
 import { CalendarIcon } from 'lucide-vue-next';
 import { formatDateLocalized } from '@/packages/ui/src/utils/time';
 import { parseDate } from '@internationalized/date';
-import { computed } from 'vue';
+import { computed, inject, type ComputedRef } from 'vue';
+import { type Organization } from '@/packages/api/src';
 
 const model = defineModel<string | null>();
 const emit = defineEmits<{
@@ -27,6 +28,8 @@ const handleBlur = () => {
 const date = computed(() => {
     return model.value ? parseDate(model.value) : undefined;
 });
+
+const organization = inject<ComputedRef<Organization>>('organization');
 </script>
 
 <template>
@@ -41,7 +44,7 @@ const date = computed(() => {
                 ]"
             >
                 <CalendarIcon class="mr-2 h-4 w-4" />
-                {{ model ? formatDateLocalized(model) : 'Pick a date' }}
+                {{ model ? formatDateLocalized(model, organization?.date_format) : 'Pick a date' }}
             </Button>
         </PopoverTrigger>
         <PopoverContent class="w-auto p-0">

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

@@ -34,11 +34,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/3 bg-default-background z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed top-0 left-0 z-50 w-screen h-screen flex items-start pt-6 md:pt-20 xl:pt-32 justify-center overflow-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-          props.class,
+          
         )"
     >
-      <slot />      
+    <div
+:class="cn(
+          'bg-default-background grid w-full max-w-lg border shadow-lg duration-200 sm:rounded-lg',
+          props.class,
+        )"
+      >
+        <slot />
+    </div>
     </DialogContent>
   </DialogPortal>
 </template>

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

@@ -2,22 +2,61 @@
 import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { computed, type HTMLAttributes, inject, type ComputedRef } from 'vue'
+import type { Organization } from '@/packages/api/src'
 
-const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<NumberFieldRootProps & { 
+  class?: HTMLAttributes['class']
+  formatOptions?: {
+    maximumFractionDigits?: number
+    minimumFractionDigits?: number
+  }
+}>()
 const emits = defineEmits<NumberFieldRootEmits>()
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, formatOptions: __, ...delegated } = props
-
   return delegated
 })
 
+const organization = inject<ComputedRef<Organization>>('organization')
+
+const locale = computed(() => {
+  const format = organization?.value?.number_format || 'comma-point'
+  
+  // space poin is not supported in reka-ui
+  switch (format) {
+    case 'point-comma':
+      return 'de-DE' // Uses point for thousands and comma for decimal
+    case 'comma-point':
+      return 'en-US' // Uses comma for thousands and point for decimal
+    case 'space-comma':
+      return 'sv-SE' // Uses space for thousands and comma for decimal
+    case 'apostrophe-point':
+      return 'de-CH' // Uses apostrophe for thousands and point for decimal
+    default:
+      return 'en-US'
+  }
+})
+
+const defaultFormatOptions = {
+  maximumFractionDigits: 2
+}
+
+const formatOptions = computed(() => ({
+  ...defaultFormatOptions,
+  ...props.formatOptions
+}))
+
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
+  <NumberFieldRoot 
+    v-bind="forwarded" 
+    :locale="locale"
+    :format-options="formatOptions"
+    :class="cn('grid gap-1.5', props.class)">
     <slot />
   </NumberFieldRoot>
 </template>

resources/js/Components/ui/range-calendar/RangeCalendarCellTrigger.vue

@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :class="cn(
       buttonVariants({ variant: 'ghost' }),
       'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',
-      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      '[&[data-today]:not([data-selected])]:border-accent [&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:text-accent-foreground',
       // Selection Start
       'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
       // Selection End