released v5.0.1

Releasing v5.0.0

.github/workflows/maven-release.yml

@@ -12,12 +12,12 @@ jobs:
       packages: write
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - name: Set up Java 11 for publishing to Maven Central Repository
+      - name: Set up Java 21 for publishing to Maven Central Repository
-        uses: actions/setup-java@v3
+        uses: actions/setup-java@v4
         with:
-          java-version: '11'
+          java-version: '21'
           distribution: 'temurin'
           server-id: maven-central-release
           server-username: MAVEN_USERNAME
@@ -35,10 +35,10 @@ jobs:
           MAVEN_PASSWORD: ${{ secrets.MAVEN_CENTRAL_TOKEN_PASSWORD }}
           MAVEN_GPG_PASSPHRASE: ${{ secrets.OSSRH_GPG_SECRET_KEY_PASSWORD }}
 
-      - name: Set up Java 11 for publishing to GitHub Packages
+      - name: Set up Java 21 for publishing to GitHub Packages
-        uses: actions/setup-java@v3
+        uses: actions/setup-java@v4
         with:
-          java-version: '11'
+          java-version: '21'
           distribution: 'temurin'
       - name: Publish to GitHub Packages Apache Maven
         run: mvn deploy --file quartz-manager-parent/pom.xml -P "deploy-github,build-webjar"

.github/workflows/maven.yml

@@ -25,11 +25,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
-      - name: Set up JDK 11
+      - name: Set up JDK 21
-        uses: actions/setup-java@v3
+        uses: actions/setup-java@v4
         with:
-          java-version: '11'
+          java-version: '21'
           distribution: 'temurin'
           cache: maven
       - name: Build and test with Maven

.github/workflows/npm.yml

@@ -25,13 +25,13 @@ jobs:
 
     strategy:
       matrix:
-        node-version:  [16.x]
+        node-version:  [22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'

.github/workflows/sonar-java.yml

@@ -13,13 +13,13 @@ jobs:
     name: Build and analyze
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
-      - name: Set up JDK 17
+      - name: Set up JDK 21
-        uses: actions/setup-java@v3
+        uses: actions/setup-java@v4
         with:
-          java-version: 17
+          java-version: 21
           distribution: 'zulu' # Alternative distribution options are available.
       - name: Cache SonarCloud packages
         uses: actions/cache@v3

CHANGELOG.md

@@ -1,3 +1,30 @@
+## **v5.0.1**
+
+### New Features
+* Added full job management: list eligible job classes, create stored jobs, update jobs, delete jobs, and trigger jobs on demand.
+* Added trigger management APIs and UI flows to inspect, create, reschedule, pause, resume, and unschedule triggers.
+* Added support for Quartz trigger types beyond simple triggers: cron, daily time interval, and calendar interval triggers.
+* Added Quartz calendar management for annual, cron, daily, holiday, monthly, and weekly calendars.
+* Added calendar-aware scheduling support, including calendar assignment to triggers and included-time checks.
+* Redesigned the Quartz Manager dashboard with a broader operations view for scheduler, jobs, triggers, calendars, progress, and logs.
+* Updated the embedded UI to Angular 21.
+* Added support for Spring Boot 4 applications.
+
+### Breaking Changes
+* Quartz Manager now requires Java 21+ and Spring Boot 4.x.
+* Applications using Quartz Manager APIs must migrate from `javax.*` validation/annotation dependencies to `jakarta.*` equivalents through the Spring Boot 4 stack.
+* Scheduler command endpoints now use `POST` operations and clearer action names: `/scheduler/start`, `/scheduler/standby`, `/scheduler/resume`, and `/scheduler/shutdown` replace the previous `GET` command endpoints.
+* Simple trigger endpoints now include the trigger group in the path: `/simple-triggers/{group}/{name}`.
+* New trigger creation should use the generalized `/triggers/{group}/{name}` API when working with cron, daily time interval, or calendar interval triggers.
+
+### Fixes
+* Fixed WebSocket log retrieval for job execution logs.
+* Fixed UI style regressions and improved readability in the dashboard, login page, job class display, and misfire instruction display.
+* Improved API error handling for missing jobs, missing triggers, missing calendars, unsupported trigger types, and scheduling conflicts.
+
+## **v4.1.1**
+**NEW FEATURE** support for multiple triggers
+
 ## **v4.0.10**
 Migrated to the new maven central repo
 

README.md

@@ -1,313 +1,340 @@
+<div align="center">
+
+# Quartz Manager
+
+**A Spring Boot library and standalone web app that adds REST API and dashboard management to Quartz Scheduler.**
+
 [![Java CI with Maven](https://github.com/fabioformosa/quartz-manager/actions/workflows/maven.yml/badge.svg)](https://github.com/fabioformosa/quartz-manager/actions/workflows/maven.yml)
 [![npm CI](https://github.com/fabioformosa/quartz-manager/actions/workflows/npm.yml/badge.svg)](https://github.com/fabioformosa/quartz-manager/actions/workflows/npm.yml)
-[![Maven Central](https://maven-badges.herokuapp.com/maven-central/it.fabioformosa.quartz-manager/quartz-manager-starter-api/badge.svg)](https://maven-badges.herokuapp.com/maven-central/it.fabioformosa.quartz-manager/quartz-manager-starter-api)  
+[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=coverage)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager)
-[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=coverage)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager) [![Bugs](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=bugs)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager)
+[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=bugs)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager)
+[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager)
+[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager)
 
-# Table Of Contents
+[Choose Your Path](#choose-your-path) • [Features](#features) • [Quick Start](#quick-start) • [REST API](#rest-api) • [Security](#security) • [Persistence](#persistence) • [Roadmap](#roadmap)
 
+</div>
 
-[QUARTZ MANAGER](https://github.com/fabioformosa/quartz-manager#quartz-manager)  
+[Quartz Scheduler](https://www.quartz-scheduler.org/) is powerful, but it does not ship with a REST API or an operations dashboard. Quartz Manager fills that gap for Spring Boot applications and can also run as a standalone scheduler web app.
-    &nbsp;&nbsp;&nbsp;&nbsp;[Quartz Manager UI](https://github.com/fabioformosa/quartz-manager#quartz-manager-ui)  
-    &nbsp;&nbsp;&nbsp;&nbsp;[Quartz Manager API](https://github.com/fabioformosa/quartz-manager#quartz-manager-api)    
-[HOW IT WORKS](https://github.com/fabioformosa/quartz-managerhttps://github.com/fabioformosa/quartz-manager#get-started)  
-    &nbsp;&nbsp;&nbsp;&nbsp;[Quartz Manager Starter API Lib](https://github.com/fabioformosa/quartz-manager#quartz-manager-starter-api-lib)  
-    &nbsp;&nbsp;&nbsp;&nbsp;[Quartz Manager Starter UI Lib](https://github.com/fabioformosa/quartz-manager#quartz-manager-starter-ui-lib)   
-    &nbsp;&nbsp;&nbsp;&nbsp;[Quartz Manager Starter Security Lib](https://github.com/fabioformosa/quartz-manager#quartz-manager-starter-security-lib)  
-    &nbsp;&nbsp;&nbsp;&nbsp;[Quartz Manager Persistence Lib](https://github.com/fabioformosa/quartz-manager#quartz-manager-starter-persistence-lib)  
-[EXAMPLES](https://github.com/fabioformosa/quartz-manager#examples)  
-[LIMITATIONS](https://github.com/fabioformosa/quartz-manager#limitations)  
-[ROADMAP](https://github.com/fabioformosa/quartz-manager#roadmap)  
-[REPOSITORY](https://github.com/fabioformosa/quartz-manager#repository)  
-[HOW TO CONTRIBUTE](https://github.com/fabioformosa/quartz-manager#how-to-contribute)  
-[SUPPORT THE PROJECT](https://github.com/fabioformosa/quartz-manager#%EF%B8%8F-support-the-project-%EF%B8%8F)
 
-# QUARTZ MANAGER
+Use it to start and stop a scheduler, create jobs, schedule triggers, manage calendars, inspect executions, and monitor job progress from HTTP endpoints or from a browser UI.
-In the last decade, the [Quartz Scheduler](http://www.quartz-scheduler.org/) has become the most adopted opensource job scheduling library for Java applications.  
 
-**Quartz Manager** enriches it with a **REST API** layer and a handy **UI console** to easily control and monitor a Quartz Scheduler.  
+![Quartz Manager dashboard](https://github.com/fabioformosa/quartz-manager/blob/master/docs/assets/quartz-manager-dashboard.png)
 
-Quartz Manager is a Java library you can import in your Spring-Based Web Application to run scheduled jobs, start&stop them and get the job outcomes. You can do it through HTTP calls to the the Quartz Manager API or in a visual manner through the Quartz Manager UI dashboard.  
+## Choose Your Path
 
+### 1. Add API And UI To Your Existing App
 
-## QUARTZ MANAGER UI
+Use this path when you already have a Spring Boot application and want to add a Quartz management API, an embedded management panel, or both.
-The **Quartz Manager UI** is a dashboard in the form of a single-page-application provided by the Quartz Manager Java library itself. You can have it embedded in your project, as well as you get embedded the Swagger UI.  
-It leverages the websockets to receive in real-time the trigger updates and the outcomes of the job executions.  
 
-![](https://github.com/fabioformosa/quartz-manager/blob/master/quartz-manager-parent/quartz-manager-web-showcase/src/main/resources/quartz-manager-4-screenshot.png)
+Current behavior: Quartz Manager creates and manages its own scheduler bean named `quartzManagerScheduler` by default. It can coexist with other Quartz schedulers in the same application, but it does not automatically take control of an arbitrary existing scheduler instance.
 
-## QUARTZ MANAGER API
+If you want Quartz Manager to manage an existing scheduler today, disable the default scheduler configuration with `quartz-manager.quartz.enabled=false` and provide a compatible bean named `quartzManagerScheduler`. First-class existing-scheduler integration is planned on the roadmap.
-Quart-Manager exposes REST endpoints to interact with the Quartz Scheduler. This endpoints are invoked by Quartz Manager UI also.
-The REST API are documented by an OpenAPI Specification interface. 
 
-![](https://github.com/fabioformosa/quartz-manager/blob/master/quartz-manager-parent/quartz-manager-web-showcase/src/main/resources/quartz-manager-4-swagger.png)
+Your managed jobs must extend `AbstractQuartzManagerJob` so Quartz Manager can expose them as eligible jobs and stream their execution logs/progress to the UI.
 
+If you also want the browser dashboard, see [Add The UI](#add-the-ui).
 
-# HOW IT WORKS
+### 2. Add A New Scheduler To Your App
-Quartz Manager can either coexist with your existing instance of Quartz or it can import itself the Quartz dependency.   
 
-In the first case, Quartz Manager is compatible with Quartz v2.3.x . Quartz Manager creates and configures its own instance of Quartz Scheduler and it manages only the jobs and the triggers created through it. Your other jobs and triggers, running in the existing quartz instance, are out of the scope of Quartz Manager.  
+Use this path when your Spring Boot application does not have Quartz yet and you want to add a scheduler managed by Quartz Manager.
 
-In the latter case, in which there isn't an existing quartz instance, you can rely on Quartz Manager to speed up the setup of a Quartz instance, with a persistent storage also if you need it. Futhermore, if you start a bare project from scratch, just to run scheduled jobs, Quartz Manager comes with the option to enable a security layer to protect the API and the UI with an authentication model based on [JWT](https://jwt.io).
+The easiest setup is to let Quartz Manager import, initialize, and manage a Quartz Scheduler for you. Import the API starter, create jobs extending `AbstractQuartzManagerJob`, configure the package that contains your jobs, and use the REST API or UI to create jobs and triggers.
 
-**FEATURES**
+You can later add optional modules for the embedded UI, JWT security, and PostgreSQL persistence.
-* You can schedule a [Quartz Simple Trigger](http://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-05.html) which allows you to start a job now or in a specific date-time, to set it as a recurring job with a certain time frequency, unlimited or limited on the number of fires and within a certain end date.
-* You can start, pause and resume the quartz scheduler via API or clicking the start/stop buttons at the UI console.
-* Leveraging on an active web-socket, the `Quartz-Manager-UI` updates in real time the progress bar and it displays the list of the latest logs produced by your quartz job.
-* You can enable a secure layer, if your project doesn't have any, to give access at the API and the UI only to authenticated users.
-* You can enable a persistent layer, to persist the config and the progress of your trigger, in a postgresql database.
 
-# GET STARTED
+If you also want the browser dashboard, see [Add The UI](#add-the-ui).
 
-**Requirements** 
+### 3. Run Quartz Manager As A Standalone App
-  Java 9+, Spring Framework 5+ (Spring Boot 2.x)
-  
-Quart Manager is a modular library:
-* quartz-manager-starter-api (mandatory)
-* quartz-manager-starter-ui (optional)
-* quartz-manager-starter-security (optional)
-* quartz-manager-starter-persistence (optional)
 
-In order to decrease the overall configuration time for the project, all modules of the library follow the approach of Spring Starters. Thus, it's enough to import the dependency to get started.
+Use this path when you want a standalone scheduler web application instead of embedding Quartz Manager into an existing product.
 
-Below the list of the quartz-manager modules you can import.
+The `quartz-manager-web-showcase` application imports Quartz Manager API, UI, and security modules and runs with an embedded Quartz scheduler. It is useful as a ready-to-run management console, as a demo, and as a reference application.
 
-## Quartz Manager Starter API Lib
+Even in standalone mode, the jobs managed by Quartz Manager must extend `AbstractQuartzManagerJob`.
-This is the only mandatory module of the library.   
-Add the dependency, make eligible for Quart Manager the job classes and set the props in your `application.properties` file.
 
-### Step 1. Dependency
+## Features
 
-#### Maven
+- REST API for scheduler, job, trigger, and calendar management.
-```
+- Embeddable management UI provided as a webjar: import it as a Maven dependency and open `/quartz-manager-ui` in the browser.
+- Scheduler commands: start, standby, resume, and shutdown.
+- Job management: list eligible job classes, create stored jobs, update jobs, delete jobs, and trigger jobs manually.
+- Trigger management: create, inspect, reschedule, pause, resume, and unschedule triggers.
+- Trigger types: simple, cron, daily time interval, and calendar interval.
+- Calendar management: annual, cron, daily, holiday, monthly, and weekly calendars.
+- Misfire handling for supported trigger types.
+- WebSocket updates for job execution progress and logs.
+- Optional OpenAPI/Swagger UI documentation.
+- Optional JWT-based security with in-memory users.
+- Optional PostgreSQL persistence using Quartz JDBC job store and Liquibase-managed schema creation.
+
+In dependency snippets, replace `VERSION` with the version you want to use.
+
+## Requirements
+
+- Java 21+
+- Spring Boot 4.x
+- Maven 3.9+
+- Node.js and npm only if you build the frontend locally
+
+## Modules
+
+| Module | Required | Purpose |
+| --- | --- | --- |
+| `quartz-manager-starter-api` | Required | REST API, managed scheduler integration, jobs, triggers, calendars, OpenAPI support, and WebSocket updates |
+| `quartz-manager-starter-ui` | Optional | Embeddable management UI provided as a webjar |
+| `quartz-manager-starter-security` | Optional | JWT authentication for Quartz Manager API and UI |
+| `quartz-manager-starter-persistence` | Optional | PostgreSQL-backed Quartz persistence and Liquibase schema setup |
+| `quartz-manager-web-showcase` | Optional | Standalone/demo Spring Boot application using the Quartz Manager modules |
+
+## Quick Start
+
+### Path 1: Existing Spring Boot App
+
+Add the API starter:
+
+```xml
 <dependency>
   <groupId>it.fabioformosa.quartz-manager</groupId>
   <artifactId>quartz-manager-starter-api</artifactId>
-  <version>4.0.9</version>
+  <version>VERSION</version>
 </dependency>
 ```
-#### Gradle
-```
-implementation group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-api', version: '4.0.9'
-```
 
-### Step 2. Quartz Manager Job Classes
+Create jobs by extending `AbstractQuartzManagerJob`:
-The job classes, which can be eligible for triggers managed by Quartz Manager, must extend the super-class `AbstractLoggingJob`. 
-In this way, Quartz Manager is able to collect and display the outcomes at the UI console.
 
- ```
+```java
- public class SampleJob extends AbstractLoggingJob {
+import it.fabioformosa.quartzmanager.api.jobs.AbstractQuartzManagerJob;
+import it.fabioformosa.quartzmanager.api.jobs.entities.LogRecord;
+import org.quartz.JobExecutionContext;
 
-    @Override
+public class SampleJob extends AbstractQuartzManagerJob {
-    public LogRecord doIt(JobExecutionContext jobExecutionContext) {
-        ... do stuff ...
-        return new LogRecord(LogType.INFO, "Hello from QuartManagerDemo!");
-    }
 
+  @Override
+  public LogRecord doIt(JobExecutionContext context) {
+    return new LogRecord(LogRecord.LogType.INFO, "Hello from Quartz Manager");
+  }
 }
 ```
 
-### Step 3. Quartz Manager API - App Props
+Configure job discovery:
 
-| Property                           | Values   |Mandatory | Default | Description                                                               |
+```properties
-| :---                               |:---      |:---      |:---     |:--                                                                        |
+quartz-manager.jobClassPackages=com.example.jobs
-| quartz-manager.jobClassPackages    | string   | Yes      |         |java base package which contains your job classes                          |
+quartz-manager.oas.enabled=true
-| quartz-manager.oas.enabled         | boolean  | No       | false   |whether to create an OpenAPI instance to expose the OAS and the Swagger UI |
-
-
-### REST API & OpenAPI Specification
-Set the app prop `quartz-manager.oas.enabled=true` if you want to expose the OpenApi Specification of the Quartz Manager APIs.  
-Reach out the swagger-ui at the URL:
-[http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html)
-
-If your project has already an OpenAPI instance and you've set `quartz-manager.oas.enabled=true`, then make sure to add an OpenApiGroup to group the API of your application. Quart Manager exposes its API in group called "Quartz Manager". If you use OAS Annotations:
-```
-  @Bean
-  public GroupedOpenApi simplySpringDemoGroupedOpenApi() {
-    return GroupedOpenApi.builder().group("myapp").packagesToScan("com.example.myapp").build();
-  }
 ```
 
-### QUARTZ SETTINGS
+By default, Quartz Manager creates a dedicated scheduler named `quartz-manager-scheduler`. If your app already has another Quartz scheduler, both can coexist.
-Quartz Manager creates its own instance of a [Quartz Scheduler](http://www.quartz-scheduler.org/). 
 
-By default, the managed quartz instance is instantiated with the following props:
+Advanced existing-scheduler setup:
 
+```properties
+quartz-manager.quartz.enabled=false
 ```
+
+Then provide a `Scheduler` bean named `quartzManagerScheduler`. This is the current integration point; a more explicit existing-scheduler mode is planned.
+
+To add the browser dashboard to your application, see [Add The UI](#add-the-ui).
+
+### Path 2: New Scheduler In Your App
+
+Use the same API starter setup as Path 1, then let Quartz Manager create its managed scheduler.
+
+Create one or more jobs extending `AbstractQuartzManagerJob`, configure `quartz-manager.jobClassPackages`, then create stored jobs and triggers through the REST API, Swagger UI, or the dashboard.
+
+Default managed Quartz properties:
+
+```properties
 org.quartz.scheduler.instanceName=quartz-manager-scheduler
 org.quartz.threadPool.threadCount=1
 ```
 
-You can customize the configuration of the Quartz managed by Quartz Manager creating a file `managed-quartz.properties` in the classpath (`src/main/resources`).   
+To customize the managed scheduler, add `managed-quartz.properties` to your classpath.
-For further details about the quartz properties, click [here](http://www.quartz-scheduler.org/documentation/quartz-2.3.0/configuration/).
 
-#### Existing Quartz Instance
+To add the browser dashboard to your application, see [Add The UI](#add-the-ui).
-Quarz Manager imports transitively the [Quartz Scheduler library](https://mvnrepository.com/artifact/org.quartz-scheduler/quartz) ver 2.3.2.
-However, Quartz Manager can be imported even thought you've already imported the quartz scheduler lib. Indeed Quartz Manager coexists with the existing Quarz Scheduler Instance you've created in your project. In that case, Quartz Manager will manage the triggers created by it and it won't interfere with the other quartz instances.
-The prerequesite is that you've imported a quartz scheduler ver 2.3.x.
 
-You can configure the Quartz instance managed by Quartz Manager through the file `managed-quartz.properties` and your own Quartz instance through the file  `quartz.properties`.
+### Path 3: Standalone Quartz Manager App
 
-If you've created a `SchedulerFactoryBean`, tag it as `@Primary` to avoid conflicts in-type, since Quartz Manager creates another bean of the same type.
+Run the standalone showcase application when you want Quartz Manager as a ready-to-use scheduler web app.
 
-```
+```bash
-    @Primary
+git clone https://github.com/fabioformosa/quartz-manager.git
-    @Bean
+cd quartz-manager/quartz-manager-parent
-    public SchedulerFactoryBean schedulerFactoryBean( JobFactory jobFactory, Properties quartzProperties) {
+mvn install -Pbuild-webjar
-        SchedulerFactoryBean factory = new SchedulerFactoryBean();
+cd quartz-manager-web-showcase
-        ...
+mvn spring-boot:run
-        return factory;
-    }
 ```
 
+Open the dashboard:
 
-## Quartz Manager Starter UI Lib
+```text
-You can optionally import the following dependency to have the UI Dashboard to interact with the Quartz Manager API.
+http://localhost:8080/quartz-manager-ui/index.html
-
-### Dependency
-
-#### Maven
 ```
+
+Open Swagger UI when OpenAPI is enabled:
+
+```text
+http://localhost:8080/swagger-ui.html
+```
+
+Default showcase credentials:
+
+```text
+admin / admin
+```
+
+To plug in your own jobs today, add your job classes inside the cloned repository, rebuild the standalone application, and configure `quartz-manager.jobClassPackages` to include their package.
+
+A Docker-based standalone distribution is planned. It will provide a supported mechanism to attach external job classes without modifying the cloned repository.
+
+## Add The UI
+
+Add the UI starter when you want the embedded management panel in your Spring Boot app:
+
+```xml
 <dependency>
   <groupId>it.fabioformosa.quartz-manager</groupId>
   <artifactId>quartz-manager-starter-ui</artifactId>
-  <version>4.0.9</version>
+  <version>VERSION</version>
 </dependency>
 ```
-#### Gradle
+
+The UI is served from:
+
+```text
+http://localhost:8080/quartz-manager-ui/index.html
 ```
-implementation group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-ui', version: '4.0.9'
-``` 
 
-### Reach out the UI Console at URL
+## REST API
-if you run locally [http://localhost:8080/quartz-manager-ui/index.html](http://localhost:8080/quartz-manager-ui/index.html)  
 
+Quartz Manager exposes its API under `/quartz-manager`.
 
+| Area | Endpoints |
+| --- | --- |
+| Scheduler | `GET /quartz-manager/scheduler`, `POST /quartz-manager/scheduler/start`, `POST /quartz-manager/scheduler/standby`, `POST /quartz-manager/scheduler/resume`, `POST /quartz-manager/scheduler/shutdown` |
+| Job classes | `GET /quartz-manager/job-classes` |
+| Jobs | `GET /quartz-manager/jobs`, `POST /quartz-manager/jobs/{group}/{name}`, `PUT /quartz-manager/jobs/{group}/{name}`, `POST /quartz-manager/jobs/{group}/{name}/trigger`, `DELETE /quartz-manager/jobs/{group}/{name}` |
+| Triggers | `GET /quartz-manager/triggers`, `POST /quartz-manager/triggers/{group}/{name}`, `PUT /quartz-manager/triggers/{group}/{name}`, `POST /quartz-manager/triggers/{group}/{name}/pause`, `POST /quartz-manager/triggers/{group}/{name}/resume`, `DELETE /quartz-manager/triggers/{group}/{name}` |
+| Calendars | `GET /quartz-manager/calendars`, `POST /quartz-manager/calendars/{name}`, `PUT /quartz-manager/calendars/{name}`, `DELETE /quartz-manager/calendars/{name}`, `POST /quartz-manager/calendars/{name}/included-time-test` |
 
-## Quartz Manager Starter Security Lib
+Enable OpenAPI and Swagger UI with:
-
-Import this optional dependency, if you want to enable a security layer and allow the access to the REST API and UI only to authenticated users.  
-The authentication model of Quartz Manager is based on [JWT](https://jwt.io/).
-
-If you're going to import Quartz Manager in a project with an existing configuration of Spring Security, consider the following:
-- Only if your existing security is cookie-based, actually you don't need to import the module `quartz-manager-security-lib`. Simply, Quartz Manager will be under the hat of your security setup. In all other cases (based on HTTP headers, query params, etc) Quartz Manager is not aware about your auth token and it will implement its own authentication model.
-- Quartz Manager Security relies on Spring Security upon a dedicated *HTTP Spring Security Chain* applied to the base path `/quartz-manager`. So it doesn't interfere with your existing security setup.
-- Quartz Manager Security keeps simple the authentication, adopting the InMemory Model. You have to define the users (in terms of username/credentials passed via `application.properties`) can access to Quartz Manager.
-- By default, the UI attaches the JWT Token to each request in the authorization header in the "Bearer" format.
-
-Future development: the Quart Manager Security OAuth2 client.
-
-
-### Dependency
-
-#### Maven
 
+```properties
+quartz-manager.oas.enabled=true
 ```
+
+Then open:
+
+```text
+http://localhost:8080/swagger-ui.html
+```
+
+## Security
+
+Add the security starter when you want Quartz Manager API and UI protected by JWT authentication:
+
+```xml
 <dependency>
   <groupId>it.fabioformosa.quartz-manager</groupId>
   <artifactId>quartz-manager-starter-security</artifactId>
-  <version>4.0.9</version>
+  <version>VERSION</version>
 </dependency>
 ```
 
-#### Gradle
+Example configuration:
 
-```
+```yaml
-compile group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-security', version: '4.0.9'
+quartz-manager:
+  security:
+    jwt:
+      secret: "change-me"
+      expiration-in-sec: 28800
+      header-strategy:
+        enabled: true
+        header: Authorization
+      cookie-strategy:
+        enabled: false
+        cookie: AUTH-TOKEN
+    accounts:
+      in-memory:
+        enabled: true
+        users:
+          - username: admin
+            password: admin
+            roles:
+              - ADMIN
 ```
 
+Security is applied to `/quartz-manager/**`. The UI webjar path is ignored by the security filter chain, while API calls require authentication.
 
-### Quartz Manager Security Lib - App Props
+## Persistence
 
-| Property                                                    | Values   |Mandatory         | Default | Description     |
+By default, Quartz Manager uses Quartz's in-memory job store. Scheduling data is lost when the application stops.
-| :---                                                        |:---      |:---              |:---     |:--              |
-| quartz-manager.security.jwt.secret                          | string   |                  |         | Secret to sign the JWT Token |          
-| quartz-manager.security.jwt.expiration-in-sec               | number   | no               | 28800   |                              |
-| quartz-manager.security.accounts.in-memory.enabled          | boolean  | no               | true    |                              |
-|quartz-manager.security.accounts.in-memory.users[0].username | string   | yes (if enabled) |         |                              | 
-|quartz-manager.security.accounts.in-memory.users[0].password | string   | yes              |         |                              |
-|quartz-manager.security.accounts.in-memory.users[0].roles[0] | string   | yes              |         | set the value ADMIN          |
 
+Add the persistence starter when you want Quartz Manager's managed scheduler to use PostgreSQL-backed Quartz persistence:
 
-## Quart Manager Starter Persistence Lib
+```xml
-
-By default, Quartz Manager runs with a `org.quartz.simpl.RAMJobStore` that stores your managed scheduler in memory. The RAMJobStore is the simplest store and also the most performant. However it comes with the drawback that all scheduling data are lost if your applications ends or crashes. In case of a restarting of your app, you can't resume the scheduler from the point it stopped.  
-Import the Quartz Manager Persistence Module if you want to persist your scheduler data.  
-The pre-requesite is the availability of Postgresql database where Quartz Manager can store its information. You have to provide it a bare database and a postresql user granted for DDL and DML queries. About the DDL, consider that Quartz Manager Persistence will create all tables, it needs to work, at the bootstrap.
-
-### Dependency
-
-#### Maven
-
-```
 <dependency>
   <groupId>it.fabioformosa.quartz-manager</groupId>
   <artifactId>quartz-manager-starter-persistence</artifactId>
-  <version>4.0.9</version>
+  <version>VERSION</version>
 </dependency>
 ```
 
-#### Gradle
+Configure the Quartz Manager datasource:
 
-```
+```yaml
-compile group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-persistence', version: '4.0.9'
+quartz-manager:
+  persistence:
+    quartz:
+      datasource:
+        url: jdbc:postgresql://localhost:5432/quartzmanager
+        user: quartzmanager
+        password: quartzmanager
 ```
 
-### Quartz Manager Persistence Lib - App Props
+The persistence module configures Quartz `JobStoreTX`, uses the PostgreSQL delegate, and creates the required Quartz tables through Liquibase.
-
-| Property                                                    | Values   |Mandatory         | Default | Description     |
-| :---                                                        |:---      |:---              |:---     |:--              |
-| quartz-manager.persistence.quartz.datasource.url            | string   | yes              |         |eg. jdbc:postgresql://localhost:5432/quartzmanager |          
-| quartz-manager.persistence.quartz.datasource.user           | string   | yes              |         |                              |
-| quartz-manager.persistence.quartz.datasource.password       | string   | yes              |         |                              |
-
-
 
 ## Examples
 
-You can find some examples of different scenarios of projects which import Quartz Manager at the repository [quartz-manager-use-cases](https://github.com/fabioformosa/quartz-manager-use-cases)
+Example integrations are available in [quartz-manager-use-cases](https://github.com/fabioformosa/quartz-manager-use-cases).
-* *simply-spring* - tipical scenario in which you create a minimal spring project from scratch dedicated to launch your scheduled jobs. Imported libraries: Quartz Manager API, Quartz Manager UI and Quartz Manager Security.
-* *simply-spring-no-security* - as simple-spring, without the security. Imported libraries: Quartz Manager API, Quartz Manager UI.
-* *existing-security-cookie-based* - It demonstrates how Quartz Manager stays under the security of your project, in case of an auth model based on cookies. Imported libraries: Quartz Manager API, Quartz Manager UI. 
-* *existing-security-header-based* - It demonstrates how Quartz Manager Security can coexists with another Spring Security Config present in your project. Imported libraries: Quartz Manager API, Quartz Manager UI and Quartz Manager Security.
-* *existing-quartz* - It demonstrates how to Quartz Manager can coexist with a Quartz instance already present in your project Imported libraries: Quartz Manager API, Quartz Manager UI.
-* *existing-quartz-and-storage* - It demonstrates how to Quartz Manager Persistence can coexist with a Quartz instance already present in your project. Imported libraries: Quartz Manager API, Quartz Manager UI and Quartz Manager Persistence.
-* *with-persistence* - It demonstrates how to import the Quartz Manager Persistence and get created the quartz tables automatically at the bootstrap
 
+The use cases cover simple Spring applications, secured and unsecured setups, existing application security, existing Quartz scenarios, and persistence.
 
-## Limitations
+## Current Limitations
 
-> Step by step, day by day
+- Quartz Manager creates and manages its own scheduler by default. Automatic discovery and first-class management of an arbitrary existing scheduler is not yet supported.
+- Existing applications that want Quartz Manager to manage a pre-existing scheduler must currently provide it as a bean named `quartzManagerScheduler` and disable Quartz Manager's default scheduler creation.
+- Persistence currently targets PostgreSQL.
+- Cluster mode is not currently documented as a supported production mode.
+- Managed jobs must extend `AbstractQuartzManagerJob` to be eligible for job discovery and UI log/progress streaming.
 
-Quartz Manager has a work-in-progress roadmap to be full-fledged library to manage a [Quartz Scheduler](http://www.quartz-scheduler.org/).
+## Roadmap
 
-At this stage of the roadmap, these are the limitations:
+The next priorities are tracked in the [project roadmap](https://github.com/users/fabioformosa/projects/1).
-* Currently you cannot start multiple triggers or multiple jobs. At the moment a workaround is to launch multiple projects based on Quartz Manager.
-* Currently you can only start [Quartz Simple Trigger](http://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-05.html). The support to other kind of triggers will come soon: [Calendar Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/CalendarIntervalTrigger.html), [Cron Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/CronTrigger.html), [Daily Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/DailyTimeIntervalTrigger.html)
-* Currently the cluster mode is not supported
-* Currently the persistence of Quartz Manager supports only the PostgreSQL. The support to other king of triggers will come soon: MySQL, MariaDB, SqlServer, Oracle, H2.  
 
-## ROADMAP
+Planned improvements include:
 
-Take a look a the [Project Roadmap](https://github.com/users/fabioformosa/projects/1).  
+- First-class support for managing an existing Quartz Scheduler instance.
-Don't hesitate to give your feedback, your opinion is important to understand the priority.
+- Cluster mode support.
+- Additional persistence targets beyond PostgreSQL.
+- OAuth2 client support.
+- Continued UI improvements.
 
-Next steps in the roadmap are:
+## Development
-* Manage multiple triggers and jobs
-* Cluster mode support
-* Support to other all types of Quartz Triggers:  [Calendar Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/CalendarIntervalTrigger.html), [Cron Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/CronTrigger.html), [Daily Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/DailyTimeIntervalTrigger.html)
-* UI Re-styling
-* OAuth Client
-* Support to other DBMS than PostreSQL: MySQL, MariaDB, SqlServer, Oracle, H2.
 
-## Repository
+This repository contains the backend modules and the frontend application.
 
-Checkout the **master branch** to get the sourcecode of the latest released versions.  
+For local development, repository structure, build commands, and contribution details, see [quartz-manager-parent/README.md](https://github.com/fabioformosa/quartz-manager/blob/develop/quartz-manager-parent/README.md).
-Checkout the **develop branch** to take a look at the sourcecode of the incoming release.
 
-## HOW-TO CONTRIBUTE  
+## Contributing
 
-For tech details, how-to run locally the project and how-to contribute, reach out this other [README.md](https://github.com/fabioformosa/quartz-manager/blob/develop/quartz-manager-parent/README.md)
+Contributions are welcome. Open an issue to discuss bugs, questions, or feature proposals before starting larger changes.
 
-## ❤️ SUPPORT THE PROJECT ❤️
+## License
 
-Sometimes it's a matter of a kind action. You can support Quartz Manager and its continuous improvement turning on a github star on this project ⭐
+Quartz Manager is released under the [Apache License 2.0](LICENSE).
+
+## Support
+
+If Quartz Manager is useful to you, consider starring the repository to support the project.

quartz-manager-frontend/.browserslistrc

@@ -5,8 +5,8 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
+last 2 Chrome versions
-last 2 versions
+last 2 Firefox versions
-Firefox ESR
+last 2 Edge versions
-not dead
+last 2 Safari versions
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+last 2 iOS versions

quartz-manager-frontend/.eslintrc.json

@@ -28,20 +28,12 @@ Happy linting! 💖
     "plugins": [
         "eslint-plugin-import",
         "@angular-eslint/eslint-plugin",
-        "@typescript-eslint",
+        "@typescript-eslint"
-        "@typescript-eslint/tslint"
     ],
     "root": true,
     "rules": {
-        "@angular-eslint/component-class-suffix": "error",
+        "@angular-eslint/component-class-suffix": "off",
-        "@angular-eslint/component-selector": [
+        "@angular-eslint/component-selector": "off",
-            "error",
-            {
-                "type": "element",
-                "prefix": "app",
-                "style": "kebab-case"
-            }
-        ],
         "@angular-eslint/directive-class-suffix": "error",
         "@angular-eslint/directive-selector": [
             "error",
@@ -51,7 +43,6 @@ Happy linting! 💖
                 "style": "camelCase"
             }
         ],
-        "@angular-eslint/no-host-metadata-property": "error",
         "@angular-eslint/no-input-rename": "error",
         "@angular-eslint/no-inputs-metadata-property": "error",
         "@angular-eslint/no-output-rename": "error",
@@ -80,19 +71,8 @@ Happy linting! 💖
                 }
             }
         ],
-        "@typescript-eslint/member-ordering": "error",
+        "@typescript-eslint/member-ordering": "off",
-        "@typescript-eslint/naming-convention": [
+        "@typescript-eslint/naming-convention": "off",
-            "error",
-            {
-                "selector": "variable",
-                "format": [
-                    "camelCase",
-                    "UPPER_CASE"
-                ],
-                "leadingUnderscore": "forbid",
-                "trailingUnderscore": "forbid"
-            }
-        ],
         "@typescript-eslint/no-empty-function": "off",
         "@typescript-eslint/no-empty-interface": "error",
         "@typescript-eslint/no-inferrable-types": [
@@ -109,26 +89,10 @@ Happy linting! 💖
         ],
         "@typescript-eslint/no-unused-expressions": "error",
         "@typescript-eslint/prefer-function-type": "error",
-        "@typescript-eslint/quotes": [
-            "error",
-            "single"
-        ],
         "@typescript-eslint/semi": [
             "off",
             null
         ],
-        "@typescript-eslint/tslint/config": [
-            "error",
-            {
-                "rules": {
-                    "import-spacing": true,
-                    "invoke-injectable": true,
-                    "no-access-missing-member": true,
-                    "templates-use-public": true,
-                    "whitespace": true
-                }
-            }
-        ],
         "@typescript-eslint/type-annotation-spacing": "off",
         "@typescript-eslint/unified-signatures": "error",
         "brace-style": [

quartz-manager-frontend/angular.json

@@ -19,7 +19,7 @@
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "allowedCommonJsDependencies": [
-              "stompjs", "sockjs-client", "moment", "angular2-uuid"
+              "@stomp/stompjs", "stompjs", "sockjs-client", "angular2-uuid"
             ],
             "assets": [
               "src/assets",
@@ -67,18 +67,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "quartz-manager-ui:build:development"
+            "buildTarget": "quartz-manager-ui:build:development"
           },
           "configurations": {
             "production": {
-              "browserTarget": "quartz-manager-ui:build:production"
+              "buildTarget": "quartz-manager-ui:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "quartz-manager-ui:build"
+            "buildTarget": "quartz-manager-ui:build"
           }
         },
         "lint": {
@@ -89,38 +89,35 @@
           }
         }
       }
-    },
-    "quartz-manager-ui-e2e": {
-      "root": "e2e",
-      "sourceRoot": "e2e",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "quartz-manager-ui:serve"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": []
-          }
-        }
-      }
     }
   },
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "qrzmng",
-      "style": "css"
+      "style": "css",
+      "type": "component"
     },
     "@schematics/angular:directive": {
-      "prefix": "qrzmng"
+      "prefix": "qrzmng",
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   },
   "cli": {

quartz-manager-frontend/eslint.sonar.config.mjs

@@ -0,0 +1,30 @@
+import sonarjs from 'eslint-plugin-sonarjs';
+import tsParser from '@typescript-eslint/parser';
+
+export default [
+  {
+    files: ['src/**/*.ts'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: 'tsconfig.json',
+        sourceType: 'module'
+      }
+    },
+    plugins: {
+      sonarjs
+    },
+    rules: {
+      ...sonarjs.configs.recommended.rules,
+      'sonarjs/deprecation': 'off',
+      'sonarjs/no-commented-code': 'off',
+      'sonarjs/no-dead-store': 'off',
+      'sonarjs/no-incomplete-assertions': 'off',
+      'sonarjs/no-primitive-wrappers': 'off',
+      'sonarjs/no-unused-vars': 'off',
+      'sonarjs/prefer-promise-shorthand': 'off',
+      'sonarjs/todo-tag': 'off',
+      'sonarjs/unused-import': 'off'
+    }
+  }
+];

quartz-manager-frontend/jest.config.js

@@ -0,0 +1,20 @@
+const {createEsmPreset} = require('jest-preset-angular/presets');
+
+module.exports = {
+  ...createEsmPreset({
+    tsconfig: '<rootDir>/tsconfig.spec.json',
+    stringifyContentPathRegex: '\\.(html|svg)$'
+  }),
+  moduleNameMapper: {
+    '^tslib$': '<rootDir>/node_modules/tslib/tslib.es6.mjs',
+    '^rxjs$': '<rootDir>/node_modules/rxjs/dist/cjs/index.js',
+    '^rxjs/operators$': '<rootDir>/node_modules/rxjs/dist/cjs/operators/index.js',
+    '^rxjs/(.*)$': '<rootDir>/node_modules/rxjs/dist/cjs/$1',
+    '^@fortawesome/fontawesome$': '<rootDir>/node_modules/@fortawesome/fontawesome/index.js',
+    '^@fortawesome/fontawesome-free-solid$': '<rootDir>/node_modules/@fortawesome/fontawesome-free-solid/index.js'
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(@angular|@fortawesome|@stomp/rx-stomp|@stomp/stompjs|.*\\.mjs$)/)'
+  ]
+};

quartz-manager-frontend/jest.setup.ts

@@ -1 +1,3 @@
-import 'jest-preset-angular/setup-jest';
+import {setupZoneTestEnv} from 'jest-preset-angular/setup-env/zone/index.mjs';
+
+setupZoneTestEnv();

quartz-manager-frontend/karma.conf.js

@@ -1,42 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    files: [
-      
-    ],
-    preprocessors: {
-      
-    },
-    mime: {
-      'text/x-typescript': ['ts','tsx']
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
-    },
-    
-    reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'coverage-istanbul']
-              : ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
-};

quartz-manager-frontend/package.json

@@ -6,89 +6,68 @@
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.json",
     "build": "ng build --configuration production",
-    "test": "jest",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "lint": "ng lint",
-    "lint:sonar": "eslint --no-eslintrc -c .eslintrc.sonar.json \"src/**/*.ts\"",
+    "lint:sonar": "eslint -c eslint.sonar.config.mjs \"src/**/*.ts\"",
-    "lint:sonar:fix": "eslint --no-eslintrc -c .eslintrc.sonar.json \"src/**/*.ts\" --fix",
+    "lint:sonar:fix": "eslint -c eslint.sonar.config.mjs \"src/**/*.ts\" --fix"
-    "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular-material-components/datetime-picker": "15.0.0",
+    "@angular/animations": "21.2.12",
-    "@angular-material-components/moment-adapter": "15.0.0",
+    "@angular/cdk": "21.2.10",
-    "@angular/animations": "15.2.10",
+    "@angular/common": "21.2.12",
-    "@angular/cdk": "15.0.1",
+    "@angular/compiler": "21.2.12",
-    "@angular/common": "15.2.10",
+    "@angular/core": "21.2.12",
-    "@angular/compiler": "15.2.10",
+    "@angular/forms": "21.2.12",
-    "@angular/core": "15.2.10",
+    "@angular/material": "21.2.10",
-    "@angular/flex-layout": "15.0.0-beta.42",
+    "@angular/platform-browser": "21.2.12",
-    "@angular/forms": "15.2.10",
+    "@angular/platform-browser-dynamic": "21.2.12",
-    "@angular/material": "15.0.1",
+    "@angular/platform-server": "21.2.12",
-    "@angular/platform-browser": "15.2.10",
+    "@angular/router": "21.2.12",
-    "@angular/platform-browser-dynamic": "15.2.10",
+    "@auth0/angular-jwt": "5.2.0",
-    "@angular/platform-server": "15.2.10",
+    "@danielmoncada/angular-datetime-picker": "21.0.0",
-    "@angular/router": "15.2.10",
-    "@auth0/angular-jwt": "5.1.0",
     "@fortawesome/fontawesome": "^1.1.4",
     "@fortawesome/fontawesome-free-regular": "^5.0.8",
     "@fortawesome/fontawesome-free-solid": "^5.0.8",
-    "@stomp/rx-stomp": "1.2.0",
+    "@stomp/rx-stomp": "2.4.0",
-    "core-js": "2.5.1",
+    "@stomp/stompjs": "^7.2.0",
     "hammerjs": "2.0.8",
-    "moment": "^2.29.1",
-    "net": "^1.0.2",
     "roboto-fontface": "^0.10.0",
-    "rxjs": "6.5.5",
+    "rxjs": "^7.8.2",
     "sockjs-client": "^1.1.1",
     "stompjs": "^2.3.3",
-    "tslib": "~2.4.1",
+    "tslib": "^2.8.1",
-    "zone.js": "~0.12.0"
+    "uuid": "^13.0.0",
+    "zone.js": "~0.16.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.10",
+    "@angular-devkit/build-angular": "^21.2.10",
-    "@angular-devkit/core": "^15.2.10",
+    "@angular-devkit/core": "^21.2.10",
-    "@angular-eslint/builder": "15.2.1",
+    "@angular-eslint/builder": "21.3.1",
-    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@angular-eslint/eslint-plugin": "21.3.1",
-    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/eslint-plugin-template": "21.3.1",
-    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/schematics": "21.3.1",
-    "@angular-eslint/template-parser": "15.2.1",
+    "@angular-eslint/template-parser": "21.3.1",
-    "@angular/cli": "^15.2.10",
+    "@angular/cli": "^21.2.10",
-    "@angular/compiler-cli": "15.2.10",
+    "@angular/compiler-cli": "21.2.12",
-    "@angular/language-service": "15.2.10",
+    "@angular/language-service": "21.2.12",
     "@types/hammerjs": "2.0.34",
-    "@types/jasmine": "2.5.54",
+    "@types/jasmine": "^5.1.13",
-    "@types/jasminewd2": "2.0.3",
+    "@types/jest": "^30.0.0",
-    "@types/jest": "28.1.1",
+    "@types/node": "^22.13.14",
-    "@types/node": "^12.11.1",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
-    "@typescript-eslint/eslint-plugin": "5.43.0",
+    "@typescript-eslint/parser": "^8.48.1",
-    "@typescript-eslint/eslint-plugin-tslint": "^5.46.0",
+    "eslint": "^9.39.1",
-    "@typescript-eslint/parser": "5.43.0",
+    "eslint-config-prettier": "^10.1.8",
-    "codelyzer": "6.0.2",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-sonarjs": "^0.16.0",
+    "eslint-plugin-sonarjs": "^4.0.3",
-    "jasmine-core": "~4.5.0",
+    "jest": "30.4.1",
-    "jasmine-spec-reporter": "~7.0.0",
+    "jest-environment-jsdom": "^30.2.0",
-    "jest": "28.1.3",
+    "jest-preset-angular": "^16.1.5",
-    "jest-preset-angular": "~12.2.3",
+    "jsdom": "^27.3.0",
-    "karma": "~6.4.1",
-    "karma-chrome-launcher": "~3.1.1",
-    "karma-cli": "2.0.0",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
     "prettier": "^2.8.1",
     "prettier-eslint": "^15.0.1",
-    "protractor": "^7.0.0",
+    "typescript": "5.9.3"
-    "ts-node": "10.9.1",
-    "typescript": "4.9.5"
-  },
-  "jest": {
-    "preset": "jest-preset-angular",
-    "setupFilesAfterEnv": [
-      "<rootDir>/jest.setup.ts"
-    ]
   }
 }

quartz-manager-frontend/src/_test.ts

@@ -1,32 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
-declare let __karma__: any;
-declare let require: any;
-
-// Prevent Karma from running prematurely.
-__karma__.loaded = function () {};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
-// Finally, start Karma to run the tests.
-__karma__.start();

quartz-manager-frontend/src/app/app.component.html

@@ -1,8 +1,11 @@
-<div fxLayout="column" fxLayoutAlign="space-between stretch" fxFill>
+@if (isOperationsConsoleRoute()) {
-  <app-header fxFlex="0 0 auto"></app-header>
+  <router-outlet></router-outlet>
-  <div class="content flex h-100">
+} @else {
-    <router-outlet></router-outlet>
+  <div class="app-shell flex flex-column justify-space-between h-100">
+    <app-header class="flex-none"></app-header>
+    <div class="content flex h-100">
+      <router-outlet></router-outlet>
+    </div>
+    <app-footer class="flex-none"></app-footer>
   </div>
-  <app-footer fxFlex="0 0 auto"></app-footer>
+}
-</div>
-

quartz-manager-frontend/src/app/app.component.scss

@@ -2,7 +2,7 @@
   display: block;
   color: rgba(0,0,0,.54);
   font-family: Roboto,"Helvetica Neue";
-  height: 100%;
+  min-height: 100%;
 }
 
 .content {

quartz-manager-frontend/src/app/app.component.spec.ts

@@ -1,4 +1,4 @@
-import {TestBed, async, waitForAsync} from '@angular/core/testing';
+import {TestBed, waitForAsync} from '@angular/core/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
@@ -42,7 +42,7 @@ describe('AppComponent', () => {
     }).compileComponents();
   }));
 
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();

quartz-manager-frontend/src/app/app.component.ts

@@ -1,15 +1,31 @@
-import {Component} from '@angular/core';
+import {Component} from '@angular/core';
+import {Router} from '@angular/router';
 
-// I remove temporary fontawesome5 and downgrade to fontawesome4
+import fontawesome from '@fortawesome/fontawesome';
-import fontawesome from '@fortawesome/fontawesome';
+import {
-import solid from '@fortawesome/fontawesome-free-solid/';
+  faCheckCircle,
-fontawesome.library.add(solid);
+  faExclamationCircle,
+  faExclamationTriangle,
+  faPause,
+  faPlay,
+  faTimesCircle
+} from '@fortawesome/fontawesome-free-solid';
+
+fontawesome.library.add(faCheckCircle, faExclamationCircle, faExclamationTriangle, faPause, faPlay, faTimesCircle);
 
-@Component({
+@Component({
-  selector: 'app-root',
+    selector: 'app-root',
-  templateUrl: './app.component.html',
+    templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    styleUrls: ['./app.component.scss'],
+    standalone: false
 })
 
-export class AppComponent {
+export class AppComponent {
-}
+  constructor(private router: Router) {
+  }
+
+  isOperationsConsoleRoute(): boolean {
+    const url = this.router.url || '/';
+    return url === '/' || url.startsWith('/manager');
+  }
+}

quartz-manager-frontend/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, APP_INITIALIZER} from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 import {JWT_OPTIONS, JwtModule} from '@auth0/angular-jwt';
 
@@ -17,18 +17,14 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
-import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatSelectModule} from '@angular/material/select';
-import {MatSelectModule} from '@angular/material/select';
+import {MatListModule} from '@angular/material/list';
-import {MatListModule} from '@angular/material/list';
+import {MatSidenavModule} from '@angular/material/sidenav';
-import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatDialogModule} from '@angular/material/dialog';
-import {MatDialogModule} from '@angular/material/dialog';
+
-
+import {OwlDateTimeModule, OwlNativeDateTimeModule} from '@danielmoncada/angular-datetime-picker';
-import {MatNativeDateModule} from '@angular/material/core';
+
-import { NgxMatTimepickerModule, NgxMatDatetimePickerModule} from '@angular-material-components/datetime-picker';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
-
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { ManagerComponent } from './views/manager';
@@ -55,10 +51,11 @@ import {
   SchedulerService,
   ConfigService,
   getHtmlBaseUrl,
-  LogsRxWebsocketService,
+  LogsRxWebsocketService,
-  ProgressRxWebsocketService,
+  ProgressRxWebsocketService,
-  TriggerService
+  TriggerService,
-} from './services';
+  CalendarService
+} from './services';
 import { ForbiddenComponent } from './views/forbidden/forbidden.component';
 import { APP_BASE_HREF } from '@angular/common';
 import JobService from './services/job.service';
@@ -73,86 +70,80 @@ export function jwtOptionsFactory(apiService: ApiService) {
     tokenGetter: () => {
       return apiService.getToken();
     },
-    whitelistedDomains: ['localhost:8080', 'localhost:4200']
+    allowedDomains: ['localhost:8080', 'localhost:4200']
   }
 }
 
-@NgModule({
+@NgModule({ declarations: [
-  declarations: [
+        AppComponent,
-    AppComponent,
+        HeaderComponent,
-    HeaderComponent,
+        FooterComponent,
-    FooterComponent,
+        ManagerComponent,
-    ManagerComponent,
+        GithubComponent,
-    GithubComponent,
+        LoginComponent,
-    LoginComponent,
+        NotFoundComponent,
-    NotFoundComponent,
+        AccountMenuComponent,
-    AccountMenuComponent,
+        SimpleTriggerConfigComponent,
-    SimpleTriggerConfigComponent,
+        SchedulerControlComponent,
-    SchedulerControlComponent,
+        LogsPanelComponent,
-    LogsPanelComponent,
+        ProgressPanelComponent,
-    ProgressPanelComponent,
+        ForbiddenComponent,
-    ForbiddenComponent,
+        GenericErrorComponent,
-    GenericErrorComponent,
+        TriggerListComponent
-    TriggerListComponent
+    ],
-  ],
+    bootstrap: [AppComponent], imports: [BrowserAnimationsModule,
-  imports: [
+        BrowserModule,
-    BrowserAnimationsModule,
+        FormsModule,
-    BrowserModule,
+        ReactiveFormsModule,
-    FormsModule,
+        AppRoutingModule,
-    ReactiveFormsModule,
+        JwtModule.forRoot({
-    HttpClientModule,
+            jwtOptionsProvider: {
-    AppRoutingModule,
+                provide: JWT_OPTIONS,
-    JwtModule.forRoot({
+                useFactory: jwtOptionsFactory,
-      jwtOptionsProvider: {
+                deps: [ApiService]
-        provide: JWT_OPTIONS,
+            }
-        useFactory: jwtOptionsFactory,
+        }),
-        deps: [ApiService]
+        MatDialogModule,
-      }
+        MatMenuModule,
-    }),
+        MatTooltipModule,
-    MatDialogModule,
+        MatButtonModule,
-    MatMenuModule,
+        MatChipsModule,
-    MatTooltipModule,
+        MatIconModule,
-    MatButtonModule,
+        MatInputModule,
-    MatChipsModule,
+        MatSelectModule,
-    MatIconModule,
+        MatToolbarModule,
-    MatInputModule,
+        MatCardModule,
-    MatSelectModule,
+        MatListModule,
-    MatToolbarModule,
+        MatProgressSpinnerModule,
-    MatCardModule,
+        MatProgressBarModule,
-    MatListModule,
+        OwlDateTimeModule,
-    MatProgressSpinnerModule,
+        OwlNativeDateTimeModule,
-    MatProgressBarModule,
+        MatSidenavModule,
-    MatDatepickerModule, MatNativeDateModule,
+    ], providers: [
-    NgxMatMomentModule,
+        {
-    NgxMatDatetimePickerModule,
+            provide: APP_BASE_HREF,
-    MatSidenavModule,
+            useValue: getHtmlBaseUrl()
-    FlexLayoutModule
+        },
-  ],
+        {
-  providers: [
+            'provide': APP_INITIALIZER,
-    {
+            'useFactory': initUserFactory,
-      provide: APP_BASE_HREF,
+            'deps': [UserService],
-      useValue: getHtmlBaseUrl()
+            'multi': true
-    },
+        },
-    {
+        LoginGuard,
-      'provide': APP_INITIALIZER,
+        GuestGuard,
-      'useFactory': initUserFactory,
+        AdminGuard,
-      'deps': [UserService],
+        SchedulerService,
-      'multi': true
+        JobService,
-    },
+        TriggerService,
-    LoginGuard,
+        CalendarService,
-    GuestGuard,
+        ProgressRxWebsocketService,
-    AdminGuard,
+        LogsRxWebsocketService,
-    SchedulerService,
+        AuthService,
-    JobService,
+        ApiService,
-    TriggerService,
+        UserService,
-    ProgressRxWebsocketService,
+        ConfigService,
-    LogsRxWebsocketService,
+        MatIconRegistry,
-    AuthService,
+        provideHttpClient(withInterceptorsFromDi())
-    ApiService,
+    ] })
-    UserService,
-    ConfigService,
-    MatIconRegistry
-  ],
-  bootstrap: [AppComponent]
-})
 export class AppModule { }

quartz-manager-frontend/src/app/components/footer/footer.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar id="footer" style="color: rgba(255, 255, 255, 0.541176);" fxLayout="row" fxLayoutAlign="center center">
+<mat-toolbar id="footer" class="flex flex-row justify-center align-items-center" style="color: rgba(255, 255, 255, 0.541176);">
   <a href="https://github.com/fabioformosa/quartz-manager" class="flex flex-row align-items-center" style="gap: 6px">
     <div class="flex"><img src="assets/image/github.png"/></div>
     <div class="font-size-14 font-weight-500 display-block line-height-100">Quartz Manager</div>

quartz-manager-frontend/src/app/components/footer/footer.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-footer',
+    selector: 'app-footer',
-  templateUrl: './footer.component.html',
+    templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss']
+    styleUrls: ['./footer.component.scss'],
+    standalone: false
 })
 export class FooterComponent implements OnInit {
 

quartz-manager-frontend/src/app/components/github/github.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-github',
+    selector: 'app-github',
-  templateUrl: './github.component.html',
+    templateUrl: './github.component.html',
-  styleUrls: ['./github.component.scss']
+    styleUrls: ['./github.component.scss'],
+    standalone: false
 })
 export class GithubComponent implements OnInit {
 

quartz-manager-frontend/src/app/components/header/account-menu/account-menu.component.ts

@@ -7,9 +7,10 @@ import {
 import { Router } from '@angular/router';
 
 @Component({
-  selector: 'app-account-menu',
+    selector: 'app-account-menu',
-  templateUrl: './account-menu.component.html',
+    templateUrl: './account-menu.component.html',
-  styleUrls: ['./account-menu.component.scss']
+    styleUrls: ['./account-menu.component.scss'],
+    standalone: false
 })
 export class AccountMenuComponent implements OnInit {
 

quartz-manager-frontend/src/app/components/header/header.component.html

@@ -1,35 +1,39 @@
-<mat-toolbar color="primary" class="app-navbar">
+<mat-toolbar color="primary" class="app-navbar">
-  <button mat-button mat-ripple routerLink="/">
+  <button mat-button mat-ripple routerLink="/">
-<!--    <img alt="Quartz Manager" class="app-angular-logo" src="assets/image/angular-white-transparent.svg">-->
+    <!--    <img alt="Quartz Manager" class="app-angular-logo" src="assets/image/angular-white-transparent.svg">-->
-    <span>Quartz Manager</span>
+    <span>Quartz Manager</span>
-  </button>
+  </button>
-
+
-  <div class="right">
+  <div class="right">
-    <div fxFlex="1 1 auto" fxLayout="row" fxLayoutAlign="flex-end center">
+    <div class="flex flex-row flex-1 justify-flex-end align-items-center">
-      <button *ngIf="!hasSignedIn() && !noAuthenticationRequired()" routerLink="/login" mat-button mat-ripple>
+      @if (!hasSignedIn() && !noAuthenticationRequired()) {
-        <span>Login</span>
+      <button routerLink="/login" mat-button mat-ripple>
-      </button>
+        <span>Login</span>
-      <button
+      </button>
-        class="greeting-button"
+      } @if (hasSignedIn() && !noAuthenticationRequired()) {
-        *ngIf="hasSignedIn() && !noAuthenticationRequired()"
+      <button
-        mat-button mat-ripple
+        class="greeting-button"
-        [matMenuTriggerFor]="accountMenu">
+        mat-button
-        <span>Hi, {{userName()}}</span>
+        mat-ripple
-      </button>
+        [matMenuTriggerFor]="accountMenu">
-      <button
+        <span>Hi, {{ userName() }}</span>
-        class="greeting-hamburger"
+      </button>
-        *ngIf="hasSignedIn()"
+      } @if (hasSignedIn()) {
-        mat-icon-button mat-ripple
+      <button
-        [matMenuTriggerFor]="accountMenu">
+        class="greeting-hamburger"
-        <mat-icon>menu</mat-icon>
+        mat-icon-button
-      </button>
+        mat-ripple
-      <mat-menu #accountMenu
+        [matMenuTriggerFor]="accountMenu">
-        class="app-header-accountMenu"
+        <mat-icon>menu</mat-icon>
-        yposition="below"
+      </button>
-        [overlapTrigger]="false">
+      }
-        <app-account-menu ></app-account-menu>
+      <mat-menu
-      </mat-menu>
+        #accountMenu
-    </div>
+        class="app-header-accountMenu"
-  </div>
+        yposition="below"
-</mat-toolbar>
+        [overlapTrigger]="false">
-
+        <app-account-menu></app-account-menu>
+      </mat-menu>
+    </div>
+  </div>
+</mat-toolbar>

quartz-manager-frontend/src/app/components/header/header.component.ts

@@ -6,10 +6,11 @@ import {
 } from '../../services';
 import { Router } from '@angular/router';
 
-@Component({
+@Component({
-  selector: 'app-header',
+    selector: 'app-header',
-  templateUrl: './header.component.html',
+    templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
+    styleUrls: ['./header.component.scss'],
+    standalone: false
 })
 export class HeaderComponent implements OnInit {
 

quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html

@@ -1,65 +1,67 @@
-<mat-card class="flex flex-1 max-h-100">
+<mat-card class="flex flex-1 max-h-100">
-  <mat-card-header class="pb-16">
+  <mat-card-header class="pb-16">
-    <mat-card-subtitle ><b>JOB LOGS</b></mat-card-subtitle>
+    <mat-card-subtitle><b>JOB LOGS</b></mat-card-subtitle>
-  </mat-card-header>
+  </mat-card-header>
-  <mat-card-content class="flex flex-1 overflow-y-auto">
+  <mat-card-content class="flex flex-1 overflow-y-auto">
-    <div class="flex-1">
+    <div class="flex-1">
-      <div *ngIf="!selectedTriggerName && (!logs || logs.length == 0)" fxFill class="h-100" style="text-align: center;">
+      @if (!selectedTriggerName && (!logs || logs.length == 0)) {
-        <img
+      <div class="h-100 w-100" style="text-align: center">
-          src="assets/image/logs.svg"
+        <img
-          alt="no logs"
+          src="assets/image/logs.svg"
-          width="320"
+          alt="no logs"
-          style="margin-top: 6em" />
+          width="320"
-      </div>
+          style="margin-top: 6em" />
-      <div *ngIf="isWaitingForLogs()" class="waitingLogs" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="12px">
+      </div>
-        <mat-spinner diameter="36"></mat-spinner>
+      } @if (isWaitingForLogs()) {
-        <div>Waiting for logs from {{selectedTriggerName}}...</div>
+      <div
-      </div>
+        class="waitingLogs flex flex-column align-items-center justify-center gap-12">
-
+        <mat-spinner diameter="36"></mat-spinner>
-      <div id="logs" fxFill style="height: 100%">
+        <div>Waiting for logs from {{ selectedTriggerName }}...</div>
-        <div
+      </div>
-          *ngFor="let log of logs; let first = first"
+      }
-          fxLayout="row"
+
-          fxLayout.xs="column"
+      <div id="logs" class="w-100" style="height: 100%">
-          fxLayoutAlign="start"
+        @for (log of logs; track log; let first = $first) {
-          fxLayoutGap="10px">
+        <div
-          <div style="flex: 1; max-width: 300px">
+          class="log-row flex flex-row gap-10">
-            <span
+          <div style="flex: 1; max-width: 300px">
-              [ngClass]="{
+            <span
-                'animate__animated animate__zoomIn zoomIn firstLog': first
+              [ngClass]="{
-              }">
+                'animate__animated animate__zoomIn zoomIn firstLog': first
-              [{{ log.time | date : 'medium' }}]</span
+              }">
-            >
+              [{{ log.time | date : 'medium' }}]</span
-          </div>
+            >
-          <div style="flex: 1; max-width: 16px">
+          </div>
-            <span [ngClass]="{ 'animated zoomIn firstLog': first }">
+          <div style="flex: 1; max-width: 16px">
-              <i
+            <span [ngClass]="{ 'animated zoomIn firstLog': first }">
-                class="fas"
+              <i
-                [ngClass]="{
+                class="fas"
-                  'fa-check-circle green': log.type == 'INFO',
+                [ngClass]="{
-                  'fa-exclamation-triangle yellow': log.type == 'WARN',
+                  'fa-check-circle green': log.type == 'INFO',
-                  'fa-times-circle red': log.type == 'ERROR'
+                  'fa-exclamation-triangle yellow': log.type == 'WARN',
-                }"></i>
+                  'fa-times-circle red': log.type == 'ERROR'
-            </span>
+                }"></i>
-          </div>
+            </span>
-          <div style="flex: 1; max-width: 250px">
+          </div>
-            <span
+          <div style="flex: 1; max-width: 250px">
-              [ngClass]="{
+            <span
-                'animate__animated animate__zoomIn zoomIn firstLog': first
+              [ngClass]="{
-              }">
+                'animate__animated animate__zoomIn zoomIn firstLog': first
-              {{ log.threadName }}
+              }">
-            </span>
+              {{ log.threadName }}
-          </div>
+            </span>
-          <div style="flex: 1">
+          </div>
-            <span
+          <div style="flex: 1">
-              [ngClass]="{
+            <span
-                'animate__animated animate__zoomIn zoomIn firstLog': first
+              [ngClass]="{
-              }">
+                'animate__animated animate__zoomIn zoomIn firstLog': first
-              {{ log.msg }}</span
+              }">
-            >
+              {{ log.msg }}</span
-          </div>
+            >
-        </div>
+          </div>
-      </div>
+        </div>
-    </div>
+        }
-  </mat-card-content>
+      </div>
-</mat-card>
+    </div>
+  </mat-card-content>
+</mat-card>

quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.spec.ts

@@ -18,7 +18,7 @@ describe('LogsPanelComponent', () => {
 
     component.triggerKey = new TriggerKey('trigger-1', null);
 
-    expect(logsRxWebsocketService.watch).toHaveBeenCalledWith('/topic/logs/trigger-1');
+    expect(logsRxWebsocketService.watch.mock.calls[0]).toEqual(['/topic/logs/trigger-1']);
     expect(component.selectedTriggerName).toEqual('trigger-1');
     expect(component.isWaitingForLogs()).toBeTruthy();
 
@@ -57,7 +57,7 @@ describe('LogsPanelComponent', () => {
     component.triggerKey = new TriggerKey('trigger-2', null);
 
     expect(firstSubscription.unsubscribe).toHaveBeenCalled();
-    expect(logsRxWebsocketService.watch).toHaveBeenCalledWith('/topic/logs/trigger-2');
+    expect(logsRxWebsocketService.watch.mock.calls[1]).toEqual(['/topic/logs/trigger-2']);
   });
 
   it('should clear logs when the trigger changes', () => {

quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.ts

@@ -6,10 +6,11 @@ import {map} from 'rxjs/operators';
 import {TriggerKey} from '../../model/triggerKey.model';
 
 
-@Component({
+@Component({
-  selector: 'logs-panel',
+    selector: 'logs-panel',
-  templateUrl: './logs-panel.component.html',
+    templateUrl: './logs-panel.component.html',
-  styleUrls: ['./logs-panel.component.scss']
+    styleUrls: ['./logs-panel.component.scss'],
+    standalone: false
 })
 export class LogsPanelComponent implements OnInit, OnDestroy {
 

quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.html

@@ -1,43 +1,72 @@
-<!-- <div class="progress" [hidden]="progress.percentage < 0">
+<!-- <div class="progress" [hidden]="progress.percentage < 0">
-    <div class="progress-bar"
+<div class="progress-bar"
-            role="progressbar"
+  role="progressbar"
-            [ngStyle]="{width: percentageStr}">
+  [ngStyle]="{width: percentageStr}">
-        {{percentageStr}}
+  {{percentageStr}}
-    </div>
+</div>
-</div> -->
+</div> -->
-
+
-<mat-card style="padding-bottom: 0" [ngClass]="{'progress-updated': progressUpdated}">
+<mat-card
-    <mat-card-header style="padding-bottom: 16px;">
+  style="padding-bottom: 0"
-        <mat-card-subtitle><b>JOB PROGRESS</b></mat-card-subtitle>
+  [ngClass]="{ 'progress-updated': progressUpdated }">
-    </mat-card-header>
+  <mat-card-header style="padding-bottom: 16px">
-    <mat-card-content>
+    <mat-card-subtitle><b>JOB PROGRESS</b></mat-card-subtitle>
-      <div id="progressBarBox" *ngIf="progress.percentage !== -1">
+  </mat-card-header>
-          <mat-progress-bar mode="determinate" value="{{progress.percentage}}"></mat-progress-bar>
+  <mat-card-content>
-          {{percentageStr}}
+    @if (progress.percentage !== -1) {
-      </div>
+    <div id="progressBarBox">
-
+      <mat-progress-bar
-      <div id="counterBox" fxLayout="row" fxLayoutAlign="center" *ngIf="progress.timesTriggered">
+        mode="determinate"
-        <span id="timesTriggeredCounter" class="animated pulse">{{progress.timesTriggered}}</span>
+        value="{{ progress.percentage }}"></mat-progress-bar>
-        <span id="totCounter" *ngIf="progress.repeatCount > 0">&nbsp;/&nbsp;{{progress.repeatCount}} </span>
+      {{ percentageStr }}
-      </div>
+    </div>
-      <mat-divider *ngIf="progress.timesTriggered"></mat-divider>
+    } @if (progress.timesTriggered) {
-
+    <div id="counterBox" class="flex flex-row justify-center">
-      <div fxLayout="row" fxLayoutAlign="space-around center">
+      <span id="timesTriggeredCounter" class="animated pulse">{{
-          <div class="fireBox">
+        progress.timesTriggered
-            <div class="fireBoxHeader">prev fire time</div>
+      }}</span>
-            <div class="fireBoxContent"><span class="animated pulse">{{progress.previousFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span></div>
+      @if (progress.repeatCount > 0) {
-            <div class="fireBoxContent" [hidden]="progress.previousFireTime"><span>-</span></div>
+      <span id="totCounter">&nbsp;/&nbsp;{{ progress.repeatCount }} </span>
-          </div>
+      }
-          <div class="fireBox">
+    </div>
-            <div class="fireBoxHeader">next fire time</div>
+    } @if (progress.timesTriggered) {
-            <div class="fireBoxContent"><span class="animated pulse">{{progress.nextFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span></div>
+    <mat-divider></mat-divider>
-            <div class="fireBoxContent" [hidden]="progress.nextFireTime"><span>-</span></div>
+    }
-          </div>
+
-          <div class="fireBox">
+    <div class="flex flex-row align-items-center justify-space-around">
-            <div class="fireBoxHeader">final fire time</div>
+      <div class="fireBox">
-            <div class="fireBoxContent"><span class="animated pulse">{{progress.finalFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span></div>
+        <div class="fireBoxHeader">prev fire time</div>
-            <div class="fireBoxContent" [hidden]="progress.finalFireTime"><span>-</span></div>
+        <div class="fireBoxContent">
-          </div>
+          <span class="animated pulse">{{
-       </div>
+            progress.previousFireTime | date : 'dd-MM-yyyy HH:mm:ss'
-    </mat-card-content>
+          }}</span>
-</mat-card>
+        </div>
+        <div class="fireBoxContent" [hidden]="progress.previousFireTime">
+          <span>-</span>
+        </div>
+      </div>
+      <div class="fireBox">
+        <div class="fireBoxHeader">next fire time</div>
+        <div class="fireBoxContent">
+          <span class="animated pulse">{{
+            progress.nextFireTime | date : 'dd-MM-yyyy HH:mm:ss'
+          }}</span>
+        </div>
+        <div class="fireBoxContent" [hidden]="progress.nextFireTime">
+          <span>-</span>
+        </div>
+      </div>
+      <div class="fireBox">
+        <div class="fireBoxHeader">final fire time</div>
+        <div class="fireBoxContent">
+          <span class="animated pulse">{{
+            progress.finalFireTime | date : 'dd-MM-yyyy HH:mm:ss'
+          }}</span>
+        </div>
+        <div class="fireBoxContent" [hidden]="progress.finalFireTime">
+          <span>-</span>
+        </div>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.spec.ts

@@ -19,7 +19,7 @@ describe('ProgressPanelComponent', () => {
 
     component.triggerKey = new TriggerKey('trigger-1', null);
 
-    expect(progressRxWebsocketService.watch).toHaveBeenCalledWith('/topic/progress/trigger-1');
+    expect(progressRxWebsocketService.watch.mock.calls[0]).toEqual(['/topic/progress/trigger-1']);
 
     messages.next({body: JSON.stringify({percentage: 75, timesTriggered: 3})});
     jest.runOnlyPendingTimers();
@@ -48,7 +48,7 @@ describe('ProgressPanelComponent', () => {
     component.triggerKey = new TriggerKey('trigger-2', null);
 
     expect(firstSubscription.unsubscribe).toHaveBeenCalled();
-    expect(progressRxWebsocketService.watch).toHaveBeenCalledWith('/topic/progress/trigger-2');
+    expect(progressRxWebsocketService.watch.mock.calls[1]).toEqual(['/topic/progress/trigger-2']);
   });
 
   it('should reset progress when the trigger changes', () => {

quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.ts

@@ -4,10 +4,11 @@ import {TriggerKey} from '../../model/triggerKey.model';
 import {ProgressRxWebsocketService} from '../../services/progress.rx-websocket.service';
 import {map} from 'rxjs/operators';
 
-@Component({
+@Component({
-  selector: 'progress-panel',
+    selector: 'progress-panel',
-  templateUrl: './progress-panel.component.html',
+    templateUrl: './progress-panel.component.html',
-  styleUrls: ['./progress-panel.component.scss']
+    styleUrls: ['./progress-panel.component.scss'],
+    standalone: false
 })
 export class ProgressPanelComponent implements OnInit, OnDestroy {
 

quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.html

@@ -1,26 +1,40 @@
-<mat-card>
+<mat-card>
-	<mat-card-content>
+  <mat-card-content>
-    <div fxLayout="row" fxLayoutAlign="left stretch" fxLayoutGap="30px">
+    <div class="flex flex-row align-items-stretch gap-30">
-      <button id="schedulerControllerBtn" mat-raised-button class="btn btn-default large-btn" (click)="startOrPause()">
+      <button
-        <span *ngIf = "scheduler?.status === 'RUNNING'">
+        id="schedulerControllerBtn"
-          <i class="fas fa-pause red"></i>
+        mat-raised-button
-        </span>
+        class="btn btn-default large-btn"
-        <span *ngIf = "scheduler?.status === 'STOPPED' || scheduler?.status === 'PAUSED'">
+        (click)="startOrPause()">
-          <i class="fas fa-play green"></i>
+        @if (scheduler?.status === 'RUNNING') {
-        </span>
+        <span>
-      </button>
+          <i class="fas fa-pause red"></i>
-      <div fxLayout="column center">
+        </span>
-        <mat-card-subtitle style="margin: auto;"><b>SCHEDULER</b></mat-card-subtitle>
+        } @if (scheduler?.status === 'STOPPED' || scheduler?.status ===
-      </div>
+        'PAUSED') {
-      <mat-divider [vertical]="true"></mat-divider>
+        <span>
-      <div fxLayout="column" class="justify-space-between">
+          <i class="fas fa-play green"></i>
-        <div><label>Name</label></div>
+        </span>
-        <div><span id="scheduler-name">{{scheduler?.name}}</span></div>
+        }
-      </div>
+      </button>
-      <div fxLayout="column" class="justify-space-between">
+      <div class="flex flex-column align-items-center">
-        <div><label>Instance ID</label></div>
+        <mat-card-subtitle style="margin: auto"
-        <div><span id="scheduler-instance">{{scheduler?.instanceId}}</span></div>
+          ><b>SCHEDULER</b></mat-card-subtitle
-      </div>
+        >
-    </div>
+      </div>
-	</mat-card-content>
+      <mat-divider [vertical]="true"></mat-divider>
-</mat-card>
+      <div class="flex flex-column justify-space-between">
+        <div><label>Name</label></div>
+        <div>
+          <span id="scheduler-name">{{ scheduler?.name }}</span>
+        </div>
+      </div>
+      <div class="flex flex-column justify-space-between">
+        <div><label>Instance ID</label></div>
+        <div>
+          <span id="scheduler-instance">{{ scheduler?.instanceId }}</span>
+        </div>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.spec.ts

@@ -74,7 +74,7 @@ describe('SchedulerControlComponent', () => {
     expect(playIconDe).toBeTruthy();
 
     schedulerBtnDe.nativeElement.click();
-    const startSchedulerReq = httpTestingController.expectOne('/quartz-manager/scheduler/run');
+    const startSchedulerReq = httpTestingController.expectOne('/quartz-manager/scheduler/start');
     startSchedulerReq.flush(null);
     fixture.detectChanges();
 
@@ -98,7 +98,7 @@ describe('SchedulerControlComponent', () => {
     expect(pauseIconDe).toBeTruthy();
 
     schedulerBtnDe.nativeElement.click();
-    const startSchedulerReq = httpTestingController.expectOne('/quartz-manager/scheduler/pause');
+    const startSchedulerReq = httpTestingController.expectOne('/quartz-manager/scheduler/standby');
     startSchedulerReq.flush(null);
     fixture.detectChanges();
 

quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.ts

@@ -2,10 +2,11 @@ import {Component, OnInit} from '@angular/core';
 import {SchedulerService, UserService} from '../../services';
 import {Scheduler} from '../../model/scheduler.model';
 
-@Component({
+@Component({
-  selector: 'qrzmng-scheduler-control',
+    selector: 'qrzmng-scheduler-control',
-  templateUrl: './scheduler-control.component.html',
+    templateUrl: './scheduler-control.component.html',
-  styleUrls: ['./scheduler-control.component.scss']
+    styleUrls: ['./scheduler-control.component.scss'],
+    standalone: false
 })
 export class SchedulerControlComponent implements OnInit {
 
@@ -34,16 +35,16 @@ export class SchedulerControlComponent implements OnInit {
     });
   };
 
-  stopScheduler = function () {
+  stopScheduler = function () {
-    this.schedulerService.stopScheduler().subscribe((res) => {
+    this.schedulerService.shutdownScheduler().subscribe((res) => {
-      this.scheduler.status = 'STOPPED'
+      this.scheduler.status = 'STOPPED'
     }, (res) => {
       console.log(JSON.stringify(res))
     });
   };
 
-  pauseScheduler = function () {
+  pauseScheduler = function () {
-    this.schedulerService.pauseScheduler().subscribe((res) => {
+    this.schedulerService.standbyScheduler().subscribe((res) => {
       this.scheduler.status = 'PAUSED'
     }, (res) => {
       console.log(JSON.stringify(res))

quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html

@@ -1,173 +1,257 @@
-<mat-card fxFlex="1 1 auto">
+<mat-card class="trigger-config-card">
-  <mat-card-header style="padding-bottom: 16px;">
+  <mat-card-header style="padding-bottom: 16px">
     <mat-card-subtitle><b>TRIGGER DETAILS</b></mat-card-subtitle>
   </mat-card-header>
   <mat-divider></mat-divider>
-  <mat-card-content *ngIf="shouldShowTheTriggerCardContent()" style="position: relative; height: 100%">
+  @if (shouldShowTheTriggerCardContent()) {
-    <div fxLayout="column" style="overflow-y: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
+  <mat-card-content class="trigger-config-content">
-    overflow: auto;padding: 1em;">
+    <div
-      <mat-card id="noEligibleJobsAlert" *ngIf="jobs?.length === 0" style="background-color: #ff6385">
+      class="flex flex-column"
+      style="
+        overflow-y: auto;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        overflow: auto;
+        padding: 1em;
+      ">
+      @if (jobs?.length === 0) {
+      <mat-card id="noEligibleJobsAlert" style="background-color: #ff6385">
         <mat-card-content>
-          <i class="fas fa-exclamation-circle" style="color: #fff"></i>&nbsp;<strong>WARNING</strong>
+          <i class="fas fa-exclamation-circle" style="color: #fff"></i
-          Not found any eligible job classes for quartz-manager! <br/>
+          >&nbsp;<strong>WARNING</strong> Not found any eligible job classes for
-          <p style="font-size: 0.8em">Please, make sure you have extended <i>AbstractQuartzManagerJob</i> and set the
+          quartz-manager! <br />
-          app prop <i>quartz-manager.jobClassPackages</i> with the correct java package </p>
+          <p style="font-size: 0.8em">
+            Please, make sure you have extended
+            <i>AbstractQuartzManagerJob</i> and set the app prop
+            <i>quartz-manager.jobClassPackages</i> with the correct java package
+          </p>
         </mat-card-content>
       </mat-card>
-      <form name="triggerConfigForm" class="trigger-config-form" fxFlex="1 1 100%"
+      }
-            [formGroup]="simpleTriggerReactiveForm" (ngSubmit)="onSubmitTriggerConfig()">
+      <form
+        name="triggerConfigForm"
+        class="trigger-config-form"
+        class="flex-1"
+        [formGroup]="simpleTriggerReactiveForm"
+        (ngSubmit)="onSubmitTriggerConfig()">
         <div>
-          <mat-form-field
+          <mat-form-field class="full-size-input">
-            class="full-size-input">
             <mat-label>Trigger Name</mat-label>
-            <input id="triggerName"
+            <input
-                   matInput placeholder="name of the trigger (unique)"
+              id="triggerName"
-                   formControlName="triggerName" name="triggerName">
+              matInput
-            <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerName.errors?.required">
+              placeholder="name of the trigger (unique)"
-              Name is <strong>required</strong>
+              formControlName="triggerName"
-            </mat-error>
+              name="triggerName" />
+            @if
+            (simpleTriggerReactiveForm.controls.triggerName.errors?.required) {
+            <mat-error> Name is <strong>required</strong> </mat-error>
+            }
           </mat-form-field>
         </div>
-
         <div>
-          <mat-form-field
+          <mat-form-field class="full-size-input">
-            class="full-size-input"
-          >
             <mat-label>Job Class</mat-label>
-            <mat-select id="jobClass" name="jobClass" formControlName="jobClass">
+            <mat-select
-              <mat-option *ngFor="let job of jobs" [value]="job" class="font-13">
+              id="jobClass"
-                {{job}}
+              name="jobClass"
+              formControlName="jobClass">
+              @for (job of jobs; track job) {
+              <mat-option [value]="job" class="font-13">
+                {{ job }}
               </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="simpleTriggerReactiveForm.controls.jobClass.errors?.required">
+            @if (simpleTriggerReactiveForm.controls.jobClass.errors?.required) {
-              Job is <strong>required</strong>
+            <mat-error> Job is <strong>required</strong> </mat-error>
-            </mat-error>
+            }
           </mat-form-field>
         </div>
-
         <div>
-          <mat-form-field
+          <mat-form-field class="full-size-input">
-            class="full-size-input"
-          >
             <mat-label>Misfire Instruction</mat-label>
-            <mat-select id="misfireInstruction" name="misfireInstruction" formControlName="misfireInstruction">
+            <mat-select
-              <mat-option class="font-13" value="MISFIRE_INSTRUCTION_FIRE_NOW">FIRE NOW</mat-option>
+              id="misfireInstruction"
-              <mat-option class="font-13" value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT">RESCHEDULE NOW WITH
+              name="misfireInstruction"
-                EXISTING REPEAT COUNT
+              formControlName="misfireInstruction">
+              <mat-option class="font-13" value="MISFIRE_INSTRUCTION_FIRE_NOW"
+                >FIRE NOW</mat-option
+              >
+              <mat-option
+                class="font-13"
+                value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT"
+                >RESCHEDULE NOW WITH EXISTING REPEAT COUNT
               </mat-option>
-              <mat-option class="font-13" value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_REMAINING_REPEAT_COUNT">RESCHEDULE NOW WITH
+              <mat-option
-                REMAINING REPEAT COUNT
+                class="font-13"
+                value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_REMAINING_REPEAT_COUNT"
+                >RESCHEDULE NOW WITH REMAINING REPEAT COUNT
               </mat-option>
-              <mat-option class="font-13" value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_REMAINING_COUNT">RESCHEDULE NEXT WITH
+              <mat-option
-                REMAINING COUNT
+                class="font-13"
+                value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_REMAINING_COUNT"
+                >RESCHEDULE NEXT WITH REMAINING COUNT
               </mat-option>
-              <mat-option class="font-13" value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_EXISTING_COUNT">RESCHEDULE NEXT WITH EXISTING
+              <mat-option
-                COUNT
+                class="font-13"
+                value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_EXISTING_COUNT"
+                >RESCHEDULE NEXT WITH EXISTING COUNT
               </mat-option>
             </mat-select>
-            <mat-error *ngIf="simpleTriggerReactiveForm.controls.misfireInstruction.errors?.required">
+            @if
+            (simpleTriggerReactiveForm.controls.misfireInstruction.errors?.required)
+            {
+            <mat-error>
               The misfire instruction is <strong>required</strong>
             </mat-error>
+            }
           </mat-form-field>
           <div class="small" [innerHTML]="getMisfireInstructionCaption()"></div>
         </div>
-
+        <br />
-        <br/>
-
         <div formGroupName="triggerPeriod">
           <div>
-            <mat-form-field
+            <mat-form-field class="full-size-input">
-              class="full-size-input"
-            >
               <mat-label>Start Date (optional)</mat-label>
-              <input id="startDate"
+              <input
-                     matInput
+                id="startDate"
-                     [ngxMatDatetimePicker]="startDatePicker" placeholder="Choose a start date"
+                matInput
-                     formControlName="startDate" name="startDate">
+                [owlDateTime]="startDatePicker"
-              <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+                [owlDateTimeTrigger]="startDatePicker"
-              <ngx-mat-datetime-picker #startDatePicker showSpinners="true" showSeconds="true">
+                placeholder="Choose a start date"
-              </ngx-mat-datetime-picker>
+                formControlName="startDate"
+                name="startDate" />
+              <button
+                type="button"
+                class="datetime-picker-trigger"
+                mat-icon-button
+                matSuffix
+                [owlDateTimeTrigger]="startDatePicker">
+                <mat-icon>event</mat-icon>
+              </button>
+              <owl-date-time
+                #startDatePicker
+                [showSecondsTimer]="true">
+              </owl-date-time>
             </mat-form-field>
           </div>
-
           <div>
-            <mat-form-field
+            <mat-form-field class="full-size-input">
-              class="full-size-input"
-            >
               <mat-label>End Date (optional)</mat-label>
-              <input id="endDate"
+              <input
-                     matInput
+                id="endDate"
-                     [ngxMatDatetimePicker]="endDatePicker" placeholder="Choose a end date"
+                matInput
-                     formControlName="endDate" name="endDate"
+                [owlDateTime]="endDatePicker"
-              >
+                [owlDateTimeTrigger]="endDatePicker"
-              <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
+                placeholder="Choose a end date"
-              <ngx-mat-datetime-picker #endDatePicker showSpinners="true" showSeconds="true">
+                formControlName="endDate"
-              </ngx-mat-datetime-picker>
+                name="endDate" />
+              <button
+                type="button"
+                class="datetime-picker-trigger"
+                mat-icon-button
+                matSuffix
+                [owlDateTimeTrigger]="endDatePicker">
+                <mat-icon>event</mat-icon>
+              </button>
+              <owl-date-time
+                #endDatePicker
+                [showSecondsTimer]="true">
+              </owl-date-time>
             </mat-form-field>
-            <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerPeriod.errors?.invalidTriggerPeriod" style="font-size: small">
+            @if
-              the end date cannot be  <strong>before</strong> the start date
+            (simpleTriggerReactiveForm.controls.triggerPeriod.errors?.invalidTriggerPeriod)
+            {
+            <mat-error style="font-size: small">
+              the end date cannot be <strong>before</strong> the start date
             </mat-error>
+            }
           </div>
         </div>
-
         <div formGroupName="triggerRecurrence">
           <div>
-            <mat-form-field
+            <mat-form-field class="full-size-input">
-              class="full-size-input"
-            >
               <mat-label>Repeat Interval [in mills]</mat-label>
-              <input id="repeatInterval"
+              <input
-                     matInput placeholder="Repeat Interval [in mills]" type="number"
+                id="repeatInterval"
-                     formControlName="repeatInterval" name="repeatInterval"
+                matInput
-              >
+                placeholder="Repeat Interval [in mills]"
-              <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerRecurrence.errors?.invalidTriggerRecurrence">
+                type="number"
-                repeatCount and repeatInterval must be <strong>both</strong> set or unset
+                formControlName="repeatInterval"
+                name="repeatInterval" />
+              @if
+              (simpleTriggerReactiveForm.controls.triggerRecurrence.errors?.invalidTriggerRecurrence)
+              {
+              <mat-error>
+                repeatCount and repeatInterval must be <strong>both</strong> set
+                or unset
               </mat-error>
+              }
             </mat-form-field>
           </div>
           <div>
-            <mat-form-field
+            <mat-form-field class="full-size-input">
-              class="full-size-input"
-            >
               <mat-label>Repeat Count</mat-label>
-              <input id="repeatCount"
+              <input
-                     matInput placeholder="Repeat Count (-1 REPEAT INDEFINITELY)" type="number"
+                id="repeatCount"
-                     formControlName="repeatCount" name="repeatCount"
+                matInput
-              >
+                placeholder="Repeat Count (-1 REPEAT INDEFINITELY)"
-              <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerRecurrence.errors?.invalidTriggerRecurrence">
+                type="number"
-                repeatCount and repeatInterval must be <strong>both</strong> set or unset
+                formControlName="repeatCount"
+                name="repeatCount" />
+              @if
+              (simpleTriggerReactiveForm.controls.triggerRecurrence.errors?.invalidTriggerRecurrence)
+              {
+              <mat-error>
+                repeatCount and repeatInterval must be <strong>both</strong> set
+                or unset
               </mat-error>
+              }
             </mat-form-field>
-
           </div>
         </div>
-
+        <br />
-        <br/>
+        <div
-
+          class="flex flex-row align-items-center justify-space-evenly"
-        <div fxLayout="row" fxFlexAlign="space-evenly center" style="padding-bottom: 1em;">
+          style="padding-bottom: 1em">
-          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="simpleTriggerReactiveForm.enabled">
+          @if (simpleTriggerReactiveForm.enabled) {
-            <button mat-raised-button
+          <div class="flex-1" style="text-align: center">
-                    type="button"
+            <button
-                    (click)="onResetReactiveForm()">
+              mat-raised-button
+              type="button"
+              (click)="onResetReactiveForm()">
               Cancel
             </button>
           </div>
-          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="simpleTriggerReactiveForm.enabled">
+          } @if (simpleTriggerReactiveForm.enabled) {
-            <button mat-raised-button
+          <div class="flex-1" style="text-align: center">
-                    type="submit" color="primary"
+            <button
-                    [disabled]="simpleTriggerReactiveForm.invalid">
+              mat-raised-button
+              type="submit"
+              color="primary"
+              [disabled]="simpleTriggerReactiveForm.invalid">
               Submit
             </button>
           </div>
-          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="!simpleTriggerReactiveForm.enabled">
+          } @if (!simpleTriggerReactiveForm.enabled) {
-            <button mat-raised-button type="button"
+          <div class="flex-1" style="text-align: center">
-            (click)="openTriggerForm();simpleTriggerReactiveForm.controls['triggerName'].disable();">
+            <button
-            Reschedule
+              mat-raised-button
+              type="button"
+              (click)="
+                openTriggerForm();
+                simpleTriggerReactiveForm.controls['triggerName'].disable()
+              ">
+              Reschedule
             </button>
           </div>
+          }
         </div>
-
       </form>
     </div>
   </mat-card-content>
+  }
 </mat-card>

quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.scss

@@ -1,3 +1,23 @@
+:host {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+}
+
+.trigger-config-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.trigger-config-content {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
 .small{
     font-size: 0.8em;
 }

quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.spec.ts

@@ -56,7 +56,7 @@ describe('SimpleTriggerConfig', () => {
 
   it('should fetch no triggers at the init', () => {
     expect(component).toBeTruthy();
-    httpTestingController.expectNone(`${CONTEXT_PATH}/simple-triggers/my-simple-trigger`);
+    httpTestingController.expectNone(`${CONTEXT_PATH}/simple-triggers/DEFAULT/my-simple-trigger`);
   });
 
   function setInputValue(componentDe: DebugElement, inputSelector: string, value: string) {
@@ -95,7 +95,7 @@ describe('SimpleTriggerConfig', () => {
     component.openTriggerForm();
     fixture.detectChanges();
 
-    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/jobs`);
+    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/job-classes`);
     getJobsReq.flush([testJobName]);
 
     const componentDe: DebugElement = fixture.debugElement;
@@ -150,7 +150,7 @@ describe('SimpleTriggerConfig', () => {
     expect(submittedTriggerKey).toEqual(new TriggerKey(testTriggerName, null));
     flush();
 
-    const postSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/${testTriggerName}`);
+    const postSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/DEFAULT/${testTriggerName}`);
     postSimpleTriggerReq.flush(mockTrigger);
 
     expect(actualNewTrigger).toEqual(mockTrigger);
@@ -166,7 +166,7 @@ describe('SimpleTriggerConfig', () => {
     mockTrigger.jobDetailDTO = <JobDetail>{jobClassName: testJobName, description: null};
     mockTrigger.mayFireAgain = true;
     mockTrigger.misfireInstruction = MisfireInstruction.MISFIRE_INSTRUCTION_FIRE_NOW;
-    const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/${testTriggerName}`);
+    const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/DEFAULT/${testTriggerName}`);
     getSimpleTriggerReq.flush(mockTrigger);
 
     component.simpleTriggerReactiveForm.setValue({
@@ -198,7 +198,7 @@ describe('SimpleTriggerConfig', () => {
 
     submitButton.nativeElement.click();
 
-    const putSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/${testTriggerName}`);
+    const putSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/DEFAULT/${testTriggerName}`);
     putSimpleTriggerReq.flush(mockTrigger);
 
     expect(actualNewTrigger).toBeUndefined();
@@ -214,13 +214,13 @@ describe('SimpleTriggerConfig', () => {
     const mockTrigger = new Trigger();
     mockTrigger.triggerKeyDTO = mockTriggerKey;
     mockTrigger.jobDetailDTO = <JobDetail>{jobClassName: 'TestJob', description: null};
-    const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/my-simple-trigger`);
+    const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/DEFAULT/my-simple-trigger`);
     getSimpleTriggerReq.flush(mockTrigger);
 
     fixture.detectChanges();
 
     const componentDe: DebugElement = fixture.debugElement;
-    const submitButton = componentDe.query(By.css('form button'));
+    const submitButton = componentDe.query(By.css('form button:not(.datetime-picker-trigger)'));
     expect(submitButton.nativeElement.textContent.trim()).toEqual('Reschedule');
   });
 
@@ -246,7 +246,7 @@ describe('SimpleTriggerConfig', () => {
     mockTrigger.mayFireAgain = true;
     mockTrigger.misfireInstruction = MisfireInstruction.MISFIRE_INSTRUCTION_FIRE_NOW;
 
-    const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/${testTriggerName}`);
+    const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/DEFAULT/${testTriggerName}`);
     getSimpleTriggerReq.flush(mockTrigger);
 
     expect(component.simpleTriggerReactiveForm.value.triggerName).toEqual(testTriggerName);
@@ -271,7 +271,7 @@ describe('SimpleTriggerConfig', () => {
 
   it('should display the warning if there are no eligible jobs', () => {
     fixture.detectChanges();
-    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/jobs`);
+    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/job-classes`);
     getJobsReq.flush([]);
     fixture.detectChanges();
 
@@ -285,7 +285,7 @@ describe('SimpleTriggerConfig', () => {
 
   it('should not display the warning if there are eligible jobs', () => {
     fixture.detectChanges();
-    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/jobs`);
+    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/job-classes`);
     getJobsReq.flush(['sampleJob']);
     fixture.detectChanges();
 

quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts

@@ -3,16 +3,16 @@ import {SchedulerService} from '../../services';
 import {Scheduler} from '../../model/scheduler.model';
 import {SimpleTriggerCommand} from '../../model/simple-trigger.command';
 import {SimpleTrigger} from '../../model/simple-trigger.model';
-import * as moment from 'moment';
 import {TriggerKey} from '../../model/triggerKey.model';
 import JobService from '../../services/job.service';
 import {MisfireInstruction, MisfireInstructionCaption} from '../../model/misfire-instruction.model';
 import {AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidationErrors, Validators} from '@angular/forms';
 
 @Component({
-  selector: 'qrzmng-simple-trigger-config',
+    selector: 'qrzmng-simple-trigger-config',
-  templateUrl: './simple-trigger-config.component.html',
+    templateUrl: './simple-trigger-config.component.html',
-  styleUrls: ['./simple-trigger-config.component.scss']
+    styleUrls: ['./simple-trigger-config.component.scss'],
+    standalone: false
 })
 export class SimpleTriggerConfigComponent implements OnInit {
 
@@ -22,8 +22,8 @@ export class SimpleTriggerConfigComponent implements OnInit {
     triggerName: [this.trigger?.triggerKeyDTO.name, Validators.required],
     jobClass: [this.trigger?.jobDetailDTO.jobClassName, Validators.required],
     triggerPeriod: this.formBuilder.group({
-      startDate: [this.trigger?.startTime && moment(this.trigger?.startTime)],
+      startDate: [this.trigger?.startTime && new Date(this.trigger.startTime)],
-      endDate: [this.trigger?.endTime && moment(this.trigger?.endTime)]
+      endDate: [this.trigger?.endTime && new Date(this.trigger.endTime)]
     }, {validators: this._triggerPeriodValidator}),
     triggerRecurrence: this.formBuilder.group({
       repeatCount: [this.trigger?.repeatCount],
@@ -170,7 +170,7 @@ export class SimpleTriggerConfigComponent implements OnInit {
     const startDate = control.get('startDate');
     const endDate = control.get('endDate');
     if (startDate.value && endDate.value) {
-      return endDate.value.isBefore(startDate.value) ?
+      return endDate.value < startDate.value ?
         <ValidationErrors>{invalidTriggerPeriod: true} : null;
     }
     return null;
@@ -196,8 +196,8 @@ export class SimpleTriggerConfigComponent implements OnInit {
     simpleTriggerReactiveForm.jobClass = simpleTrigger.jobDetailDTO.jobClassName;
     simpleTriggerReactiveForm.triggerRecurrence.repeatCount = simpleTrigger.repeatCount || null;
     simpleTriggerReactiveForm.triggerRecurrence.repeatInterval = simpleTrigger.repeatInterval || null;
-    simpleTriggerReactiveForm.triggerPeriod.startDate = (simpleTrigger.startTime && moment(simpleTrigger.startTime)) || null;
+    simpleTriggerReactiveForm.triggerPeriod.startDate = (simpleTrigger.startTime && new Date(simpleTrigger.startTime)) || null;
-    simpleTriggerReactiveForm.triggerPeriod.endDate = (simpleTrigger.endTime && moment(simpleTrigger.endTime)) || null;
+    simpleTriggerReactiveForm.triggerPeriod.endDate = (simpleTrigger.endTime && new Date(simpleTrigger.endTime)) || null;
     simpleTriggerReactiveForm.misfireInstruction = (simpleTrigger.misfireInstruction
       && MisfireInstruction[simpleTrigger.misfireInstruction]) || null;
     return simpleTriggerReactiveForm;
@@ -207,11 +207,12 @@ export class SimpleTriggerConfigComponent implements OnInit {
     const reactiveFormValue = this.simpleTriggerReactiveForm.getRawValue();
     const simpleTriggerCommand = new SimpleTriggerCommand();
     simpleTriggerCommand.triggerName = reactiveFormValue.triggerName;
+    simpleTriggerCommand.triggerGroup = this.selectedTriggerKey?.group || 'DEFAULT';
     simpleTriggerCommand.jobClass = reactiveFormValue.jobClass;
     simpleTriggerCommand.repeatCount = reactiveFormValue.triggerRecurrence.repeatCount;
     simpleTriggerCommand.repeatInterval = reactiveFormValue.triggerRecurrence.repeatInterval;
-    simpleTriggerCommand.startDate = reactiveFormValue.triggerPeriod.startDate?.toDate();
+    simpleTriggerCommand.startDate = reactiveFormValue.triggerPeriod.startDate;
-    simpleTriggerCommand.endDate = reactiveFormValue.triggerPeriod.endDate?.toDate();
+    simpleTriggerCommand.endDate = reactiveFormValue.triggerPeriod.endDate;
     simpleTriggerCommand.misfireInstruction = reactiveFormValue.misfireInstruction;
     return simpleTriggerCommand;
   }

quartz-manager-frontend/src/app/components/trigger-list/trigger-list.component.html

@@ -1,19 +1,42 @@
-<mat-card fxFlex="1 1 auto" style="padding-left: 0; padding-right: 0">
+<mat-card class="trigger-list-card" style="padding-left: 0; padding-right: 0">
-  <mat-card-header fxLayout="row" fxLayoutAlign="space-between none" style="padding-right: 1em;" >
+  <mat-card-header
+    class="flex flex-row justify-space-between"
+    style="padding-right: 1em">
     <mat-card-subtitle><b>TRIGGERS</b></mat-card-subtitle>
-    <button *ngIf="!triggerFormIsOpen" mat-raised-button style="top: -0.5em" color="primary" (click)="onNewTriggerBtnClicked()">
+    @if (!triggerFormIsOpen) {
+    <button
+      mat-raised-button
+      style="top: -0.5em"
+      color="primary"
+      (click)="onNewTriggerBtnClicked()">
       new
     </button>
+    }
   </mat-card-header>
   <mat-divider></mat-divider>
-  <mat-card-content style="position: relative; height: 100%">
+  <mat-card-content class="trigger-list-content">
-    <mat-nav-list  style="overflow-y: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto; height: calc(100% - 3em)">
+    <mat-nav-list
-      <mat-list-item *ngFor="let triggerKey of getTriggerKeyList()" class="triggerItemList"
+      style="
-                     [ngClass]="{'selectedTrigger': selectedTrigger && selectedTrigger.name==triggerKey.name}"
+        overflow-y: auto;
-                     (click)="selectTrigger(triggerKey)"
+        position: absolute;
-      >
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        overflow: auto;
+        height: calc(100% - 3em);
+      ">
+      @for (triggerKey of getTriggerKeyList(); track triggerKey) {
+      <mat-list-item
+        class="triggerItemList"
+        [ngClass]="{
+          selectedTrigger:
+            selectedTrigger && selectedTrigger.name == triggerKey.name
+        }"
+        (click)="selectTrigger(triggerKey)">
         <a matLine>{{ triggerKey.name }}</a>
       </mat-list-item>
+      }
     </mat-nav-list>
   </mat-card-content>
 </mat-card>

quartz-manager-frontend/src/app/components/trigger-list/trigger-list.component.scss

@@ -1,3 +1,23 @@
+:host {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+}
+
+.trigger-list-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.trigger-list-content {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
 /* ===== Scrollbar CSS ===== */
 /* Firefox */
 * {

quartz-manager-frontend/src/app/components/trigger-list/trigger-list.component.ts

@@ -5,7 +5,7 @@ import {SimpleTrigger} from '../../model/simple-trigger.model';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 
 @Component({
-  template: `
+    template: `
     <div style="padding:16px">
       <h3 mat-dialog-title>Coming Soon</h3>
       <div mat-dialog-content>
@@ -15,6 +15,7 @@ import {MatDialog, MatDialogRef} from '@angular/material/dialog';
         <button mat-button (click)="closeDialog()" style="padding: 0.5em;width: 5em;">Ok</button>
       </div>
     </div>`,
+    standalone: false
 })
 // tslint:disable-next-line:component-class-suffix
 export class UnsupportedMultipleJobsDialog {
@@ -26,9 +27,10 @@ export class UnsupportedMultipleJobsDialog {
 }
 
 @Component({
-  selector: 'qrzmng-trigger-list',
+    selector: 'qrzmng-trigger-list',
-  templateUrl: './trigger-list.component.html',
+    templateUrl: './trigger-list.component.html',
-  styleUrls: ['./trigger-list.component.scss']
+    styleUrls: ['./trigger-list.component.scss'],
+    standalone: false
 })
 export class TriggerListComponent implements OnInit {
 

quartz-manager-frontend/src/app/guards/admin.guard.ts

@@ -1,10 +1,10 @@
 import {Injectable} from '@angular/core';
-import {Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
+import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import {UserService} from '../services';
 import {Observable} from 'rxjs';
 
 @Injectable()
-export class AdminGuard implements CanActivate {
+export class AdminGuard  {
   constructor(private router: Router, private userService: UserService) {
   }
 

quartz-manager-frontend/src/app/guards/guest.guard.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { Router, CanActivate } from '@angular/router';
+import { Router } from '@angular/router';
 import { UserService } from '../services';
 import { Observable } from 'rxjs';
 
 @Injectable()
-export class GuestGuard implements CanActivate {
+export class GuestGuard  {
 
   constructor(private router: Router, private userService: UserService) {}
 

quartz-manager-frontend/src/app/guards/login.guard.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { Router, CanActivate } from '@angular/router';
+import { Router } from '@angular/router';
 import { UserService } from '../services';
 import { Observable } from 'rxjs';
 
 @Injectable()
-export class LoginGuard implements CanActivate {
+export class LoginGuard  {
 
   constructor(private router: Router, private userService: UserService) {}
 

quartz-manager-frontend/src/app/model/calendar.model.ts

@@ -0,0 +1,24 @@
+import {TriggerKey} from './triggerKey.model';
+
+export type CalendarType = 'ANNUAL' | 'CRON' | 'DAILY' | 'HOLIDAY' | 'MONTHLY' | 'WEEKLY';
+
+export class QuartzCalendar {
+  name: string;
+  type: CalendarType = 'WEEKLY';
+  description: string;
+  cronExpression: string;
+  timeZone: string;
+  rangeStartingTime: string;
+  rangeEndingTime: string;
+  invertTimeRange: boolean;
+  excludedDaysOfWeek: number[];
+  excludedDaysOfMonth: number[];
+  excludedDates: Date[];
+  triggerKeys: TriggerKey[];
+}
+
+export class CalendarIncludedTimeTest {
+  time: Date;
+  included: boolean;
+  nextIncludedTime: Date;
+}

quartz-manager-frontend/src/app/model/misfire-instruction.model.ts

@@ -50,7 +50,8 @@ export const MisfireInstructionCaption = new Map<number, string>([
     `In case of misfire event, the trigger is re-scheduled to the next scheduled time after 'now'
     with the repeat count set to what it would be if it had not missed any firings.<br/>
     Use this policy if no jobs must run after the end date time.<br/>
-    <strong>Warning</strong> The actual number of job executions could be less than initially set, because the misfired trigger are ignored.<br/>
+    <strong>Warning</strong> The actual number of job executions could be less than initially set,
+    because the misfired trigger are ignored.<br/>
     This policy could cause the Trigger to go directly to the 'COMPLETE' state if all fire-times where missed.`
   ]
 ]);

quartz-manager-frontend/src/app/model/scheduled-job.command.ts

@@ -0,0 +1,7 @@
+export class ScheduledJobCommand {
+  jobClass: string;
+  description: string;
+  durable: boolean;
+  requestsRecovery: boolean;
+  jobDataMap: {[key: string]: unknown};
+}

quartz-manager-frontend/src/app/model/scheduled-job.model.ts

@@ -0,0 +1,12 @@
+import {JobKeyModel} from './jobKey.model';
+import {TriggerKey} from './triggerKey.model';
+
+export class ScheduledJob {
+  jobKeyDTO: JobKeyModel;
+  jobClassName: string;
+  description: string;
+  durable: boolean;
+  requestsRecovery: boolean;
+  jobDataMap: {[key: string]: unknown};
+  triggerKeys: TriggerKey[];
+}

quartz-manager-frontend/src/app/model/scheduler.model.ts

@@ -5,6 +5,14 @@ export class Scheduler {
   instanceId: string;
   status: string;
   triggerKeys: TriggerKey[];
+  quartzVersion: string;
+  jobStoreClass: string;
+  jobStoreSupportsPersistence: boolean;
+  clustered: boolean;
+  threadPoolClass: string;
+  threadPoolSize: number;
+  runningSince: string;
+  numberOfJobsExecuted: number;
 
   constructor(name: string, instanceId: string, status: string, triggerKeys: TriggerKey[]) {
     this.name = name;

quartz-manager-frontend/src/app/model/simple-trigger.command.ts

@@ -1,9 +1,12 @@
 export class SimpleTriggerCommand {
   triggerName: string;
+  triggerGroup: string;
   jobClass: string;
+  jobKey: {group: string; name: string};
   startDate: Date;
   endDate: Date;
   repeatCount: number;
   repeatInterval: number;
   misfireInstruction: string;
+  jobDataMap: {[key: string]: unknown};
 }

quartz-manager-frontend/src/app/model/simple-trigger.form.ts

@@ -1,10 +1,8 @@
-import {Moment} from 'moment/moment';
-
 export class SimpleTriggerForm {
   triggerName: string;
   jobClass: string;
-  startDate: Moment;
+  startDate: Date;
-  endDate: Moment;
+  endDate: Date;
   repeatCount: number;
   repeatInterval: number;
   misfireInstruction: string;

quartz-manager-frontend/src/app/model/trigger-command.model.ts

@@ -0,0 +1,26 @@
+import {JobKeyModel} from './jobKey.model';
+
+export type TriggerType = 'SIMPLE' | 'CRON' | 'DAILY_TIME_INTERVAL' | 'CALENDAR_INTERVAL';
+
+export class TriggerCommand {
+  triggerType: TriggerType = 'SIMPLE';
+  jobClass: string;
+  jobKey: JobKeyModel;
+  startDate: Date;
+  endDate: Date;
+  description: string;
+  priority: number;
+  calendarName: string;
+  misfireInstruction: string;
+  jobDataMap: {[key: string]: unknown};
+  repeatCount: number;
+  repeatInterval: number;
+  repeatIntervalUnit: string;
+  cronExpression: string;
+  timeZone: string;
+  startTimeOfDay: string;
+  endTimeOfDay: string;
+  daysOfWeek: number[];
+  preserveHourOfDayAcrossDaylightSavings: boolean;
+  skipDayIfHourDoesNotExist: boolean;
+}

quartz-manager-frontend/src/app/model/trigger.model.ts

@@ -11,7 +11,22 @@ export class Trigger {
   finalFireTime: Date;
   misfireInstruction: number;
   nextFireTime: Date;
+  previousFireTime: Date;
+  type: string;
+  state: string;
+  calendarName: string;
   jobKeyDTO: JobKeyModel;
   jobDetailDTO: JobDetail = new JobDetail();
   mayFireAgain: boolean;
+  jobDataMap: {[key: string]: unknown};
+  cronExpression: string;
+  timeZone: string;
+  repeatInterval: number;
+  repeatCount: number;
+  repeatIntervalUnit: string;
+  startTimeOfDay: string;
+  endTimeOfDay: string;
+  daysOfWeek: number[];
+  preserveHourOfDayAcrossDaylightSavings: boolean;
+  skipDayIfHourDoesNotExist: boolean;
 }

quartz-manager-frontend/src/app/polyfills.ts

@@ -1,74 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
- */
-
-/** *************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following to support `@angular/animation`. */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
-/** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
-
-
-
-/** ALL Firefox browsers require the following to support `@angular/animation`. **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
-
-/** *************************************************************************************************
- * Zone JS is required by Angular itself.
- */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
-
-
-/** *************************************************************************************************
- * APPLICATION IMPORTS
- */
-
-/**
- * Date, currency, decimal and percent pipes.
- * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
- */
-// import 'intl';  // Run `npm install --save intl`.
-
-/** *************************************************************************************************
- * MATERIAL 2
- */
-import 'hammerjs/hammer';

quartz-manager-frontend/src/app/services/api.service.ts

@@ -1,4 +1,4 @@
-import {HttpClient, HttpHeaders, HttpResponse, HttpRequest, HttpEventType, HttpParams} from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpResponse, HttpRequest, HttpEventType, HttpParams } from '@angular/common/http';
 import {Router} from '@angular/router';
 import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';

quartz-manager-frontend/src/app/services/auth.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {HttpHeaders, HttpResponse} from '@angular/common/http';
+import { HttpHeaders, HttpResponse } from '@angular/common/http';
 import {ApiService} from './api.service';
 import {UserService} from './user.service';
 import {ConfigService} from './config.service';

quartz-manager-frontend/src/app/services/calendar.service.spec.ts

@@ -0,0 +1,36 @@
+import {jest} from '@jest/globals';
+import {CalendarService} from './calendar.service';
+
+describe('CalendarService', () => {
+  let apiService: any;
+  let calendarService: CalendarService;
+
+  beforeEach(() => {
+    apiService = {
+      get: jest.fn(),
+      post: jest.fn(),
+      put: jest.fn(),
+      delete: jest.fn()
+    };
+    calendarService = new CalendarService(apiService);
+  });
+
+  it('uses calendar registry endpoints', () => {
+    const calendar: any = {name: 'weekends', type: 'WEEKLY'};
+    const time = new Date('2026-05-12T12:00:00.000Z');
+
+    calendarService.fetchCalendars();
+    calendarService.getCalendar('weekends');
+    calendarService.createCalendar('weekends', calendar);
+    calendarService.updateCalendar('weekends', calendar);
+    calendarService.deleteCalendar('weekends');
+    calendarService.testIncludedTime('weekends', time);
+
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/calendars');
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/calendars/weekends');
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/calendars/weekends', calendar);
+    expect(apiService.put).toHaveBeenCalledWith('/quartz-manager/calendars/weekends', calendar);
+    expect(apiService.delete).toHaveBeenCalledWith('/quartz-manager/calendars/weekends');
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/calendars/weekends/included-time-test', {time});
+  });
+});

quartz-manager-frontend/src/app/services/calendar.service.ts

@@ -0,0 +1,34 @@
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {ApiService} from './api.service';
+import {CONTEXT_PATH, getBaseUrl} from './config.service';
+import {CalendarIncludedTimeTest, QuartzCalendar} from '../model/calendar.model';
+
+@Injectable()
+export class CalendarService {
+  constructor(private apiService: ApiService) {}
+
+  fetchCalendars = (): Observable<QuartzCalendar[]> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/calendars`);
+  }
+
+  getCalendar = (name: string): Observable<QuartzCalendar> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/calendars/${name}`);
+  }
+
+  createCalendar = (name: string, calendar: QuartzCalendar): Observable<QuartzCalendar> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/calendars/${name}`, calendar);
+  }
+
+  updateCalendar = (name: string, calendar: QuartzCalendar): Observable<QuartzCalendar> => {
+    return this.apiService.put(getBaseUrl() + `${CONTEXT_PATH}/calendars/${name}`, calendar);
+  }
+
+  deleteCalendar = (name: string): Observable<void> => {
+    return this.apiService.delete(getBaseUrl() + `${CONTEXT_PATH}/calendars/${name}`);
+  }
+
+  testIncludedTime = (name: string, time: Date): Observable<CalendarIncludedTimeTest> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/calendars/${name}/included-time-test`, {time});
+  }
+}

quartz-manager-frontend/src/app/services/index.ts

@@ -5,7 +5,8 @@ export * from './auth.service';
 export * from './scheduler.service';
 export * from './progress.rx-websocket.service';
 export * from './logs.rx-websocket.service';
-export * from './trigger.service'
+export * from './trigger.service'
-export * from './job.service'
+export * from './calendar.service'
+export * from './job.service'
 
 

quartz-manager-frontend/src/app/services/job.service.spec.ts

@@ -0,0 +1,46 @@
+import JobService from './job.service';
+import {ScheduledJob} from '../model/scheduled-job.model';
+import {jest} from '@jest/globals';
+
+describe('JobService', () => {
+  let apiService: any;
+  let jobService: JobService;
+
+  beforeEach(() => {
+    apiService = {
+      get: jest.fn(),
+      post: jest.fn(),
+      put: jest.fn(),
+      delete: jest.fn()
+    };
+    jobService = new JobService(apiService);
+  });
+
+  it('uses job class and scheduled job endpoints', () => {
+    const job = new ScheduledJob();
+    const command = {
+      jobClass: 'SampleJob',
+      description: '',
+      durable: true,
+      requestsRecovery: false,
+      jobDataMap: {}
+    };
+    job.jobKeyDTO = {group: 'DEFAULT', name: 'sampleJob'};
+
+    jobService.fetchJobs();
+    jobService.fetchScheduledJobs();
+    jobService.getScheduledJob('DEFAULT', 'sampleJob');
+    jobService.createJob('DEFAULT', 'sampleJob', command);
+    jobService.updateJob('DEFAULT', 'sampleJob', command);
+    jobService.triggerJob(job);
+    jobService.deleteJob(job);
+
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/job-classes');
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/jobs');
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/jobs/DEFAULT/sampleJob');
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/jobs/DEFAULT/sampleJob', command);
+    expect(apiService.put).toHaveBeenCalledWith('/quartz-manager/jobs/DEFAULT/sampleJob', command);
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/jobs/DEFAULT/sampleJob/trigger', {});
+    expect(apiService.delete).toHaveBeenCalledWith('/quartz-manager/jobs/DEFAULT/sampleJob');
+  });
+});

quartz-manager-frontend/src/app/services/job.service.ts

@@ -2,6 +2,8 @@ import {Injectable} from '@angular/core';
 import {ApiService} from './api.service';
 import {CONTEXT_PATH, getBaseUrl} from './config.service';
 import {Observable} from 'rxjs';
+import {ScheduledJob} from '../model/scheduled-job.model';
+import {ScheduledJobCommand} from '../model/scheduled-job.command';
 
 @Injectable()
 export default class JobService {
@@ -12,7 +14,31 @@ export default class JobService {
   }
 
   fetchJobs = (): Observable<string[]> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/job-classes`)
+  }
+
+  fetchScheduledJobs = (): Observable<ScheduledJob[]> => {
     return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/jobs`)
   }
 
+  getScheduledJob = (group: string, name: string): Observable<ScheduledJob> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/jobs/${group || 'DEFAULT'}/${name}`)
+  }
+
+  createJob = (group: string, name: string, command: ScheduledJobCommand): Observable<ScheduledJob> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/jobs/${group || 'DEFAULT'}/${name}`, command)
+  }
+
+  updateJob = (group: string, name: string, command: ScheduledJobCommand): Observable<ScheduledJob> => {
+    return this.apiService.put(getBaseUrl() + `${CONTEXT_PATH}/jobs/${group || 'DEFAULT'}/${name}`, command)
+  }
+
+  triggerJob = (job: ScheduledJob): Observable<void> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/jobs/${job.jobKeyDTO.group}/${job.jobKeyDTO.name}/trigger`, {})
+  }
+
+  deleteJob = (job: ScheduledJob): Observable<void> => {
+    return this.apiService.delete(getBaseUrl() + `${CONTEXT_PATH}/jobs/${job.jobKeyDTO.group}/${job.jobKeyDTO.name}`)
+  }
+
 }

quartz-manager-frontend/src/app/services/rx-stomp.service.ts

@@ -1,5 +1,4 @@
-import {RxStomp} from '@stomp/rx-stomp';
+import {RxStomp, RxStompConfig} from '@stomp/rx-stomp';
-import {RxStompConfig} from '@stomp/rx-stomp/esm6/rx-stomp-config';
 
 export class RxStompService extends RxStomp {
 

quartz-manager-frontend/src/app/services/scheduler.service.spec.ts

@@ -0,0 +1,43 @@
+import {SchedulerService} from './scheduler.service';
+import {SimpleTriggerCommand} from '../model/simple-trigger.command';
+import {jest} from '@jest/globals';
+
+describe('SchedulerService', () => {
+  let apiService: any;
+  let schedulerService: SchedulerService;
+
+  beforeEach(() => {
+    apiService = {
+      get: jest.fn(),
+      post: jest.fn(),
+      put: jest.fn()
+    };
+    schedulerService = new SchedulerService(apiService);
+  });
+
+  it('uses POST scheduler lifecycle endpoints', () => {
+    schedulerService.startScheduler();
+    schedulerService.standbyScheduler();
+    schedulerService.resumeScheduler();
+    schedulerService.shutdownScheduler();
+
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/scheduler/start', {});
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/scheduler/standby', {});
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/scheduler/resume', {});
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/scheduler/shutdown', {});
+  });
+
+  it('uses grouped simple trigger endpoints', () => {
+    const command = new SimpleTriggerCommand();
+    command.triggerGroup = 'DEFAULT';
+    command.triggerName = 'sampleTrigger';
+
+    schedulerService.getSimpleTriggerConfig(command.triggerName, command.triggerGroup);
+    schedulerService.saveSimpleTriggerConfig(command);
+    schedulerService.updateSimpleTriggerConfig(command);
+
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/simple-triggers/DEFAULT/sampleTrigger');
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/simple-triggers/DEFAULT/sampleTrigger', command);
+    expect(apiService.put).toHaveBeenCalledWith('/quartz-manager/simple-triggers/DEFAULT/sampleTrigger', command);
+  });
+});

quartz-manager-frontend/src/app/services/scheduler.service.ts

@@ -14,20 +14,20 @@ export class SchedulerService {
     private apiService: ApiService
   ) { }
 
-  startScheduler = (): Observable<void> => {
+  startScheduler = (): Observable<void> => {
-    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/run`);
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/scheduler/start`, {});
-  }
+  }
-
+
-  stopScheduler = (): Observable<void> => {
+  shutdownScheduler = (): Observable<void> => {
-    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/stop`);
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/scheduler/shutdown`, {});
-  }
+  }
-
+
-  pauseScheduler = (): Observable<void> => {
+  standbyScheduler = (): Observable<void> => {
-    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/pause`);
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/scheduler/standby`, {});
-  }
+  }
-
+
-  resumeScheduler = (): Observable<void> => {
+  resumeScheduler = (): Observable<void> => {
-    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/resume`);
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/scheduler/resume`, {});
   }
 
   getStatus = () => {
@@ -38,17 +38,17 @@ export class SchedulerService {
     return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler`);
   }
 
-  getSimpleTriggerConfig = (triggerName: string): Observable<Trigger> => {
+  getSimpleTriggerConfig = (triggerName: string, triggerGroup = 'DEFAULT'): Observable<Trigger> => {
-    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${triggerName}`);
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${triggerGroup}/${triggerName}`);
-  }
+  }
-
+
-  saveSimpleTriggerConfig = (config: SimpleTriggerCommand) => {
+  saveSimpleTriggerConfig = (config: SimpleTriggerCommand) => {
-    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${config.triggerName}`, config)
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${config.triggerGroup}/${config.triggerName}`, config)
-  }
+  }
-
+
-  updateSimpleTriggerConfig = (config: SimpleTriggerCommand) => {
+  updateSimpleTriggerConfig = (config: SimpleTriggerCommand) => {
-    return this.apiService.put(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${config.triggerName}`, config)
+    return this.apiService.put(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${config.triggerGroup}/${config.triggerName}`, config)
-  }
+  }
 
 
 }

quartz-manager-frontend/src/app/services/trigger.service.spec.ts

@@ -0,0 +1,42 @@
+import {TriggerService} from './trigger.service';
+import {TriggerKey} from '../model/triggerKey.model';
+import {jest} from '@jest/globals';
+
+describe('TriggerService', () => {
+  let apiService: any;
+  let triggerService: TriggerService;
+
+  beforeEach(() => {
+    apiService = {
+      get: jest.fn(),
+      post: jest.fn(),
+      put: jest.fn(),
+      delete: jest.fn()
+    };
+    triggerService = new TriggerService(apiService);
+  });
+
+  it('uses grouped trigger lifecycle endpoints', () => {
+    const triggerKey = new TriggerKey('sampleTrigger', 'DEFAULT');
+
+    triggerService.getTrigger(triggerKey);
+    triggerService.pauseTrigger(triggerKey);
+    triggerService.resumeTrigger(triggerKey);
+    triggerService.unscheduleTrigger(triggerKey);
+
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/triggers/DEFAULT/sampleTrigger');
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/triggers/DEFAULT/sampleTrigger/pause', {});
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/triggers/DEFAULT/sampleTrigger/resume', {});
+    expect(apiService.delete).toHaveBeenCalledWith('/quartz-manager/triggers/DEFAULT/sampleTrigger');
+  });
+
+  it('uses generic trigger create and update endpoints', () => {
+    const command: any = {triggerType: 'CRON', cronExpression: '0 0/5 * * * ?'};
+
+    triggerService.saveTrigger('OPS', 'cronTrigger', command);
+    triggerService.updateTrigger('OPS', 'cronTrigger', command);
+
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/triggers/OPS/cronTrigger', command);
+    expect(apiService.put).toHaveBeenCalledWith('/quartz-manager/triggers/OPS/cronTrigger', command);
+  });
+});

quartz-manager-frontend/src/app/services/trigger.service.ts

@@ -4,6 +4,7 @@ import {Observable} from 'rxjs';
 import {Trigger} from '../model/trigger.model';
 import {TriggerKey} from '../model/triggerKey.model';
 import {CONTEXT_PATH, getBaseUrl} from './config.service';
+import {TriggerCommand} from '../model/trigger-command.model';
 
 @Injectable()
 export class TriggerService {
@@ -16,5 +17,28 @@ export class TriggerService {
     return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/triggers`);
   }
 
+  getTrigger = (triggerKey: TriggerKey): Observable<Trigger> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/triggers/${triggerKey.group || 'DEFAULT'}/${triggerKey.name}`);
+  }
+
+  saveTrigger = (group: string, name: string, config: TriggerCommand): Observable<Trigger> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/triggers/${group || 'DEFAULT'}/${name}`, config);
+  }
+
+  updateTrigger = (group: string, name: string, config: TriggerCommand): Observable<Trigger> => {
+    return this.apiService.put(getBaseUrl() + `${CONTEXT_PATH}/triggers/${group || 'DEFAULT'}/${name}`, config);
+  }
+
+  pauseTrigger = (triggerKey: TriggerKey): Observable<void> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/triggers/${triggerKey.group || 'DEFAULT'}/${triggerKey.name}/pause`, {});
+  }
+
+  resumeTrigger = (triggerKey: TriggerKey): Observable<void> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/triggers/${triggerKey.group || 'DEFAULT'}/${triggerKey.name}/resume`, {});
+  }
+
+  unscheduleTrigger = (triggerKey: TriggerKey): Observable<void> => {
+    return this.apiService.delete(getBaseUrl() + `${CONTEXT_PATH}/triggers/${triggerKey.group || 'DEFAULT'}/${triggerKey.name}`);
+  }
 
 }

quartz-manager-frontend/src/app/services/user.service.ts

@@ -2,9 +2,10 @@ import {Injectable} from '@angular/core';
 import {ApiService} from './api.service';
 import {ConfigService} from './config.service';
 
-import {map} from 'rxjs/operators'
+import {map} from 'rxjs/operators'
-import {HttpErrorResponse} from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
-import {Router} from '@angular/router';
+import {Router} from '@angular/router';
+import {firstValueFrom} from 'rxjs';
 
 @Injectable()
 export class UserService {
@@ -22,7 +23,7 @@ export class UserService {
   refreshToken() {
     this.apiService.get(this.config.refresh_token_url).subscribe(res => {
         if (res.accessToken !== null) {
-          return this.getUserInfo().toPromise()
+          return firstValueFrom(this.getUserInfo())
             .then(user => {
               this.currentUser = user;
             });

quartz-manager-frontend/src/app/views/error/genericError.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="column" fxLayoutAlign="center" style="text-align: center">
+<div class="flex flex-column justify-center" style="text-align: center">
   <div>
     <div>
       <p style="font-size: 4em; margin-bottom: 0">Unexpected Error</p>

quartz-manager-frontend/src/app/views/error/genericError.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'qrzmng-generic-error',
+    selector: 'qrzmng-generic-error',
-  templateUrl: './genericError.component.html',
+    templateUrl: './genericError.component.html',
-  styleUrls: ['./genericError.component.css']
+    styleUrls: ['./genericError.component.css'],
+    standalone: false
 })
 export class GenericErrorComponent implements OnInit {
 

quartz-manager-frontend/src/app/views/forbidden/forbidden.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="column" fxLayoutAlign="center" style="text-align: center">
+<div class="flex flex-column justify-center" style="text-align: center">
   <div>
     <div>
       <p style="font-size: 4em; margin-bottom: 0">Forbidden - Access Senied</p>

quartz-manager-frontend/src/app/views/forbidden/forbidden.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-forbidden',
+    selector: 'app-forbidden',
-  templateUrl: './forbidden.component.html',
+    templateUrl: './forbidden.component.html',
-  styleUrls: ['./forbidden.component.css']
+    styleUrls: ['./forbidden.component.css'],
+    standalone: false
 })
 export class ForbiddenComponent implements OnInit {
 

quartz-manager-frontend/src/app/views/login/login.component.html

@@ -1,32 +1,76 @@
-<div class="content" fxLayout="row" fxLayoutAlign="center" style="padding-bottom:160px;">
+<section class="login-shell">
-
+  <div class="login-hero" aria-hidden="true">
-    <mat-card elevation="5" fxFlex>
+    <div class="brand">
-
+      <span class="brand-mark">QM</span>
-      <mat-card-subtitle>
+      <div>
-        <h2>Quartz Manager</h2>
+        <h1>Quartz Manager</h1>
-      </mat-card-subtitle>
+        <p>Scheduler operations console</p>
-
+      </div>
-      <mat-card-title>
+    </div>
-        <h2>{{title}}</h2>
+
-      </mat-card-title>
+    <div class="hero-card">
-
+      <span class="card-title">Operational View</span>
-      <mat-card-content>
+      <div class="status-row">
-
+        <span class="pulse"></span>
-        <p [class]="notification.msgType" *ngIf="notification">{{notification.msgBody}}</p>
+        <span>Jobs, triggers, logs and live execution state</span>
-
+      </div>
-        <form *ngIf="!submitted" [formGroup]="form" (ngSubmit)="onSubmit()" #loginForm="ngForm">
+      <div class="metric-grid">
-          <mat-form-field>
+        <div>
-            <input matInput formControlName="username" required placeholder="user">
+          <strong>01</strong>
-          </mat-form-field>
+          <span>Secure entry</span>
-          <mat-form-field>
+        </div>
-            <input matInput formControlName="password" required type="password" placeholder="password">
+        <div>
-          </mat-form-field>
+          <strong>24/7</strong>
-          <button type="submit" [disabled]="!loginForm.form.valid" mat-raised-button color="primary">Login</button>
+          <span>Runtime visibility</span>
-        </form>
+        </div>
-
+      </div>
-        <mat-spinner *ngIf="submitted" mode="indeterminate"></mat-spinner>
+    </div>
-      </mat-card-content>
+  </div>
-
+
-    </mat-card>
+  <mat-card class="login-card">
-
+    <mat-card-content>
-</div>
+      <div class="form-header">
+        <span class="eyebrow">Welcome back</span>
+        <h2>{{ title }}</h2>
+        <p>Sign in to manage scheduler activity and inspect runtime signals.</p>
+      </div>
+
+      @if (notification) {
+      <p class="notification {{ notification.msgType }}">{{ notification.msgBody }}</p>
+      } @if (!submitted) {
+      <form [formGroup]="form" (ngSubmit)="onSubmit()" #loginForm="ngForm">
+        <mat-form-field appearance="outline">
+          <mat-label>Username</mat-label>
+          <input
+            matInput
+            formControlName="username"
+            required
+            autocomplete="username" />
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>Password</mat-label>
+          <input
+            matInput
+            formControlName="password"
+            required
+            type="password"
+            autocomplete="current-password" />
+        </mat-form-field>
+        <button
+          class="login-button"
+          type="submit"
+          [disabled]="!loginForm.form.valid"
+          mat-raised-button
+          color="primary">
+          Login
+        </button>
+      </form>
+      } @if (submitted) {
+      <div class="loading-state">
+        <mat-spinner mode="indeterminate"></mat-spinner>
+        <span>Checking credentials...</span>
+      </div>
+      }
+    </mat-card-content>
+  </mat-card>
+</section>

quartz-manager-frontend/src/app/views/login/login.component.scss

@@ -1,62 +1,268 @@
 :host {
+  --bg: oklch(98% 0.005 250);
+  --surface: oklch(100% 0 0);
+  --fg: oklch(22% 0.02 240);
+  --muted: oklch(50% 0.018 240);
+  --border: oklch(90% 0.008 240);
+  --accent: oklch(56% 0.19 302);
+  --success: oklch(58% 0.16 145);
+  --danger: oklch(58% 0.19 28);
+  --radius: 8px;
+  display: block;
   flex: 1;
+  color: var(--fg);
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
 }
 
-.content {
+* {
+  box-sizing: border-box;
+}
+
+.login-shell {
+  width: 100%;
+  min-height: min(680px, calc(100vh - 170px));
+  display: grid;
+  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 430px);
+  gap: 20px;
+  align-items: stretch;
+  padding: 18px;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background:
+    radial-gradient(circle at top left, oklch(56% 0.19 302 / 0.16), transparent 34%),
+    var(--bg);
+  animation: fadein 1s;
+  -o-animation: fadein 1s;
+  -moz-animation: fadein 1s;
+  -webkit-animation: fadein 1s;
+}
+
+.login-hero {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 430px;
+  padding: 24px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background:
+    linear-gradient(145deg, oklch(99% 0.003 250 / 0.92), oklch(95% 0.018 285 / 0.92)),
+    var(--surface);
+}
+
+.login-hero::after {
+  content: "";
+  position: absolute;
+  inset: auto -80px -95px auto;
+  width: 260px;
+  height: 260px;
+  border-radius: 999px;
+  background: oklch(56% 0.19 302 / 0.13);
+}
+
+.brand {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.brand-mark {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 9px;
+  background: var(--accent);
+  color: white;
+  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+h1 {
+  font-size: 21px;
+  line-height: 1.1;
+}
+
+.brand p,
+.form-header p,
+.status-row,
+.metric-grid span,
+.loading-state span {
+  color: var(--muted);
+}
+
+.hero-card {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: 18px;
+  max-width: 440px;
+  padding: 18px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: oklch(100% 0 0 / 0.78);
+  box-shadow: 0 22px 60px oklch(22% 0.02 240 / 0.10);
+  backdrop-filter: blur(12px);
+}
+
+.card-title,
+.eyebrow,
+.metric-grid strong {
+  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
+}
+
+.card-title,
+.eyebrow {
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.status-row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  line-height: 1.45;
+}
+
+.pulse {
+  width: 10px;
+  height: 10px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--success);
+  box-shadow: 0 0 0 6px oklch(58% 0.16 145 / 0.12);
+}
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.metric-grid div {
+  display: grid;
+  gap: 5px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+
+.metric-grid strong {
+  font-size: 24px;
+  line-height: 1;
+}
+
+.login-card {
+  align-self: center;
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface);
+  box-shadow: 0 24px 70px oklch(22% 0.02 240 / 0.14);
+}
+
+.login-card mat-card-content {
+  display: grid;
+  gap: 22px;
+  padding: 30px;
+}
+
+.form-header {
+  display: grid;
+  gap: 8px;
+}
+
+.form-header h2 {
+  font-size: 28px;
+  line-height: 1.05;
+}
+
+.form-header p {
+  line-height: 1.45;
+}
+
+form {
+  display: grid;
+  gap: 12px;
+}
+
+mat-form-field,
+.login-button {
   width: 100%;
 }
 
-mat-card {
+.login-button {
-  max-width: 350px;
+  min-height: 44px;
-  text-align: center;
+  border-radius: 7px;
-  animation: fadein 1s;
+  font-weight: 700;
-  -o-animation: fadein 1s; /* Opera */
-  -moz-animation: fadein 1s; /* Firefox */
-  -webkit-animation: fadein 1s; /* Safari and Chrome */
-
-}
-
-mat-form-field {
-  display: block;
 }
 
 mat-spinner {
   width: 25px;
   height: 25px;
-  margin: 20px auto 0 auto;
 }
 
-button {
+.loading-state {
-  display: block;
+  display: flex;
-  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-height: 128px;
+  font-size: 13px;
+}
+
+.notification {
+  margin: 0;
+  padding: 12px 14px;
+  border-radius: var(--radius);
+  line-height: 1.4;
 }
 
 .error {
-  color: #D50000;
+  border: 1px solid oklch(58% 0.19 28 / 0.30);
+  background: oklch(98% 0.02 28);
+  color: var(--danger);
 }
 
 .success {
-  color: #8BC34A;
+  border: 1px solid oklch(58% 0.16 145 / 0.30);
+  background: oklch(98% 0.02 145);
+  color: var(--success);
 }
 
-
+@media screen and (max-width: 760px) {
-@media screen and (max-width: 599px) {
+  .login-shell {
-
+    grid-template-columns: 1fr;
-  .content {
+    min-height: auto;
-    /* https://github.com/angular/flex-layout/issues/295 */
+    padding: 12px;
-    display: block !important;
   }
 
-  mat-card {
+  .login-hero {
-    /* https://github.com/angular/flex-layout/issues/295 */
+    min-height: auto;
-    display: block !important;
+    gap: 24px;
-    max-width: 999px;
+    padding: 18px;
   }
 
-}
+  .login-card mat-card-content {
+    padding: 24px 20px;
+  }
 
-a {
+  .form-header h2 {
-  text-decoration: none;
+    font-size: 25px;
-  cursor: auto;
+  }
-  color: #FFFFFF;
 }

quartz-manager-frontend/src/app/views/login/login.component.ts

@@ -7,10 +7,11 @@ import {delay, takeUntil} from 'rxjs/operators'
 
 import {AuthService, UserService} from '../../services';
 
-@Component({
+@Component({
-  selector: 'app-login',
+    selector: 'app-login',
-  templateUrl: './login.component.html',
+    templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+    styleUrls: ['./login.component.scss'],
+    standalone: false
 })
 export class LoginComponent implements OnInit, OnDestroy {
   title = 'Login';

quartz-manager-frontend/src/app/views/manager/manager.component.html

@@ -1,48 +1,382 @@
-<div id="managerViewContainer" class="flex flex-column flex-1 gap-6 h-100">
+<div class="qm-app" [class.object-mode]="activePage !== 'dashboard'" (click)="handleConsoleClick($event)">
-  <div id="schedulerBarContainer">
+  <aside class="rail" aria-label="Primary navigation">
-    <qrzmng-scheduler-control></qrzmng-scheduler-control>
+    <div class="brand">
-  </div>
+      <div class="brand-mark">QM</div>
-
+      <div>
-  <div id="manager-content-container" class="flex flex-row flex-1 gap-6">
+        <div class="brand-title">Quartz Manager</div>
-    <div class="flex-1" style="max-width: 250px">
+        <div class="brand-subtitle">Operations Console</div>
-      <div fxLayout="row" fxLayoutAlign="stretch" fxFill>
+      </div>
-        <qrzmng-trigger-list
+    </div>
-          (onNewTriggerClicked)="onNewTriggerRequested()"
+
-          [openedNewTriggerForm]="newTriggerFormOpened"
+    <nav class="nav">
-          (onSelectedTrigger)="setSelectedTrigger($event)"
+      <button type="button" [class.active]="activePage === 'dashboard'" [attr.aria-current]="activePage === 'dashboard' ? 'page' : null" (click)="selectPage('dashboard')">
-          fxFill></qrzmng-trigger-list>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M3 13h8V3H3v10Zm10 8h8V3h-8v18ZM3 21h8v-6H3v6Z"/></svg><span>Dashboard</span>
-      </div>
+      </button>
-    </div>
+      <button type="button" [class.active]="activePage === 'jobs'" [attr.aria-current]="activePage === 'jobs' ? 'page' : null" (click)="selectPage('jobs')">
-
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M7 8h10M7 12h10M7 16h6"/><rect x="4" y="4" width="16" height="16" rx="2"/></svg><span>Jobs</span>
-    <div class="flex-1" style="max-width: 350px">
+      </button>
-      <div fxLayout="row" fxFill>
+      <button type="button" [class.active]="activePage === 'triggers'" [attr.aria-current]="activePage === 'triggers' ? 'page' : null" (click)="selectPage('triggers')">
-        <div fxLayout="column" fxFill>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="9"/></svg><span>Triggers</span>
-          <qrzmng-simple-trigger-config
+      </button>
-            fxFill
+      <button type="button" [class.active]="activePage === 'calendars'" [attr.aria-current]="activePage === 'calendars' ? 'page' : null" (click)="selectPage('calendars')">
-            [triggerKey]="selectedTriggerKey"
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M7 3v4M17 3v4M4 9h16M5 5h14v15H5z"/></svg><span>Calendars</span>
-            (triggerFormOpenChange)="setNewTriggerFormOpened($event)"
+      </button>
-            (onTriggerSubmitting)="monitorTrigger($event)"
+      <button type="button" [class.active]="activePage === 'executions'" [attr.aria-current]="activePage === 'executions' ? 'page' : null" (click)="selectPage('executions')">
-            (onNewTrigger)="onNewTriggerCreated($event)">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 17h16M7 17V7m5 10V4m5 13v-6"/></svg><span>Executions</span>
-          </qrzmng-simple-trigger-config>
+      </button>
-        </div>
+      <button type="button" [class.active]="activePage === 'events'" [attr.aria-current]="activePage === 'events' ? 'page' : null" (click)="selectPage('events')">
-      </div>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M4 7h16M4 12h16M4 17h10"/></svg><span>Event Stream</span>
-    </div>
+      </button>
-
+      <button type="button" [class.active]="activePage === 'scheduler'" [attr.aria-current]="activePage === 'scheduler' ? 'page' : null" (click)="selectPage('scheduler')">
-    <div class="flex-1">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z"/><path d="m19.4 15 .6 2-1.7 3-2.1-.5a8.3 8.3 0 0 1-2 1.1L13.5 23h-3l-.7-2.4a8.3 8.3 0 0 1-2-1.1l-2.1.5-1.7-3 .6-2a8.9 8.9 0 0 1 0-2.1l-.6-2 1.7-3 2.1.5a8.3 8.3 0 0 1 2-1.1l.7-2.4h3l.7 2.4a8.3 8.3 0 0 1 2 1.1l2.1-.5 1.7 3-.6 2a8.9 8.9 0 0 1 0 2.1Z"/></svg><span>Scheduler</span>
-        <div class="h-100 min-h-100 flex flex-column gap-6">
+      </button>
-          <div class="flex flex-column" >
+    </nav>
-            <progress-panel class="flex-1"
+
-              [triggerKey]=monitoredTriggerKey
+    <div class="rail-card">
-            >
+      <h3>Live channel</h3>
-            </progress-panel>
+      <div class="connection"><span>WebSocket</span><span class="chip success">OPEN</span></div>
-          </div>
+    </div>
-          <div class="flex flex-column flex-1" style="max-height: calc(100% - 136px); min-height: calc(100% - 210px);">
+  </aside>
-            <logs-panel  class="flex flex-1 h-100 max-h-100"
+
-                         [triggerKey]=monitoredTriggerKey
+  <main class="main">
-            >
+    <header class="topbar">
-            </logs-panel>
+      <div class="scheduler-meta">
-          </div>
+        <div class="scheduler-title">
-        </div>
+          <h1>Quartz Operations Console</h1>
-      </div>
+          <div class="caption">{{ scheduler?.name || 'quartz-manager-scheduler' }} / compact context</div>
-  </div>
+        </div>
-</div>
+        <span class="chip" [ngClass]="getSchedulerStatusClass()">{{ scheduler?.status || 'LOADING' }}</span>
+        <div class="kv"><span>Instance ID</span><span>{{ scheduler?.instanceId || '-' }}</span></div>
+        <div class="kv"><span>Cluster</span><span>{{ scheduler?.clustered ? 'YES' : 'NO' }}</span></div>
+        <div class="kv"><span>WebSocket</span><span>OPEN</span></div>
+      </div>
+      <div class="actions compact-actions" aria-label="Compact scheduler status actions">
+        <button type="button" class="btn compact" (click)="toggleStandby()">{{ scheduler?.status === 'PAUSED' ? 'Resume' : 'Standby' }}</button>
+        <button type="button" class="btn compact" (click)="jumpToScheduler()">Scheduler</button>
+      </div>
+    </header>
+
+    <section class="content">
+      <div class="page" [class.active]="activePage === 'dashboard'">
+        <div class="dashboard-grid">
+          <section class="card span-12">
+            <div class="card-header"><h2 class="card-title">Scheduler Command Center</h2><span class="caption">Supported lifecycle commands call the current backend</span></div>
+            <div class="card-body scheduler-command-grid">
+              <div class="command-panel">
+                <div class="command-row" aria-label="Dashboard scheduler actions">
+                  <button type="button" class="btn primary" (click)="startScheduler()">Start</button>
+                  <button type="button" class="btn" (click)="standbyScheduler()">Standby</button>
+                  <button type="button" class="btn" (click)="resumeScheduler()">Resume</button>
+                  <button type="button" class="btn" data-roadmap="Pause all trigger groups is not available in the current backend">Pause All</button>
+                  <button type="button" class="btn danger" data-roadmap="Clear scheduler is not available in the current backend">Clear</button>
+                  <button type="button" class="btn danger" (click)="shutdownScheduler()">Shutdown</button>
+                </div>
+                <div class="help">Global lifecycle operations are centralized here. Group-level and destructive data operations stay visible as roadmap actions until backend endpoints exist.</div>
+              </div>
+              <div class="metadata-grid">
+                <div class="field"><label>Scheduler name</label><strong>{{ scheduler?.name || '-' }}</strong></div>
+                <div class="field"><label>Instance ID</label><strong>{{ scheduler?.instanceId || '-' }}</strong></div>
+                <div class="field"><label>Status</label><strong>{{ scheduler?.status || '-' }}</strong></div>
+                <div class="field"><label>Triggers</label><strong>{{ triggerKeys.length }}</strong></div>
+                <div class="field"><label>Eligible jobs</label><strong>{{ jobs.length }}</strong></div>
+                <div class="field"><label>Quartz metadata</label><strong>{{ scheduler?.quartzVersion || '-' }}</strong></div>
+              </div>
+            </div>
+          </section>
+
+          <article class="card span-3"><div class="card-body metric"><span class="chip running">TRIGGERS</span><div class="metric-value">{{ triggerKeys.length }}</div><div class="metric-label">Trigger keys returned by backend</div><div class="metric-line"><span style="--w: 64%"></span></div></div></article>
+          <article class="card span-3"><div class="card-body metric"><span class="chip blocked">JOBS</span><div class="metric-value">{{ jobs.length }}</div><div class="metric-label">Eligible job classes</div><div class="metric-line"><span style="--w: 48%"></span></div></div></article>
+          <article class="card span-3"><div class="card-body metric"><span class="chip warn">EVENTS</span><div class="metric-value">{{ getExecutionLoadValue() }}</div><div class="metric-label">Logs received for selected trigger</div><div class="metric-line"><span style="--w: 32%"></span></div></div></article>
+          <article class="card span-3"><div class="card-body metric"><span class="chip accent">STATUS</span><div class="metric-value compact-metric">{{ scheduler?.status || '-' }}</div><div class="metric-label">Scheduler lifecycle state</div><div class="metric-line"><span style="--w: 67%"></span></div></div></article>
+
+          <section class="card span-7">
+            <div class="card-header"><h2 class="card-title">Next Scheduled Fires</h2><div class="toolbar"><span class="chip normal">LIVE</span><button type="button" class="btn" (click)="selectPage('triggers')">Open Triggers</button></div></div>
+            <div class="split">
+              <div class="table-wrap">
+                <table>
+                  <thead><tr><th style="width:22%">Trigger</th><th style="width:15%">Group</th><th style="width:18%">Type</th><th style="width:13%">State</th><th style="width:16%">Job</th><th style="width:16%">Next fire</th></tr></thead>
+                  <tbody>
+                    @for (triggerKey of getTriggerRows(); track getTriggerGroup(triggerKey) + '.' + triggerKey.name) {
+                      <tr class="selectable" [class.selected]="selectedTriggerKey?.name === triggerKey.name" (click)="selectTrigger(triggerKey)">
+                        <td class="mono">{{ triggerKey.name }}</td>
+                        <td class="mono">{{ getTriggerGroup(triggerKey) }}</td>
+                        <td>{{ getTriggerType(triggerKey) }}</td>
+                        <td><span class="chip" [ngClass]="getTriggerStateClass(triggerKey)">{{ getTriggerState(triggerKey) }}</span></td>
+                        <td class="mono">{{ getTriggerJobName(triggerKey) }}</td>
+                        <td class="mono">{{ getTriggerNextFireLabel(triggerKey) }}</td>
+                      </tr>
+                    } @empty {
+                      <tr><td colspan="6">No triggers returned by the backend. Use the wizard to create a SimpleTrigger.</td></tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+              <aside class="detail drawer detail-drawer" [class.drawer-open]="detailDrawerOpen && activePage === 'dashboard'" aria-label="Trigger detail drawer">
+                @if (selectedTriggerKey) {
+                  <div class="drawer-title"><div><span class="chip" [ngClass]="getSelectedTriggerStateClass()">{{ getSelectedTriggerState() }}</span><h2>{{ selectedTriggerKey.name }}</h2><div class="caption">{{ getSelectedTriggerGroup() }} / linked to {{ getSelectedJobName() }}</div></div><button type="button" class="drawer-close" (click)="closeDetailDrawer()">Close</button></div>
+                  <div class="tabs"><button type="button" class="tab active">Overview</button><button type="button" class="tab" data-roadmap="Per-trigger execution history is on the roadmap">Executions</button><button type="button" class="tab" (click)="selectPage('events')">Logs</button></div>
+                  <div class="field-grid">
+                    <div class="field"><label>Previous fire</label><strong>{{ selectedTrigger?.timesTriggered ? 'tracked by progress events' : 'not exposed' }}</strong></div>
+                    <div class="field"><label>Next fire</label><strong>{{ formatDateTime(selectedTrigger?.nextFireTime) || '-' }}</strong></div>
+                    <div class="field"><label>Priority</label><strong>{{ selectedTrigger?.priority || '-' }}</strong></div>
+                    <div class="field"><label>Calendar</label><strong>{{ selectedTrigger?.calendarName || 'none' }}</strong></div>
+                    <div class="field"><label>Misfire</label><strong>{{ selectedTrigger?.misfireInstruction || '-' }}</strong></div>
+                    <div class="field"><label>Repeat</label><strong>{{ getSelectedTriggerRepeatSummary() }}</strong></div>
+                  </div>
+                  <div class="progress-card"><div class="caption">Current run progress</div><div class="progress-line"><span [style.width.%]="getProgressPercentage()"></span></div><div class="mono">{{ getProgressLabel() }}</div></div>
+                  <div class="actions"><button type="button" class="btn" (click)="pauseSelectedTrigger()">Pause</button><button type="button" class="btn" (click)="resumeSelectedTrigger()">Resume</button><button type="button" class="btn" (click)="openRescheduleWizard()">Reschedule</button><button type="button" class="btn danger" (click)="unscheduleSelectedTrigger()">Unschedule</button></div>
+                } @else {
+                  <div class="drawer-title"><div><span class="chip warn">EMPTY</span><h2>No trigger selected</h2><div class="caption">Create a SimpleTrigger or refresh trigger keys.</div></div><button type="button" class="drawer-close" (click)="closeDetailDrawer()">Close</button></div>
+                }
+              </aside>
+            </div>
+          </section>
+
+          <section class="card span-5">
+            <div class="card-header"><h2 class="card-title">Execution Load</h2><span class="caption">Analytics roadmap preview</span></div>
+            <div class="card-body">
+              <div class="mini-chart" data-roadmap="Execution analytics are not exposed by the current backend" aria-label="Execution load chart">
+                <span class="bar" style="--h:34%"></span><span class="bar" style="--h:42%"></span><span class="bar" style="--h:28%"></span><span class="bar" style="--h:62%"></span><span class="bar warn" style="--h:52%"></span><span class="bar" style="--h:38%"></span><span class="bar" style="--h:55%"></span><span class="bar" style="--h:72%"></span><span class="bar error" style="--h:44%"></span><span class="bar" style="--h:67%"></span><span class="bar" style="--h:46%"></span><span class="bar" style="--h:58%"></span><span class="bar warn" style="--h:81%"></span><span class="bar" style="--h:64%"></span><span class="bar" style="--h:35%"></span><span class="bar" style="--h:50%"></span><span class="bar" style="--h:70%"></span><span class="bar" style="--h:40%"></span>
+              </div>
+              <div class="field-grid top-space">
+                <div class="field"><label>Logs received</label><strong>{{ logs.length }}</strong></div>
+                <div class="field"><label>Current progress</label><strong>{{ getProgressPercentage() }}%</strong></div>
+                <button type="button" class="field field-button" data-roadmap="Misfire analytics are on the roadmap"><label>Misfires</label><strong>Roadmap</strong></button>
+                <button type="button" class="field field-button" data-roadmap="Recovering jobs endpoint is on the roadmap"><label>Recovering jobs</label><strong>Roadmap</strong></button>
+              </div>
+            </div>
+          </section>
+
+          <section class="card span-12">
+            <div class="card-header"><h2 class="card-title">Event Stream</h2><div class="toolbar"><input class="search" value="Filter: selected trigger logs" data-roadmap="Event stream filtering is on the roadmap"><span class="chip normal">STREAMING</span><button type="button" class="btn" data-roadmap="Pausing the merged event stream is on the roadmap">Pause</button><button type="button" class="btn" data-roadmap="Event export is on the roadmap">Export</button></div></div>
+            <div class="stream">
+              <div class="stream-row"><span>Time</span><span>Severity</span><span>Type</span><span>Source</span><span>Message</span></div>
+              @for (log of logs; track log.time) {
+                <div class="stream-row"><span class="mono">{{ log.time | date:'HH:mm:ss' }}</span><span class="chip" [ngClass]="log.severity === 'ERROR' ? 'danger' : log.severity === 'WARN' ? 'warn' : 'success'">{{ log.severity }}</span><span>{{ log.type }}</span><span class="mono">{{ log.source }}</span><span>{{ log.message }}</span></div>
+              } @empty {
+                <div class="stream-row muted-row"><span class="mono">--</span><span class="chip warn">WAIT</span><span>JOB_LOG</span><span class="mono">{{ selectedTriggerKey?.name || '-' }}</span><span>Waiting for log messages from the selected trigger.</span></div>
+              }
+            </div>
+          </section>
+        </div>
+      </div>
+
+      <div class="page" [class.active]="activePage === 'jobs'">
+        <div class="page-kicker">
+          <div><h2>Jobs</h2><p>The backend exposes scheduled Quartz jobs plus eligible job classes for SimpleTrigger creation. Durability, recovery, data map, and related trigger keys are read-only in this release.</p></div>
+          <div class="toolbar"><input class="search" name="jobSearch" placeholder="Filter jobs, groups, classes" [(ngModel)]="jobSearch"><select class="select compact-select" name="jobGroupFilter" [(ngModel)]="jobGroupFilter"><option value="ALL">All groups</option>@for (group of getJobGroups(); track group) { <option [value]="group">{{ group }}</option> }</select><button type="button" class="btn primary" (click)="openCreateJobWizard()">New Job</button></div>
+        </div>
+        <section class="card">
+          <div class="card-header"><h2 class="card-title">Scheduled Jobs</h2><div class="toolbar"><span class="chip normal">{{ getScheduledJobRows().length }} / {{ scheduledJobs.length }} JOBS</span><button type="button" class="btn" data-roadmap="Pause job group is on the roadmap">Pause Group</button><button type="button" class="btn" data-roadmap="Job export is on the roadmap">Export</button></div></div>
+          <div class="split">
+            <div class="table-wrap">
+              <table>
+                <thead><tr><th style="width:22%">Job key</th><th style="width:48%">Class</th><th style="width:10%">Durable</th><th style="width:10%">Recovery</th><th style="width:10%">Triggers</th></tr></thead>
+                <tbody>
+                  @for (job of getScheduledJobRows(); track job.jobKeyDTO.group + '.' + job.jobKeyDTO.name) {
+                    <tr class="selectable" [class.selected]="selectedScheduledJob?.jobKeyDTO?.name === job.jobKeyDTO.name && selectedScheduledJob?.jobKeyDTO?.group === job.jobKeyDTO.group" (click)="selectScheduledJob(job)"><td class="mono">{{ job.jobKeyDTO.group }}.{{ job.jobKeyDTO.name }}</td><td class="mono">{{ job.jobClassName }}</td><td><span class="chip" [ngClass]="job.durable ? 'normal' : 'warn'">{{ job.durable ? 'YES' : 'NO' }}</span></td><td><span class="chip" [ngClass]="job.requestsRecovery ? 'normal' : 'warn'">{{ job.requestsRecovery ? 'YES' : 'NO' }}</span></td><td class="mono">{{ job.triggerKeys?.length || 0 }}</td></tr>
+                  } @empty {
+                    <tr><td colspan="5">No scheduled jobs returned by the backend. Create a SimpleTrigger from an eligible job class.</td></tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+            <aside class="detail drawer detail-drawer" [class.drawer-open]="detailDrawerOpen && activePage === 'jobs'" aria-label="Job detail drawer">
+              <div class="drawer-title"><div><span class="chip normal">SCHEDULED</span><h2>{{ getSelectedJobShortName() }}</h2><div class="caption">{{ getSelectedJobKeyLabel() }}</div></div><button type="button" class="drawer-close" (click)="closeDetailDrawer()">Close</button></div>
+              <div class="tabs"><button type="button" class="tab active">Overview</button><button type="button" class="tab">Triggers</button><button type="button" class="tab">Data Map</button><button type="button" class="tab" data-roadmap="Job execution history is on the roadmap">Executions</button></div>
+              <div class="field-grid">
+                <div class="field"><label>Class</label><strong>{{ getSelectedJobShortName() }}</strong></div>
+                <div class="field"><label>Group</label><strong>{{ selectedScheduledJob?.jobKeyDTO?.group || '-' }}</strong></div>
+                <div class="field"><label>Durable</label><strong>{{ selectedScheduledJob?.durable ? 'YES' : 'NO' }}</strong></div>
+                <div class="field"><label>Requests recovery</label><strong>{{ selectedScheduledJob?.requestsRecovery ? 'YES' : 'NO' }}</strong></div>
+              </div>
+              <pre class="code-block">JobDataMap
+{{ getSelectedJobDataMapPreview() }}</pre>
+              <pre class="code-block">Triggers
+@for (triggerKey of selectedScheduledJob?.triggerKeys || []; track triggerKey.group + '.' + triggerKey.name) { {{ triggerKey.group }}.{{ triggerKey.name }}
+} @empty { none }</pre>
+              <div class="actions"><button type="button" class="btn primary" (click)="triggerSelectedJobNow()">Trigger Now</button><button type="button" class="btn" (click)="openEditJobWizard()">Edit Job</button><button type="button" class="btn" data-roadmap="Pause job is on the roadmap">Pause</button><button type="button" class="btn" (click)="openCreateTriggerWizard(); triggerDraft.jobTargetType = 'stored'; triggerDraft.storedJobKey = selectedScheduledJob ? selectedScheduledJob.jobKeyDTO.group + '::' + selectedScheduledJob.jobKeyDTO.name : triggerDraft.storedJobKey">Create SimpleTrigger</button></div>
+              <div class="danger-zone"><strong>Danger zone</strong><span class="help">Interrupt remains roadmap-gated. Delete uses the scheduled job endpoint.</span><div class="actions"><button type="button" class="btn danger" data-roadmap="Job interruption is on the roadmap">Interrupt</button><button type="button" class="btn danger" (click)="deleteSelectedJob()">Delete Job</button></div></div>
+            </aside>
+          </div>
+        </section>
+      </div>
+
+      <div class="page" [class.active]="activePage === 'triggers'">
+        <div class="page-kicker">
+          <div><h2>Triggers</h2><p>The backend currently supports SimpleTrigger listing, details, creation, and rescheduling. Other trigger families and per-trigger operations are shown with roadmap messaging.</p></div>
+          <div class="toolbar"><input class="search" name="triggerSearch" placeholder="Filter triggers, jobs, groups" [(ngModel)]="triggerSearch"><select class="select compact-select" name="triggerGroupFilter" [(ngModel)]="triggerGroupFilter"><option value="ALL">All groups</option>@for (group of getTriggerGroups(); track group) { <option [value]="group">{{ group }}</option> }</select><button type="button" class="btn primary" (click)="openCreateTriggerWizard()">Create Trigger</button></div>
+        </div>
+        <section class="card">
+          <div class="card-header"><h2 class="card-title">Trigger Inventory</h2><div class="toolbar"><span class="chip normal">{{ getTriggerRows().length }} / {{ triggerKeys.length }} TOTAL</span><span class="chip warn" data-roadmap="Trigger state counts are on the roadmap">STATE COUNTS ROADMAP</span></div></div>
+          <div class="split">
+            <div class="table-wrap">
+              <table>
+                <thead><tr><th style="width:18%">Trigger</th><th style="width:12%">Group</th><th style="width:15%">Type</th><th style="width:12%">State</th><th style="width:18%">Job</th><th style="width:15%">Next fire</th><th style="width:10%">Misfire</th></tr></thead>
+                <tbody>
+                  @for (triggerKey of getTriggerRows(); track getTriggerGroup(triggerKey) + '.' + triggerKey.name) {
+                    <tr class="selectable" [class.selected]="selectedTriggerKey?.name === triggerKey.name" (click)="selectTrigger(triggerKey)"><td class="mono">{{ triggerKey.name }}</td><td class="mono">{{ getTriggerGroup(triggerKey) }}</td><td>{{ getTriggerType(triggerKey) }}</td><td><span class="chip" [ngClass]="getTriggerStateClass(triggerKey)">{{ getTriggerState(triggerKey) }}</span></td><td class="mono">{{ getTriggerJobName(triggerKey) }}</td><td class="mono">{{ getTriggerNextFireLabel(triggerKey) }}</td><td class="mono">{{ getTriggerDetail(triggerKey)?.misfireInstruction || '-' }}</td></tr>
+                  } @empty {
+                    <tr><td colspan="7">No triggers returned by the backend.</td></tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+            <aside class="detail drawer detail-drawer" [class.drawer-open]="detailDrawerOpen && activePage === 'triggers'" aria-label="Trigger detail drawer">
+              <div class="drawer-title"><div><span class="chip" [ngClass]="getSelectedTriggerStateClass()">{{ getSelectedTriggerState() }}</span><h2>{{ selectedTriggerKey?.name || 'No trigger' }}</h2><div class="caption">SimpleTrigger / {{ getSelectedTriggerGroup() }}</div></div><button type="button" class="drawer-close" (click)="closeDetailDrawer()">Close</button></div>
+              <div class="tabs"><button type="button" class="tab active">Overview</button><button type="button" class="tab">Schedule</button><button type="button" class="tab" data-roadmap="Quartz calendars are on the roadmap">Calendar</button><button type="button" class="tab" data-roadmap="Trigger execution history is on the roadmap">Executions</button></div>
+              <div class="field-grid">
+                <div class="field"><label>Linked job</label><strong>{{ getSelectedJobName() }}</strong></div>
+                <div class="field"><label>Priority</label><strong>{{ selectedTrigger?.priority || '-' }}</strong></div>
+                <div class="field"><label>Final fire</label><strong>{{ formatDateTime(selectedTrigger?.finalFireTime) || 'none' }}</strong></div>
+                <button type="button" class="field field-button" data-roadmap="Timezone metadata is on the roadmap"><label>Timezone</label><strong>Roadmap</strong></button>
+                <div class="field"><label>Repeat interval</label><strong>{{ selectedTrigger?.repeatInterval ? formatDuration(selectedTrigger.repeatInterval) : '-' }}</strong></div>
+                <div class="field"><label>Calendar</label><strong>{{ selectedTrigger?.calendarName || 'none' }}</strong></div>
+              </div>
+              <section class="preview"><h4>Schedule summary</h4><div>{{ getSelectedTriggerRepeatSummary() }}. Next fire: {{ formatDateTime(selectedTrigger?.nextFireTime) || 'not available' }}.</div></section>
+              <pre class="code-block">Trigger JobDataMap
+{{ getSelectedTriggerDataMapPreview() }}</pre>
+              <div class="actions"><button type="button" class="btn" (click)="pauseSelectedTrigger()">Pause</button><button type="button" class="btn" (click)="resumeSelectedTrigger()">Resume</button><button type="button" class="btn" (click)="openRescheduleWizard()">Reschedule</button><button type="button" class="btn" data-roadmap="Trigger duplication is on the roadmap">Duplicate</button></div>
+              <div class="danger-zone"><strong>Danger zone</strong><span class="help">Unschedule uses the trigger lifecycle endpoint. Reset-error remains roadmap-gated.</span><div class="actions"><button type="button" class="btn danger" (click)="unscheduleSelectedTrigger()">Unschedule</button><button type="button" class="btn danger" data-roadmap="Reset error trigger is on the roadmap">Reset Error</button></div></div>
+            </aside>
+          </div>
+        </section>
+      </div>
+
+      <div class="page" [class.active]="activePage === 'calendars'">
+        <div class="page-kicker">
+          <div><h2>Calendars</h2><p>Manage Quartz calendar exclusions and inspect which triggers are attached to each calendar.</p></div>
+          <div class="toolbar"><input class="search" name="calendarSearch" placeholder="Filter calendars" [(ngModel)]="calendarSearch"><button type="button" class="btn primary" (click)="openCreateCalendarWizard()">New Calendar</button></div>
+        </div>
+        <section class="card">
+          <div class="card-header"><h2 class="card-title">Calendar Registry</h2><span class="chip normal">{{ getCalendarRows().length }} / {{ calendars.length }} CALENDARS</span></div>
+          <div class="split">
+            <div class="table-wrap"><table><thead><tr><th>Name</th><th>Type</th><th>Description</th><th>Triggers</th></tr></thead><tbody>@for (calendar of getCalendarRows(); track calendar.name) { <tr class="selectable" [class.selected]="selectedCalendar?.name === calendar.name" (click)="selectCalendar(calendar)"><td class="mono">{{ calendar.name }}</td><td><span class="chip accent">{{ calendar.type }}</span></td><td>{{ calendar.description || '-' }}</td><td class="mono">{{ calendar.triggerKeys?.length || 0 }}</td></tr> } @empty { <tr><td colspan="4">No calendars registered. Create one to exclude time windows from trigger firing.</td></tr> }</tbody></table></div>
+            <aside class="detail drawer detail-drawer" [class.drawer-open]="detailDrawerOpen && activePage === 'calendars'" aria-label="Calendar detail drawer"><div class="drawer-title"><div><span class="chip accent">{{ selectedCalendar?.type || 'NONE' }}</span><h2>{{ selectedCalendar?.name || 'No calendar' }}</h2><div class="caption">{{ selectedCalendar?.description || 'Select a calendar to inspect rules.' }}</div></div><button type="button" class="drawer-close" (click)="closeDetailDrawer()">Close</button></div><div class="field-grid"><div class="field"><label>Type</label><strong>{{ selectedCalendar?.type || '-' }}</strong></div><div class="field"><label>Attached triggers</label><strong>{{ selectedCalendar?.triggerKeys?.length || 0 }}</strong></div><div class="field"><label>Cron</label><strong>{{ selectedCalendar?.cronExpression || '-' }}</strong></div><div class="field"><label>Time zone</label><strong>{{ selectedCalendar?.timeZone || '-' }}</strong></div></div><pre class="code-block">Triggers
+@for (triggerKey of selectedCalendar?.triggerKeys || []; track triggerKey.group + '.' + triggerKey.name) { {{ triggerKey.group }}.{{ triggerKey.name }}
+} @empty { none }</pre><div class="control"><label>Included time test</label><input class="input mono" type="datetime-local" name="calendarIncludedTime" [(ngModel)]="calendarDraft.includedTime"></div><div class="help">{{ calendarIncludedTimeResult || 'Test whether this calendar includes a specific timestamp.' }}</div><div class="actions"><button type="button" class="btn" (click)="testSelectedCalendarTime()">Test Time</button><button type="button" class="btn" (click)="openEditCalendarWizard()">Edit</button><button type="button" class="btn danger" (click)="deleteSelectedCalendar()">Delete</button></div></aside>
+          </div>
+        </section>
+      </div>
+
+      <div class="page" [class.active]="activePage === 'executions'">
+        <div class="page-kicker">
+          <div><h2>Executions</h2><p>Currently executing jobs, fire instance IDs, refire counts, execution history, and interruption by fire instance are roadmap backend features.</p></div>
+          <div class="toolbar"><input class="search" value="Filter running jobs" data-roadmap="Execution filtering is on the roadmap"><button type="button" class="btn" data-roadmap="Execution refresh endpoint is on the roadmap">Refresh</button></div>
+        </div>
+        <section class="card roadmap-card" data-roadmap="Currently executing jobs endpoint is on the roadmap">
+          <div class="card-header"><h2 class="card-title">Currently Executing Jobs</h2><div class="toolbar"><span class="chip warn">ROADMAP</span></div></div>
+          <div class="split">
+            <div class="table-wrap"><table><thead><tr><th>Fire instance</th><th>Job</th><th>Trigger</th><th>Run time</th><th>Node</th></tr></thead><tbody><tr class="selectable" (click)="openDetailDrawer()"><td class="mono">Roadmap</td><td class="mono">{{ getSelectedJobName() }}</td><td class="mono">{{ selectedTriggerKey?.name || '-' }}</td><td class="mono">Roadmap</td><td class="mono">Roadmap</td></tr></tbody></table></div>
+            <aside class="detail drawer detail-drawer" [class.drawer-open]="detailDrawerOpen && activePage === 'executions'" aria-label="Execution detail drawer"><div class="drawer-title"><div><span class="chip warn">ROADMAP</span><h2>Execution Inspector</h2><div class="caption">Live progress remains available through the selected trigger websocket.</div></div><button type="button" class="drawer-close" (click)="closeDetailDrawer()">Close</button></div><div class="progress-card"><div class="caption">Selected trigger progress</div><div class="progress-line"><span [style.width.%]="getProgressPercentage()"></span></div><div class="mono">{{ getProgressLabel() }}</div></div><div class="warning-box"><strong>Interrupt confirmation</strong><span>Interrupt operations need backend support and explicit operator confirmation.</span></div><div class="actions"><button type="button" class="btn danger" data-roadmap="Interrupt by fire instance is on the roadmap">Interrupt Fire Instance</button><button type="button" class="btn danger" data-roadmap="Interrupt by job key is on the roadmap">Interrupt Job Key</button></div></aside>
+          </div>
+        </section>
+      </div>
+
+      <div class="page" [class.active]="activePage === 'events'">
+        <div class="page-kicker">
+          <div><h2>Event Stream</h2><p>The current backend exposes per-trigger log and progress websocket topics. Global event aggregation, filters, saved views, and export are roadmap features.</p></div>
+          <div class="toolbar"><input class="search" value="Search messages, job keys, fire ids" data-roadmap="Event searching is on the roadmap"><button type="button" class="btn" data-roadmap="Pause global stream is on the roadmap">Pause Stream</button><button type="button" class="btn" data-roadmap="Export CSV is on the roadmap">Export CSV</button></div>
+        </div>
+        <div class="two-column">
+          <section class="card">
+            <div class="card-header"><h2 class="card-title">Live Events</h2><div class="toolbar"><span class="chip normal">TRIGGER STREAM</span><span class="chip accent">{{ logs.length }} EVENTS</span></div></div>
+            <div class="stream tall-stream">
+              <div class="stream-row"><span>Time</span><span>Severity</span><span>Type</span><span>Source</span><span>Message</span></div>
+              @for (log of logs; track log.time) {
+                <div class="stream-row"><span class="mono">{{ log.time | date:'HH:mm:ss' }}</span><span class="chip" [ngClass]="log.severity === 'ERROR' ? 'danger' : log.severity === 'WARN' ? 'warn' : 'success'">{{ log.severity }}</span><span>{{ log.type }}</span><span class="mono">{{ log.source }}</span><span>{{ log.message }}</span></div>
+              } @empty {
+                <div class="stream-row muted-row"><span class="mono">--</span><span class="chip warn">WAIT</span><span>JOB_LOG</span><span class="mono">{{ selectedTriggerKey?.name || '-' }}</span><span>Select or fire a trigger to receive backend log messages.</span></div>
+              }
+            </div>
+          </section>
+          <aside class="filter-panel">
+            <h3>Filters</h3>
+            <div class="control"><label>Severity</label><select class="select" data-roadmap="Severity filtering is on the roadmap"><option>INFO, WARN, ERROR</option></select></div>
+            <div class="control"><label>Event type</label><select class="select" data-roadmap="Event type filtering is on the roadmap"><option>All event types</option></select></div>
+            <div class="control"><label>Job / trigger / group</label><input class="input" [value]="selectedTriggerKey?.name || ''" data-roadmap="Event text filtering is on the roadmap"></div>
+            <section class="preview"><h4>Supported now</h4><div>Per-trigger logs and progress through existing websocket topics.</div></section>
+          </aside>
+        </div>
+      </div>
+
+      <div class="page" [class.active]="activePage === 'scheduler'">
+        <div class="page-kicker">
+          <div><h2>Scheduler / Settings</h2><p>Supported lifecycle actions are wired to the backend. Cluster metadata, clear, delayed start, and state analytics are roadmap-gated.</p></div>
+          <div class="toolbar"><span class="chip" [ngClass]="getSchedulerStatusClass()">{{ scheduler?.status || 'LOADING' }}</span><button type="button" class="btn" (click)="refreshScheduler()">Refresh Metadata</button></div>
+        </div>
+        <div class="dashboard-grid">
+          <section class="card span-12">
+            <div class="card-header"><h2 class="card-title">Lifecycle Controls</h2><span class="caption">Global actions affect the scheduler instance</span></div>
+            <div class="card-body command-panel"><div class="command-row"><button type="button" class="btn primary" (click)="startScheduler()">Start</button><button type="button" class="btn" data-roadmap="Delayed start is on the roadmap">Delayed Start 60s</button><button type="button" class="btn" (click)="standbyScheduler()">Standby</button><button type="button" class="btn" (click)="resumeScheduler()">Resume</button><button type="button" class="btn" data-roadmap="Pause all trigger groups is on the roadmap">Pause All</button><button type="button" class="btn danger" (click)="shutdownScheduler()">Shutdown</button><button type="button" class="btn danger" data-roadmap="Clear scheduler is on the roadmap">Clear Scheduler</button></div><div class="warning-box"><strong>Strong confirmation required</strong><span>Shutdown is supported and prompts before calling the backend. Clear remains roadmap-gated.</span></div></div>
+          </section>
+          <section class="card span-8">
+            <div class="card-header"><h2 class="card-title">Scheduler Metadata</h2><span class="chip accent">CURRENT API</span></div>
+            <div class="card-body summary-grid"><div class="field"><label>Scheduler name</label><strong>{{ scheduler?.name || '-' }}</strong></div><div class="field"><label>Instance ID</label><strong>{{ scheduler?.instanceId || '-' }}</strong></div><div class="field"><label>Status</label><strong>{{ scheduler?.status || '-' }}</strong></div><div class="field"><label>Trigger keys</label><strong>{{ triggerKeys.length }}</strong></div><div class="field"><label>Quartz version</label><strong>{{ scheduler?.quartzVersion || '-' }}</strong></div><div class="field"><label>Thread pool</label><strong>{{ scheduler?.threadPoolSize || '-' }}</strong></div><div class="field"><label>Job store</label><strong>{{ scheduler?.jobStoreClass || '-' }}</strong></div><div class="field"><label>Clustered</label><strong>{{ scheduler?.clustered ? 'YES' : 'NO' }}</strong></div></div>
+          </section>
+          <section class="card span-4">
+            <div class="card-header"><h2 class="card-title">Cluster Nodes</h2><span class="chip warn">ROADMAP</span></div>
+            <div class="card-body node-list" data-roadmap="Cluster node visibility is on the roadmap"><div class="node-row"><div><strong class="mono">{{ scheduler?.instanceId || 'local' }}</strong><div class="caption">local scheduler instance</div></div><span class="chip running">LOCAL</span></div><div class="node-row"><div><strong class="mono">remote nodes</strong><div class="caption">not exposed by backend</div></div><span class="chip warn">ROADMAP</span></div></div>
+          </section>
+          <section class="card span-12">
+            <div class="card-header"><h2 class="card-title">Global State Overview</h2><div class="toolbar"><span class="chip normal">{{ triggerKeys.length }} TRIGGERS</span><span class="chip warn">ANALYTICS ROADMAP</span></div></div>
+            <div class="table-wrap"><table><thead><tr><th>Area</th><th>Current state</th><th>Count</th><th>Representative key</th><th>Recommended action</th></tr></thead><tbody><tr><td>Scheduler</td><td><span class="chip" [ngClass]="getSchedulerStatusClass()">{{ scheduler?.status || '-' }}</span></td><td class="mono">1</td><td class="mono">{{ scheduler?.instanceId || '-' }}</td><td>Use lifecycle controls above.</td></tr><tr><td>Triggers</td><td><span class="chip normal">LISTED</span></td><td class="mono">{{ triggerKeys.length }}</td><td class="mono">{{ selectedTriggerKey?.name || '-' }}</td><td>Open Triggers for details or reschedule SimpleTriggers.</td></tr><tr data-roadmap="Misfire and error trigger analytics are on the roadmap"><td>Misfires / errors</td><td><span class="chip warn">ROADMAP</span></td><td class="mono">Roadmap</td><td class="mono">Roadmap</td><td>Backend analytics needed.</td></tr></tbody></table></div>
+          </section>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  @if (wizardOpen || jobWizardOpen || calendarWizardOpen || detailDrawerOpen) {
+    <button type="button" class="drawer-backdrop" aria-label="Close drawer" (click)="closeDrawers()"></button>
+  }
+
+  @if (roadmapNotice || operationNotice || operationError) {
+    <section class="toast-overlay" [class.error]="operationError" [class.success]="operationNotice && !operationError">
+      <div class="toast-kicker">{{ operationError ? 'Action failed' : roadmapNotice ? 'Roadmap reminder' : 'Updated' }}</div>
+      <div class="toast-message">{{ operationError || roadmapNotice || operationNotice }}</div>
+      <button type="button" class="toast-close" (click)="dismissNotice()">Dismiss</button>
+    </section>
+  }
+
+  <aside class="wizard drawer" [class.drawer-open]="wizardOpen" aria-label="Trigger creation wizard">
+    <div class="wizard-header"><div><h2>{{ getWizardTitle() }}</h2><div class="caption">Simple, Cron, Daily Time Interval, and Calendar Interval triggers are supported.</div></div><button type="button" class="drawer-close" (click)="closeWizardDrawer()">Close</button></div>
+    <div class="stepper"><div class="step done"><span></span><span>Identity</span></div><div class="step active"><span></span><span>Type</span></div><div class="step done"><span></span><span>Schedule</span></div><div class="step done"><span></span><span>Advanced</span></div><div class="step active"><span></span><span>Preview</span></div></div>
+    <form class="wizard-form" (ngSubmit)="submitTriggerWizard()">
+      <div class="wizard-scroll">
+        @if (wizardError) { <div class="warning-box"><strong>Unable to save</strong><span>{{ wizardError }}</span></div> }
+        <section class="form-card"><h3>Identity</h3><div class="form-section"><div class="control"><label>Trigger key</label><div class="input-row"><input class="input" name="triggerName" [(ngModel)]="triggerDraft.triggerName" [readonly]="wizardMode === 'edit'" required><input class="input mono" name="group" [(ngModel)]="triggerDraft.group" list="trigger-groups" required></div><datalist id="trigger-groups">@for (group of getTriggerGroups(); track group) { <option [value]="group"></option> }</datalist><div class="help">Quartz groups are implicit namespaces. Type a new group to create it with this trigger.</div></div><div class="control"><label>Target type</label><select class="select" name="jobTargetType" [(ngModel)]="triggerDraft.jobTargetType"><option value="stored">Existing stored job</option><option value="class">New job from class</option></select></div>@if (triggerDraft.jobTargetType === 'stored') { <div class="control"><label>Stored job</label><select class="select" name="storedJobKey" [(ngModel)]="triggerDraft.storedJobKey" required>@for (job of getStoredJobOptions(); track job.value) { <option [value]="job.value">{{ job.label }}</option> }</select><div class="help">The trigger will call TriggerBuilder.forJob with this stored job key.</div></div> } @else { <div class="control"><label>Job class</label><select class="select" name="jobClass" [(ngModel)]="triggerDraft.jobClass" required>@for (job of jobs; track job) { <option [value]="job">{{ job }}</option> }</select><div class="help">The backend will create an ephemeral job for this trigger.</div></div> }</div></section>
+        <section class="form-card"><h3>Trigger Type</h3><div class="form-section"><div class="radio-grid"><button type="button" class="type-option" [class.active]="triggerDraft.triggerType === 'SIMPLE'" (click)="selectTriggerType('SIMPLE')"><strong>Simple</strong><span class="help">Repeat every fixed interval.</span></button><button type="button" class="type-option" [class.active]="triggerDraft.triggerType === 'CRON'" (click)="selectTriggerType('CRON')"><strong>Cron</strong><span class="help">Cron expression schedule.</span></button><button type="button" class="type-option" [class.active]="triggerDraft.triggerType === 'DAILY_TIME_INTERVAL'" (click)="selectTriggerType('DAILY_TIME_INTERVAL')"><strong>Daily Time</strong><span class="help">Run in a daily time window.</span></button><button type="button" class="type-option" [class.active]="triggerDraft.triggerType === 'CALENDAR_INTERVAL'" (click)="selectTriggerType('CALENDAR_INTERVAL')"><strong>Calendar Interval</strong><span class="help">Every N calendar units.</span></button></div></div></section>
+        <section class="form-card"><h3>Schedule Editor</h3><div class="form-section"><div class="control"><label>Start</label><input class="input mono" type="datetime-local" name="startDate" [(ngModel)]="triggerDraft.startDate"></div><div class="control"><label>End</label><input class="input mono" type="datetime-local" name="endDate" [(ngModel)]="triggerDraft.endDate"></div>@if (triggerDraft.triggerType === 'CRON') { <div class="control"><label>Cron expression</label><input class="input mono" name="cronExpression" [(ngModel)]="triggerDraft.cronExpression" required><div class="help">Quartz cron format, for example 0 0/5 * * * ?</div></div><div class="control"><label>Timezone</label><input class="input mono" name="cronTimeZone" [(ngModel)]="triggerDraft.timeZone"></div> } @else { <div class="control"><label>Interval</label><div class="input-row"><input class="input mono" type="number" min="1" name="repeatIntervalAmount" [(ngModel)]="triggerDraft.repeatIntervalAmount" required><select class="select" name="repeatIntervalUnit" [(ngModel)]="triggerDraft.repeatIntervalUnit"><option value="milliseconds" [disabled]="triggerDraft.triggerType !== 'SIMPLE'">milliseconds</option><option value="seconds">seconds</option><option value="minutes">minutes</option><option value="hours">hours</option><option value="days">days</option><option value="weeks" [disabled]="triggerDraft.triggerType !== 'CALENDAR_INTERVAL'">weeks</option><option value="months" [disabled]="triggerDraft.triggerType !== 'CALENDAR_INTERVAL'">months</option><option value="years" [disabled]="triggerDraft.triggerType !== 'CALENDAR_INTERVAL'">years</option></select></div></div> } @if (triggerDraft.triggerType === 'SIMPLE') { <div class="control"><label>Repeat count</label><input class="input mono" type="number" name="repeatCount" [(ngModel)]="triggerDraft.repeatCount" required><div class="help">Use -1 to repeat indefinitely.</div></div> } @if (triggerDraft.triggerType === 'DAILY_TIME_INTERVAL') { <div class="control"><label>Daily window</label><div class="input-row"><input class="input mono" name="startTimeOfDay" [(ngModel)]="triggerDraft.startTimeOfDay"><input class="input mono" name="endTimeOfDay" [(ngModel)]="triggerDraft.endTimeOfDay"></div></div><div class="control"><label>Days of week</label><div class="command-row">@for (day of [1,2,3,4,5,6,7]; track day) { <button type="button" class="btn compact" [class.primary]="isDayOfWeekSelected(day)" (click)="toggleDayOfWeek(day)">{{ day }}</button> }</div><div class="help">Quartz uses 1=Sunday through 7=Saturday.</div></div> } @if (triggerDraft.triggerType === 'CALENDAR_INTERVAL') { <label class="check-row"><input type="checkbox" name="preserveHour" [(ngModel)]="triggerDraft.preserveHourOfDayAcrossDaylightSavings"> Preserve hour across daylight saving</label><label class="check-row"><input type="checkbox" name="skipMissingHour" [(ngModel)]="triggerDraft.skipDayIfHourDoesNotExist"> Skip day if hour does not exist</label><div class="control"><label>Timezone</label><input class="input mono" name="calendarIntervalTimeZone" [(ngModel)]="triggerDraft.timeZone"></div> }</div></section>
+        <section class="form-card"><h3>Advanced</h3><div class="form-section"><div class="control"><label>Calendar</label><select class="select" name="calendarName" [(ngModel)]="triggerDraft.calendarName"><option value="">No calendar</option>@for (calendarName of getCalendarOptions(); track calendarName) { <option [value]="calendarName">{{ calendarName }}</option> }</select></div><div class="control"><label>Misfire policy</label><select class="select" name="misfireInstruction" [(ngModel)]="triggerDraft.misfireInstruction" required>@if (triggerDraft.triggerType === 'SIMPLE') { <option value="MISFIRE_INSTRUCTION_FIRE_NOW">FIRE_NOW</option><option value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT">RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT</option><option value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_REMAINING_REPEAT_COUNT">RESCHEDULE_NOW_WITH_REMAINING_REPEAT_COUNT</option><option value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_REMAINING_COUNT">RESCHEDULE_NEXT_WITH_REMAINING_COUNT</option><option value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_EXISTING_COUNT">RESCHEDULE_NEXT_WITH_EXISTING_COUNT</option> } @else { <option value="FIRE_AND_PROCEED">FIRE_AND_PROCEED</option><option value="DO_NOTHING">DO_NOTHING</option><option value="IGNORE_MISFIRES">IGNORE_MISFIRES</option> }</select></div><div class="control"><label>JobDataMap override</label><div class="data-map-editor">@for (entry of triggerDraft.jobDataMapEntries; track $index) { <div class="data-map-row"><input class="input mono" name="triggerDataKey{{$index}}" placeholder="key" [(ngModel)]="entry.key"><select class="select" name="triggerDataType{{$index}}" [(ngModel)]="entry.type"><option value="string">string</option><option value="number">number</option><option value="boolean">boolean</option><option value="json">json</option><option value="null">null</option></select><input class="input mono" name="triggerDataValue{{$index}}" placeholder="value" [(ngModel)]="entry.value" [readonly]="entry.type === 'null'"><button type="button" class="btn danger compact" (click)="removeJobDataMapEntry(triggerDraft.jobDataMapEntries, $index)">Remove</button></div> }</div><button type="button" class="btn" (click)="addJobDataMapEntry(triggerDraft.jobDataMapEntries)">Add Data</button><pre class="code-block">{{ getTriggerDraftDataMapPreview() }}</pre></div></div></section>
+        <section class="preview"><h4>Plain-language summary</h4><div>Run <strong>{{ triggerDraft.jobTargetType === 'stored' ? triggerDraft.storedJobKey.replace('::', '.') : shortClassName(triggerDraft.jobClass) || 'selected job' }}</strong> as a <strong>{{ triggerDraft.triggerType }}</strong> trigger, starting at <strong>{{ triggerDraft.startDate || 'backend default start time' }}</strong>.</div><div class="fire-list">@for (fireTime of getFirePreview(); track fireTime) { <span>{{ fireTime }}</span> }</div></section>
+      </div>
+      <div class="wizard-footer"><button type="button" class="btn" (click)="resetWizard()">Reset</button><button type="submit" class="btn primary" [disabled]="wizardSubmitting || !canSubmitTrigger()">{{ wizardSubmitting ? 'Saving...' : getWizardCta() }}</button></div>
+    </form>
+  </aside>
+
+  <aside class="wizard drawer" [class.drawer-open]="jobWizardOpen" aria-label="Stored job editor">
+    <div class="wizard-header"><div><h2>{{ jobWizardMode === 'edit' ? 'Edit Stored Job' : 'New Stored Job' }}</h2><div class="caption">Stored jobs are durable Quartz JobDetails that triggers can launch by job key.</div></div><button type="button" class="drawer-close" (click)="closeJobWizardDrawer()">Close</button></div>
+    <form class="wizard-form" (ngSubmit)="submitJobWizard()">
+      <div class="wizard-scroll">
+        @if (jobWizardError) { <div class="warning-box"><strong>Unable to save</strong><span>{{ jobWizardError }}</span></div> }
+        <section class="form-card"><h3>Identity</h3><div class="form-section"><div class="control"><label>Job key</label><div class="input-row"><input class="input" name="jobName" [(ngModel)]="jobDraft.name" [readonly]="jobWizardMode === 'edit'" required><input class="input mono" name="jobGroup" [(ngModel)]="jobDraft.group" [readonly]="jobWizardMode === 'edit'" list="job-groups" required></div><datalist id="job-groups">@for (group of getJobGroups(); track group) { <option [value]="group"></option> }</datalist><div class="help">Groups are implicit. Typing a new group stores the job under that namespace.</div></div><div class="control"><label>Job class</label><select class="select" name="storedJobClass" [(ngModel)]="jobDraft.jobClass" required>@for (job of jobs; track job) { <option [value]="job">{{ job }}</option> }</select></div><div class="control"><label>Description</label><input class="input" name="jobDescription" [(ngModel)]="jobDraft.description"></div></div></section>
+        <section class="form-card"><h3>Options</h3><div class="form-section"><label class="check-row"><input type="checkbox" name="jobDurable" [(ngModel)]="jobDraft.durable"> Store durably</label><label class="check-row"><input type="checkbox" name="jobRecovery" [(ngModel)]="jobDraft.requestsRecovery"> Requests recovery</label><div class="help">Durable jobs remain in the scheduler without active triggers and can be selected later by SimpleTriggers.</div></div></section>
+        <section class="form-card"><h3>JobDataMap</h3><div class="form-section"><div class="data-map-editor">@for (entry of jobDraft.jobDataMapEntries; track $index) { <div class="data-map-row"><input class="input mono" name="jobDataKey{{$index}}" placeholder="key" [(ngModel)]="entry.key"><select class="select" name="jobDataType{{$index}}" [(ngModel)]="entry.type"><option value="string">string</option><option value="number">number</option><option value="boolean">boolean</option><option value="json">json</option><option value="null">null</option></select><input class="input mono" name="jobDataValue{{$index}}" placeholder="value" [(ngModel)]="entry.value" [readonly]="entry.type === 'null'"><button type="button" class="btn danger compact" (click)="removeJobDataMapEntry(jobDraft.jobDataMapEntries, $index)">Remove</button></div> }</div><button type="button" class="btn" (click)="addJobDataMapEntry(jobDraft.jobDataMapEntries)">Add Data</button><pre class="code-block">{{ getJobDraftDataMapPreview() }}</pre></div></section>
+      </div>
+      <div class="wizard-footer"><button type="button" class="btn" (click)="closeJobWizardDrawer()">Cancel</button><button type="submit" class="btn primary" [disabled]="jobWizardSubmitting || !canSubmitJob()">{{ jobWizardSubmitting ? 'Saving...' : jobWizardMode === 'edit' ? 'Save Job' : 'Create Job' }}</button></div>
+    </form>
+  </aside>
+
+  <aside class="wizard drawer" [class.drawer-open]="calendarWizardOpen" aria-label="Calendar editor">
+    <div class="wizard-header"><div><h2>{{ calendarWizardMode === 'edit' ? 'Edit Calendar' : 'New Calendar' }}</h2><div class="caption">Quartz calendars exclude times from trigger schedules.</div></div><button type="button" class="drawer-close" (click)="closeCalendarWizardDrawer()">Close</button></div>
+    <form class="wizard-form" (ngSubmit)="submitCalendarWizard()">
+      <div class="wizard-scroll">
+        @if (calendarWizardError) { <div class="warning-box"><strong>Unable to save</strong><span>{{ calendarWizardError }}</span></div> }
+        <section class="form-card"><h3>Identity</h3><div class="form-section"><div class="control"><label>Calendar name</label><input class="input mono" name="calendarNameInput" [(ngModel)]="calendarDraft.name" [readonly]="calendarWizardMode === 'edit'" required></div><div class="control"><label>Type</label><select class="select" name="calendarType" [(ngModel)]="calendarDraft.type"><option value="WEEKLY">Weekly</option><option value="MONTHLY">Monthly</option><option value="ANNUAL">Annual</option><option value="HOLIDAY">Holiday</option><option value="DAILY">Daily</option><option value="CRON">Cron</option></select></div><div class="control"><label>Description</label><input class="input" name="calendarDescription" [(ngModel)]="calendarDraft.description"></div></div></section>
+        <section class="form-card"><h3>Rules</h3><div class="form-section">@if (getCalendarRuleMode() === 'weekdays') { <div class="control"><label>Excluded days</label><div class="command-row">@for (day of [1,2,3,4,5,6,7]; track day) { <button type="button" class="btn compact" [class.primary]="calendarDraft.excludedDaysOfWeek.includes(day)" (click)="toggleCalendarWeekday(day)">{{ day }}</button> }</div><div class="help">Quartz uses 1=Sunday through 7=Saturday.</div></div> } @if (getCalendarRuleMode() === 'monthdays') { <div class="control"><label>Excluded month days</label><div class="command-row">@for (day of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]; track day) { <button type="button" class="btn compact" [class.primary]="calendarDraft.excludedDaysOfMonth.includes(day)" (click)="toggleCalendarMonthday(day)">{{ day }}</button> }</div></div> } @if (getCalendarRuleMode() === 'dates') { <div class="control"><label>Excluded dates</label><div class="data-map-editor">@for (date of calendarDraft.excludedDates; track $index) { <div class="data-map-row"><input class="input mono" type="datetime-local" name="calendarDate{{$index}}" [(ngModel)]="calendarDraft.excludedDates[$index]"><button type="button" class="btn danger compact" (click)="removeCalendarDate($index)">Remove</button></div> }</div><button type="button" class="btn" (click)="addCalendarDate()">Add Date</button></div> } @if (getCalendarRuleMode() === 'timeRange') { <div class="control"><label>Excluded time range</label><div class="input-row"><input class="input mono" name="rangeStartingTime" [(ngModel)]="calendarDraft.rangeStartingTime"><input class="input mono" name="rangeEndingTime" [(ngModel)]="calendarDraft.rangeEndingTime"></div></div><label class="check-row"><input type="checkbox" name="invertTimeRange" [(ngModel)]="calendarDraft.invertTimeRange"> Invert time range</label> } @if (getCalendarRuleMode() === 'cron') { <div class="control"><label>Cron exclusion expression</label><input class="input mono" name="calendarCron" [(ngModel)]="calendarDraft.cronExpression" required></div><div class="control"><label>Timezone</label><input class="input mono" name="calendarTimeZone" [(ngModel)]="calendarDraft.timeZone"></div> }</div></section>
+      </div>
+      <div class="wizard-footer"><button type="button" class="btn" (click)="closeCalendarWizardDrawer()">Cancel</button><button type="submit" class="btn primary" [disabled]="calendarWizardSubmitting || !canSubmitCalendar()">{{ calendarWizardSubmitting ? 'Saving...' : calendarWizardMode === 'edit' ? 'Save Calendar' : 'Create Calendar' }}</button></div>
+    </form>
+  </aside>
+</div>

quartz-manager-frontend/src/app/views/manager/manager.component.scss

@@ -1,10 +1,353 @@
 :host {
-    display: flex;
+  --bg: oklch(98% 0.005 250);
-    flex-direction: column;
+  --surface: oklch(100% 0 0);
-    flex: 1;
+  --fg: oklch(22% 0.02 240);
+  --muted: oklch(50% 0.018 240);
+  --border: oklch(90% 0.008 240);
+  --accent: oklch(56% 0.19 302);
+  --success: oklch(58% 0.16 145);
+  --warning: oklch(72% 0.15 82);
+  --danger: oklch(58% 0.19 28);
+  --info: oklch(58% 0.18 255);
+  --radius: 8px;
+  display: block;
+  min-height: 100vh;
+  color: var(--fg);
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: 14px;
 }
 
-#manager-content-container {
+* { box-sizing: border-box; }
-    height: calc(100% - 80px);
+button, input, select, textarea { font: inherit; }
-    max-height: calc(100% - 80px);
+button { cursor: pointer; }
+
+.qm-app {
+  display: grid;
+  grid-template-columns: 248px minmax(780px, 1fr);
+  min-height: 100vh;
+  background: var(--bg);
+}
+
+.qm-app.object-mode { grid-template-columns: 248px minmax(780px, 1fr); }
+
+.rail {
+  border-right: 1px solid var(--border);
+  background: oklch(99% 0.003 250);
+  padding: 18px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 8px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.brand-mark {
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: var(--accent);
+  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.brand-title { font-weight: 700; font-size: 14px; line-height: 1.15; }
+.brand-subtitle, .caption, .help { color: var(--muted); font-size: 12px; }
+.brand-subtitle, .caption, .mono, .kv span:last-child, .chip, .card-title, .field strong, .code-block, .fire-list { font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; }
+.caption { font-size: 11px; }
+
+.nav { display: flex; flex-direction: column; gap: 3px; }
+.nav button {
+  border: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--muted);
+  padding: 9px 10px;
+  border-radius: 7px;
+  text-align: left;
+}
+.nav button.active {
+  background: oklch(56% 0.19 302 / 0.10);
+  color: var(--fg);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+.nav svg { width: 17px; height: 17px; stroke-width: 1.8; }
+
+.rail-card {
+  margin-top: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  padding: 12px;
+}
+.rail-card h3, .filter-panel h3 {
+  margin: 0 0 7px;
+  font-size: 12px;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
+  font-weight: 700;
+}
+.connection { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12px; }
+
+.main { min-width: 0; display: flex; flex-direction: column; }
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 14px;
+  align-items: center;
+  min-height: 60px;
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--border);
+  background: oklch(99% 0.002 250 / 0.92);
+  backdrop-filter: blur(14px);
+}
+
+.scheduler-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
+.scheduler-title { min-width: 210px; }
+h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: 0; }
+h2 { margin: 0; }
+.kv { display: grid; gap: 2px; min-width: 118px; border: 0; background: transparent; padding: 0; color: inherit; text-align: left; }
+.kv span:first-child { color: var(--muted); font-size: 11px; }
+.kv span:last-child { font-size: 12px; white-space: nowrap; }
+.kv-button span:last-child { color: var(--warning); }
+
+.actions, .toolbar, .command-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.compact-actions { gap: 7px; }
+.btn {
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  padding: 8px 11px;
+  min-height: 36px;
+  background: var(--surface);
+  color: var(--fg);
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  white-space: nowrap;
+}
+.btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
+.btn.compact { min-height: 32px; padding: 6px 10px; font-size: 12px; }
+.btn.danger { color: var(--danger); border-color: oklch(58% 0.19 28 / 0.35); background: oklch(58% 0.19 28 / 0.06); }
+.btn:disabled { opacity: 0.55; cursor: not-allowed; }
+
+.toast-overlay {
+  position: fixed;
+  top: 18px;
+  right: 18px;
+  z-index: 90;
+  width: min(460px, calc(100vw - 36px));
+  padding: 16px 46px 16px 16px;
+  border: 1px solid oklch(72% 0.15 82 / 0.55);
+  border-left: 5px solid var(--warning);
+  background: oklch(99% 0.02 82);
+  color: var(--fg);
+  border-radius: 12px;
+  box-shadow: 0 22px 60px oklch(22% 0.02 240 / 0.20);
+}
+.toast-overlay.success { border-color: oklch(58% 0.16 145 / 0.36); border-left-color: var(--success); background: oklch(98% 0.02 145); }
+.toast-overlay.error { border-color: oklch(58% 0.19 28 / 0.40); border-left-color: var(--danger); background: oklch(98% 0.02 28); }
+.toast-kicker { font: 800 12px 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.05em; text-transform: uppercase; }
+.toast-message { margin-top: 6px; line-height: 1.45; }
+.toast-close { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; color: var(--muted); }
+
+.content { padding: 18px 20px 22px; display: grid; gap: 16px; }
+.page { display: none; }
+.page.active { display: grid; gap: 16px; }
+.page-kicker { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 2px; }
+.page-kicker h2 { font-size: 19px; }
+.page-kicker p { margin: 4px 0 0; max-width: 760px; color: var(--muted); font-size: 13px; }
+
+.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
+.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; overflow: hidden; }
+.card-header { min-height: 48px; padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.card-title { font-size: 12px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
+.card-body { padding: 14px; }
+.span-3 { grid-column: span 3; }
+.span-4 { grid-column: span 4; }
+.span-5 { grid-column: span 5; }
+.span-7 { grid-column: span 7; }
+.span-8 { grid-column: span 8; }
+.span-12 { grid-column: span 12; }
+
+.scheduler-command-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: 14px; align-items: stretch; }
+.command-panel { display: grid; gap: 12px; }
+.metadata-grid, .summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+.summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+.metric { display: grid; gap: 7px; min-height: 112px; }
+.metric-value { font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 27px; font-weight: 720; font-variant-numeric: tabular-nums; }
+.compact-metric { font-size: 22px; }
+.metric-label { color: var(--muted); font-size: 12px; }
+.metric-line { height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: auto; }
+.metric-line > span { display: block; height: 100%; background: var(--success); width: var(--w); }
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 650;
+  white-space: nowrap;
+  background: var(--surface);
+  color: var(--muted);
+}
+.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
+.chip.running, .chip.normal, .chip.success { color: var(--success); background: oklch(58% 0.16 145 / 0.08); border-color: oklch(58% 0.16 145 / 0.25); }
+.chip.paused, .chip.warn { color: var(--warning); background: oklch(72% 0.15 82 / 0.12); border-color: oklch(72% 0.15 82 / 0.30); }
+.chip.error, .chip.danger { color: var(--danger); background: oklch(58% 0.19 28 / 0.08); border-color: oklch(58% 0.19 28 / 0.25); }
+.chip.blocked { color: var(--info); background: oklch(58% 0.18 255 / 0.08); border-color: oklch(58% 0.18 255 / 0.25); }
+.chip.accent { color: var(--accent); background: oklch(56% 0.19 302 / 0.08); border-color: oklch(56% 0.19 302 / 0.25); }
+
+.table-wrap { overflow: auto; }
+table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
+th, td { border-bottom: 1px solid var(--border); padding: 10px; text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+th { color: var(--muted); font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-weight: 650; background: oklch(98% 0.004 250); }
+.selectable:hover { background: oklch(56% 0.19 302 / 0.035); }
+tr.selected { background: oklch(56% 0.19 302 / 0.06); box-shadow: inset 3px 0 0 var(--accent); }
+
+.split { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 420px; }
+.object-mode .split { grid-template-columns: minmax(0, 1fr); }
+.detail { background: oklch(99% 0.003 250); padding: 14px; display: flex; flex-direction: column; gap: 14px; }
+.detail h2 { font-size: 17px; }
+.drawer-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
+.drawer-close { border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); padding: 6px 10px; font-size: 12px; }
+.drawer-backdrop { position: fixed; inset: 0; z-index: 70; border: 0; background: oklch(22% 0.02 240 / 0.32); backdrop-filter: blur(2px); }
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 80;
+  width: min(460px, 100vw);
+  height: 100vh;
+  max-height: 100vh;
+  overflow: auto;
+  border-left: 1px solid var(--border);
+  box-shadow: -24px 0 70px oklch(22% 0.02 240 / 0.22);
+  transform: translateX(104%);
+  transition: transform 180ms ease;
+}
+.drawer.drawer-open { transform: translateX(0); }
+.detail-drawer { width: min(430px, 100vw); }
+.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
+.tab { padding: 8px 9px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12px; white-space: nowrap; }
+.tab.active { color: var(--fg); border-color: var(--accent); }
+.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.field { display: grid; gap: 4px; padding: 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); min-width: 0; text-align: left; color: inherit; }
+.field-button { cursor: pointer; }
+.field label { color: var(--muted); font-size: 11px; }
+.field strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.progress-card { display: grid; gap: 10px; }
+.progress-line { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
+.progress-line span { display: block; height: 100%; background: var(--success); }
+.preview { display: grid; gap: 9px; padding: 13px; border-radius: var(--radius); background: oklch(56% 0.19 302 / 0.07); border: 1px solid oklch(56% 0.19 302 / 0.18); }
+.preview h4 { margin: 0; font-size: 13px; }
+.fire-list { display: grid; gap: 5px; font-size: 12px; }
+.warning-box, .danger-zone { border: 1px solid oklch(58% 0.19 28 / 0.30); background: oklch(58% 0.19 28 / 0.07); border-radius: 7px; padding: 10px; display: grid; gap: 5px; }
+.warning-box strong, .danger-zone strong { color: var(--danger); font-size: 12px; }
+.danger-zone { border-radius: var(--radius); padding: 12px; }
+.code-block { margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: oklch(97% 0.006 250); font-size: 12px; overflow: auto; white-space: pre-wrap; }
+
+.stream { display: grid; grid-template-columns: 1fr; gap: 0; max-height: 310px; overflow: auto; }
+.tall-stream { max-height: 560px; }
+.stream-row { display: grid; grid-template-columns: 92px 78px 112px 140px 1fr; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
+.stream-row:first-child { background: oklch(98% 0.004 250); color: var(--muted); font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-weight: 650; position: sticky; top: 0; z-index: 1; }
+.muted-row { color: var(--muted); }
+.search { min-width: 220px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); height: 32px; padding: 0 12px; color: var(--muted); font-size: 12px; }
+
+.mini-chart { height: 154px; display: grid; grid-template-columns: repeat(18, 1fr); align-items: end; gap: 5px; border-bottom: 1px solid var(--border); padding-top: 18px; }
+.bar { background: color-mix(in oklch, var(--success), white 38%); border-radius: 4px 4px 0 0; height: var(--h); min-height: 12px; }
+.bar.warn { background: color-mix(in oklch, var(--warning), white 35%); }
+.bar.error { background: color-mix(in oklch, var(--danger), white 35%); }
+.top-space { margin-top: 14px; }
+
+.two-column { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
+.filter-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px; display: grid; gap: 12px; align-content: start; }
+.control { display: grid; gap: 6px; }
+.control label { font-size: 12px; color: var(--muted); }
+.input, .select, .textarea { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 6px; background: oklch(99% 0.002 250); min-height: 38px; padding: 8px 10px; color: var(--fg); outline: none; }
+.textarea { min-height: 70px; resize: vertical; }
+.compact-select { width: auto; min-width: 150px; min-height: 32px; padding-block: 5px; }
+.check-row { display: flex; gap: 8px; align-items: center; color: var(--fg); }
+.data-map-editor { display: grid; gap: 8px; }
+.data-map-row { display: grid; grid-template-columns: minmax(90px, 1fr) 104px minmax(110px, 1fr) auto; gap: 8px; align-items: start; }
+
+.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
+.calendar-cell { min-height: 44px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 6px; font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); }
+.calendar-cell.excluded { color: var(--danger); background: oklch(58% 0.19 28 / 0.06); border-color: oklch(58% 0.19 28 / 0.25); }
+.roadmap-copy { margin: 0 0 14px; color: var(--muted); }
+.compact-roadmap { align-items: start; }
+.node-list { display: grid; gap: 8px; }
+.node-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
+
+.wizard { background: oklch(99% 0.002 250); display: flex; flex-direction: column; width: min(620px, 100vw); height: 100dvh; overflow: hidden; }
+.wizard-header { min-height: 76px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--surface); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.wizard-header h2 { font-size: 17px; }
+.stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
+.step { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
+.step span:first-child { height: 4px; border-radius: 999px; background: var(--border); }
+.step.done span:first-child, .step.active span:first-child { background: var(--accent); }
+.step.active { color: var(--fg); font-weight: 650; }
+.wizard-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
+.wizard-scroll { flex: 1 1 auto; min-height: 0; padding: 16px 18px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 14px; }
+.wizard-scroll > * { flex: 0 0 auto; }
+.form-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
+.form-card h3 { margin: 0; padding: 12px 13px; border-bottom: 1px solid var(--border); font-size: 12px; font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; color: var(--muted); text-transform: uppercase; }
+.form-section { padding: 13px; display: grid; gap: 12px; }
+.input-row { display: grid; grid-template-columns: 1fr 118px; gap: 8px; }
+.radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.type-option { border: 1px solid var(--border); border-radius: 7px; padding: 10px; display: grid; gap: 4px; background: oklch(99% 0.002 250); text-align: left; color: inherit; min-width: 0; }
+.type-option.active { border-color: oklch(56% 0.19 302 / 0.55); box-shadow: inset 0 0 0 1px oklch(56% 0.19 302 / 0.22); background: oklch(56% 0.19 302 / 0.06); }
+.type-option strong { font-size: 12px; }
+.wizard-footer { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface); }
+
+@media (max-width: 1280px) {
+  .qm-app { grid-template-columns: 78px minmax(680px, 1fr); }
+  .qm-app.object-mode { grid-template-columns: 78px minmax(680px, 1fr); }
+  .brand-title, .brand-subtitle, .nav span, .rail-card { display: none; }
+  .rail { align-items: center; }
+  .nav button { justify-content: center; }
+  .brand { padding-inline: 0; border-bottom: 0; }
+}
+
+@media (max-width: 960px) {
+  .qm-app, .qm-app.object-mode { grid-template-columns: 1fr; }
+  .rail { position: sticky; top: 0; z-index: 5; border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; align-items: center; overflow-x: auto; padding: 10px; }
+  .brand-title, .brand-subtitle, .nav span { display: block; }
+  .brand { border-bottom: 0; padding: 0; min-width: 190px; }
+  .nav { flex-direction: row; }
+  .topbar, .page-kicker, .scheduler-command-grid, .two-column, .split, .object-mode .split { grid-template-columns: 1fr; }
+  .drawer { width: min(420px, 100vw); }
+  .span-3, .span-4, .span-5, .span-7, .span-8, .span-12 { grid-column: span 12; }
+  .metadata-grid, .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 640px) {
+  .content { padding: 12px; }
+  .dashboard-grid { grid-template-columns: 1fr; }
+  .span-3, .span-4, .span-5, .span-7, .span-8, .span-12 { grid-column: span 1; }
+  .metadata-grid, .summary-grid, .field-grid, .radio-grid, .input-row, .data-map-row { grid-template-columns: 1fr; }
+  .stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .stream-row { grid-template-columns: 1fr; gap: 4px; }
+  .toast-overlay { top: 10px; right: 10px; width: calc(100vw - 20px); }
+  .page-kicker { align-items: stretch; }
 }

quartz-manager-frontend/src/app/views/not-found/not-found.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="column" fxLayoutAlign="center" style="text-align: center">
+<div class="flex flex-column justify-center" style="text-align: center">
   <div>
     <div>
       <p style="font-size: 4em; margin-bottom: 0">Not Found!</p>

quartz-manager-frontend/src/app/views/not-found/not-found.component.ts

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
 
 @Component({
-  templateUrl: './not-found.component.html'
+    templateUrl: './not-found.component.html',
+    standalone: false
 })
 export class NotFoundComponent {
 

quartz-manager-frontend/src/main.ts

@@ -1,4 +1,4 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
@@ -8,4 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule, {
+  applicationProviders: [provideZoneChangeDetection()],
+});

quartz-manager-frontend/src/polyfills.ts

@@ -1,75 +1,3 @@
-/**
+import 'zone.js';
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
- */
 
-/** *************************************************************************************************
+(window as any).global = window;
- * BROWSER POLYFILLS
- */
-
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following to support `@angular/animation`. */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
-/** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
-
-
-
-/** ALL Firefox browsers require the following to support `@angular/animation`. **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
-
-/** *************************************************************************************************
- * Zone JS is required by Angular itself.
- */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
-(window as any).global = window
-
-
-
-/** *************************************************************************************************
- * APPLICATION IMPORTS
- */
-
-/**
- * Date, currency, decimal and percent pipes.
- * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
- */
-// import 'intl';  // Run `npm install --save intl`.
-
-/** *************************************************************************************************
- * MATERIAL 2
- */
-import 'hammerjs/hammer';

quartz-manager-frontend/src/styles.css

@@ -1,5 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
-@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
 @import "animate.css";
 
 html {
@@ -32,6 +33,22 @@ body {
   justify-content: space-between;
 }
 
+.justify-space-around {
+  justify-content: space-around;
+}
+
+.justify-space-evenly {
+  justify-content: space-evenly;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-flex-end {
+  justify-content: flex-end;
+}
+
 .flex {
   display: flex;
 }
@@ -48,6 +65,10 @@ body {
   flex: 1;
 }
 
+.flex-none {
+  flex: 0 0 auto;
+}
+
 .h-100 {
   height: 100%;
 }
@@ -68,6 +89,18 @@ body {
   gap: 6px;
 }
 
+.gap-10 {
+  gap: 10px;
+}
+
+.gap-12 {
+  gap: 12px;
+}
+
+.gap-30 {
+  gap: 30px;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -100,3 +133,12 @@ body {
   align-items: center;
 }
 
+.align-items-stretch {
+  align-items: stretch;
+}
+
+@media (max-width: 599px) {
+  .log-row {
+    flex-direction: column;
+  }
+}

quartz-manager-frontend/tsconfig.json

@@ -7,17 +7,12 @@
     "baseUrl": "src",
     "sourceMap": true,
     "declaration": false,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "ES2022",
-    "typeRoots": [
+    "typeRoots": ["node_modules/@types"],
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2016",
-      "dom"
-    ],
     "module": "es2020",
     "useDefineForClassFields": false
   }

quartz-manager-frontend/tsconfig.spec.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
     "baseUrl": "",
+    "importHelpers": false,
     "types": [
       "jasmine",
       "node"

quartz-manager-parent/pom.xml

@@ -5,12 +5,12 @@
   <parent>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-parent</artifactId>
-    <version>2.5.6</version>
+    <version>4.0.6</version>
   </parent>
 
   <groupId>it.fabioformosa.quartz-manager</groupId>
   <artifactId>quartz-manager-parent</artifactId>
-  <version>4.0.11-SNAPSHOT</version>
+  <version>5.0.1</version>
 
   <packaging>pom</packaging>
 
@@ -41,17 +41,17 @@
   </developers>
 
   <properties>
-    <java.version>9</java.version>
+    <java.version>21</java.version>
     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
-    <org.projectlombok.version>1.18.30</org.projectlombok.version>
+    <org.projectlombok.version>1.18.42</org.projectlombok.version>
-    <maven-surefire-plugin.version>2.22.0</maven-surefire-plugin.version>
+    <maven-surefire-plugin.version>3.5.4</maven-surefire-plugin.version>
-    <maven-failsafe-plugin.version>2.22.0</maven-failsafe-plugin.version>
+    <maven-failsafe-plugin.version>3.5.4</maven-failsafe-plugin.version>
-    <jacoco-maven-plugin.version>0.8.8</jacoco-maven-plugin.version>
+    <jacoco-maven-plugin.version>0.8.14</jacoco-maven-plugin.version>
-    <maven-javadoc-plugin.version>3.4.1</maven-javadoc-plugin.version>
+    <maven-javadoc-plugin.version>3.12.0</maven-javadoc-plugin.version>
     <nexus-staging-maven-plugin.version>1.6.7</nexus-staging-maven-plugin.version>
     <maven-release-plugin.version>2.5.3</maven-release-plugin.version>
     <maven-gpg-plugin.version>3.0.1</maven-gpg-plugin.version>
-    <sonar-maven-plugin.version>3.11.0.3922</sonar-maven-plugin.version>
+    <sonar-maven-plugin.version>5.2.0.4988</sonar-maven-plugin.version>
     <sonar.organization>fabioformosa</sonar.organization>
     <sonar.host.url>https://sonarcloud.io</sonar.host.url>
     <sonar.exclusions>
@@ -64,6 +64,9 @@
       **/WebShowcaseOpenApiConfig.java, **/MisfireTestJob.java, **/PersistenceConfig.java,
       **/QuartzManagerSecurityConfig.java
     </sonar.coverage.exclusions>
+    <sonar.issue.ignore.multicriteria>e1</sonar.issue.ignore.multicriteria>
+    <sonar.issue.ignore.multicriteria.e1.ruleKey>java:S4502</sonar.issue.ignore.multicriteria.e1.ruleKey>
+    <sonar.issue.ignore.multicriteria.e1.resourceKey>**/QuartzManagerSecurityConfig.java</sonar.issue.ignore.multicriteria.e1.resourceKey>
   </properties>
 
   <modules>
@@ -80,27 +83,27 @@
       <dependency>
         <groupId>it.fabioformosa.quartz-manager</groupId>
         <artifactId>quartz-manager-common</artifactId>
-        <version>4.0.11-SNAPSHOT</version>
+        <version>5.0.1</version>
       </dependency>
       <dependency>
         <groupId>it.fabioformosa.quartz-manager</groupId>
         <artifactId>quartz-manager-starter-api</artifactId>
-        <version>4.0.11-SNAPSHOT</version>
+        <version>5.0.1</version>
       </dependency>
       <dependency>
         <groupId>it.fabioformosa.quartz-manager</groupId>
         <artifactId>quartz-manager-starter-security</artifactId>
-        <version>4.0.11-SNAPSHOT</version>
+        <version>5.0.1</version>
       </dependency>
       <dependency>
         <groupId>it.fabioformosa.quartz-manager</groupId>
         <artifactId>quartz-manager-starter-persistence</artifactId>
-        <version>4.0.11-SNAPSHOT</version>
+        <version>5.0.1</version>
       </dependency>
       <dependency>
         <groupId>it.fabioformosa.quartz-manager</groupId>
         <artifactId>quartz-manager-starter-ui</artifactId>
-        <version>4.0.11-SNAPSHOT</version>
+        <version>5.0.1</version>
       </dependency>
       <dependency>
         <groupId>org.projectlombok</groupId>
@@ -111,12 +114,11 @@
   </dependencyManagement>
 
   <dependencies>
-    <dependency>
+      <dependency>
-      <groupId>org.junit.jupiter</groupId>
+        <groupId>org.junit.jupiter</groupId>
-      <artifactId>junit-jupiter</artifactId>
+        <artifactId>junit-jupiter</artifactId>
-      <version>5.7.2</version>
+        <scope>test</scope>
-      <scope>test</scope>
+      </dependency>
-    </dependency>
   </dependencies>
 
   <build>
@@ -125,9 +127,15 @@
         <groupId>org.apache.maven.plugins</groupId>
         <artifactId>maven-compiler-plugin</artifactId>
         <configuration>
-          <source>${java.version}</source>
+          <release>${java.version}</release>
-          <target>${java.version}</target>
           <encoding>${project.build.sourceEncoding}</encoding>
+          <annotationProcessorPaths>
+            <path>
+              <groupId>org.projectlombok</groupId>
+              <artifactId>lombok</artifactId>
+              <version>${org.projectlombok.version}</version>
+            </path>
+          </annotationProcessorPaths>
         </configuration>
       </plugin>
       <plugin>
@@ -265,7 +273,7 @@
           <plugin>
             <groupId>org.sonatype.central</groupId>
             <artifactId>central-publishing-maven-plugin</artifactId>
-            <version>0.7.0</version>
+            <version>0.10.0</version>
             <extensions>true</extensions>
             <configuration>
               <publishingServerId>maven-central-release</publishingServerId>

quartz-manager-parent/quartz-manager-common/pom.xml

@@ -3,10 +3,14 @@
   <parent>
     <groupId>it.fabioformosa.quartz-manager</groupId>
     <artifactId>quartz-manager-parent</artifactId>
-    <version>4.0.11-SNAPSHOT</version>
+    <version>5.0.1</version>
   </parent>
   <artifactId>quartz-manager-common</artifactId>
 
+  <name>Quartz Manager Common</name>
+  <description>Common components shared by Quartz Manager modules</description>
+  <url>https://github.com/fabioformosa/quartz-manager</url>
+
   <dependencies>
     <dependency>
         <groupId>org.projectlombok</groupId>

quartz-manager-parent/quartz-manager-starter-api/pom.xml

@@ -5,7 +5,7 @@
   <parent>
     <groupId>it.fabioformosa.quartz-manager</groupId>
     <artifactId>quartz-manager-parent</artifactId>
-    <version>4.0.11-SNAPSHOT</version>
+    <version>5.0.1</version>
   </parent>
 
   <artifactId>quartz-manager-starter-api</artifactId>
@@ -18,8 +18,8 @@
     <main.basedir>${basedir}/../..</main.basedir>
     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
     <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
-    <springdoc-openapi.version>1.5.12</springdoc-openapi.version>
+    <springdoc-openapi.version>3.0.3</springdoc-openapi.version>
-    <java.version>9</java.version>
+    <java.version>21</java.version>
     <sonar.exclusions>**/QuartManagerApplicationTests.java, **/OpenApiConfig.java</sonar.exclusions>
   </properties>
 
@@ -61,6 +61,11 @@
       <artifactId>spring-boot-starter-test</artifactId>
       <scope>test</scope>
     </dependency>
+    <dependency>
+      <groupId>org.springframework.boot</groupId>
+      <artifactId>spring-boot-webmvc-test</artifactId>
+      <scope>test</scope>
+    </dependency>
 
     <!-- MISC -->
     <dependency>
@@ -84,22 +89,7 @@
     <dependency>
       <groupId>it.fabioformosa</groupId>
       <artifactId>metamorphosis-core</artifactId>
-      <version>3.0.0</version>
+      <version>4.0.2</version>
-    </dependency>
-    <dependency>
-      <groupId>javax.validation</groupId>
-      <artifactId>validation-api</artifactId>
-      <version>2.0.1.Final</version>
-    </dependency>
-    <dependency>
-      <groupId>org.hibernate.validator</groupId>
-      <artifactId>hibernate-validator</artifactId>
-      <version>6.0.2.Final</version>
-    </dependency>
-    <dependency>
-      <groupId>org.glassfish</groupId>
-      <artifactId>javax.el</artifactId>
-      <version>3.0.0</version>
     </dependency>
     <dependency>
       <groupId>org.reflections</groupId>
@@ -125,15 +115,10 @@
     <!-- OAS -->
     <dependency>
       <groupId>org.springdoc</groupId>
-      <artifactId>springdoc-openapi-ui</artifactId>
+      <artifactId>springdoc-openapi-starter-webmvc-ui</artifactId>
       <version>${springdoc-openapi.version}</version>
       <optional>true</optional>
     </dependency>
-    <dependency>
-      <groupId>org.springdoc</groupId>
-      <artifactId>springdoc-openapi-common</artifactId>
-      <version>${springdoc-openapi.version}</version>
-    </dependency>
 
     <!-- TEST -->
     <dependency>

quartz-manager-parent/quartz-manager-starter-api/src/main/java/it/fabioformosa/quartzmanager/api/configuration/OpenApiConfig.java

@@ -6,8 +6,8 @@ import io.swagger.v3.oas.models.info.License;
 import it.fabioformosa.quartzmanager.api.common.config.QuartzManagerPaths;
 import lombok.Generated;
 import lombok.extern.slf4j.Slf4j;
-import org.springdoc.core.GroupedOpenApi;
+import org.springdoc.core.customizers.OpenApiCustomizer;
-import org.springdoc.core.customizers.OpenApiCustomiser;
+import org.springdoc.core.models.GroupedOpenApi;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Qualifier;
 import org.springframework.boot.autoconfigure.condition.ConditionalOnMissingBean;
@@ -39,10 +39,10 @@ public class OpenApiConfig {
 
   @ConditionalOnProperty(name = "quartz-manager.oas.enabled")
   @Bean
-  public GroupedOpenApi quartzManagerStoreOpenApi(@Autowired(required = false) @Qualifier("quartzManagerOpenApiCustomiser") Optional<OpenApiCustomiser> openApiCustomiser) {
+  public GroupedOpenApi quartzManagerStoreOpenApi(@Autowired(required = false) @Qualifier("quartzManagerOpenApiCustomizer") Optional<OpenApiCustomizer> openApiCustomizer) {
     String[] paths = {QuartzManagerPaths.QUARTZ_MANAGER_BASE_CONTEXT_PATH + "/**"};
     GroupedOpenApi.Builder groupedOpenApiBuilder = GroupedOpenApi.builder().group("quartz-manager").pathsToMatch(paths);
-    openApiCustomiser.ifPresent(groupedOpenApiBuilder::addOpenApiCustomiser);
+    openApiCustomizer.ifPresent(groupedOpenApiBuilder::addOpenApiCustomizer);
     return groupedOpenApiBuilder.build();
   }
 

quartz-manager-parent/quartz-manager-starter-api/src/main/java/it/fabioformosa/quartzmanager/api/configuration/WebsocketConfig.java

@@ -4,14 +4,14 @@ import it.fabioformosa.quartzmanager.api.common.config.QuartzManagerPaths;
 import org.springframework.context.annotation.ComponentScan;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.messaging.simp.config.MessageBrokerRegistry;
-import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
 import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
 import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
+import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
 
 @Configuration
 @ComponentScan(basePackages = {"it.fabioformosa.quartzmanager.api.websockets"})
 @EnableWebSocketMessageBroker
-public class WebsocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
+public class WebsocketConfig implements WebSocketMessageBrokerConfigurer {
 
   @Override
   public void configureMessageBroker(MessageBrokerRegistry config) {

quartz-manager-parent/quartz-manager-starter-api/src/main/java/it/fabioformosa/quartzmanager/api/controllers/CalendarController.java

@@ -0,0 +1,77 @@
+package it.fabioformosa.quartzmanager.api.controllers;
+
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.security.SecurityRequirement;
+import it.fabioformosa.quartzmanager.api.dto.CalendarDTO;
+import it.fabioformosa.quartzmanager.api.dto.CalendarIncludedTimeDTO;
+import it.fabioformosa.quartzmanager.api.services.CalendarService;
+import jakarta.validation.Valid;
+import org.quartz.SchedulerException;
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseStatus;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.text.ParseException;
+import java.util.List;
+
+import static it.fabioformosa.quartzmanager.api.common.config.OpenAPIConfigConsts.QUARTZ_MANAGER_SEC_OAS_SCHEMA;
+import static it.fabioformosa.quartzmanager.api.common.config.QuartzManagerPaths.QUARTZ_MANAGER_BASE_CONTEXT_PATH;
+
+@RequestMapping(CalendarController.CALENDAR_CONTROLLER_BASE_URL)
+@SecurityRequirement(name = QUARTZ_MANAGER_SEC_OAS_SCHEMA)
+@RestController
+public class CalendarController {
+
+  protected static final String CALENDAR_CONTROLLER_BASE_URL = QUARTZ_MANAGER_BASE_CONTEXT_PATH + "/calendars";
+
+  private final CalendarService calendarService;
+
+  public CalendarController(CalendarService calendarService) {
+    this.calendarService = calendarService;
+  }
+
+  @GetMapping
+  @Operation(summary = "Get a list of calendars")
+  public List<CalendarDTO> listCalendars() throws SchedulerException {
+    return calendarService.fetchCalendars();
+  }
+
+  @GetMapping("/{name}")
+  @Operation(summary = "Get calendar details")
+  public CalendarDTO getCalendar(@PathVariable String name) throws SchedulerException {
+    return calendarService.getCalendar(name);
+  }
+
+  @PostMapping("/{name}")
+  @ResponseStatus(HttpStatus.CREATED)
+  @Operation(summary = "Create a calendar")
+  public CalendarDTO postCalendar(@PathVariable String name, @Valid @RequestBody CalendarDTO calendarDTO) throws SchedulerException, ParseException {
+    return calendarService.addCalendar(name, calendarDTO);
+  }
+
+  @PutMapping("/{name}")
+  @Operation(summary = "Update a calendar")
+  public CalendarDTO putCalendar(@PathVariable String name, @Valid @RequestBody CalendarDTO calendarDTO) throws SchedulerException, ParseException {
+    return calendarService.updateCalendar(name, calendarDTO);
+  }
+
+  @DeleteMapping("/{name}")
+  @ResponseStatus(HttpStatus.NO_CONTENT)
+  @Operation(summary = "Delete a calendar")
+  public void deleteCalendar(@PathVariable String name) throws SchedulerException {
+    calendarService.deleteCalendar(name);
+  }
+
+  @PostMapping("/{name}/included-time-test")
+  @Operation(summary = "Test if a time is included by a calendar")
+  public CalendarIncludedTimeDTO testIncludedTime(@PathVariable String name, @Valid @RequestBody CalendarIncludedTimeDTO input) throws SchedulerException {
+    return calendarService.testIncludedTime(name, input);
+  }
+}

quartz-manager-parent/quartz-manager-starter-api/src/main/java/it/fabioformosa/quartzmanager/api/controllers/JobController.java

@@ -8,26 +8,40 @@ import io.swagger.v3.oas.annotations.responses.ApiResponses;
 import io.swagger.v3.oas.annotations.security.SecurityRequirement;
 import it.fabioformosa.quartzmanager.api.common.config.OpenAPIConfigConsts;
 import it.fabioformosa.quartzmanager.api.common.config.QuartzManagerPaths;
+import it.fabioformosa.quartzmanager.api.dto.ScheduledJobDTO;
+import it.fabioformosa.quartzmanager.api.dto.ScheduledJobInputDTO;
+import it.fabioformosa.quartzmanager.api.exceptions.JobNotFoundException;
 import it.fabioformosa.quartzmanager.api.services.JobService;
+import org.quartz.SchedulerException;
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.DeleteMapping;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseStatus;
 import org.springframework.web.bind.annotation.RestController;
 
 import java.util.List;
 import java.util.stream.Collectors;
 
-@RequestMapping(JobController.JOB_CONTROLLER_BASE_URL)
+import jakarta.validation.Valid;
+
+@RequestMapping(QuartzManagerPaths.QUARTZ_MANAGER_BASE_CONTEXT_PATH)
 @SecurityRequirement(name = OpenAPIConfigConsts.QUARTZ_MANAGER_SEC_OAS_SCHEMA)
 @RestController
 public class JobController {
   public static final String JOB_CONTROLLER_BASE_URL = QuartzManagerPaths.QUARTZ_MANAGER_BASE_CONTEXT_PATH + "/jobs";
+  public static final String JOB_CLASSES_CONTROLLER_BASE_URL = QuartzManagerPaths.QUARTZ_MANAGER_BASE_CONTEXT_PATH + "/job-classes";
   private final JobService jobService;
 
   public JobController(JobService jobService) {
     this.jobService = jobService;
   }
 
-  @GetMapping
+  @GetMapping("/job-classes")
   @Operation(summary = "Get the list of job classes eligible for Quartz-Manager")
   @ApiResponses(value = {
     @ApiResponse(responseCode = "200", description = "Return a list of qualified java classes",
@@ -38,4 +52,48 @@ public class JobController {
     return jobService.getJobClasses().stream().map(Class::getName).collect(Collectors.toList());
   }
 
+  @GetMapping("/jobs")
+  @Operation(summary = "Get the list of scheduled jobs")
+  @ApiResponses(value = {
+    @ApiResponse(responseCode = "200", description = "Return a list of scheduled jobs",
+      content = {@Content(mediaType = "application/json",
+        schema = @Schema(implementation = ScheduledJobDTO.class))})
+  })
+  public List<ScheduledJobDTO> listScheduledJobs() throws SchedulerException {
+    return jobService.fetchScheduledJobs();
+  }
+
+  @GetMapping("/jobs/{group}/{name}")
+  @Operation(summary = "Get a scheduled job")
+  public ScheduledJobDTO getScheduledJob(@PathVariable String group, @PathVariable String name) throws SchedulerException, JobNotFoundException {
+    return jobService.getScheduledJob(group, name);
+  }
+
+  @PostMapping("/jobs/{group}/{name}")
+  @ResponseStatus(HttpStatus.CREATED)
+  @Operation(summary = "Create a stored job")
+  public ScheduledJobDTO createJob(@PathVariable String group, @PathVariable String name, @Valid @RequestBody ScheduledJobInputDTO scheduledJobInputDTO) throws SchedulerException, ClassNotFoundException {
+    return jobService.createJob(group, name, scheduledJobInputDTO);
+  }
+
+  @PutMapping("/jobs/{group}/{name}")
+  @Operation(summary = "Update a stored job")
+  public ScheduledJobDTO updateJob(@PathVariable String group, @PathVariable String name, @Valid @RequestBody ScheduledJobInputDTO scheduledJobInputDTO) throws SchedulerException, ClassNotFoundException, JobNotFoundException {
+    return jobService.updateJob(group, name, scheduledJobInputDTO);
+  }
+
+  @PostMapping("/jobs/{group}/{name}/trigger")
+  @ResponseStatus(HttpStatus.NO_CONTENT)
+  @Operation(summary = "Trigger a job now")
+  public void triggerJob(@PathVariable String group, @PathVariable String name) throws SchedulerException, JobNotFoundException {
+    jobService.triggerJob(group, name);
+  }
+
+  @DeleteMapping("/jobs/{group}/{name}")
+  @ResponseStatus(HttpStatus.NO_CONTENT)
+  @Operation(summary = "Delete a job")
+  public void deleteJob(@PathVariable String group, @PathVariable String name) throws SchedulerException, JobNotFoundException {
+    jobService.deleteJob(group, name);
+  }
+
 }

quartz-manager-parent/quartz-manager-starter-api/src/main/java/it/fabioformosa/quartzmanager/api/controllers/SchedulerController.java

@@ -12,6 +12,7 @@ import lombok.extern.slf4j.Slf4j;
 import org.quartz.SchedulerException;
 import org.springframework.http.HttpStatus;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseStatus;
 import org.springframework.web.bind.annotation.RestController;
@@ -51,21 +52,21 @@ public class SchedulerController {
     return schedulerService.getScheduler();
   }
 
-  @GetMapping("/pause")
+  @PostMapping("/standby")
-  @Operation(summary = "Get paused the scheduler")
+  @Operation(summary = "Put the scheduler in standby mode")
   @ApiResponses(value = {
-    @ApiResponse(responseCode = "204", description = "Got paused successfully")
+    @ApiResponse(responseCode = "204", description = "Scheduler moved to standby successfully")
   })
   @ResponseStatus(HttpStatus.NO_CONTENT)
-  public void pause() throws SchedulerException {
+  public void standby() throws SchedulerException {
-    log.info("SCHEDULER - PAUSE COMMAND");
+    log.info("SCHEDULER - STANDBY COMMAND");
     schedulerService.standby();
   }
 
-  @GetMapping("/resume")
+  @PostMapping("/resume")
-  @Operation(summary = "Get resumed the scheduler")
+  @Operation(summary = "Resume the scheduler from standby mode")
   @ApiResponses(value = {
-    @ApiResponse(responseCode = "204", description = "Got resumed successfully")
+    @ApiResponse(responseCode = "204", description = "Scheduler resumed successfully")
   })
   @ResponseStatus(HttpStatus.NO_CONTENT)
   public void resume() throws SchedulerException {
@@ -73,25 +74,25 @@ public class SchedulerController {
     schedulerService.start();
   }
 
-  @GetMapping("/run")
+  @PostMapping("/start")
   @Operation(summary = "Start the scheduler")
   @ApiResponses(value = {
-    @ApiResponse(responseCode = "204", description = "Got started successfully")
+    @ApiResponse(responseCode = "204", description = "Scheduler started successfully")
   })
   @ResponseStatus(HttpStatus.NO_CONTENT)
-  public void run() throws SchedulerException {
+  public void start() throws SchedulerException {
     log.info("SCHEDULER - START COMMAND");
     schedulerService.start();
   }
 
-  @GetMapping("/stop")
+  @PostMapping("/shutdown")
-  @Operation(summary = "Stop the scheduler")
+  @Operation(summary = "Shutdown the scheduler terminally")
   @ApiResponses(value = {
-    @ApiResponse(responseCode = "204", description = "Got stopped successfully")
+    @ApiResponse(responseCode = "204", description = "Scheduler shut down successfully")
   })
   @ResponseStatus(HttpStatus.NO_CONTENT)
-  public void stop() throws SchedulerException {
+  public void shutdown() throws SchedulerException {
-    log.info("SCHEDULER - STOP COMMAND");
+    log.info("SCHEDULER - SHUTDOWN COMMAND");
     schedulerService.shutdown();
   }
 

quartz-manager-parent/quartz-manager-starter-api/src/main/java/it/fabioformosa/quartzmanager/api/controllers/SimpleTriggerController.java

@@ -19,7 +19,7 @@ import org.quartz.SchedulerException;
 import org.springframework.http.HttpStatus;
 import org.springframework.web.bind.annotation.*;
 
-import javax.validation.Valid;
+import jakarta.validation.Valid;
 
 @Slf4j
 @RequestMapping(SimpleTriggerController.SIMPLE_TRIGGER_CONTROLLER_BASE_URL)
@@ -35,7 +35,7 @@ public class SimpleTriggerController {
     this.simpleSchedulerService = simpleSchedulerService;
   }
 
-  @GetMapping("/{name}")
+  @GetMapping("/{group}/{name}")
   @Operation(summary = "Get a simple trigger by name")
   @ApiResponses(value = {
     @ApiResponse(responseCode = "200", description = "Got the trigger by its name",
@@ -44,11 +44,11 @@ public class SimpleTriggerController {
     @ApiResponse(responseCode = "404", description = "Trigger not found",
       content = @Content)
   })
-  public SimpleTriggerDTO getSimpleTrigger(@PathVariable String name) throws SchedulerException, TriggerNotFoundException {
+  public SimpleTriggerDTO getSimpleTrigger(@PathVariable String group, @PathVariable String name) throws SchedulerException, TriggerNotFoundException {
-    return simpleSchedulerService.getSimpleTriggerByName(name);
+    return simpleSchedulerService.getSimpleTrigger(group, name);
   }
 
-  @PostMapping("/{name}")
+  @PostMapping("/{group}/{name}")
   @ResponseStatus(HttpStatus.CREATED)
   @Operation(summary = "Schedule a new simple trigger")
   @ApiResponses(value = {
@@ -58,10 +58,11 @@ public class SimpleTriggerController {
     @ApiResponse(responseCode = "400", description = "Invalid trigger configuration",
       content = @Content)
   })
-  public SimpleTriggerDTO postSimpleTrigger(@PathVariable String name, @Valid @RequestBody SimpleTriggerInputDTO simpleTriggerInputDTO) throws SchedulerException, ClassNotFoundException {
+  public SimpleTriggerDTO postSimpleTrigger(@PathVariable String group, @PathVariable String name, @Valid @RequestBody SimpleTriggerInputDTO simpleTriggerInputDTO) throws SchedulerException, ClassNotFoundException {
     log.info("SIMPLE TRIGGER - CREATING a SimpleTrigger {} {}", name, simpleTriggerInputDTO);
     SimpleTriggerCommandDTO simpleTriggerCommandDTO = SimpleTriggerCommandDTO.builder()
       .triggerName(name)
+      .triggerGroup(group)
       .simpleTriggerInputDTO(simpleTriggerInputDTO)
       .build();
     SimpleTriggerDTO newTriggerDTO = simpleSchedulerService.scheduleSimpleTrigger(simpleTriggerCommandDTO);
@@ -69,7 +70,7 @@ public class SimpleTriggerController {
     return newTriggerDTO;
   }
 
-  @PutMapping("/{name}")
+  @PutMapping("/{group}/{name}")
   @Operation(summary = "Reschedule a simple trigger")
   @ApiResponses(value = {
     @ApiResponse(responseCode = "200", description = "Rescheduled a simple trigger",
@@ -78,10 +79,11 @@ public class SimpleTriggerController {
     @ApiResponse(responseCode = "400", description = "Invalid trigger configuration",
       content = @Content)
   })
-  public TriggerDTO rescheduleSimpleTrigger(@PathVariable String name, @Valid @RequestBody SimpleTriggerInputDTO simpleTriggerInputDTO) throws SchedulerException {
+  public TriggerDTO rescheduleSimpleTrigger(@PathVariable String group, @PathVariable String name, @Valid @RequestBody SimpleTriggerInputDTO simpleTriggerInputDTO) throws SchedulerException, TriggerNotFoundException {
     log.info("SIMPLE TRIGGER - RESCHEDULING the trigger {} {}", name, simpleTriggerInputDTO);
     SimpleTriggerCommandDTO simpleTriggerCommandDTO = SimpleTriggerCommandDTO.builder()
       .triggerName(name)
+      .triggerGroup(group)
       .simpleTriggerInputDTO(simpleTriggerInputDTO)
       .build();
     TriggerDTO triggerDTO = simpleSchedulerService.rescheduleSimpleTrigger(simpleTriggerCommandDTO);

quartz-manager-parent/quartz-manager-starter-api/src/main/java/it/fabioformosa/quartzmanager/api/controllers/TriggerController.java

@@ -7,13 +7,25 @@ import io.swagger.v3.oas.annotations.responses.ApiResponse;
 import io.swagger.v3.oas.annotations.responses.ApiResponses;
 import io.swagger.v3.oas.annotations.security.SecurityRequirement;
 import it.fabioformosa.quartzmanager.api.dto.TriggerKeyDTO;
+import it.fabioformosa.quartzmanager.api.dto.TriggerDTO;
+import it.fabioformosa.quartzmanager.api.dto.TriggerInputDTO;
+import it.fabioformosa.quartzmanager.api.exceptions.TriggerNotFoundException;
 import it.fabioformosa.quartzmanager.api.services.TriggerService;
+import jakarta.validation.Valid;
 import lombok.extern.slf4j.Slf4j;
 import org.quartz.SchedulerException;
+import org.springframework.http.HttpStatus;
+import org.springframework.web.bind.annotation.DeleteMapping;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.ResponseStatus;
 import org.springframework.web.bind.annotation.RestController;
 
+import java.text.ParseException;
 import java.util.List;
 
 import static it.fabioformosa.quartzmanager.api.common.config.OpenAPIConfigConsts.QUARTZ_MANAGER_SEC_OAS_SCHEMA;
@@ -44,4 +56,56 @@ public class TriggerController {
     return triggerService.fetchTriggers();
   }
 
+  @GetMapping("/{group}/{name}")
+  @Operation(summary = "Get trigger details")
+  @ApiResponses(value = {
+    @ApiResponse(responseCode = "200", description = "Got trigger details",
+      content = { @Content(mediaType = "application/json",
+        schema = @Schema(implementation = TriggerDTO.class)) }),
+    @ApiResponse(responseCode = "404", description = "Trigger not found", content = @Content)
+  })
+  public TriggerDTO getTrigger(@PathVariable String group, @PathVariable String name) throws SchedulerException, TriggerNotFoundException {
+    return triggerService.getTrigger(group, name);
+  }
+
+  @PostMapping("/{group}/{name}")
+  @ResponseStatus(HttpStatus.CREATED)
+  @Operation(summary = "Schedule a new trigger")
+  public TriggerDTO postTrigger(@PathVariable String group, @PathVariable String name, @Valid @RequestBody TriggerInputDTO triggerInputDTO) throws SchedulerException, ClassNotFoundException, ParseException {
+    log.info("TRIGGER - CREATING a trigger {} {}", name, triggerInputDTO);
+    TriggerDTO newTriggerDTO = triggerService.scheduleTrigger(group, name, triggerInputDTO);
+    log.info("TRIGGER - CREATED a trigger {}", newTriggerDTO);
+    return newTriggerDTO;
+  }
+
+  @PutMapping("/{group}/{name}")
+  @Operation(summary = "Reschedule a trigger")
+  public TriggerDTO rescheduleTrigger(@PathVariable String group, @PathVariable String name, @Valid @RequestBody TriggerInputDTO triggerInputDTO) throws SchedulerException, TriggerNotFoundException, ParseException {
+    log.info("TRIGGER - RESCHEDULING the trigger {} {}", name, triggerInputDTO);
+    TriggerDTO triggerDTO = triggerService.rescheduleTrigger(group, name, triggerInputDTO);
+    log.info("TRIGGER - RESCHEDULED the trigger {}", triggerDTO);
+    return triggerDTO;
+  }
+
+  @PostMapping("/{group}/{name}/pause")
+  @ResponseStatus(HttpStatus.NO_CONTENT)
+  @Operation(summary = "Pause a trigger")
+  public void pauseTrigger(@PathVariable String group, @PathVariable String name) throws SchedulerException, TriggerNotFoundException {
+    triggerService.pauseTrigger(group, name);
+  }
+
+  @PostMapping("/{group}/{name}/resume")
+  @ResponseStatus(HttpStatus.NO_CONTENT)
+  @Operation(summary = "Resume a trigger")
+  public void resumeTrigger(@PathVariable String group, @PathVariable String name) throws SchedulerException, TriggerNotFoundException {
+    triggerService.resumeTrigger(group, name);
+  }
+
+  @DeleteMapping("/{group}/{name}")
+  @ResponseStatus(HttpStatus.NO_CONTENT)
+  @Operation(summary = "Unschedule a trigger")
+  public void unscheduleTrigger(@PathVariable String group, @PathVariable String name) throws SchedulerException, TriggerNotFoundException {
+    triggerService.unscheduleTrigger(group, name);
+  }
+
 }

quartz-manager-parent/quartz-manager-starter-api/src/main/java/it/fabioformosa/quartzmanager/api/controllers/advices/ExceptionHandlingController.java

@@ -1,8 +1,11 @@
 package it.fabioformosa.quartzmanager.api.controllers.advices;
 
 import it.fabioformosa.quartzmanager.api.exceptions.ExceptionResponse;
+import it.fabioformosa.quartzmanager.api.exceptions.CalendarNotFoundException;
+import it.fabioformosa.quartzmanager.api.exceptions.JobNotFoundException;
 import it.fabioformosa.quartzmanager.api.exceptions.ResourceConflictException;
 import it.fabioformosa.quartzmanager.api.exceptions.TriggerNotFoundException;
+import it.fabioformosa.quartzmanager.api.exceptions.UnsupportedTriggerTypeException;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.ControllerAdvice;
@@ -28,4 +31,27 @@ public class ExceptionHandlingController {
     return ExceptionResponse.builder().errorCode(HttpStatus.NOT_FOUND.toString()).errorMessage(ex.getMessage()).build();
   }
 
+  @ExceptionHandler(JobNotFoundException.class)
+  @ResponseStatus(HttpStatus.NOT_FOUND)
+  @ResponseBody
+  public ExceptionResponse jobNotFound(JobNotFoundException ex){
+    return ExceptionResponse.builder().errorCode(HttpStatus.NOT_FOUND.toString()).errorMessage(ex.getMessage()).build();
+  }
+
+  @ExceptionHandler(CalendarNotFoundException.class)
+  @ResponseStatus(HttpStatus.NOT_FOUND)
+  @ResponseBody
+  public ExceptionResponse calendarNotFound(CalendarNotFoundException ex){
+    return ExceptionResponse.builder().errorCode(HttpStatus.NOT_FOUND.toString()).errorMessage(ex.getMessage()).build();
+  }
+
+  @ExceptionHandler(UnsupportedTriggerTypeException.class)
+  public ResponseEntity<ExceptionResponse> unsupportedTriggerType(UnsupportedTriggerTypeException ex) {
+    ExceptionResponse response = ExceptionResponse.builder()
+      .errorCode(HttpStatus.CONFLICT.toString())
+      .errorMessage(ex.getMessage())
+      .build();
+    return new ResponseEntity<>(response, HttpStatus.CONFLICT);
+  }
+
 }

quartz-manager-parent/quartz-manager-starter-api/src/main/java/it/fabioformosa/quartzmanager/api/converters/SchedulerToSchedulerDTO.java

@@ -6,9 +6,13 @@ import it.fabioformosa.quartzmanager.api.enums.SchedulerStatus;
 import lombok.SneakyThrows;
 import org.quartz.Scheduler;
 import org.quartz.SchedulerException;
+import org.quartz.SchedulerMetaData;
 import org.quartz.impl.matchers.GroupMatcher;
 import org.springframework.stereotype.Component;
 
+import java.time.ZoneOffset;
+import java.time.format.DateTimeFormatter;
+
 @Component
 public class SchedulerToSchedulerDTO extends AbstractBaseConverterToDTO<Scheduler, SchedulerDTO> {
 
@@ -20,6 +24,16 @@ public class SchedulerToSchedulerDTO extends AbstractBaseConverterToDTO<Schedule
     if(!source.isShutdown())
       target.setTriggerKeys(source.getTriggerKeys(GroupMatcher.anyTriggerGroup()));
     target.setStatus(buildTheSchedulerStatus(source));
+    SchedulerMetaData metaData = source.getMetaData();
+    target.setQuartzVersion(metaData.getVersion());
+    target.setJobStoreClass(metaData.getJobStoreClass().getName());
+    target.setJobStoreSupportsPersistence(metaData.isJobStoreSupportsPersistence());
+    target.setClustered(metaData.isJobStoreClustered());
+    target.setThreadPoolClass(metaData.getThreadPoolClass().getName());
+    target.setThreadPoolSize(metaData.getThreadPoolSize());
+    target.setNumberOfJobsExecuted(metaData.getNumberOfJobsExecuted());
+    if (metaData.getRunningSince() != null)
+      target.setRunningSince(DateTimeFormatter.ISO_OFFSET_DATE_TIME.format(metaData.getRunningSince().toInstant().atOffset(ZoneOffset.UTC)));
   }
 
   private SchedulerStatus buildTheSchedulerStatus(Scheduler scheduler) throws SchedulerException {