prevent billable rate change modals from immediately sumbitting when pressing enter on the previous form

add jetstream permissions, add dynamic inertia module loading, add shadcn components, change modals and dropdowns to shadcn dismissable layer,

.github/workflows/build-private.yml

@@ -107,7 +107,7 @@ jobs:
       - name: "Install npm dependencies in services extension"
         run: cd extensions/Services && npm ci
 
-      - name: "Checkout invoicing extension"
+      - name: "Checkout services extension"
         uses: actions/checkout@v4
         with:
           repository: solidtime-io/extension-invoicing

.github/workflows/phpunit.yml

@@ -63,7 +63,7 @@ jobs:
         run: php artisan test --stop-on-failure --coverage-text --coverage-clover=coverage.xml
 
       - name: "Upload coverage reports to Codecov"
-        uses: codecov/codecov-action@v5.4.2
+        uses: codecov/codecov-action@v5.4.0
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           slug: solidtime-io/solidtime

app/Enums/DateFormat.php

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

app/Enums/IntervalFormat.php

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

app/Filament/Resources/AuditResource.php

@@ -13,7 +13,7 @@ use Filament\Tables;
 use Filament\Tables\Columns\IconColumn;
 use Filament\Tables\Table;
 use Illuminate\Support\Str;
-use Novadaemon\FilamentPrettyJson\Form\PrettyJsonField;
+use Novadaemon\FilamentPrettyJson\PrettyJson;
 
 class AuditResource extends Resource
 {
@@ -38,8 +38,8 @@ class AuditResource extends Resource
                     ->maxLength(255),
                 Forms\Components\TextInput::make('auditable_id')
                     ->required(),
-                PrettyJsonField::make('old_values'),
-                PrettyJsonField::make('new_values'),
+                PrettyJson::make('old_values'),
+                PrettyJson::make('new_values'),
                 Forms\Components\Textarea::make('url'),
                 Forms\Components\TextInput::make('ip_address'),
                 Forms\Components\TextInput::make('user_agent')

app/Filament/Resources/FailedJobResource.php

@@ -20,7 +20,7 @@ use Filament\Tables\Columns\TextColumn;
 use Filament\Tables\Table;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Artisan;
-use Novadaemon\FilamentPrettyJson\Form\PrettyJsonField;
+use Novadaemon\FilamentPrettyJson\PrettyJson;
 
 /**
  * @source https://gitlab.com/amvisor/filament-failed-jobs
@@ -50,7 +50,7 @@ class FailedJobResource extends Resource
 
                 // make text a little bit smaller because often a complete Stack Trace is shown:
                 TextArea::make('exception')->disabled()->columnSpan(4)->extraInputAttributes(['style' => 'font-size: 80%;']),
-                PrettyJsonField::make('payload')->disabled()->columnSpan(4),
+                PrettyJson::make('payload')->disabled()->columnSpan(4),
             ])->columns(4);
     }
 

app/Filament/Resources/ReportResource.php

@@ -18,7 +18,7 @@ use Filament\Tables\Columns\TextColumn;
 use Filament\Tables\Columns\ToggleColumn;
 use Filament\Tables\Filters\SelectFilter;
 use Filament\Tables\Table;
-use Novadaemon\FilamentPrettyJson\Form\PrettyJsonField;
+use Novadaemon\FilamentPrettyJson\PrettyJson;
 
 class ReportResource extends Resource
 {
@@ -58,7 +58,7 @@ class ReportResource extends Resource
                 Forms\Components\TextInput::make('share_secret')
                     ->label('Share Secret')
                     ->nullable(),
-                PrettyJsonField::make('properties')
+                PrettyJson::make('properties')
                     ->formatStateUsing(function (ReportPropertiesDto $state, Report $record): string {
                         return $record->getRawOriginal('properties');
                     })

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

@@ -1,37 +0,0 @@
-<?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/Middleware/HandleInertiaRequests.php

@@ -40,7 +40,6 @@ class HandleInertiaRequests extends Middleware
     public function share(Request $request): array
     {
         $hasBilling = Module::has('Billing') && Module::isEnabled('Billing');
-        $hasInvoicing = Module::has('Invoicing') && Module::isEnabled('Invoicing');
 
         /** @var BillingContract $billing */
         $billing = app(BillingContract::class);
@@ -49,7 +48,6 @@ class HandleInertiaRequests extends Middleware
 
         return array_merge(parent::share($request), [
             'has_billing_extension' => $hasBilling,
-            'has_invoicing_extension' => $hasInvoicing,
             'billing' => $billing !== null && $currentOrganization !== null ? [
                 'has_subscription' => $billing->hasSubscription($currentOrganization),
                 'has_trial' => $billing->hasTrial($currentOrganization),

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

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

app/Http/Requests/V1/BaseFormRequest.php

@@ -1,30 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Http\Requests\V1;
-
-use Illuminate\Foundation\Http\FormRequest;
-
-class BaseFormRequest extends FormRequest
-{
-
-    /**
-     * @param bool $bigInt
-     * @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 BaseFormRequest
+class ClientIndexRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class ClientStoreRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class ClientUpdateRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class ImportRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class InvitationIndexRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class InvitationStoreRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class MemberIndexRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class MemberMergeIntoRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class MemberUpdateRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -27,12 +27,12 @@ class MemberUpdateRequest extends BaseFormRequest
                 'string',
                 Rule::enum(Role::class),
             ],
-            'billable_rate' => array_merge(
-                [
-                    'nullable',
-                ],
-                $this->moneyRules()
-            ),
+            'billable_rate' => [
+                'nullable',
+                'integer',
+                'min:0',
+                'max:2147483647',
+            ],
         ];
     }
 

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 BaseFormRequest
+class OrganizationUpdateRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -30,12 +30,12 @@ class OrganizationUpdateRequest extends BaseFormRequest
                 'string',
                 'max:255',
             ],
-            'billable_rate' => array_merge(
-                [
-                    'nullable',
-                ],
-                $this->moneyRules()
-            ),
+            'billable_rate' => [
+                'nullable',
+                'integer',
+                'min:0',
+                'max:2147483647',
+            ],
             '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 BaseFormRequest
+class ProjectIndexRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,21 +4,20 @@ 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\Support\Str;
+use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
 
 /**
  * @property Organization $organization Organization from model binding
  */
-class ProjectStoreRequest extends BaseFormRequest
+class ProjectStoreRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -28,7 +27,6 @@ class ProjectStoreRequest extends BaseFormRequest
     public function rules(): array
     {
         return [
-            // Name of the project, the name needs to be unique per client and organization
             'name' => [
                 'required',
                 'string',
@@ -36,13 +34,7 @@ class ProjectStoreRequest extends BaseFormRequest
                 'max:255',
                 UniqueEloquent::make(Project::class, 'name', function (Builder $builder): Builder {
                     /** @var Builder<Project> $builder */
-                    $clientId = $this->input('client_id');
-                    if (! is_string($clientId) || ! Str::isUuid($clientId)) {
-                        $clientId = null;
-                    }
-
-                    return $builder->whereBelongsTo($this->organization, 'organization')
-                        ->where('client_id', $clientId);
+                    return $builder->whereBelongsTo($this->organization, 'organization');
                 })->withCustomTranslation('validation.project_name_already_exists'),
             ],
             'color' => [
@@ -55,15 +47,14 @@ class ProjectStoreRequest extends BaseFormRequest
                 'required',
                 'boolean',
             ],
-            'billable_rate' => array_merge(
-                [
-                    'nullable',
-                ],
-                $this->moneyRules()
-            ),
+            'billable_rate' => [
+                'nullable',
+                'integer',
+                'min:0',
+                'max:2147483647',
+            ],
             // ID of the client
             'client_id' => [
-                'present',
                 'nullable',
                 ExistsEloquent::make(Client::class, null, function (Builder $builder): Builder {
                     /** @var Builder<Client> $builder */

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

@@ -4,14 +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\Support\Str;
+use Illuminate\Foundation\Http\FormRequest;
 use Korridor\LaravelModelValidationRules\Rules\ExistsEloquent;
 use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
 
@@ -19,7 +18,7 @@ use Korridor\LaravelModelValidationRules\Rules\UniqueEloquent;
  * @property Organization $organization Organization from model binding
  * @property Project|null $project Project from model binding
  */
-class ProjectUpdateRequest extends BaseFormRequest
+class ProjectUpdateRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -35,13 +34,7 @@ class ProjectUpdateRequest extends BaseFormRequest
                 'max:255',
                 UniqueEloquent::make(Project::class, 'name', function (Builder $builder): Builder {
                     /** @var Builder<Project> $builder */
-                    $clientId = $this->input('client_id');
-                    if (! is_string($clientId) || ! Str::isUuid($clientId)) {
-                        $clientId = null;
-                    }
-
-                    return $builder->whereBelongsTo($this->organization, 'organization')
-                        ->where('client_id', $clientId);
+                    return $builder->whereBelongsTo($this->organization, 'organization');
                 })->ignore($this->project?->getKey())->withCustomTranslation('validation.project_name_already_exists'),
             ],
             'color' => [
@@ -61,18 +54,18 @@ class ProjectUpdateRequest extends BaseFormRequest
                 'boolean',
             ],
             'client_id' => [
-                'present',
                 'nullable',
                 ExistsEloquent::make(Client::class, null, function (Builder $builder): Builder {
                     /** @var Builder<Client> $builder */
                     return $builder->whereBelongsTo($this->organization, 'organization');
                 })->uuid(),
             ],
-            'billable_rate' => array_merge([
+            'billable_rate' => [
                 '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 BaseFormRequest
+class ProjectMemberStoreRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -31,12 +31,12 @@ class ProjectMemberStoreRequest extends BaseFormRequest
                     return $builder->whereBelongsTo($this->organization, 'organization');
                 })->uuid(),
             ],
-            'billable_rate' => array_merge(
-                [
-                    'nullable',
-                ],
-                $this->moneyRules()
-            ),
+            'billable_rate' => [
+                'nullable',
+                'integer',
+                'min:0',
+                'max:2147483647',
+            ],
         ];
     }
 

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 BaseFormRequest
+class ProjectMemberUpdateRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -21,12 +21,12 @@ class ProjectMemberUpdateRequest extends BaseFormRequest
     public function rules(): array
     {
         return [
-            'billable_rate' => array_merge(
-                [
-                    'nullable',
-                ],
-                $this->moneyRules()
-            ),
+            'billable_rate' => [
+                'nullable',
+                'integer',
+                'min:0',
+                'max:2147483647',
+            ],
         ];
     }
 

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 BaseFormRequest
+class ReportStoreRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -40,7 +40,7 @@ class ReportStoreRequest extends BaseFormRequest
                 'required',
                 'boolean',
             ],
-            // After this date the report will be automatically set to private (is_public=false) (Format: "Y-m-d\TH:i:s\Z", UTC timezone, Example: "2000-02-22T14:58:59Z")
+            // After this date the report will be automatically set to private (is_public=false) (ISO 8601 format, UTC timezone)
             'public_until' => [
                 'nullable',
                 'date_format:Y-m-d\TH:i:s\Z',

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 BaseFormRequest
+class ReportUpdateRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class TagStoreRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class TagUpdateRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class TaskIndexRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class TaskStoreRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class TaskUpdateRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -7,7 +7,6 @@ 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;
@@ -17,6 +16,7 @@ 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 BaseFormRequest
+class TimeEntryAggregateExportRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -5,7 +5,6 @@ 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;
@@ -15,6 +14,7 @@ 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 BaseFormRequest
+class TimeEntryAggregateRequest extends FormRequest
 {
     /**
      * 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 BaseFormRequest
+class TimeEntryDestroyMultipleRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,7 +4,6 @@ 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;
@@ -13,12 +12,13 @@ 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 BaseFormRequest
+class TimeEntryIndexRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,7 +4,6 @@ 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;
@@ -12,12 +11,13 @@ 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 BaseFormRequest
+class TimeEntryStoreRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -59,12 +59,12 @@ class TimeEntryStoreRequest extends BaseFormRequest
                         ->where('project_id', $this->input('project_id'));
                 })->uuid()->withMessage(__('validation.task_belongs_to_project')),
             ],
-            // Start of time entry (Format: "Y-m-d\TH:i:s\Z", UTC timezone, Example: "2000-02-22T14:58:59Z")
+            // Start of time entry (ISO 8601 format, UTC timezone)
             'start' => [
                 'required',
                 'date_format:Y-m-d\TH:i:s\Z',
             ],
-            // End of time entry (Format: "Y-m-d\TH:i:s\Z", UTC timezone, Example: "2000-02-22T14:58:59Z")
+            // End of time entry (ISO 8601 format, UTC timezone)
             'end' => [
                 'nullable',
                 'date_format:Y-m-d\TH:i:s\Z',

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

@@ -4,7 +4,6 @@ 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;
@@ -12,12 +11,13 @@ 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 BaseFormRequest
+class TimeEntryUpdateMultipleRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.

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

@@ -4,7 +4,6 @@ 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;
@@ -12,12 +11,13 @@ 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 BaseFormRequest
+class TimeEntryUpdateRequest extends FormRequest
 {
     /**
      * Get the validation rules that apply to the request.
@@ -59,11 +59,11 @@ class TimeEntryUpdateRequest extends BaseFormRequest
                         ->where('project_id', $this->input('project_id'));
                 })->uuid()->withMessage(__('validation.task_belongs_to_project')),
             ],
-            // Start of time entry (Format: "Y-m-d\TH:i:s\Z", UTC timezone, Example: "2000-02-22T14:58:59Z")
+            // Start of time entry (ISO 8601 format, UTC timezone)
             'start' => [
                 'date_format:Y-m-d\TH:i:s\Z',
             ],
-            // End of time entry (Format: "Y-m-d\TH:i:s\Z", UTC timezone, Example: "2000-02-22T14:58:59Z")
+            // End of time entry (ISO 8601 format, UTC timezone)
             'end' => [
                 'nullable',
                 'date_format:Y-m-d\TH:i:s\Z',

app/Http/Resources/V1/BaseResource.php

@@ -12,10 +12,6 @@ abstract class BaseResource extends JsonResource
     protected function formatDateTime(?Carbon $carbon): ?string
     {
         return $carbon?->toIso8601ZuluString();
-    }
 
-    protected function formatDate(?Carbon $carbon): ?string
-    {
-        return $carbon?->format('Y-m-d');
     }
 }

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

@@ -4,14 +4,8 @@ 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;
 
 /**
@@ -40,8 +34,6 @@ class OrganizationResource extends BaseResource
      */
     public function toArray(Request $request): array
     {
-        $currencyService = app(CurrencyService::class);
-
         return [
             /** @var string $id ID */
             'id' => $this->resource->id,
@@ -55,17 +47,15 @@ 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 $currency_symbol Currency symbol */
-            'currency_symbol' => $currencyService->getCurrencySymbol($this->resource->currency),
-            /** @var NumberFormat $number_format Number format */
+            /** @var string $number_format Number format */
             'number_format' => $this->resource->number_format->value,
-            /** @var CurrencyFormat $currency_format Currency format */
+            /** @var string $currency_format Currency format */
             'currency_format' => $this->resource->currency_format->value,
-            /** @var DateFormat $date_format Date format */
+            /** @var string $date_format Date format */
             'date_format' => $this->resource->date_format->value,
-            /** @var IntervalFormat $interval_format Interval format */
+            /** @var string $interval_format Interval format */
             'interval_format' => $this->resource->interval_format->value,
-            /** @var TimeFormat $time_format Time format */
+            /** @var string $time_format Time format */
             'time_format' => $this->resource->time_format->value,
         ];
     }

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

@@ -4,14 +4,8 @@ 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;
 
 /**
@@ -70,8 +64,6 @@ class DetailedWithDataReportResource extends BaseResource
      */
     public function toArray(Request $request): array
     {
-        $currencyService = app(CurrencyService::class);
-
         return [
             /** @var string $name Name */
             'name' => $this->resource->name,
@@ -81,18 +73,6 @@ 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/Import/Importers/ClockifyProjectsImporter.php

@@ -37,9 +37,9 @@ class ClockifyProjectsImporter extends DefaultImporter
                 if ($record['Project'] !== '') {
                     $projectId = $this->projectImportHelper->getKey([
                         'name' => $record['Project'],
-                        'client_id' => $clientId,
                         'organization_id' => $this->organization->id,
                     ], [
+                        'client_id' => $clientId,
                         'color' => $this->colorService->getRandomColor(),
                         'is_billable' => $record['Billability'] === 'Yes',
                         'billable_rate' => $billableRateKey !== null && $record[$billableRateKey] !== '' ? (int) (((float) $record[$billableRateKey]) * 100) : null,

app/Service/Import/Importers/ClockifyTimeEntriesImporter.php

@@ -83,9 +83,9 @@ class ClockifyTimeEntriesImporter extends DefaultImporter
                 if ($record['Project'] !== '') {
                     $projectId = $this->projectImportHelper->getKey([
                         'name' => $record['Project'],
-                        'client_id' => $clientId,
                         'organization_id' => $this->organization->id,
                     ], [
+                        'client_id' => $clientId,
                         'color' => $this->colorService->getRandomColor(),
                         'is_billable' => false,
                     ]);
@@ -124,59 +124,34 @@ class ClockifyTimeEntriesImporter extends DefaultImporter
                 $timeEntry->is_imported = true;
 
                 // Start
-                $start = null;
                 try {
-                    $startDateStr = $record['Start Date'];
-                    $startTimeStr = $record['Start Time'];
-                    $startStr = $startDateStr.' '.$startTimeStr;
-                    $matches = [];
-                    $checkResult = preg_match('/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4}) ([0-9]{1,2}):([0-9]{1,2})(:[0-9]{1,2})? (AM|PM)$/', $startStr, $matches);
-
-                    if ($checkResult === 1) {
-                        if ((int) $matches[1] > 12) {
-                            throw new ImportException('Start date ("'.$startDateStr.'") is invalid, please select the correct date format before exporting from Clockify');
-                        }
-                        if ($matches[6] === '') {
-                            $start = Carbon::createFromFormat('m/d/Y h:i A', $startStr, $timezone);
-                        } else {
-                            $start = Carbon::createFromFormat('m/d/Y H:i:s A', $startStr, $timezone);
-                        }
+                    if (preg_match('/^[0-9]{1,2}:[0-9]{1,2} (AM|PM)$/', $record['Start Time']) === 1) {
+                        $start = Carbon::createFromFormat('m/d/Y h:i A', $record['Start Date'].' '.$record['Start Time'], $timezone);
+                    } else {
+                        $start = Carbon::createFromFormat('m/d/Y H:i:s A', $record['Start Date'].' '.$record['Start Time'], $timezone);
                     }
                 } catch (InvalidFormatException) {
-                    throw new ImportException('Start date ("'.$startDateStr.'") or time ("'.$startTimeStr.'") are invalid');
+                    throw new ImportException('Start date ("'.$record['Start Date'].'") or time ("'.$record['Start Time'].'") are invalid');
                 }
                 if ($start === null) {
-                    throw new ImportException('Start date ("'.$startDateStr.'") or time ("'.$startTimeStr.'") are invalid');
+                    throw new ImportException('Start date ("'.$record['Start Date'].'") or time ("'.$record['Start Time'].'") are invalid');
                 }
                 $timeEntry->start = $start->utc();
 
                 // End
-                $end = null;
                 try {
-                    $endDateStr = $record['End Date'];
-                    $endTimeStr = $record['End Time'];
-                    $endStr = $endDateStr.' '.$endTimeStr;
-                    $matches = [];
-                    $checkResult = preg_match('/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4}) ([0-9]{1,2}):([0-9]{1,2})(:[0-9]{1,2})? (AM|PM)$/', $endStr, $matches);
-
-                    if ($checkResult === 1) {
-                        if ((int) $matches[1] > 12) {
-                            throw new ImportException('Start date ("'.$endDateStr.'") is invalid, please select the correct date format before exporting from Clockify');
-                        }
-                        if ($matches[6] === '') {
-                            $end = Carbon::createFromFormat('m/d/Y h:i A', $endStr, $timezone);
-                        } else {
-                            $end = Carbon::createFromFormat('m/d/Y H:i:s A', $endStr, $timezone);
-                        }
+                    if (preg_match('/^[0-9]{1,2}:[0-9]{1,2} (AM|PM)$/', $record['End Time']) === 1) {
+                        $end = Carbon::createFromFormat('m/d/Y h:i A', $record['End Date'].' '.$record['End Time'], $timezone);
+                    } else {
+                        $end = Carbon::createFromFormat('m/d/Y H:i:s A', $record['End Date'].' '.$record['End Time'], $timezone);
                     }
                 } catch (InvalidFormatException) {
-                    throw new ImportException('End date ("'.$endDateStr.'") or time ("'.$endTimeStr.'") are invalid');
+                    throw new ImportException('End date ("'.$record['End Date'].'") or time ("'.$record['End Time'].'") are invalid');
                 }
                 if ($end === null) {
-                    throw new ImportException('End date ("'.$endDateStr.'") or time ("'.$endTimeStr.'") are invalid');
+                    throw new ImportException('End date ("'.$record['End Date'].'") or time ("'.$record['End Time'].'") are invalid');
                 }
                 $timeEntry->end = $end->utc();
-
                 $timeEntry->billable_rate = $this->billableRateService->getBillableRateForTimeEntryWithGivenRelations(
                     $timeEntry,
                     $projectMember,

app/Service/Import/Importers/DefaultImporter.php

@@ -97,7 +97,7 @@ abstract class DefaultImporter implements ImporterContract
                 'in:placeholder',
             ],
         ]);
-        $this->projectImportHelper = new ImportDatabaseHelper(Project::class, ['name', 'client_id', 'organization_id'], true, function (Builder $builder) {
+        $this->projectImportHelper = new ImportDatabaseHelper(Project::class, ['name', 'organization_id'], true, function (Builder $builder) {
             /** @var Builder<Project> $builder */
             return $builder->where('organization_id', $this->organization->id);
         }, validate: [
@@ -114,11 +114,6 @@ abstract class DefaultImporter implements ImporterContract
                 'integer',
                 'max:2147483647',
             ],
-            'client_id' => [
-                'nullable',
-                'string',
-                'uuid',
-            ],
         ], beforeSave: function (Project $project): void {
             if ($project->billable_rate === 0) {
                 $project->billable_rate = null;

app/Service/Import/Importers/GenericProjectsImporter.php

@@ -55,12 +55,12 @@ class GenericProjectsImporter extends DefaultImporter
                     }
                     $this->projectImportHelper->getKey([
                         'name' => $record['name'],
-                        'client_id' => $clientId,
                         'organization_id' => $this->organization->id,
                     ], [
                         'color' => isset($record['color']) && $record['color'] !== '' ? $record['color'] : app(ColorService::class)->getRandomColor(),
                         'billable_rate' => isset($record['billable_rate']) && $record['billable_rate'] !== '' ? (int) $record['billable_rate'] : null,
                         'is_public' => isset($record['is_public']) && $record['is_public'] === 'true',
+                        'client_id' => $clientId,
                         'is_billable' => isset($record['billable_default']) && $record['billable_default'] === 'true',
                         'estimated_time' => isset($record['estimated_time']) && $record['estimated_time'] !== '' && is_numeric($record['estimated_time']) && ((int) $record['estimated_time'] !== 0) ? (int) $record['estimated_time'] : null,
                         'archived_at' => $archivedAt,

app/Service/Import/Importers/GenericTimeEntriesImporter.php

@@ -99,9 +99,9 @@ class GenericTimeEntriesImporter extends DefaultImporter
                 if ($record['project'] !== '') {
                     $projectId = $this->projectImportHelper->getKey([
                         'name' => $record['project'],
-                        'client_id' => $clientId,
                         'organization_id' => $this->organization->id,
                     ], [
+                        'client_id' => $clientId,
                         'is_billable' => false,
                         'color' => $this->colorService->getRandomColor(),
                     ]);

app/Service/Import/Importers/HarvestProjectsImporter.php

@@ -60,10 +60,10 @@ class HarvestProjectsImporter extends DefaultImporter
                     $billableHours = $billableHoursField !== '' && is_numeric($billableHoursField) ? (int) ((float) $billableHoursField) : null;
                     $this->projectImportHelper->getKey([
                         'name' => $record['Project'],
-                        'client_id' => $clientId,
                         'organization_id' => $this->organization->id,
                     ], [
                         'color' => $this->colorService->getRandomColor(),
+                        'client_id' => $clientId,
                         'estimated_time' => $estimatedTime,
                         'is_billable' => $billableHours > 0,
                     ]);

app/Service/Import/Importers/HarvestTimeEntriesImporter.php

@@ -78,9 +78,9 @@ class HarvestTimeEntriesImporter extends DefaultImporter
                 if ($record['Project'] !== '') {
                     $projectId = $this->projectImportHelper->getKey([
                         'name' => $record['Project'],
-                        'client_id' => $clientId,
                         'organization_id' => $this->organization->id,
                     ], [
+                        'client_id' => $clientId,
                         'color' => $this->colorService->getRandomColor(),
                         'is_billable' => true,
                     ]);

app/Service/Import/Importers/SolidtimeImporter.php

@@ -176,12 +176,12 @@ class SolidtimeImporter extends DefaultImporter
 
                 $this->projectImportHelper->getKey([
                     'name' => $project['name'],
-                    'client_id' => $clientId,
                     'organization_id' => $this->organization->getKey(),
                 ], [
                     'color' => $project['color'],
                     'billable_rate' => $project['billable_rate'] === '' ? null : (int) $project['billable_rate'],
                     'is_public' => $project['is_public'] === 'true',
+                    'client_id' => $clientId,
                     'is_billable' => $project['is_billable'] === 'true',
                     'archived_at' => $project['archived_at'] !== '' ? Carbon::createFromFormat('Y-m-d\TH:i:s\Z', $project['archived_at'], 'UTC') : null,
                 ], $project['id']);

app/Service/Import/Importers/TogglDataImporter.php

@@ -137,9 +137,9 @@ class TogglDataImporter extends DefaultImporter
 
                 $projectId = $this->projectImportHelper->getKey([
                     'name' => $project->name,
-                    'client_id' => $clientId,
                     'organization_id' => $this->organization->getKey(),
                 ], [
+                    'client_id' => $clientId,
                     'color' => $project->color,
                     'is_billable' => $project->billable,
                     'is_public' => ! $project->is_private,

app/Service/Import/Importers/TogglTimeEntriesImporter.php

@@ -83,9 +83,9 @@ class TogglTimeEntriesImporter extends DefaultImporter
                 if ($record['Project'] !== '') {
                     $projectId = $this->projectImportHelper->getKey([
                         'name' => $record['Project'],
-                        'client_id' => $clientId,
                         'organization_id' => $this->organization->id,
                     ], [
+                        'client_id' => $clientId,
                         'is_billable' => false,
                         'color' => $this->colorService->getRandomColor(),
                     ]);

app/Service/LocalizationService.php

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

app/Service/TimeEntryAggregationService.php

@@ -280,20 +280,6 @@ class TimeEntryAggregationService
                     'color' => null,
                 ];
             }
-        } elseif ($type === TimeEntryAggregationType::Description) {
-            foreach ($keys as $key) {
-                $descriptorMap[$key] = [
-                    'description' => $key,
-                    'color' => null,
-                ];
-            }
-        } elseif ($type === TimeEntryAggregationType::Billable) {
-            foreach ($keys as $key) {
-                $descriptorMap[$key] = [
-                    'description' => $key === '0' ? 'Non-billable' : 'Billable',
-                    'color' => null,
-                ];
-            }
         }
 
         return $descriptorMap;

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::HyphenSeparatedYYYYMMDD->value),
+        'default_date_format' => env('LOCALIZATION_DEFAULT_DATE_FORMAT', DateFormat::HyphenSeperatedYYYYMMDD->value),
         'default_time_format' => env('LOCALIZATION_DEFAULT_TIME_FORMAT', TimeFormat::TwentyFourHours->value),
         'default_interval_format' => env('LOCALIZATION_DEFAULT_INTERVAL_FORMAT', IntervalFormat::HoursMinutes->value),
     ],

database/migrations/2025_04_25_202047_change_data_type_for_spent_time_columns.php

@@ -1,36 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\Schema;
-
-return new class extends Migration
-{
-    /**
-     * Run the migrations.
-     */
-    public function up(): void
-    {
-        Schema::table('projects', function (Blueprint $table): void {
-            $table->bigInteger('spent_time')->unsigned()->default(0)->change();
-        });
-        Schema::table('tasks', function (Blueprint $table): void {
-            $table->bigInteger('spent_time')->unsigned()->default(0)->change();
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     */
-    public function down(): void
-    {
-        Schema::table('projects', function (Blueprint $table): void {
-            $table->integer('spent_time')->unsigned()->default(0)->change();
-        });
-        Schema::table('tasks', function (Blueprint $table): void {
-            $table->integer('spent_time')->unsigned()->default(0)->change();
-        });
-    }
-};

database/migrations/2025_05_06_152804_fix_typos_in_organizations_table_format_columns.php

@@ -1,44 +0,0 @@
-<?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'");
-    }
-};

e2e/organization.spec.ts

@@ -7,29 +7,6 @@ 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');
@@ -50,11 +27,9 @@ test('test that organization billable rate can be updated with all existing time
         .getByLabel('Organization Billable Rate')
         .fill(newBillableRate.toString());
     await page
-        .locator('form')
-        .filter({ hasText: 'Organization Billable' })
-        .getByRole('button', { name: 'Save' })
+        .locator('button')
+        .filter({ hasText: /^Save$/ })
         .click();
-
     await Promise.all([
         page
             .getByRole('button', { name: 'Yes, update existing time entries' })
@@ -76,173 +51,4 @@ test('test that organization billable rate can be updated with all existing time
     ]);
 });
 
-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
+// TODO: Add Test for import

e2e/project-members.spec.ts

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

e2e/projects.spec.ts

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

e2e/reporting.spec.ts

@@ -1,210 +1,5 @@
-import { expect, Page } from '@playwright/test';
-import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
-import { test } from '../playwright/fixtures';
+// TODO: Test filter
 
+// TODO: Test date range
 
-
-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
+// TODO: Test grouping and sub-grouping

e2e/time.spec.ts

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

e2e/utils/money.ts

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

lang/en/validation.php

@@ -202,7 +202,7 @@ return [
     'currency' => 'The :attribute field must be a valid currency code (ISO 4217).',
     'organization' => 'The :attribute does not exist.',
     'task_belongs_to_project' => 'The :attribute is not part of the given project.',
-    'project_name_already_exists' => 'A project with the same name and client already exists in the organization.',
+    'project_name_already_exists' => 'A project with the same name already exists in the organization.',
     'tag_name_already_exists' => 'A tag with the same name already exists in the organization.',
     'client_name_already_exists' => 'A client with the same name already exists in the organization.',
     'task_name_already_exists' => 'A task with the same name already exists in the project.',

resources/css/app.css

@@ -43,9 +43,6 @@
 
     --theme-color-input-select-active: rgb(var(--color-accent-300));
     --theme-color-input-select-active-hover: rgb(var(--color-accent-200));
-
-    --color-accent-default: rgb(var(--color-accent-900));
-    --color-accent-foreground: rgb(var(--color-accent-100));
 }
 
 :root.light {
@@ -89,9 +86,6 @@
 
     --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/AuthenticationCard.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
-import { useTheme } from "@/utils/theme.js";
+import { onMounted, watch } from "vue";
+import { theme } from "@/utils/theme.js";
 
 onMounted(async () => {
-    useTheme()
+    document.documentElement.classList.add(theme.value);
+    watch(theme, (newTheme, oldTheme) => {
+        document.documentElement.classList.remove(oldTheme);
+        document.documentElement.classList.add(newTheme);
+    });
 });
 </script>
 

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

@@ -26,12 +26,10 @@ const createClient = ref(false);
                 <ClientTableHeading></ClientTableHeading>
                 <div
                     v-if="clients.length === 0"
-                    class="col-span-3 py-24 text-center">
+                    class="col-span-2 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,14 +2,10 @@
 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;
@@ -32,10 +28,7 @@ defineEmits<{
                 newBillableRate
                     ? formatCents(
                           newBillableRate,
-                          getOrganizationCurrencyString(),
-                          organization?.currency_format,
-                          organization?.currency_symbol,
-                          organization?.number_format
+                          getOrganizationCurrencyString()
                       )
                     : ' the default rate of the organization'
             }}</strong

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

@@ -154,6 +154,7 @@ 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,27 +1,26 @@
 <script setup lang="ts">
-import type { Member, Organization } from '@/packages/api/src';
-import { api } from '@/packages/api/src';
+import type { Member } 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, type ComputedRef, inject, ref } from 'vue';
+import {computed, ref} from 'vue';
 import MemberEditModal from '@/Components/Common/Member/MemberEditModal.vue';
-import MemberMergeModal from '@/Components/Common/Member/MemberMergeModal.vue';
-import MemberMakePlaceholderModal from '@/Components/Common/Member/MemberMakePlaceholderModal.vue';
-import { capitalizeFirstLetter } from '../../../utils/format';
-import { formatCents } from '../../../packages/ui/src/utils/money';
+import { getOrganizationCurrencyString } from '@/utils/money';
+import { formatCents } from '@/packages/ui/src/utils/money';
+import MemberMergeModal from "@/Components/Common/Member/MemberMergeModal.vue";
+import MemberMakePlaceholderModal from "@/Components/Common/Member/MemberMakePlaceholderModal.vue";
 
 const props = defineProps<{
     member: Member;
 }>();
 
-const organization = inject<ComputedRef<Organization>>('organization');
-
 const showEditMemberModal = ref(false);
 const showMergeMemberModal = ref(false);
 const showMakeMemberPlaceholderModal = ref(false);
@@ -36,12 +35,15 @@ async function invitePlaceholder(id: string) {
     if (organizationId) {
         await handleApiRequestNotifications(
             () =>
-                api.invitePlaceholder(undefined, {
-                    params: {
-                        organization: organizationId,
-                        member: id,
-                    },
-                }),
+                api.invitePlaceholder(
+                    undefined,
+                    {
+                        params: {
+                            organization: organizationId,
+                            member: id,
+                        },
+                    }
+                ),
             'Member invited successfully',
             'Error inviting member'
         );
@@ -50,7 +52,8 @@ async function invitePlaceholder(id: string) {
 
 const userHasValidMailAddress = computed(() => {
     return !props.member.email.endsWith('@solidtime-import.test');
-});
+})
+
 </script>
 
 <template>
@@ -72,10 +75,7 @@ const userHasValidMailAddress = computed(() => {
                 member.billable_rate
                     ? formatCents(
                           member.billable_rate,
-                          organization?.currency,
-                          organization?.currency_format,
-                          organization?.currency_symbol,
-                          organization?.number_format
+                          getOrganizationCurrencyString()
                       )
                     : '--'
             }}
@@ -101,26 +101,21 @@ 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
-                "></MemberMoreOptionsDropdown>
+                @make-placeholder="showMakeMemberPlaceholderModal = true"
+            ></MemberMoreOptionsDropdown>
         </div>
         <MemberEditModal
             v-model:show="showEditMemberModal"
             :member="member"></MemberEditModal>
-        <MemberMergeModal
-            v-model:show="showMergeMemberModal"
-            :member="member"></MemberMergeModal>
-        <MemberMakePlaceholderModal
-            v-model:show="showMakeMemberPlaceholderModal"
-            :member="member"></MemberMakePlaceholderModal>
+        <MemberMergeModal 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,14 +2,10 @@
 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;
 }>();
@@ -31,10 +27,7 @@ defineEmits<{
                 newBillableRate
                     ? formatCents(
                           newBillableRate,
-                          getOrganizationCurrencyString(),
-                          organization?.currency_format,
-                          organization?.currency_symbol,
-                          organization?.number_format
+                          getOrganizationCurrencyString()
                       )
                     : ' 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>
+            <div class="lg:grid grid-cols-2 gap-12">
                 <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, inject, type ComputedRef } from 'vue';
+import { computed, ref } from 'vue';
 import { CheckCircleIcon } from '@heroicons/vue/20/solid';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
@@ -15,7 +15,6 @@ 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());
@@ -47,17 +46,12 @@ 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(),
-                organization?.value?.currency_format,
-                organization?.value?.currency_symbol,
-                organization?.value?.number_format
+                getOrganizationCurrencyString()
             );
         } else {
             return 'Default Rate';
@@ -67,7 +61,6 @@ const billableRateInfo = computed(() => {
 });
 
 const showEditProjectModal = ref(false);
-
 </script>
 
 <template>
@@ -86,12 +79,9 @@ 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">
@@ -101,13 +91,7 @@ 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,
-                        organization?.interval_format,
-                        organization?.number_format
-                    )
-                }}
+                {{ formatHumanReadableDuration(project.spent_time) }}
             </div>
             <div v-else>--</div>
         </div>

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

@@ -2,14 +2,10 @@
 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;
@@ -32,10 +28,7 @@ defineEmits<{
                 newBillableRate
                     ? formatCents(
                           newBillableRate,
-                          getOrganizationCurrencyString(),
-                          organization?.currency_format,
-                          organization?.currency_symbol,
-                          organization?.number_format
+                          getOrganizationCurrencyString()
                       )
                     : ' 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, inject, type ComputedRef } from 'vue';
+import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import TableRow from '@/Components/TableRow.vue';
 import { useMembersStore } from '@/utils/useMembers';
@@ -10,14 +10,10 @@ 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,
@@ -55,10 +51,7 @@ const showEditModal = ref(false);
                 projectMember.billable_rate
                     ? formatCents(
                           projectMember.billable_rate,
-                          getOrganizationCurrencyString(),
-                          organization?.currency_format,
-                          organization?.currency_symbol,
-                          organization?.number_format
+                          getOrganizationCurrencyString()
                       )
                     : '--'
             }}

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, inject, shallowRef, type ComputedRef } from 'vue';
+import { computed, provide } from 'vue';
 import LinearGradient from 'zrender/lib/graphic/LinearGradient';
 import {
     formatDate,
@@ -16,7 +16,7 @@ import {
     TitleComponent,
     TooltipComponent,
 } from 'echarts/components';
-import type { AggregatedTimeEntries, Organization } from '@/packages/api/src';
+import type { AggregatedTimeEntries } from '@/packages/api/src';
 import { useCssVar } from '@vueuse/core';
 
 use([
@@ -30,8 +30,6 @@ use([
 
 provide(THEME_KEY, 'dark');
 
-const organization = inject<ComputedRef<Organization>>('organization');
-const chart = shallowRef(null);
 type GroupedData = AggregatedTimeEntries['grouped_data'];
 
 const props = defineProps<{
@@ -43,9 +41,7 @@ const xAxisLabels = computed(() => {
     if (props.groupedType === 'week') {
         return props?.groupedData?.map((el) => formatWeek(el.key));
     }
-    return props?.groupedData?.map((el) =>
-        formatDate(el.key ?? '', organization?.value?.date_format)
-    );
+    return props?.groupedData?.map((el) => formatDate(el.key ?? ''));
 });
 const accentColor = useCssVar('--theme-color-chart', null, { observe: true });
 const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
@@ -147,11 +143,7 @@ const option = computed(() => ({
             type: 'bar',
             tooltip: {
                 valueFormatter: (value: number) => {
-                    return formatHumanReadableDuration(
-                        value,
-                        organization?.value?.interval_format,
-                        organization?.value?.number_format
-                    );
+                    return formatHumanReadableDuration(value);
                 },
             },
         },
@@ -163,7 +155,6 @@ 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,10 +28,8 @@ const activeClass = computed(() => {
                 activeClass
             )
         ">
-        <component
-            :is="icon"
-            class="-ml-0.5 h-4 w-4 text-text-quaternary"></component>
-        <span class="text-nowrap"> {{ title }} </span>
+        <component :is="icon" class="-ml-0.5 h-4 w-4 text-text-quaternary"></component>
+        <span> {{ 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

@@ -1,504 +0,0 @@
-<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,
-    };
-    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, inject, type ComputedRef } from 'vue';
+import { computed, provide } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { PieChart } from 'echarts/charts';
@@ -11,8 +11,7 @@ import {
     TooltipComponent,
 } from 'echarts/components';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { useCssVar } from '@vueuse/core';
-import type { Organization } from '@/packages/api/src';
+import { useCssVar } from "@vueuse/core";
 
 use([
     CanvasRenderer,
@@ -25,8 +24,6 @@ use([
 
 provide(THEME_KEY, 'dark');
 
-const organization = inject<ComputedRef<Organization>>('organization');
-
 type ReportingChartDataEntry = {
     value: number;
     name: string;
@@ -74,11 +71,7 @@ const option = computed(() => ({
             },
             tooltip: {
                 valueFormatter: (value: number) => {
-                    return formatHumanReadableDuration(
-                        value,
-                        organization?.value?.interval_format,
-                        organization?.value?.number_format
-                    );
+                    return formatHumanReadableDuration(value);
                 },
             },
             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, inject, type ComputedRef } from 'vue';
+import { ref } from 'vue';
 import { twMerge } from 'tailwind-merge';
-import type { Organization } from '@/packages/api/src';
+import { getOrganizationCurrencyString } from '@/utils/money';
 
 type AggregatedGroupedData = GroupedData & {
     grouped_data?: GroupedData[] | null;
@@ -19,12 +19,9 @@ type GroupedData = {
 const props = defineProps<{
     entry: AggregatedGroupedData;
     indent?: boolean;
-    currency: string;
 }>();
 
 const expanded = ref(false);
-
-const organization = inject<ComputedRef<Organization>>('organization');
 </script>
 
 <template>
@@ -48,22 +45,10 @@ const organization = inject<ComputedRef<Organization>>('organization');
             </span>
         </div>
         <div class="justify-end flex items-center">
-            {{
-                formatHumanReadableDuration(
-                    entry.seconds,
-                    organization?.interval_format,
-                    organization?.number_format
-                )
-            }}
+            {{ formatHumanReadableDuration(entry.seconds) }}
         </div>
         <div class="justify-end pr-6 flex items-center">
-            {{ entry.cost ? formatCents(
-                entry.cost,
-                props.currency,
-                organization?.currency_format,
-                organization?.currency_symbol,
-                organization?.number_format
-            ) : '--' }}
+            {{entry.cost ? formatCents(entry.cost, getOrganizationCurrencyString()) : '--' }}
         </div>
     </div>
     <div
@@ -73,7 +58,6 @@ const organization = inject<ComputedRef<Organization>>('organization');
         <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,19 +6,16 @@ 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, inject, type ComputedRef } from 'vue';
+import { ref } 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);
 }
@@ -44,13 +41,7 @@ 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,
-                        organization?.interval_format,
-                        organization?.number_format
-                    )
-                }}
+                {{ formatHumanReadableDuration(task.spent_time) }}
             </span>
             <span v-else> -- </span>
         </div>

resources/js/Components/CurrentSidebarTimer.vue

@@ -3,10 +3,9 @@ import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import dayjs from 'dayjs';
-import { formatDuration } from '@/packages/ui/src/utils/time';
+import { formatHumanReadableDuration } 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;
@@ -15,9 +14,10 @@ const currentTime = computed(() => {
     if (now.value && currentTimeEntry.value.start) {
         const startTime = dayjs(currentTimeEntry.value.start);
         const diff = now.value.diff(startTime, 's');
-        return formatDuration(diff);
+        // return dayjs(diff).utc().format('HH:mm:ss');
+        return formatHumanReadableDuration(diff);
     }
-    return formatDuration(0);
+    return formatHumanReadableDuration(0);
 });
 
 const isRunningInDifferentOrganization = computed(() => {
@@ -43,9 +43,7 @@ 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,45 +1,44 @@
 <script lang="ts" setup>
-import VChart, { THEME_KEY } from 'vue-echarts';
-import { provide, computed, inject, type ComputedRef } from 'vue';
-import { use } from 'echarts/core';
-import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
-import { BoltIcon } from '@heroicons/vue/20/solid';
-import { HeatmapChart } from 'echarts/charts';
+import VChart, { THEME_KEY } from "vue-echarts";
+import { provide, computed } from "vue";
+import { use } from "echarts/core";
+import DashboardCard from "@/Components/Dashboard/DashboardCard.vue";
+import { BoltIcon } from "@heroicons/vue/20/solid";
+import { HeatmapChart } from "echarts/charts";
 import {
     CalendarComponent,
     TitleComponent,
     TooltipComponent,
-    VisualMapComponent,
-} from 'echarts/components';
-import { CanvasRenderer } from 'echarts/renderers';
-import dayjs from 'dayjs';
+    VisualMapComponent
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import dayjs from "dayjs";
 import {
     firstDayIndex,
     formatDate,
     formatHumanReadableDuration,
-    getDayJsInstance,
-} from '@/packages/ui/src/utils/time';
-import { useCssVar } from '@vueuse/core';
-import { useQuery } from '@tanstack/vue-query';
-import { getCurrentOrganizationId } from '@/utils/useUser';
-import { api, type Organization } from '@/packages/api/src';
-import { LoadingSpinner } from '@/packages/ui/src';
-
-const organization = inject<ComputedRef<Organization>>('organization');
+    getDayJsInstance
+} from "@/packages/ui/src/utils/time";
+import { useCssVar } from "@vueuse/core";
+import { useQuery } from "@tanstack/vue-query";
+import { getCurrentOrganizationId } from "@/utils/useUser";
+import { api } from "@/packages/api/src";
+import { LoadingSpinner } from "@/packages/ui/src";
 
 // 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([
@@ -48,105 +47,96 @@ use([
     VisualMapComponent,
     CalendarComponent,
     HeatmapChart,
-    CanvasRenderer,
+    CanvasRenderer
 ]);
 
-provide(THEME_KEY, 'dark');
+provide(THEME_KEY, "dark");
 
 const max = computed(() => {
-    if (!isLoading.value && dailyHoursTracked.value) {
-        return Math.max(
-            Math.max(...dailyHoursTracked.value.map((el) => el.duration)),
-            1
-        );
-    } else {
-        return 1;
+        if (!isLoading.value && dailyHoursTracked.value) {
+            return Math.max(
+                Math.max(...dailyHoursTracked.value.map((el) => el.duration)),
+                1
+            );
+        } else {
+            return 1;
+        }
     }
-});
+);
 
-const backgroundColor = useCssVar('--color-card-background', null, {
-    observe: true,
-});
-const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, {
-    observe: true,
-});
+const backgroundColor = useCssVar('--color-card-background', null, { observe: true });
+const itemBackgroundColor = useCssVar('--color-bg-tertiary', null, { observe: true });
 
 const option = computed(() => {
-    return {
-        tooltip: {},
-        visualMap: {
-            min: 0,
-            max: max.value,
-            type: 'piecewise',
-            orient: 'horizontal',
-            left: 'center',
-            top: 'center',
-            inRange: {
-                color: [itemBackgroundColor.value, '#2DBE45'],
-            },
-            show: false,
-        },
-        calendar: {
-            top: 40,
-            bottom: 20,
-            left: 40,
-            right: 10,
-            cellSize: [40, 40],
-            dayLabel: {
-                firstDay: firstDayIndex.value,
-            },
-            splitLine: {
-                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: {
-            type: 'heatmap',
-            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 '';
-                    }
+        return {
+            tooltip: {},
+            visualMap: {
+                min: 0,
+                max: max.value,
+                type: "piecewise",
+                orient: "horizontal",
+                left: "center",
+                top: "center",
+                inRange: {
+                    color: [itemBackgroundColor.value, "#2DBE45"]
                 },
+                show: false
             },
-        },
-        backgroundColor: 'transparent',
-    };
-});
+            calendar: {
+                top: 40,
+                bottom: 20,
+                left: 40,
+                right: 10,
+                cellSize: [40, 40],
+                dayLabel: {
+                    firstDay: firstDayIndex.value
+                },
+                splitLine: {
+                    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: {
+                type: "heatmap",
+                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) +
+                                ": " +
+                                formatHumanReadableDuration(value)
+                            );
+                        }
+                        else {
+                            return "";
+                        }
+
+                    }
+                }
+            },
+            backgroundColor: "transparent"
+        };
+    });
+
 </script>
 
 <template>

resources/js/Components/Dashboard/DayOverviewCardEntry.vue

@@ -1,19 +1,15 @@
 <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>
@@ -29,13 +25,7 @@ defineProps<{
         </div>
         <div
             class="flex text-sm items-center justify-center text-text-secondary min-w-[65px] font-semibold">
-            {{
-                formatHumanReadableDuration(
-                    duration,
-                    organization?.interval_format,
-                    organization?.number_format
-                )
-            }}
+            {{ formatHumanReadableDuration(duration) }}
         </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, inject, type ComputedRef } from 'vue';
+import { provide } from 'vue';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { PieChart } from 'echarts/charts';
@@ -12,7 +12,6 @@ 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,
@@ -34,8 +33,6 @@ const props = defineProps<{
     }[];
 }>();
 
-const organization = inject<ComputedRef<Organization>>('organization');
-
 const seriesData = props.weeklyProjectOverview.map((el) => {
     return {
         ...el,
@@ -72,7 +69,7 @@ const option = computed(() => ({
             },
             tooltip: {
                 valueFormatter: (value: number) => {
-                    return formatHumanReadableDuration(value, organization?.value?.interval_format, organization?.value?.number_format);
+                    return formatHumanReadableDuration(value);
                 },
             },
             data: seriesData,

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -1,28 +1,23 @@
 <script setup lang="ts">
-import { use } from 'echarts/core';
-import { CanvasRenderer } from 'echarts/renderers';
-import { BarChart } from 'echarts/charts';
-import {
-    GridComponent,
-    LegendComponent,
-    TitleComponent,
-    TooltipComponent,
-} from 'echarts/components';
-import VChart, { THEME_KEY } from 'vue-echarts';
-import { computed, provide, inject, type ComputedRef } from 'vue';
-import StatCard from '@/Components/Common/StatCard.vue';
-import { ClockIcon } from '@heroicons/vue/20/solid';
-import CardTitle from '@/packages/ui/src/CardTitle.vue';
-import LinearGradient from 'zrender/lib/graphic/LinearGradient';
-import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
-import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
-import { formatCents } from '@/packages/ui/src/utils/money';
-import { getWeekStart } from '@/packages/ui/src/utils/settings';
-import { useCssVar } from '@vueuse/core';
-import { getOrganizationCurrencyString } from '@/utils/money';
-import { useQuery } from '@tanstack/vue-query';
-import { getCurrentOrganizationId } from '@/utils/useUser';
-import { api, type Organization } from '@/packages/api/src';
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { BarChart } from "echarts/charts";
+import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from "echarts/components";
+import VChart, { THEME_KEY } from "vue-echarts";
+import { computed, provide } from "vue";
+import StatCard from "@/Components/Common/StatCard.vue";
+import { ClockIcon } from "@heroicons/vue/20/solid";
+import CardTitle from "@/packages/ui/src/CardTitle.vue";
+import LinearGradient from "zrender/lib/graphic/LinearGradient";
+import ProjectsChartCard from "@/Components/Dashboard/ProjectsChartCard.vue";
+import { formatHumanReadableDuration } from "@/packages/ui/src/utils/time";
+import { formatCents } from "@/packages/ui/src/utils/money";
+import { getWeekStart } from "@/packages/ui/src/utils/settings";
+import { useCssVar } from "@vueuse/core";
+import { getOrganizationCurrencyString } from "@/utils/money";
+import { useQuery } from "@tanstack/vue-query";
+import { getCurrentOrganizationId } from "@/utils/useUser";
+import { api } from "@/packages/api/src";
 
 use([
     CanvasRenderer,
@@ -30,21 +25,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',
-        tuesday: 'Tue',
-        wednesday: 'Wed',
-        thursday: 'Thu',
-        friday: 'Fri',
-        saturday: 'Sat',
-        sunday: 'Sun',
+        monday: "Mon",
+        tuesday: "Tue",
+        wednesday: "Wed",
+        thursday: "Thu",
+        friday: "Fri",
+        saturday: "Sat",
+        sunday: "Sun"
     };
     if (dayMapping[getWeekStart()]) {
         const customOrder = [];
@@ -58,76 +53,78 @@ 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 [];
@@ -140,104 +137,101 @@ 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, {
-    observe: true,
-});
-const labelColor = useCssVar('--color-text-secondary', null, { observe: true });
+
+const markLineColor = useCssVar("--color-border-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',
-                color: labelColor.value,
+                fontFamily: "Outfit, sans-serif",
+                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,
-                            organization?.value?.interval_format,
-                            organization?.value?.number_format
-                        );
-                    },
-                },
-            },
-        ],
+                        return formatHumanReadableDuration(value);
+                    }
+                }
+            }
+        ]
     };
 });
+
+
 </script>
 
 <template>
@@ -250,45 +244,28 @@ 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
-                        ? formatHumanReadableDuration(
-                              totalWeeklyTime,
-                              organization?.interval_format,
-                              organization?.number_format
-                          )
-                        : '--'
-                " />
+                totalWeeklyTime ?
+                    formatHumanReadableDuration(totalWeeklyTime) : '--'" />
             <StatCard
                 title="Billable Time"
                 :value="
-                    totalWeeklyBillableTime
-                        ? formatHumanReadableDuration(
-                              totalWeeklyBillableTime,
-                              organization?.interval_format,
-                              organization?.number_format
-                          )
-                        : '--'
+                totalWeeklyBillableTime ?
+                    formatHumanReadableDuration(totalWeeklyBillableTime) : '--'
                 " />
             <StatCard
                 title="Billable Amount"
                 :value="
-                    totalWeeklyBillableAmount
-                        ? formatCents(
-                              totalWeeklyBillableAmount.value,
-                              getOrganizationCurrencyString(),
-                              organization?.currency_format,
-                              organization?.currency_symbol,
-                              organization?.number_format
-                          )
-                        : '--'
+                totalWeeklyBillableAmount ?
+                    formatCents(
+                        totalWeeklyBillableAmount.value,
+                        getOrganizationCurrencyString()
+                    ) : '--'
                 " />
             <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])]:border-accent [&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:text-accent-foreground',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[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,8 +9,7 @@ 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, inject, type ComputedRef } from 'vue';
-import { type Organization } from '@/packages/api/src';
+import { computed } from 'vue';
 
 const model = defineModel<string | null>();
 const emit = defineEmits<{
@@ -28,8 +27,6 @@ const handleBlur = () => {
 const date = computed(() => {
     return model.value ? parseDate(model.value) : undefined;
 });
-
-const organization = inject<ComputedRef<Organization>>('organization');
 </script>
 
 <template>
@@ -44,7 +41,7 @@ const organization = inject<ComputedRef<Organization>>('organization');
                 ]"
             >
                 <CalendarIcon class="mr-2 h-4 w-4" />
-                {{ model ? formatDateLocalized(model, organization?.date_format) : 'Pick a date' }}
+                {{ model ? formatDateLocalized(model) : 'Pick a date' }}
             </Button>
         </PopoverTrigger>
         <PopoverContent class="w-auto p-0">

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

@@ -2,61 +2,22 @@
 import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'
 import { cn } from '@/lib/utils'
 import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes, inject, type ComputedRef } from 'vue'
-import type { Organization } from '@/packages/api/src'
+import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<NumberFieldRootProps & { 
-  class?: HTMLAttributes['class']
-  formatOptions?: {
-    maximumFractionDigits?: number
-    minimumFractionDigits?: number
-  }
-}>()
+const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<NumberFieldRootEmits>()
 
 const delegatedProps = computed(() => {
-  const { class: _, formatOptions: __, ...delegated } = props
+  const { class: _, ...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" 
-    :locale="locale"
-    :format-options="formatOptions"
-    :class="cn('grid gap-1.5', props.class)">
+  <NumberFieldRoot v-bind="forwarded" :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])]:border-accent [&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:text-accent-foreground',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[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

resources/js/Layouts/AppLayout.vue

@@ -15,35 +15,29 @@ import {
     UserCircleIcon,
     UserGroupIcon,
     XMarkIcon,
-    DocumentTextIcon,
+    DocumentTextIcon
 } from '@heroicons/vue/20/solid';
 import NavigationSidebarItem from '@/Components/NavigationSidebarItem.vue';
 import UserSettingsIcon from '@/Components/UserSettingsIcon.vue';
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
-import { computed, onMounted, provide, ref } from 'vue';
+import { onMounted, ref, watch } from "vue";
 import NotificationContainer from '@/Components/NotificationContainer.vue';
 import { initializeStores, refreshStores } from '@/utils/init';
 import {
     canManageBilling,
     canUpdateOrganization,
     canViewClients,
-    canViewInvoices,
     canViewMembers,
-    canViewProjects,
-    canViewReport,
+    canViewProjects, canViewReport,
     canViewTags,
 } from '@/utils/permissions';
-import { isBillingActivated, isInvoicingActivated } from '@/utils/billing';
+import { isBillingActivated } from '@/utils/billing';
 import type { User } from '@/types/models';
 import { ArrowsRightLeftIcon } from '@heroicons/vue/16/solid';
 import { fetchToken, isTokenValid } from '@/utils/session';
 import UpdateSidebarNotification from '@/Components/UpdateSidebarNotification.vue';
 import BillingBanner from '@/Components/Billing/BillingBanner.vue';
-import { useTheme } from '@/utils/theme';
-import { useQuery } from '@tanstack/vue-query';
-import { api } from '@/packages/api/src';
-import { getCurrentOrganizationId } from '@/utils/useUser';
-import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
+import { theme } from "@/utils/theme";
 
 defineProps({
     title: String,
@@ -51,25 +45,14 @@ defineProps({
 
 const showSidebarMenu = ref(false);
 const isUnloading = ref(false);
-
-const { data: organization, isLoading: isOrganizationLoading } = useQuery({
-    queryKey: ['organization', getCurrentOrganizationId()],
-    queryFn: () =>
-        api.getOrganization({
-            params: {
-                organization: getCurrentOrganizationId()!,
-            },
-        }),
-    enabled: !!getCurrentOrganizationId(),
-});
-
-provide(
-    'organization',
-    computed(() => organization.value?.data)
-);
-
 onMounted(async () => {
-    useTheme();
+
+    document.documentElement.classList.add(theme.value);
+    watch(theme, (newTheme, oldTheme) => {
+        document.documentElement.classList.remove(oldTheme);
+        document.documentElement.classList.add(newTheme);
+    });
+
     // make sure that the initial requests are only loaded once, this can be removed once we move away from inertia
     if (window.initialDataLoaded !== true) {
         window.initialDataLoaded = true;
@@ -99,9 +82,7 @@ const page = usePage<{
 </script>
 
 <template>
-    <div
-        v-bind="$attrs"
-        class="flex flex-wrap bg-background text-text-secondary">
+    <div v-bind="$attrs" class="flex flex-wrap bg-background text-text-secondary">
         <div
             :class="{
                 '!flex bg-default-background w-full z-[9999999999]':
@@ -146,17 +127,17 @@ const page = usePage<{
                                     {
                                         title: 'Overview',
                                         route: 'reporting',
-                                        show: true,
+                                        show: true
                                     },
                                     {
                                         title: 'Detailed',
                                         route: 'reporting.detailed',
-                                        show: true,
+                                        show: true
                                     },
                                     {
                                         title: 'Shared',
                                         route: 'reporting.shared',
-                                        show: canViewReport(),
+                                        show: canViewReport()
                                     },
                                 ]"
                                 :current="
@@ -207,9 +188,6 @@ const page = usePage<{
                                 :current="route().current('tags')"
                                 :href="route('tags')"></NavigationSidebarItem>
                             <NavigationSidebarItem
-                                v-if="
-                                    isInvoicingActivated() && canViewInvoices()
-                                "
                                 title="Invoices"
                                 :icon="DocumentTextIcon"
                                 :current="route().current('invoices')"
@@ -294,6 +272,8 @@ const page = usePage<{
                     v-if="$slots.header"
                     class="bg-default-background border-b border-default-background-separator shadow">
                     <div class="pt-8 pb-3">
+
+
                         <MainContainer>
                             <slot name="header" />
                         </MainContainer>
@@ -302,12 +282,8 @@ const page = usePage<{
 
                 <!-- Page Content -->
                 <main class="pb-28 flex-1">
-                    <div
-                        v-if="isOrganizationLoading"
-                        class="flex items-center justify-center h-screen">
-                        <LoadingSpinner />
-                    </div>
-                    <slot v-else />
+                    <slot />
+
                 </main>
             </div>
         </div>

resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue

@@ -241,6 +241,25 @@ const page = usePage<{
                 </select>
                 <InputError :message="form.errors.week_start" class="mt-2" />
             </div>
+            <div class="col-span-6 sm:col-span-4">
+                <InputLabel for="week_start" value="Start of the week" />
+                <select
+                    id="week_start"
+                    v-model="form.week_start"
+                    name="week_start"
+                    required
+                    class="mt-1 block w-full border-input-border bg-input-background text-text-primary focus:border-input-border-active rounded-md shadow-sm">
+                    <option value="" disabled>Select a week day</option>
+                    <option
+                        v-for="(weekdayTranslated, weekdayKey) in $page.props
+                            .weekdays"
+                        :key="weekdayKey"
+                        :value="weekdayKey">
+                        {{ weekdayTranslated }}
+                    </option>
+                </select>
+                <InputError :message="form.errors.week_start" class="mt-2" />
+            </div>
         </template>
 
         <template #actions>

resources/js/Pages/ProjectShow.vue

@@ -3,7 +3,7 @@ import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
 import { FolderIcon, PlusIcon } from '@heroicons/vue/16/solid';
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
-import { computed, onMounted, ref, inject, type ComputedRef } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useProjectsStore } from '@/utils/useProjects';
 import { storeToRefs } from 'pinia';
 import {
@@ -33,12 +33,9 @@ import ProjectEditModal from '@/Components/Common/Project/ProjectEditModal.vue';
 import { Badge } from '@/packages/ui/src';
 import { formatCents } from '../packages/ui/src/utils/money';
 import { getOrganizationCurrencyString } from '../utils/money';
-import type { Organization } from '@/packages/api/src';
 
 const { projects } = storeToRefs(useProjectsStore());
 
-const organization = inject<ComputedRef<Organization>>('organization');
-
 const project = computed(() => {
     return (
         projects.value.find(
@@ -115,10 +112,7 @@ const shownTasks = computed(() => {
                         {{
                             formatCents(
                                 project?.billable_rate ?? 0,
-                                getOrganizationCurrencyString(),
-                                organization?.currency_format,
-                                organization?.currency_symbol,
-                                organization?.number_format
+                                getOrganizationCurrencyString()
                             )
                         }}
                         / h
@@ -151,11 +145,15 @@ const shownTasks = computed(() => {
                             <div
                                 class="w-full items-center flex justify-between">
                                 <div class="pl-6">
-                                    <TabBar v-model="activeTab">
-                                        <TabBarItem value="active"
+                                    <TabBar
+                                    v-model="activeTab"
+                                    >
+                                        <TabBarItem
+                                            value="active"
                                             >Active
                                         </TabBarItem>
-                                        <TabBarItem value="done"
+                                        <TabBarItem
+                                            value="done"
                                             >Done
                                         </TabBarItem>
                                     </TabBar>
@@ -187,11 +185,11 @@ const shownTasks = computed(() => {
                                 Add Member
                             </SecondaryButton>
                             <ProjectMemberCreateModal
-                                v-model:show="createProjectMember"
+                                v-model:show="
+                                    createProjectMember
+                                "
                                 :project-id="projectId"
-                                :existing-members="
-                                    projectMembers
-                                "></ProjectMemberCreateModal>
+                                :existing-members="projectMembers"></ProjectMemberCreateModal>
                         </template>
                     </CardTitle>
                     <Card>

resources/js/Pages/Reporting.vue

@@ -1,8 +1,277 @@
 <script setup lang="ts">
+import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
-import ReportingOverview from "@/Components/Common/Reporting/ReportingOverview.vue";
+import { FolderIcon } from '@heroicons/vue/16/solid';
+import PageTitle from '@/Components/Common/PageTitle.vue';
+import {
+    ChartBarIcon,
+    UserGroupIcon,
+    CheckCircleIcon,
+    TagIcon,
+} from '@heroicons/vue/20/solid';
+import DateRangePicker from '@/packages/ui/src/Input/DateRangePicker.vue';
+import ReportingChart from '@/Components/Common/Reporting/ReportingChart.vue';
+import BillableIcon from '@/packages/ui/src/Icons/BillableIcon.vue';
+import { computed, onMounted, ref } from 'vue';
+import {
+    formatHumanReadableDuration,
+    getDayJsInstance,
+    getLocalizedDayJs,
+} from '@/packages/ui/src/utils/time';
+import { type GroupingOption, useReportingStore } from '@/utils/useReporting';
+import { storeToRefs } from 'pinia';
+import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
+import {
+    type AggregatedTimeEntriesQueryParams,
+    type CreateReportBodyProperties,
+    api,
+} from '@/packages/api/src';
+import ReportingFilterBadge from '@/Components/Common/Reporting/ReportingFilterBadge.vue';
+import ProjectMultiselectDropdown from '@/Components/Common/Project/ProjectMultiselectDropdown.vue';
+import MemberMultiselectDropdown from '@/Components/Common/Member/MemberMultiselectDropdown.vue';
+import TaskMultiselectDropdown from '@/Components/Common/Task/TaskMultiselectDropdown.vue';
+import SelectDropdown from '@/packages/ui/src/Input/SelectDropdown.vue';
+import ReportingGroupBySelect from '@/Components/Common/Reporting/ReportingGroupBySelect.vue';
+import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
+import { getOrganizationCurrencyString } from '@/utils/money';
+import ReportingPieChart from '@/Components/Common/Reporting/ReportingPieChart.vue';
+import {
+    getCurrentMembershipId,
+    getCurrentOrganizationId,
+    getCurrentRole,
+} from '@/utils/useUser';
+import ClientMultiselectDropdown from '@/Components/Common/Client/ClientMultiselectDropdown.vue';
+import { useTagsStore } from '@/utils/useTags';
+import { formatCents } from '@/packages/ui/src/utils/money';
+import { useSessionStorage, useStorage } from '@vueuse/core';
+import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
+import { useNotificationsStore } from '@/utils/notification';
+import ReportingExportButton from '@/Components/Common/Reporting/ReportingExportButton.vue';
+import type { ExportFormat } from '@/types/reporting';
+import ReportSaveButton from '@/Components/Common/Report/ReportSaveButton.vue';
+import { getRandomColorWithSeed } from '@/packages/ui/src/utils/color';
+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;
+
+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,
+    };
+    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();
+import { useProjectsStore } from '@/utils/useProjects';
+import ReportingExportModal from '@/Components/Common/Reporting/ReportingExportModal.vue';
+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>
@@ -10,6 +279,215 @@ import ReportingOverview from "@/Components/Common/Reporting/ReportingOverview.v
         title="Reporting"
         data-testid="reporting_view"
         class="overflow-hidden">
-        <ReportingOverview></ReportingOverview>
+        <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
+                                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'"
+                                :entry="entry"
+                                :type="
+                                    aggregatedTableTimeEntries.grouped_type
+                                "></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
+                                        )
+                                    }}
+                                </div>
+                                <div
+                                    class="justify-end pr-6 flex items-center font-medium">
+                                    {{
+                                        aggregatedTableTimeEntries.cost ?
+                                        formatCents(
+                                            aggregatedTableTimeEntries.cost,
+                                            getOrganizationCurrencyString()
+                                        ) : '--'
+                                    }}
+                                </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>
     </AppLayout>
 </template>

resources/js/Pages/ReportingDetailed.vue

@@ -308,8 +308,6 @@ async function downloadExport(format: ExportFormat) {
                         @submit="updateFilteredTimeEntries">
                         <template #trigger>
                             <ReportingFilterBadge
-                                :count="selectedClients.length"
-                                :active="selectedClients.length > 0"
                                 title="Clients"
                                 :icon="FolderIcon"></ReportingFilterBadge>
                         </template>

resources/js/Pages/ReportingShared.vue

@@ -75,7 +75,7 @@ watch(currentPage, () => {
         data-testid="reporting_view"
         class="overflow-hidden">
         <MainContainer
-            class="py-3 sm:py-5 min-h-[79px] border-b border-default-background-separator flex justify-between items-center">
+            class="py-3 sm:py-5 border-b border-default-background-separator flex justify-between items-center">
             <div class="flex items-center space-x-3 sm:space-x-6">
                 <PageTitle :icon="ChartBarIcon" title="Reporting"></PageTitle>
                 <ReportingTabNavbar active="shared"></ReportingTabNavbar>