add date range navigation, unify picker components

.github/workflows/build-private.yml

@@ -97,7 +97,7 @@ jobs:
       - name: "Install dependencies in billing extension"
         uses: php-actions/composer@v6
         env:
-          COMPOSER_AUTH: '{"http-basic": {"spark.laravel.com": {"username": "${{ secrets.LARAVEL_SPARK_USERNAME }}", "password": "${{ secrets.LARAVEL_SPARK_API_KEY }}"}}}'
+          COMPOSER_AUTH: '{"http-basic": {"spark.laravel.com": {"username": "gregor@vostrak.at", "password": "${{ secrets.LARAVEL_SPARK_API_KEY }}"}}}'
         with:
           working_dir: "extensions/Billing"
           command: install

.github/workflows/phpunit-extensions.yml

@@ -1,136 +0,0 @@
-name: PHPUnit Tests - Extensions
-on: push
-permissions:
-  contents: read
-jobs:
-  phpunit-extensions:
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-    strategy:
-      matrix:
-        postgres_version: [ 15, 16, 17 ]
-
-    services:
-      pgsql_test:
-        image: postgres:${{ matrix.postgres_version }}
-        env:
-          PGPASSWORD: 'root'
-          POSTGRES_DB: 'laravel'
-          POSTGRES_USER: 'root'
-          POSTGRES_PASSWORD: 'root'
-        ports:
-          - 5432:5432
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-      gotenberg:
-        image: gotenberg/gotenberg:8
-        ports:
-          - 3000:3000
-        options: >-
-          --health-cmd "curl --silent --fail http://localhost:3000/health"
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-    steps:
-      - name: "Checkout code"
-        uses: actions/checkout@v7
-
-      - name: "Setup PHP"
-        uses: shivammathur/setup-php@v2
-        with:
-          php-version: '8.3'
-          extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv
-          coverage: pcov
-
-      - uses: actions/setup-node@v7
-        with:
-          node-version: '20.x'
-
-      - name: "Read extension manifest"
-        id: extension-manifest
-        run: |
-          {
-            echo "billing_repository=$(jq -r '.Billing.repository' extensions/manifest.json)"
-            echo "billing_ref=$(jq -r '.Billing.ref' extensions/manifest.json)"
-            echo "services_repository=$(jq -r '.Services.repository' extensions/manifest.json)"
-            echo "services_ref=$(jq -r '.Services.ref' extensions/manifest.json)"
-            echo "invoicing_repository=$(jq -r '.Invoicing.repository' extensions/manifest.json)"
-            echo "invoicing_ref=$(jq -r '.Invoicing.ref' extensions/manifest.json)"
-          } >> "$GITHUB_OUTPUT"
-
-      - name: "Checkout billing extension"
-        uses: actions/checkout@v7
-        with:
-          repository: ${{ steps.extension-manifest.outputs.billing_repository }}
-          ref: ${{ steps.extension-manifest.outputs.billing_ref }}
-          path: extensions/Billing
-          ssh-key: ${{ secrets.SSH_PRIVATE_KEY_BILLING_EXTENSION }}
-
-      - name: "Install composer dependencies in billing extension"
-        working-directory: extensions/Billing
-        env:
-          COMPOSER_AUTH: '{"http-basic": {"spark.laravel.com": {"username": "contact@solidtime.io", "password": "${{ secrets.LARAVEL_SPARK_API_KEY }}"}}}'
-        run: composer install -n --prefer-dist --ignore-platform-reqs
-
-      - name: "Install npm dependencies in billing extension"
-        run: cd extensions/Billing && npm ci
-
-      - name: "Checkout services extension"
-        uses: actions/checkout@v7
-        with:
-          repository: ${{ steps.extension-manifest.outputs.services_repository }}
-          ref: ${{ steps.extension-manifest.outputs.services_ref }}
-          path: extensions/Services
-          ssh-key: ${{ secrets.SSH_PRIVATE_KEY_SERVICES_EXTENSION }}
-
-      - name: "Install composer dependencies in services extension"
-        working-directory: extensions/Services
-        run: composer install -n --prefer-dist --ignore-platform-reqs
-
-      - name: "Install npm dependencies in services extension"
-        run: cd extensions/Services && npm ci
-
-      - name: "Checkout invoicing extension"
-        uses: actions/checkout@v7
-        with:
-          repository: ${{ steps.extension-manifest.outputs.invoicing_repository }}
-          ref: ${{ steps.extension-manifest.outputs.invoicing_ref }}
-          path: extensions/Invoicing
-          ssh-key: ${{ secrets.SSH_PRIVATE_KEY_INVOICING_EXTENSION }}
-
-      - name: "Install composer dependencies in invoicing extension"
-        working-directory: extensions/Invoicing
-        run: composer install -n --prefer-dist --ignore-platform-reqs
-
-      - name: "Install npm dependencies in invoicing extension"
-        run: cd extensions/Invoicing && npm ci
-
-      - name: "Run composer install"
-        run: composer install -n --prefer-dist --ignore-platform-reqs
-
-      - name: "Activate billing extension"
-        run: php artisan module:enable Billing
-
-      - name: "Activate services extension"
-        run: php artisan module:enable Services
-
-      - name: "Activate invoicing extension"
-        run: php artisan module:enable Invoicing
-
-      - name: "Install dependencies"
-        run: npm ci
-
-      - name: "Build Frontend"
-        run: npm run build
-
-      - name: "Prepare Laravel Application"
-        run: |
-          cp .env.ci .env
-          php artisan key:generate
-          php artisan passport:keys
-
-      - name: "Run PHPUnit"
-        run: php artisan test extensions/Billing/tests extensions/Services/tests extensions/Invoicing/tests --stop-on-failure

docker/prod/Dockerfile

@@ -1,6 +1,7 @@
 ARG PHP_VERSION=8.3
-ARG FRANKENPHP_VERSION=1.11
+ARG FRANKENPHP_VERSION=1.8
 ARG COMPOSER_VERSION=2.8
+ARG BUN_VERSION="latest"
 ARG APP_ENV
 ARG DOCKER_FILES_BASE_PATH="docker/prod/"
 
@@ -15,13 +16,13 @@ RUN CGO_ENABLED=1 \
     XCADDY_GO_BUILD_FLAGS="-ldflags='-w -s' -tags=nobadger,nomysql,nopgx" \
     CGO_CFLAGS=$(php-config --includes) \
     CGO_LDFLAGS="$(php-config --ldflags) $(php-config --libs)" \
-    xcaddy build \
+    xcaddy build v2.10.0 \
         --output /usr/local/bin/frankenphp \
         --with github.com/dunglas/frankenphp=./ \
         --with github.com/dunglas/frankenphp/caddy=./caddy/ \
         --with github.com/dunglas/caddy-cbrotli
 
-FROM dunglas/frankenphp:${FRANKENPHP_VERSION}-php${PHP_VERSION}
+FROM dunglas/frankenphp:${FRANKENPHP_VERSION}-php${PHP_VERSION} AS base
 
 COPY --from=upstream /usr/local/bin/frankenphp /usr/local/bin/frankenphp
 
@@ -31,28 +32,26 @@ LABEL org.opencontainers.image.description="solidtime is a modern open source ti
 LABEL org.opencontainers.image.source="https://github.com/solidtime-io/solidtime"
 LABEL org.opencontainers.image.licenses="AGPL"
 
-ARG USER_ID=1000
-ARG GROUP_ID=1000
+ARG WWWUSER=1000
+ARG WWWGROUP=1000
 ARG TZ=UTC
+ARG APP_DIR=/var/www/html
+ARG APP_ENV
+ARG APP_HOST
 ARG DOCKER_FILES_BASE_PATH
 
 ENV DEBIAN_FRONTEND=noninteractive \
     TERM=xterm-color \
     OCTANE_SERVER=frankenphp \
     TZ=${TZ} \
-    LANG=C.UTF-8 \
-    USER=laravel \
-    ROOT=/var/www/html \
-    APP_ENV=production \
-    COMPOSER_ALLOW_SUPERUSER=1 \
+    USER=octane \
+    ROOT=${APP_DIR} \
+    APP_ENV=${APP_ENV} \
     COMPOSER_FUND=0 \
-    COMPOSER_MAX_PARALLEL_HTTP=48 \
-    WITH_HORIZON=false \
-    WITH_SCHEDULER=false \
-    WITH_REVERB=false \
-    WITH_SSR=false
-
-ENV XDG_CONFIG_HOME=${ROOT}/.config XDG_DATA_HOME=${ROOT}/.data
+    COMPOSER_MAX_PARALLEL_HTTP=24 \
+    XDG_CONFIG_HOME=${APP_DIR}/.config \
+    XDG_DATA_HOME=${APP_DIR}/.data \
+    SERVER_NAME=${APP_HOST}
 
 WORKDIR ${ROOT}
 
@@ -61,9 +60,6 @@ SHELL ["/bin/bash", "-eou", "pipefail", "-c"]
 RUN ln -snf /usr/share/zoneinfo/${TZ} /etc/localtime \
     && echo ${TZ} > /etc/timezone
 
-RUN echo "Acquire::http::No-Cache true;" >> /etc/apt/apt.conf.d/99custom && \
-    echo "Acquire::BrokenProxy    true;" >> /etc/apt/apt.conf.d/99custom
-
 RUN apt-get update; \
     apt-get upgrade -yqq; \
     apt-get install -yqq --no-install-recommends --show-progress \
@@ -72,36 +68,40 @@ RUN apt-get update; \
     wget \
     vim \
     git \
-    unzip \
     ncdu \
     procps \
+    unzip \
     ca-certificates \
     supervisor \
     libsodium-dev \
-#    && curl -fsSL https://bun.sh/install | BUN_INSTALL=/usr bash \
+    libbrotli-dev \
+    # Install PHP extensions (included with dunglas/frankenphp)
     && install-php-extensions \
-    apcu \
     bz2 \
     pcntl \
     mbstring \
     bcmath \
     sockets \
+    pgsql \
     pdo_pgsql \
     opcache \
     exif \
     pdo_mysql \
     zip \
     uv \
+    vips \
     intl \
     gd \
     redis \
     rdkafka \
-    ffi \
+    memcached \
+    igbinary \
     ldap \
     && apt-get -y autoremove \
     && apt-get clean \
     && docker-php-source delete \
-    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* /var/log/lastlog /var/log/faillog
+    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* \
+    && rm /var/log/lastlog /var/log/faillog
 
 RUN arch="$(uname -m)" \
     && case "$arch" in \
@@ -111,64 +111,106 @@ RUN arch="$(uname -m)" \
     x86) _cronic_fname='supercronic-linux-386' ;; \
     *) echo >&2 "error: unsupported architecture: $arch"; exit 1 ;; \
     esac \
-    && wget -q "https://github.com/aptible/supercronic/releases/download/v0.2.38/${_cronic_fname}" \
+    && wget -q "https://github.com/aptible/supercronic/releases/download/v0.2.29/${_cronic_fname}" \
     -O /usr/bin/supercronic \
     && chmod +x /usr/bin/supercronic \
     && mkdir -p /etc/supercronic \
     && echo "*/1 * * * * php ${ROOT}/artisan schedule:run --no-interaction" > /etc/supercronic/laravel
 
 RUN userdel --remove --force www-data \
-    && groupadd --force -g ${GROUP_ID} ${USER} \
-    && useradd -ms /bin/bash --no-log-init --no-user-group -g ${GROUP_ID} -u ${USER_ID} ${USER}
+    && groupadd --force -g ${WWWGROUP} ${USER} \
+    && useradd -ms /bin/bash --no-log-init --no-user-group -g ${WWWGROUP} -u ${WWWUSER} ${USER} \
+    && setcap -r /usr/local/bin/frankenphp
+
+RUN chown -R ${USER}:${USER} ${ROOT} /var/{log,run} \
+    && chmod -R a+rw ${ROOT} /var/{log,run}
 
 RUN cp ${PHP_INI_DIR}/php.ini-production ${PHP_INI_DIR}/php.ini
 
-COPY --link --from=vendor /usr/bin/composer /usr/bin/composer
-COPY --link ${DOCKER_FILES_BASE_PATH}deployment/supervisord.conf /etc/
-COPY --link ${DOCKER_FILES_BASE_PATH}deployment/octane/FrankenPHP/supervisord.frankenphp.conf /etc/supervisor/conf.d/
-COPY --link ${DOCKER_FILES_BASE_PATH}deployment/supervisord.*.conf /etc/supervisor/conf.d/
-COPY --link ${DOCKER_FILES_BASE_PATH}deployment/start-container /usr/local/bin/start-container
-COPY --link ${DOCKER_FILES_BASE_PATH}deployment/healthcheck /usr/local/bin/healthcheck
-COPY --link ${DOCKER_FILES_BASE_PATH}deployment/php.ini ${PHP_INI_DIR}/conf.d/99-php.ini
-#COPY --link composer.* ./
+USER ${USER}
 
+COPY --link --chown=${WWWUSER}:${WWWUSER} --from=vendor /usr/bin/composer /usr/bin/composer
+
+COPY --link --chown=${WWWUSER}:${WWWUSER} ${DOCKER_FILES_BASE_PATH}deployment/supervisord.conf /etc/
+COPY --link --chown=${WWWUSER}:${WWWUSER} ${DOCKER_FILES_BASE_PATH}deployment/octane/FrankenPHP/supervisord.frankenphp.conf /etc/supervisor/conf.d/
+COPY --link --chown=${WWWUSER}:${WWWUSER} ${DOCKER_FILES_BASE_PATH}deployment/supervisord.*.conf /etc/supervisor/conf.d/
+COPY --link --chown=${WWWUSER}:${WWWUSER} ${DOCKER_FILES_BASE_PATH}deployment/start-container /usr/local/bin/start-container
+COPY --link --chown=${WWWUSER}:${WWWUSER} ${DOCKER_FILES_BASE_PATH}deployment/healthcheck /usr/local/bin/healthcheck
+COPY --link --chown=${WWWUSER}:${WWWUSER} ${DOCKER_FILES_BASE_PATH}deployment/php.ini ${PHP_INI_DIR}/conf.d/99-octane.ini
+
+RUN chmod +x /usr/local/bin/start-container /usr/local/bin/healthcheck
+
+###########################################
+
+#FROM base AS common
+#
+#USER ${USER}
+#
+#COPY --link --chown=${WWWUSER}:${WWWUSER} . .
+#
 #RUN composer install \
 #    --no-dev \
 #    --no-interaction \
 #    --no-autoloader \
 #    --no-ansi \
 #    --no-scripts \
-#    --no-progress \
 #    --audit
 
+###########################################
+# Build frontend assets with Bun
+###########################################
+
+#FROM oven/bun:${BUN_VERSION} AS build
+#
+#ARG APP_ENV
+#
+#ENV ROOT=/var/www/html \
+#    APP_ENV=${APP_ENV} \
+#    NODE_ENV=${APP_ENV:-production}
+#
+#WORKDIR ${ROOT}
+#
 #COPY --link package.json bun.lock* ./
-
+#
 #RUN bun install --frozen-lockfile
+#
+#COPY --link . .
+#COPY --link --from=common ${ROOT}/vendor vendor
+#
+#RUN bun run build
 
-COPY --link . .
+###########################################
+
+#FROM common AS runner
+
+USER ${USER}
+
+ENV WITH_HORIZON=false \
+    WITH_SCHEDULER=false \
+    WITH_REVERB=false
+
+COPY --link --chown=${WWWUSER}:${WWWUSER} . ./
+
+RUN test -z "$(find . -name .git -print -quit)"
+#COPY --link --chown=${WWWUSER}:${WWWUSER} --from=build ${ROOT}/public public
 
 RUN mkdir -p \
     storage/framework/{sessions,views,cache,testing} \
     storage/logs \
-    bootstrap/cache \
-    && chmod +x /usr/local/bin/start-container /usr/local/bin/healthcheck
+    bootstrap/cache && chmod -R a+rw storage
 
-RUN composer dump-autoload \
-    --optimize \
-    --apcu \
-    --no-dev
+#RUN composer install \
+#    --classmap-authoritative \
+#    --no-interaction \
+#    --no-ansi \
+#    --no-dev \
+#    && composer clear-cache
 
-#RUN bun run build
-
-RUN chown -R ${USER_ID}:${GROUP_ID} ${ROOT} \
-    && find / -perm /6000 -type f -exec chmod a-s {} + 2>/dev/null || true
-
-USER ${USER}
+RUN cat .env
+#RUN php artisan env
 
 EXPOSE 8000
-#EXPOSE 2019
-#EXPOSE 8080
 
 ENTRYPOINT ["start-container"]
 
-#HEALTHCHECK --start-period=30s --interval=10s --timeout=3s --retries=3 CMD healthcheck || exit 1
+#HEALTHCHECK --start-period=5s --interval=2s --timeout=5s --retries=8 CMD healthcheck || exit 1

docker/prod/deployment/healthcheck

@@ -22,13 +22,6 @@ elif [ "${container_mode}" = "reverb" ]; then
         echo "Healthcheck failed."
         exit 1
     fi
-elif [ "${container_mode}" = "ssr" ]; then
-    if [ "$(supervisorctl status inertia-ssr-server:inertia-ssr-server_0 | awk '{print tolower($2)}')" = "running" ]; then
-        exit 0
-    else
-        echo "Healthcheck failed."
-        exit 1
-    fi
 elif [ "${container_mode}" = "worker" ]; then
     if [ "$(supervisorctl status worker:worker_0 | awk '{print tolower($2)}')" = "running" ]; then
         exit 0

docker/prod/deployment/octane/FrankenPHP/Caddyfile

@@ -3,14 +3,6 @@
 
 	admin {$CADDY_SERVER_ADMIN_HOST}:{$CADDY_SERVER_ADMIN_PORT}
 
-	log {
-		level {$CADDY_SERVER_LOG_LEVEL:WARN}
-	}
-
-	auto_https off
-
-	skip_install_trust
-
 	frankenphp {
 		worker "{$APP_PUBLIC_PATH}/frankenphp-worker.php" {$CADDY_SERVER_WORKER_COUNT}
 	}
@@ -28,7 +20,7 @@
 
 {$CADDY_SERVER_SERVER_NAME} {
 	log {
-		level {$CADDY_SERVER_LOG_LEVEL:WARN}
+		level WARN
 
 		format filter {
 			wrap {$CADDY_SERVER_LOGGER}
@@ -68,6 +60,7 @@
 		error @rejected 401
 
 		php_server {
+			index frankenphp-worker.php
 			try_files {path} frankenphp-worker.php
 			resolve_root_symlink
 		}

docker/prod/deployment/octane/FrankenPHP/supervisord.frankenphp.conf

@@ -1,18 +1,65 @@
 [program:octane]
 process_name = %(program_name)s_%(process_num)s
-command = php %(ENV_ROOT)s/artisan octane:frankenphp --host=0.0.0.0 --port=8000 --admin-host=0.0.0.0 --admin-port=2019 --log-level=WARN --caddyfile=%(ENV_ROOT)s/docker/prod/deployment/octane/FrankenPHP/Caddyfile
+command = php %(ENV_ROOT)s/artisan octane:frankenphp --host=0.0.0.0 --port=8000 --admin-port=2019 --caddyfile=%(ENV_ROOT)s/docker/prod/deployment/octane/FrankenPHP/Caddyfile
 user = %(ENV_USER)s
 priority = 1
 autostart = true
 autorestart = true
-stopwaitsecs = 30
-stopasgroup = true
-killasgroup = true
 environment = LARAVEL_OCTANE = "1"
 stdout_logfile = /dev/stdout
 stdout_logfile_maxbytes = 0
 stderr_logfile = /dev/stderr
 stderr_logfile_maxbytes = 0
 
+[program:horizon]
+process_name = %(program_name)s_%(process_num)s
+command = php %(ENV_ROOT)s/artisan horizon
+user = %(ENV_USER)s
+priority = 3
+autostart = %(ENV_WITH_HORIZON)s
+autorestart = true
+stdout_logfile = %(ENV_ROOT)s/storage/logs/horizon.log
+stdout_logfile_maxbytes = 200MB
+stderr_logfile = %(ENV_ROOT)s/storage/logs/horizon.log
+stderr_logfile_maxbytes = 200MB
+stopwaitsecs = 3600
+
+[program:scheduler]
+process_name = %(program_name)s_%(process_num)s
+command = supercronic -overlapping /etc/supercronic/laravel
+user = %(ENV_USER)s
+autostart = %(ENV_WITH_SCHEDULER)s
+autorestart = true
+stdout_logfile = %(ENV_ROOT)s/storage/logs/scheduler.log
+stdout_logfile_maxbytes = 200MB
+stderr_logfile = %(ENV_ROOT)s/storage/logs/scheduler.log
+stderr_logfile_maxbytes = 200MB
+
+[program:clear-scheduler-cache]
+process_name = %(program_name)s_%(process_num)s
+command = php %(ENV_ROOT)s/artisan schedule:clear-cache
+user = %(ENV_USER)s
+autostart = %(ENV_WITH_SCHEDULER)s
+autorestart = false
+startsecs = 0
+startretries = 1
+stdout_logfile = %(ENV_ROOT)s/storage/logs/scheduler.log
+stdout_logfile_maxbytes = 200MB
+stderr_logfile = %(ENV_ROOT)s/storage/logs/scheduler.log
+stderr_logfile_maxbytes = 200MB
+
+[program:reverb]
+process_name = %(program_name)s_%(process_num)s
+command = php %(ENV_ROOT)s/artisan reverb:start
+user = %(ENV_USER)s
+priority = 2
+autostart = %(ENV_WITH_REVERB)s
+autorestart = true
+stdout_logfile = %(ENV_ROOT)s/storage/logs/reverb.log
+stdout_logfile_maxbytes = 200MB
+stderr_logfile = %(ENV_ROOT)s/storage/logs/reverb.log
+stderr_logfile_maxbytes = 200MB
+minfds = 10000
+
 [include]
-files = /etc/supervisord.conf /etc/supervisor/conf.d/supervisord.services.conf
+files = /etc/supervisord.conf

docker/prod/deployment/php.ini

@@ -2,9 +2,8 @@
 post_max_size = 100M
 upload_max_filesize = 100M
 expose_php = 0
-realpath_cache_size = 32M
-realpath_cache_ttl = 720
-memory_limit = 256M
+realpath_cache_size = 16M
+realpath_cache_ttl = 360
 max_input_time = 5
 register_argc_argv = 0
 date.timezone = ${TZ:-UTC}
@@ -12,24 +11,18 @@ date.timezone = ${TZ:-UTC}
 [Opcache]
 opcache.enable = 1
 opcache.enable_cli = 1
-opcache.memory_consumption = 256
+opcache.memory_consumption = 256M
 opcache.use_cwd = 0
-opcache.save_comments = 1
 opcache.max_file_size = 0
 opcache.max_accelerated_files = 32531
 opcache.validate_timestamps = 0
 opcache.file_update_protection = 0
 opcache.interned_strings_buffer = 16
-opcache.enable_file_override = 1
-opcache.file_cache_consistency_checks = 0
-opcache.file_cache = /tmp/opcache-file-cache
 
 [JIT]
 opcache.jit_buffer_size = 128M
-opcache.jit = tracing
-opcache.jit_hot_loop = 16
-opcache.jit_hot_func = 32
-opcache.jit_hot_return = 4
+opcache.jit = function
+opcache.jit_prof_threshold = 0.001
 opcache.jit_max_root_traces = 2048
 opcache.jit_max_side_traces = 256
 

docker/prod/deployment/supervisord.conf

@@ -1,6 +1,8 @@
 [supervisord]
 nodaemon = true
 user = %(ENV_USER)s
+logfile = /var/log/supervisor/supervisord.log
+pidfile = /var/run/supervisord.pid
 
 [supervisorctl]
 
@@ -8,4 +10,4 @@ user = %(ENV_USER)s
 port = 127.0.0.1:9001
 
 [rpcinterface:supervisor]
-supervisor.rpcinterface_factory = supervisor.rpcinterface:make_main_rpcinterface
+supervisor.rpcinterface_factory = supervisor.rpcinterface:make_main_rpcinterface

docker/prod/deployment/supervisord.horizon.conf

@@ -4,8 +4,6 @@ command = php %(ENV_ROOT)s/artisan horizon
 user = %(ENV_USER)s
 autostart = true
 autorestart = true
-stopasgroup = true
-killasgroup = true
 stdout_logfile = /dev/stdout
 stdout_logfile_maxbytes = 0
 stderr_logfile = /dev/stderr

docker/prod/deployment/supervisord.inertia.conf

@@ -1,15 +0,0 @@
-[program:inertia-ssr-server]
-process_name = %(program_name)s_%(process_num)s
-command = php %(ENV_ROOT)s/artisan inertia:start-ssr --runtime=bun --quiet
-user = %(ENV_USER)s
-autostart = true
-autorestart = true
-stopasgroup = true
-killasgroup = true
-stdout_logfile = /dev/stdout
-stdout_logfile_maxbytes = 0
-stderr_logfile = /dev/stderr
-stderr_logfile_maxbytes = 0
-
-[include]
-files = /etc/supervisord.conf

docker/prod/deployment/supervisord.reverb.conf

@@ -4,8 +4,6 @@ command = php %(ENV_ROOT)s/artisan reverb:start
 user = %(ENV_USER)s
 autostart = true
 autorestart = true
-stopasgroup = true
-killasgroup = true
 stdout_logfile = /dev/stdout
 stdout_logfile_maxbytes = 0
 stderr_logfile = /dev/stderr

docker/prod/deployment/supervisord.scheduler.conf

@@ -4,8 +4,6 @@ command = supercronic -overlapping /etc/supercronic/laravel
 user = %(ENV_USER)s
 autostart = true
 autorestart = true
-stopasgroup = true
-killasgroup = true
 stdout_logfile = /dev/stdout
 stdout_logfile_maxbytes = 0
 stderr_logfile = /dev/stderr

docker/prod/deployment/supervisord.services.conf

@@ -1,69 +0,0 @@
-[program:horizon]
-process_name = %(program_name)s_%(process_num)s
-command = php %(ENV_ROOT)s/artisan horizon
-user = %(ENV_USER)s
-priority = 4
-autostart = %(ENV_WITH_HORIZON)s
-autorestart = true
-stopasgroup = true
-killasgroup = true
-stdout_logfile = %(ENV_ROOT)s/storage/logs/horizon.log
-stdout_logfile_maxbytes = 200MB
-stderr_logfile = %(ENV_ROOT)s/storage/logs/horizon.log
-stderr_logfile_maxbytes = 200MB
-stopwaitsecs = 3600
-
-[program:scheduler]
-process_name = %(program_name)s_%(process_num)s
-command = supercronic -overlapping /etc/supercronic/laravel
-user = %(ENV_USER)s
-autostart = %(ENV_WITH_SCHEDULER)s
-autorestart = true
-stopasgroup = true
-killasgroup = true
-stdout_logfile = %(ENV_ROOT)s/storage/logs/scheduler.log
-stdout_logfile_maxbytes = 200MB
-stderr_logfile = %(ENV_ROOT)s/storage/logs/scheduler.log
-stderr_logfile_maxbytes = 200MB
-
-[program:clear-scheduler-cache]
-process_name = %(program_name)s_%(process_num)s
-command = php %(ENV_ROOT)s/artisan schedule:clear-cache
-user = %(ENV_USER)s
-autostart = %(ENV_WITH_SCHEDULER)s
-autorestart = false
-startsecs = 0
-startretries = 1
-stdout_logfile = %(ENV_ROOT)s/storage/logs/scheduler.log
-stdout_logfile_maxbytes = 200MB
-stderr_logfile = %(ENV_ROOT)s/storage/logs/scheduler.log
-stderr_logfile_maxbytes = 200MB
-
-[program:reverb]
-process_name = %(program_name)s_%(process_num)s
-command = php %(ENV_ROOT)s/artisan reverb:start
-user = %(ENV_USER)s
-priority = 3
-autostart = %(ENV_WITH_REVERB)s
-autorestart = true
-stopasgroup = true
-killasgroup = true
-stdout_logfile = %(ENV_ROOT)s/storage/logs/reverb.log
-stdout_logfile_maxbytes = 200MB
-stderr_logfile = %(ENV_ROOT)s/storage/logs/reverb.log
-stderr_logfile_maxbytes = 200MB
-minfds = 10000
-
-[program:inertia-ssr-server]
-process_name = %(program_name)s_%(process_num)s
-command = php %(ENV_ROOT)s/artisan inertia:start-ssr --runtime=bun --quiet
-user = %(ENV_USER)s
-priority = 2
-autostart = %(ENV_WITH_SSR)s
-autorestart = true
-stopasgroup = true
-killasgroup = true
-stdout_logfile = %(ENV_ROOT)s/storage/logs/inertia-ssr-server.log
-stdout_logfile_maxbytes = 200MB
-stderr_logfile = %(ENV_ROOT)s/storage/logs/inertia-ssr-server.log
-stderr_logfile_maxbytes = 200MB

docker/prod/deployment/supervisord.worker.conf

@@ -4,8 +4,6 @@ command = %(ENV_WORKER_COMMAND)s
 user = %(ENV_USER)s
 autostart = true
 autorestart = true
-stopasgroup = true
-killasgroup = true
 stdout_logfile = /dev/stdout
 stdout_logfile_maxbytes = 0
 stderr_logfile = /dev/stderr

e2e/calendar.spec.ts

@@ -252,19 +252,19 @@ test('test that calendar page loads and displays time entries', async ({ page, c
 test('test that calendar navigation buttons work', async ({ page }) => {
     await goToCalendar(page);
     await expect(page.locator('.fc')).toBeVisible();
+    await expect(page.getByTestId('calendar-title')).toContainText('This Week');
 
-    // Click the "next" button to navigate forward
-    await page.getByRole('button', { name: 'Next' }).click();
-    await expect(page.locator('.fc')).toBeVisible();
-
-    // Click the "prev" button to navigate back
+    // Navigate between named periods.
     await page.getByRole('button', { name: 'Previous' }).click();
-    await expect(page.locator('.fc')).toBeVisible();
-
-    // Navigate forward first, then click today
+    await expect(page.getByTestId('calendar-title')).toContainText('Last Week');
     await page.getByRole('button', { name: 'Next' }).click();
+    await expect(page.getByTestId('calendar-title')).toContainText('This Week');
+
+    // Navigate forward first, then use the range button to return to today.
+    await page.getByRole('button', { name: 'Next' }).click();
+    await expect(page.getByTestId('calendar-title')).toContainText('Next Week');
     await page.getByRole('button', { name: 'today' }).click();
-    await expect(page.locator('.fc')).toBeVisible();
+    await expect(page.getByTestId('calendar-title')).toContainText('This Week');
 });
 
 test('test that editing time entry description via calendar modal works', async ({ page, ctx }) => {

e2e/reporting.spec.ts

@@ -18,6 +18,25 @@ import {
 // Each test registers a new user and creates test data via API
 test.describe.configure({ timeout: 30000 });
 
+test('date range picker labels and navigates reporting periods', async ({ page }) => {
+    await goToReporting(page);
+
+    const range = page.getByTestId('date_range_picker_display');
+    const previous = page.getByTestId('date_range_picker_previous');
+    const next = page.getByTestId('date_range_picker_next');
+
+    await expect(range).toContainText('Last 14 Days');
+    await expect(next).toBeDisabled();
+
+    await Promise.all([waitForReportingUpdate(page), previous.click()]);
+    await expect(range).not.toContainText('Last 14 Days');
+
+    // The initial reporting range is still fresh in Vue Query's cache, so returning to it
+    // does not necessarily trigger another aggregate request.
+    await next.click();
+    await expect(range).toContainText('Last 14 Days');
+});
+
 // ──────────────────────────────────────────────────
 // Project Multiselect Dropdown Tests
 // ──────────────────────────────────────────────────

e2e/timesheet.spec.ts

@@ -409,20 +409,20 @@ test('navigating to previous week shows entries from that week', async ({ page,
 test('can navigate forward and return to current week', async ({ page }) => {
     await Promise.all([goToTimesheet(page), waitForTimesheetLoad(page)]);
 
-    // Should show "This week"
-    await expect(page.getByTestId('timesheet_week_display')).toContainText('This week');
+    // Should show "This Week"
+    await expect(page.getByTestId('timesheet_week_display')).toContainText('This Week');
 
     // Go to next week — the text assertions below auto-retry until the
     // header label flips.
     await page.getByTestId('timesheet_next_week').click();
 
-    // Should no longer show "This week"
-    await expect(page.getByTestId('timesheet_week_display')).not.toContainText('This week');
+    // Should no longer show "This Week"
+    await expect(page.getByTestId('timesheet_week_display')).not.toContainText('This Week');
 
     // Go back to this week
     await page.getByTestId('timesheet_week_display').click();
 
-    await expect(page.getByTestId('timesheet_week_display')).toContainText('This week');
+    await expect(page.getByTestId('timesheet_week_display')).toContainText('This Week');
 });
 
 // ──────────────────────────────────────────────────

extensions/manifest.json

@@ -1,7 +1,7 @@
 {
     "Billing": {
         "repository": "solidtime-io/extension-billing",
-        "ref": "main"
+        "ref": "v0.0.6"
     },
     "Services": {
         "repository": "solidtime-io/extension-services",

phpunit.xml

@@ -43,7 +43,5 @@
         <env name="NEWSLETTER_URL" value="null"/>
         <env name="PASSPORT_PERSONAL_ACCESS_CLIENT_ID" value="null"/>
         <env name="PASSPORT_PERSONAL_ACCESS_CLIENT_SECRET" value="null"/>
-        <env name="PADDLE_API_KEY" value="test_phpunit_paddle_api_key"/>
-        <env name="PADDLE_SANDBOX" value="true"/>
     </php>
 </phpunit>

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

@@ -57,7 +57,7 @@ const { handleApiRequestNotifications } = useNotificationsStore();
 
 const startDate = useSessionStorage<string>(
     'reporting-start-date',
-    getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
+    getLocalizedDayJs(getDayJsInstance()().format()).subtract(13, 'd').format()
 );
 const endDate = useSessionStorage<string>(
     'reporting-end-date',

resources/js/Components/Timesheet/TimesheetHeader.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { Button } from '@/packages/ui/src/Buttons';
-import { ChevronLeftIcon, ChevronRightIcon, CalendarIcon } from '@heroicons/vue/20/solid';
+import DateRangeNavigator from '@/packages/ui/src/Input/DateRangeNavigator.vue';
 
 defineProps<{
-    isCurrentWeek: boolean;
     weekNumber: number;
-    weekRangeDisplay: string;
+    rangeLabel: string;
     weekTotalFormatted: string;
 }>();
 
@@ -19,33 +17,16 @@ defineEmits<{
 <template>
     <div class="flex flex-wrap items-center justify-between gap-4 mb-4 px-2 sm:px-4 lg:px-6">
         <!-- Left: Week navigation -->
-        <div class="flex items-center gap-2">
-            <Button
-                variant="outline"
-                size="icon"
-                class="h-8 w-8"
-                data-testid="timesheet_prev_week"
-                @click="$emit('previous')">
-                <ChevronLeftIcon class="h-4 w-4" />
-            </Button>
-            <button
-                data-testid="timesheet_week_display"
-                class="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-card-background rounded-md transition"
-                @click="$emit('current')">
-                <CalendarIcon class="h-4 w-4 text-icon-default" />
-                <span v-if="isCurrentWeek">This week</span>
-                <span v-else>{{ weekRangeDisplay }}</span>
-                <span class="text-text-tertiary">&middot; W{{ weekNumber }}</span>
-            </button>
-            <Button
-                variant="outline"
-                size="icon"
-                class="h-8 w-8"
-                data-testid="timesheet_next_week"
-                @click="$emit('next')">
-                <ChevronRightIcon class="h-4 w-4" />
-            </Button>
-        </div>
+        <DateRangeNavigator
+            :label="rangeLabel"
+            :secondary-label="`W${weekNumber}`"
+            previous-test-id="timesheet_prev_week"
+            trigger-test-id="timesheet_week_display"
+            next-test-id="timesheet_next_week"
+            trigger-aria-label="Return to current week"
+            @previous="$emit('previous')"
+            @next="$emit('next')"
+            @select="$emit('current')" />
 
         <!-- Right: Week total -->
         <div class="flex items-center gap-2.5">

resources/js/Pages/ReportingDetailed.vue

@@ -61,7 +61,7 @@ type TimeEntryRoundingType = 'up' | 'down' | 'nearest';
 
 const startDate = useSessionStorage<string>(
     'reporting-start-date',
-    getLocalizedDayJs(getDayJsInstance()().format()).subtract(14, 'd').format()
+    getLocalizedDayJs(getDayJsInstance()().format()).subtract(13, 'd').format()
 );
 const endDate = useSessionStorage<string>(
     'reporting-end-date',

resources/js/Pages/Timesheet.vue

@@ -30,6 +30,7 @@ import {
     getLocalizedDayJs,
 } from '@/packages/ui/src/utils/time';
 import { getBreakPlacementHint } from '@/packages/ui/src/utils/breakPlacement';
+import { getDateRangeLabel } from '@/packages/ui/src/utils/dateRange';
 import { useTimesheetWeek } from '@/utils/timesheet/useTimesheetWeek';
 import { useTimesheetCellMutations } from '@/utils/timesheet/useTimesheetCellMutations';
 import { useTimesheetRowMutations } from '@/utils/timesheet/useTimesheetRowMutations';
@@ -44,7 +45,6 @@ const {
     weekEnd,
     weekDays,
     weekNumber,
-    isCurrentWeek,
     todayDate,
     goToPreviousWeek,
     goToNextWeek,
@@ -109,13 +109,9 @@ const weekTotalFormatted = computed(() =>
     formatHumanReadableDuration(grandTotal.value, intervalFormat.value, numberFormat.value)
 );
 
-const weekRangeDisplay = computed(() => {
-    const start = weekStart.value;
-    const end = start.add(6, 'day');
-    return start.month() === end.month()
-        ? `${start.format('MMM D')} - ${end.format('D')}`
-        : `${start.format('MMM D')} - ${end.format('MMM D')}`;
-});
+const weekRangeLabel = computed(() =>
+    getDateRangeLabel(weekStart.value, weekStart.value.add(6, 'day'))
+);
 
 // ── Cell / row mutation handlers ──────────────────────────────────
 const {
@@ -208,9 +204,8 @@ async function createTag(name: string): Promise<Tag | undefined> {
     <AppLayout title="Timesheet" data-testid="timesheet_view">
         <div class="pt-5 lg:pt-8 pb-4 lg:pb-6">
             <TimesheetHeader
-                :is-current-week="isCurrentWeek"
                 :week-number="weekNumber"
-                :week-range-display="weekRangeDisplay"
+                :range-label="weekRangeLabel"
                 :week-total-formatted="weekTotalFormatted"
                 @previous="goToPreviousWeek"
                 @next="goToNextWeek"

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

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { Button } from '..';
-import { ChevronLeft, ChevronRight } from '@lucide/vue';
 import { Tabs, TabsList } from '../tabs';
 import TabBarItem from '../TabBar/TabBarItem.vue';
+import DateRangeNavigator from '../Input/DateRangeNavigator.vue';
 import CalendarSettingsPopover from './CalendarSettingsPopover.vue';
 import type { CalendarSettings } from './calendarSettings';
 
 defineProps<{
-    viewTitle: string;
+    rangeLabel: string;
     activeView: string;
     settings: CalendarSettings;
 }>();
@@ -23,31 +22,13 @@ const emit = defineEmits<{
 
 <template>
     <div class="flex items-center justify-between bg-default-background px-2 py-1.5">
-        <!-- Left: Navigation -->
-        <div class="flex items-center gap-1">
-            <Button
-                variant="outline"
-                size="sm"
-                class="h-8 w-8 p-0"
-                aria-label="Previous"
-                @click="emit('prev')">
-                <ChevronLeft class="h-4 w-4" />
-            </Button>
-            <Button
-                variant="outline"
-                size="sm"
-                class="h-8 w-8 p-0"
-                aria-label="Next"
-                @click="emit('next')">
-                <ChevronRight class="h-4 w-4" />
-            </Button>
-            <Button variant="outline" size="sm" @click="emit('today')"> today </Button>
-        </div>
-
-        <!-- Center: Title -->
-        <span data-testid="calendar-title" class="text-base font-semibold text-foreground">{{
-            viewTitle
-        }}</span>
+        <DateRangeNavigator
+            :label="rangeLabel"
+            trigger-test-id="calendar-title"
+            trigger-aria-label="today"
+            @previous="emit('prev')"
+            @next="emit('next')"
+            @select="emit('today')" />
 
         <!-- Right: View switcher + Settings -->
         <div class="flex items-center gap-1">

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

@@ -138,7 +138,7 @@ const {
 const {
     activeView,
     viewDays,
-    viewTitle,
+    rangeLabel,
     emitDatesChange,
     handlePrev,
     handleNext,
@@ -514,7 +514,7 @@ function getEventDurationSeconds(dayEvent: DayEvent, dayStr: string): number {
 
         <template v-if="!loading">
             <CalendarToolbar
-                :view-title="viewTitle"
+                :range-label="rangeLabel"
                 :active-view="activeView"
                 :settings="calendarSettings"
                 @prev="handlePrev"

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

@@ -2,6 +2,7 @@ import { computed, ref } from 'vue';
 import type { Dayjs } from 'dayjs';
 import { getLocalizedDayJs } from '../utils/time';
 import { getWeekStartDayNumber } from '../utils/settings';
+import { getDateRangeLabel } from '../utils/dateRange';
 
 export function useCalendarNavigation(callbacks: {
     onDatesChange: (payload: { start: Dayjs; end: Dayjs }) => void;
@@ -34,24 +35,10 @@ export function useCalendarNavigation(callbacks: {
         return days;
     });
 
-    const viewTitle = computed(() => {
-        if (activeView.value === 'timeGridDay') {
-            return currentDate.value.format('MMMM YYYY');
-        }
-
+    const rangeLabel = computed(() => {
         const days = viewDays.value;
         if (days.length === 0) return '';
-
-        const first = days[0]!;
-        const last = days[days.length - 1]!;
-
-        if (first.year() !== last.year()) {
-            return `${first.format('MMM YYYY')} \u2013 ${last.format('MMM YYYY')}`;
-        }
-        if (first.month() !== last.month()) {
-            return `${first.format('MMM')} \u2013 ${last.format('MMM YYYY')}`;
-        }
-        return first.format('MMMM YYYY');
+        return getDateRangeLabel(days[0]!, days[days.length - 1]!);
     });
 
     function emitDatesChange() {
@@ -99,7 +86,7 @@ export function useCalendarNavigation(callbacks: {
         activeView,
         currentDate,
         viewDays,
-        viewTitle,
+        rangeLabel,
         emitDatesChange,
         handlePrev,
         handleNext,

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

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ChevronLeft, ChevronRight, CalendarIcon } from '@lucide/vue';
+import { Button } from '../Buttons';
+
+withDefaults(
+    defineProps<{
+        label: string;
+        secondaryLabel?: string;
+        previousDisabled?: boolean;
+        nextDisabled?: boolean;
+        previousTestId?: string;
+        triggerTestId?: string;
+        nextTestId?: string;
+        triggerAriaLabel?: string;
+    }>(),
+    {
+        secondaryLabel: undefined,
+        previousTestId: undefined,
+        triggerTestId: undefined,
+        nextTestId: undefined,
+        triggerAriaLabel: undefined,
+    }
+);
+
+const emit = defineEmits<{
+    previous: [];
+    next: [];
+    select: [];
+}>();
+
+const triggerClass =
+    'h-8 w-[13.5rem] justify-center rounded-none border-l border-r border-border-secondary px-2.5 text-text-primary tabular-nums hover:bg-card-background-active';
+</script>
+
+<template>
+    <div
+        class="tabular-nums inline-flex items-stretch overflow-hidden rounded-md border border-input bg-card-background shadow-xs dark:bg-transparent"
+        role="group"
+        aria-label="Date range navigation">
+        <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            class="h-8 w-8 shrink-0 rounded-none hover:bg-card-background-active"
+            aria-label="Previous"
+            :disabled="previousDisabled"
+            :data-testid="previousTestId"
+            @click="emit('previous')">
+            <ChevronLeft class="h-4 w-4" />
+        </Button>
+
+        <slot name="trigger" :trigger-class="triggerClass">
+            <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                :class="triggerClass"
+                :aria-label="triggerAriaLabel"
+                :data-testid="triggerTestId"
+                @click="emit('select')">
+                <CalendarIcon class="h-4 w-4 shrink-0 text-icon-default" />
+                <span class="min-w-0 truncate">{{ label }}</span>
+                <span v-if="secondaryLabel" class="shrink-0 text-text-tertiary">
+                    &middot; {{ secondaryLabel }}
+                </span>
+            </Button>
+        </slot>
+
+        <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            class="h-8 w-8 shrink-0 rounded-none hover:bg-card-background-active"
+            aria-label="Next"
+            :disabled="nextDisabled"
+            :data-testid="nextTestId"
+            @click="emit('next')">
+            <ChevronRight class="h-4 w-4" />
+        </Button>
+    </div>
+</template>

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

@@ -6,22 +6,22 @@ import { CalendarDate } from '@internationalized/date';
 import { CalendarIcon } from '@lucide/vue';
 import { computed, ref, inject, type ComputedRef, watch } from 'vue';
 import { twMerge } from 'tailwind-merge';
-import {
-    getDayJsInstance,
-    getLocalizedDayJs,
-    firstDayIndex,
-    type WeekStartDay,
-} from '@/packages/ui/src/utils/time';
+import DateRangeNavigator from './DateRangeNavigator.vue';
+import { getLocalizedDayJs, firstDayIndex, type WeekStartDay } from '@/packages/ui/src/utils/time';
+import { getDateRangeLabel, shiftDateRange, type DateRangeDirection } from '../utils/dateRange';
 import { type Organization } from '@/packages/api/src';
 import { getUserTimezone } from '@/packages/ui/src/utils/settings';
-import { formatDate } from '@/packages/ui/src/utils/time';
 
 const weekStartsOn = computed((): WeekStartDay => firstDayIndex.value as WeekStartDay);
 
-const props = defineProps<{
-    start: string;
-    end: string;
-}>();
+const props = withDefaults(
+    defineProps<{
+        start: string;
+        end: string;
+        allowFuture?: boolean;
+    }>(),
+    { allowFuture: false }
+);
 
 const emit = defineEmits<{
     (e: 'update:start', value: string): void;
@@ -35,10 +35,13 @@ interface CalendarDateRange {
 }
 
 const today = computed(() => {
-    const now = getDayJsInstance()();
+    const now = getLocalizedDayJs();
     return new CalendarDate(now.year(), now.month() + 1, now.date());
 });
 
+const startDay = computed(() => (props.start ? getLocalizedDayJs(props.start) : undefined));
+const endDay = computed(() => (props.end ? getLocalizedDayJs(props.end) : undefined));
+
 const modelValue = computed<CalendarDateRange>({
     get: () => ({
         start: props.start
@@ -91,7 +94,7 @@ function setLastWeek() {
 }
 
 function setLast14Days() {
-    emit('update:start', getLocalizedDayJs().subtract(14, 'days').format());
+    emit('update:start', getLocalizedDayJs().subtract(13, 'days').startOf('day').format());
     emit('update:end', getLocalizedDayJs().format());
     open.value = false;
 }
@@ -109,14 +112,14 @@ function setLastMonth() {
 }
 
 function setLast30Days() {
-    emit('update:start', getLocalizedDayJs().subtract(30, 'days').format());
+    emit('update:start', getLocalizedDayJs().subtract(29, 'days').startOf('day').format());
     emit('update:end', getLocalizedDayJs().format());
     open.value = false;
 }
 
 function setLast90Days() {
-    emit('update:start', getDayJsInstance()().subtract(90, 'days').format());
-    emit('update:end', getDayJsInstance()().format());
+    emit('update:start', getLocalizedDayJs().subtract(89, 'days').startOf('day').format());
+    emit('update:end', getLocalizedDayJs().format());
     open.value = false;
 }
 
@@ -140,6 +143,38 @@ function setLastYear() {
 
 const organization = inject<ComputedRef<Organization>>('organization');
 
+const displayLabel = computed(() => {
+    if (!startDay.value) return 'Pick a date';
+    if (!endDay.value) {
+        return getDateRangeLabel(startDay.value, startDay.value, {
+            dateFormat: organization?.value?.date_format,
+        });
+    }
+    return getDateRangeLabel(startDay.value, endDay.value, {
+        dateFormat: organization?.value?.date_format,
+    });
+});
+
+const nextRange = computed(() => {
+    if (!startDay.value || !endDay.value) return undefined;
+    return shiftDateRange(startDay.value, endDay.value, 1);
+});
+
+const nextDisabled = computed(
+    () =>
+        !props.allowFuture &&
+        !!nextRange.value &&
+        nextRange.value.start.isAfter(getLocalizedDayJs().endOf('day'))
+);
+
+function navigate(direction: DateRangeDirection) {
+    if (!startDay.value || !endDay.value) return;
+    const shifted = shiftDateRange(startDay.value, endDay.value, direction);
+    emit('update:start', shifted.start.format());
+    emit('update:end', shifted.end.format());
+    emit('submit');
+}
+
 watch(open, (value) => {
     if (value === false) {
         emit('submit');
@@ -148,77 +183,120 @@ watch(open, (value) => {
 </script>
 
 <template>
-    <Popover v-model:open="open">
-        <PopoverTrigger as-child>
-            <Button
-                variant="outline"
-                :class="
-                    twMerge(
-                        'flex w-full items-center justify-between whitespace-nowrap h-[34px] text-start',
-                        !modelValue && 'text-muted-foreground'
-                    )
-                ">
-                <CalendarIcon class="-ml-0.5 text-text-quaternary h-4 w-4" />
-                <template v-if="modelValue.start">
-                    <template v-if="modelValue.end">
-                        {{ formatDate(modelValue.start.toString(), organization?.date_format) }}
-                        -
-                        {{ formatDate(modelValue.end.toString(), organization?.date_format) }}
-                    </template>
-                    <template v-else>
-                        {{ formatDate(modelValue.start.toString(), organization?.date_format) }}
-                    </template>
-                </template>
-                <template v-else> Pick a date </template>
-            </Button>
-        </PopoverTrigger>
-        <PopoverContent class="w-auto p-0">
-            <div class="flex divide-x divide-border-secondary">
-                <div
-                    class="text-text-primary text-sm flex flex-col space-y-0.5 items-start py-2 px-2">
-                    <Button variant="ghost" size="sm" class="justify-start" @click="setToday"
-                        >Today</Button
-                    >
-                    <Button variant="ghost" size="sm" class="justify-start" @click="setThisWeek"
-                        >This Week</Button
-                    >
-                    <Button variant="ghost" size="sm" class="justify-start" @click="setLastWeek"
-                        >Last Week</Button
-                    >
-                    <Button variant="ghost" size="sm" class="justify-start" @click="setLast14Days"
-                        >Last 14 days</Button
-                    >
-                    <Button variant="ghost" size="sm" class="justify-start" @click="setThisMonth"
-                        >This Month</Button
-                    >
-                    <Button variant="ghost" size="sm" class="justify-start" @click="setLastMonth"
-                        >Last Month</Button
-                    >
-                    <Button variant="ghost" size="sm" class="justify-start" @click="setLast30Days"
-                        >Last 30 days</Button
-                    >
-                    <Button variant="ghost" size="sm" class="justify-start" @click="setLast90Days"
-                        >Last 90 days</Button
-                    >
-                    <Button variant="ghost" size="sm" class="justify-start" @click="setLast12Months"
-                        >Last 12 months</Button
-                    >
-                    <Button variant="ghost" size="sm" class="justify-start" @click="setThisYear"
-                        >This year</Button
-                    >
-                    <Button variant="ghost" size="sm" class="justify-start" @click="setLastYear"
-                        >Last year</Button
-                    >
-                </div>
-                <div class="pl-2">
-                    <RangeCalendar
-                        v-model="modelValue"
-                        initial-focus
-                        :number-of-months="2"
-                        :max-value="today"
-                        :week-starts-on="weekStartsOn" />
-                </div>
-            </div>
-        </PopoverContent>
-    </Popover>
+    <DateRangeNavigator
+        :label="displayLabel"
+        :next-disabled="nextDisabled"
+        previous-test-id="date_range_picker_previous"
+        trigger-test-id="date_range_picker_display"
+        next-test-id="date_range_picker_next"
+        @previous="navigate(-1)"
+        @next="navigate(1)">
+        <template #trigger="{ triggerClass }">
+            <Popover v-model:open="open">
+                <PopoverTrigger as-child>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        :class="twMerge(triggerClass, !modelValue.start && 'text-muted-foreground')"
+                        data-testid="date_range_picker_display">
+                        <CalendarIcon class="text-text-quaternary h-4 w-4 shrink-0" />
+                        <span class="min-w-0 truncate">{{ displayLabel }}</span>
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent class="w-auto p-0">
+                    <div class="flex divide-x divide-border-secondary">
+                        <div
+                            class="text-text-primary text-sm flex flex-col space-y-0.5 items-start py-2 px-2">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="justify-start"
+                                @click="setToday"
+                                >Today</Button
+                            >
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="justify-start"
+                                @click="setThisWeek"
+                                >This Week</Button
+                            >
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="justify-start"
+                                @click="setLastWeek"
+                                >Last Week</Button
+                            >
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="justify-start"
+                                @click="setLast14Days"
+                                >Last 14 Days</Button
+                            >
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="justify-start"
+                                @click="setThisMonth"
+                                >This Month</Button
+                            >
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="justify-start"
+                                @click="setLastMonth"
+                                >Last Month</Button
+                            >
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="justify-start"
+                                @click="setLast30Days"
+                                >Last 30 Days</Button
+                            >
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="justify-start"
+                                @click="setLast90Days"
+                                >Last 90 Days</Button
+                            >
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="justify-start"
+                                @click="setLast12Months"
+                                >Last 12 Months</Button
+                            >
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="justify-start"
+                                @click="setThisYear"
+                                >This Year</Button
+                            >
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                class="justify-start"
+                                @click="setLastYear"
+                                >Last Year</Button
+                            >
+                        </div>
+                        <div class="pl-2">
+                            <RangeCalendar
+                                v-model="modelValue"
+                                initial-focus
+                                :number-of-months="2"
+                                :max-value="allowFuture ? undefined : today"
+                                :week-starts-on="weekStartsOn" />
+                        </div>
+                    </div>
+                </PopoverContent>
+            </Popover>
+        </template>
+    </DateRangeNavigator>
 </template>

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

@@ -132,6 +132,7 @@ import FullCalendarDayHeader from './FullCalendar/FullCalendarDayHeader.vue';
 import FullCalendarEventContent from './FullCalendar/FullCalendarEventContent.vue';
 import TimeEntryCalendar from './FullCalendar/TimeEntryCalendar.vue';
 import DateRangePicker from './Input/DateRangePicker.vue';
+import DateRangeNavigator from './Input/DateRangeNavigator.vue';
 import { Label } from './label/index';
 import {
     NumberField,
@@ -211,6 +212,7 @@ export {
     ContextMenuSubTrigger,
     ContextMenuTrigger,
     DateRangePicker,
+    DateRangeNavigator,
     Dialog,
     DialogClose,
     DialogContent,

resources/js/packages/ui/src/utils/dateRange.test.ts

@@ -0,0 +1,124 @@
+import dayjs from 'dayjs';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { getDayJsInstance, getLocalizedDayJs } from './time';
+import { getDateRangeLabel, shiftDateRange } from './dateRange';
+
+const reference = dayjs('2026-09-21');
+
+afterEach(() => {
+    vi.mocked(window.getTimezoneSetting).mockReturnValue('UTC');
+});
+
+describe('getDateRangeLabel', () => {
+    test('labels relative weeks', () => {
+        getDayJsInstance();
+        expect(
+            getDateRangeLabel(reference.startOf('week'), reference.endOf('week'), {
+                referenceDate: reference,
+            })
+        ).toBe('This Week');
+        expect(
+            getDateRangeLabel(
+                reference.subtract(1, 'week').startOf('week'),
+                reference.subtract(1, 'week').endOf('week'),
+                { referenceDate: reference }
+            )
+        ).toBe('Last Week');
+    });
+
+    test('labels common rolling ranges', () => {
+        expect(
+            getDateRangeLabel(reference.subtract(13, 'day'), reference.endOf('day'), {
+                referenceDate: reference,
+            })
+        ).toBe('Last 14 Days');
+    });
+
+    test('labels full calendar months and years', () => {
+        expect(
+            getDateRangeLabel(dayjs('2025-09-01'), dayjs('2025-09-30'), {
+                referenceDate: reference,
+            })
+        ).toBe('September 2025');
+        expect(
+            getDateRangeLabel(dayjs('2024-01-01'), dayjs('2024-12-31'), {
+                referenceDate: reference,
+            })
+        ).toBe('2024');
+    });
+
+    test('keeps relative labels for the current periods', () => {
+        expect(
+            getDateRangeLabel(reference.startOf('month'), reference.endOf('month'), {
+                referenceDate: reference,
+            })
+        ).toBe('This Month');
+        expect(
+            getDateRangeLabel(reference.startOf('year'), reference.endOf('year'), {
+                referenceDate: reference,
+            })
+        ).toBe('This Year');
+    });
+
+    test('uses the organization date format for custom ranges', () => {
+        expect(
+            getDateRangeLabel(dayjs('2026-08-03'), dayjs('2026-08-12'), {
+                dateFormat: 'slash-separated-dd-mm-yyyy',
+                referenceDate: reference,
+            })
+        ).toBe('03/08/2026 – 12/08/2026');
+    });
+
+    test('renders a single historical day without duplicating it', () => {
+        expect(
+            getDateRangeLabel(dayjs('2026-08-03'), dayjs('2026-08-03'), {
+                referenceDate: reference,
+            })
+        ).toBe('Aug 3, 2026');
+    });
+});
+
+describe('shiftDateRange', () => {
+    test('moves full weeks as calendar periods', () => {
+        getDayJsInstance();
+        const shifted = shiftDateRange(reference.startOf('week'), reference.endOf('week'), -1);
+        expect(shifted.start.format('YYYY-MM-DD')).toBe('2026-09-14');
+        expect(shifted.end.format('YYYY-MM-DD')).toBe('2026-09-20');
+    });
+
+    test('moves full months without truncating longer months', () => {
+        const shifted = shiftDateRange(dayjs('2026-02-01'), dayjs('2026-02-28'), 1);
+        expect(shifted.start.format('YYYY-MM-DD')).toBe('2026-03-01');
+        expect(shifted.end.format('YYYY-MM-DD')).toBe('2026-03-31');
+    });
+
+    test('moves custom ranges by their inclusive duration', () => {
+        const shifted = shiftDateRange(dayjs('2026-09-01'), dayjs('2026-09-14'), -1);
+        expect(shifted.start.format('YYYY-MM-DD')).toBe('2026-08-18');
+        expect(shifted.end.format('YYYY-MM-DD')).toBe('2026-08-31');
+    });
+
+    test('normalizes custom range offsets across the spring DST transition', () => {
+        vi.mocked(window.getTimezoneSetting).mockReturnValue('Europe/Vienna');
+        const shifted = shiftDateRange(
+            getLocalizedDayJs('2026-03-14T23:00:00Z'),
+            getLocalizedDayJs('2026-03-27T23:00:00Z'),
+            1
+        );
+
+        expect(shifted.start.format()).toBe('2026-03-29T00:00:00+01:00');
+        expect(shifted.end.format()).toBe('2026-04-11T23:59:59+02:00');
+    });
+
+    test('normalizes custom range offsets across the autumn DST transition', () => {
+        vi.mocked(window.getTimezoneSetting).mockReturnValue('Europe/Vienna');
+        const shifted = shiftDateRange(
+            getLocalizedDayJs('2026-10-17T22:00:00Z'),
+            getLocalizedDayJs('2026-10-30T23:00:00Z'),
+            1
+        );
+
+        expect(shifted.start.format()).toBe('2026-11-01T00:00:00+01:00');
+        expect(shifted.end.format()).toBe('2026-11-14T23:59:59+01:00');
+    });
+});

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

@@ -0,0 +1,135 @@
+import type { Dayjs } from 'dayjs';
+import { formatDate, getDayJsInstance, getLocalizedDayJs, type DateFormat } from './time';
+
+export type DateRangeDirection = -1 | 1;
+
+function isSameDay(left: Dayjs, right: Dayjs): boolean {
+    return left.isSame(right, 'day');
+}
+
+function isRange(start: Dayjs, end: Dayjs, expectedStart: Dayjs, expectedEnd: Dayjs): boolean {
+    return isSameDay(start, expectedStart) && isSameDay(end, expectedEnd);
+}
+
+function formatCompactRange(start: Dayjs, end: Dayjs): string {
+    if (start.year() !== end.year()) {
+        return `${start.format('MMM D, YYYY')} – ${end.format('MMM D, YYYY')}`;
+    }
+    if (start.month() !== end.month()) {
+        return `${start.format('MMM D')} – ${end.format('MMM D, YYYY')}`;
+    }
+    return `${start.format('MMM D')} – ${end.format('D, YYYY')}`;
+}
+
+/**
+ * Returns a human-friendly label for an inclusive date range. Relative labels
+ * are intentionally shared by reporting, the timesheet, and the calendar.
+ */
+export function getDateRangeLabel(
+    start: Dayjs,
+    end: Dayjs,
+    options: { dateFormat?: DateFormat; referenceDate?: Dayjs } = {}
+): string {
+    // Ensure the configured first day of the week is applied before using startOf('week').
+    getDayJsInstance();
+
+    const reference = (options.referenceDate ?? getLocalizedDayJs()).startOf('day');
+    const rangeStart = start.startOf('day');
+    const rangeEnd = end.startOf('day');
+
+    const relativeDays: Array<[number, string]> = [
+        [0, 'Today'],
+        [-1, 'Yesterday'],
+        [1, 'Tomorrow'],
+    ];
+    for (const [offset, label] of relativeDays) {
+        const day = reference.add(offset, 'day');
+        if (isRange(rangeStart, rangeEnd, day, day)) return label;
+    }
+
+    const relativePeriods: Array<['week' | 'month' | 'year', number, string]> = [
+        ['week', 0, 'This Week'],
+        ['week', -1, 'Last Week'],
+        ['week', 1, 'Next Week'],
+        ['month', 0, 'This Month'],
+        ['month', -1, 'Last Month'],
+        ['month', 1, 'Next Month'],
+        ['year', 0, 'This Year'],
+        ['year', -1, 'Last Year'],
+        ['year', 1, 'Next Year'],
+    ];
+    for (const [unit, offset, label] of relativePeriods) {
+        const period = reference.add(offset, unit);
+        if (isRange(rangeStart, rangeEnd, period.startOf(unit), period.endOf(unit))) return label;
+    }
+
+    // Named calendar periods outside the relative windows above, e.g. "May 2025"
+    // for a full month and "2025" for a full year.
+    const monthStart = rangeStart.startOf('month');
+    if (isRange(rangeStart, rangeEnd, monthStart, monthStart.endOf('month'))) {
+        return rangeStart.format('MMMM YYYY');
+    }
+    const yearStart = rangeStart.startOf('year');
+    if (isRange(rangeStart, rangeEnd, yearStart, yearStart.endOf('year'))) {
+        return rangeStart.format('YYYY');
+    }
+
+    const rollingRanges: Array<[number, string]> = [
+        [14, 'Last 14 Days'],
+        [30, 'Last 30 Days'],
+        [90, 'Last 90 Days'],
+    ];
+    for (const [days, label] of rollingRanges) {
+        if (isRange(rangeStart, rangeEnd, reference.subtract(days - 1, 'day'), reference)) {
+            return label;
+        }
+    }
+    if (isRange(rangeStart, rangeEnd, reference.subtract(12, 'month'), reference)) {
+        return 'Last 12 Months';
+    }
+
+    if (isSameDay(rangeStart, rangeEnd)) {
+        return options.dateFormat
+            ? formatDate(rangeStart.format('YYYY-MM-DD'), options.dateFormat)
+            : rangeStart.format('MMM D, YYYY');
+    }
+
+    if (options.dateFormat) {
+        return `${formatDate(rangeStart.format('YYYY-MM-DD'), options.dateFormat)} – ${formatDate(
+            rangeEnd.format('YYYY-MM-DD'),
+            options.dateFormat
+        )}`;
+    }
+    return formatCompactRange(rangeStart, rangeEnd);
+}
+
+/** Shift an inclusive range by one period, preserving full calendar periods. */
+export function shiftDateRange(
+    start: Dayjs,
+    end: Dayjs,
+    direction: DateRangeDirection
+): { start: Dayjs; end: Dayjs } {
+    getDayJsInstance();
+
+    const rangeStart = start.startOf('day');
+    const rangeEnd = end.endOf('day');
+
+    if (isRange(rangeStart, rangeEnd, rangeStart.startOf('year'), rangeStart.endOf('year'))) {
+        const shiftedStart = rangeStart.add(direction, 'year').startOf('year');
+        return { start: shiftedStart, end: shiftedStart.endOf('year') };
+    }
+    if (isRange(rangeStart, rangeEnd, rangeStart.startOf('month'), rangeStart.endOf('month'))) {
+        const shiftedStart = rangeStart.add(direction, 'month').startOf('month');
+        return { start: shiftedStart, end: shiftedStart.endOf('month') };
+    }
+    if (isRange(rangeStart, rangeEnd, rangeStart.startOf('week'), rangeStart.endOf('week'))) {
+        const shiftedStart = rangeStart.add(direction, 'week').startOf('week');
+        return { start: shiftedStart, end: shiftedStart.endOf('week') };
+    }
+
+    const days = rangeEnd.startOf('day').diff(rangeStart, 'day') + 1;
+    return {
+        start: rangeStart.add(days * direction, 'day').startOf('day'),
+        end: rangeEnd.add(days * direction, 'day').endOf('day'),
+    };
+}