refactor the application structure and optimize related codes

apps/time-tracker/src/app/app.component.ts

@@ -1,12 +1,16 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { NavigationComponent } from './features/components/navigation/navigation.component';
 
 @Component({
   selector: 'tt-root',
+  standalone: true,
   template: ` <tt-navigation>
     <main class="p-5 sm:p-10">
       <router-outlet></router-outlet>
     </main>
   </tt-navigation>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet, NavigationComponent],
 })
 export class AppComponent {}

apps/time-tracker/src/app/app.routes.ts

@@ -0,0 +1,34 @@
+import { importProvidersFrom } from '@angular/core';
+import { Routes } from '@angular/router';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+
+export const appRoutes: Routes = [
+  {
+    path: '',
+    title: 'Overview',
+    loadComponent: () => import('./pages/overview/overview.component'),
+  },
+  {
+    path: 'calendar',
+    title: 'Calendar',
+    providers: [
+      importProvidersFrom(
+        CalendarModule.forRoot({
+          provide: DateAdapter,
+          useFactory: adapterFactory,
+        }),
+      ),
+    ],
+    loadComponent: () => import('./pages/calendar/calendar.component'),
+  },
+  {
+    path: 'backup',
+    title: 'Import/Export Database',
+    loadComponent: () => import('./pages/backup/backup.component'),
+  },
+  {
+    path: '**',
+    loadComponent: () => import('./pages/overview/overview.component'),
+  },
+];

apps/time-tracker/src/app/features/components/work-time-form/work-time-form.component.ts

@@ -1,6 +1,18 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
 import {
   WorkTime,
   WorkTimePartial,
@@ -12,10 +24,53 @@ import { WorkTimeService } from '../../../core/services/work-time.service';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 import { addDays, subDays } from 'date-fns';
 import { SettingsService } from '../../../core/services/settings.service';
+import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
+import { AsyncPipe, TitleCasePipe } from '@angular/common';
+import {
+  MatError,
+  MatFormField,
+  MatHint,
+  MatLabel,
+} from '@angular/material/form-field';
+import {
+  MatDatepicker,
+  MatDatepickerInput,
+  MatDatepickerToggle,
+} from '@angular/material/datepicker';
+import { MatIcon } from '@angular/material/icon';
+import { MatInput } from '@angular/material/input';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatTooltip } from '@angular/material/tooltip';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 
 @Component({
   templateUrl: './work-time-form.component.html',
+  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    AsyncPipe,
+    CdkTextareaAutosize,
+    MatButton,
+    MatDatepicker,
+    MatDatepickerInput,
+    MatDatepickerToggle,
+    MatDialogActions,
+    MatDialogClose,
+    MatDialogContent,
+    MatDialogTitle,
+    MatError,
+    MatFormField,
+    MatHint,
+    MatIcon,
+    MatIconButton,
+    MatInput,
+    MatLabel,
+    MatRadioButton,
+    MatRadioGroup,
+    MatTooltip,
+    ReactiveFormsModule,
+    TitleCasePipe,
+  ],
 })
 export class WorkTimeFormComponent {
   private readonly workTimeService = inject(WorkTimeService);

apps/time-tracker/src/app/features/components/work-time-table/work-time-datasource.ts

@@ -52,10 +52,10 @@ export class WorkTimeDataSource extends DataSource<WorkTimeViewModel> {
     return {
       date: workTime.date,
       effectiveTime: intervalToDuration({
-        start: durationToDate(
+        start: timeToDate(workTime.pause),
+        end: durationToDate(
           calculateWorkDuration(workTime.start, workTime.end),
         ),
-        end: timeToDate(workTime.pause),
       }),
       startTime: workTime.start,
       endTime: workTime.end,

apps/time-tracker/src/app/features/components/work-time-table/work-time-table.component.ts

@@ -33,7 +33,7 @@ import { WorkTimeViewModel } from '../../interfaces/work-time.view-model';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { WorkTimeDialogService } from '../../../core/services/dialog.service';
 import { WorkTimeService } from '../../../core/services/work-time.service';
-import { PaginatorService } from '../../../apps/time-tracker/src/app/core/services/paginator.service';
+import { PaginatorService } from '../../../core/services/paginator.service';
 
 @Component({
   selector: 'tt-work-time-table',

apps/time-tracker/src/app/pages/backup/backup.component.ts

@@ -18,10 +18,7 @@ import exportFromJSON from 'export-from-json';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { WorkTime, WorkTimePartial } from '../../core/interfaces/work-time';
-import {
-  MatSnackBar,
-  MatSnackBarModule,
-} from '@angular/material/snack-bar';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { map } from 'rxjs/operators';
 import { AsyncPipe } from '@angular/common';
 
@@ -33,16 +30,16 @@ interface ViewModel {
 @Component({
   standalone: true,
   imports: [
+    AsyncPipe,
     MatButtonModule,
     MatInputModule,
     MatIconModule,
     MatSnackBarModule,
-    AsyncPipe
-],
+  ],
   templateUrl: './backup.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BackupComponent {
+export default class BackupComponent {
   private readonly snackbarService = inject(MatSnackBar);
 
   private readonly workTimeService = inject(WorkTimeService);
@@ -54,17 +51,17 @@ export class BackupComponent {
   private readonly importSubject = new Subject<void>();
 
   private readonly fileName$: Observable<string> = this.fileSubject.pipe(
-    map((file) => file?.name ?? '')
+    map((file) => file?.name ?? ''),
   );
 
   private readonly disableImport$: Observable<boolean> = this.fileSubject.pipe(
     map((file) => file == null),
-    startWith(true)
+    startWith(true),
   );
 
   private readonly export$ = this.exportSubject.asObservable().pipe(
     switchMap(() => this.workTimeService.find()),
-    map((data) => this.export(data))
+    map((data) => this.export(data)),
   );
 
   private readonly import$ = zip([
@@ -79,20 +76,20 @@ export class BackupComponent {
           delete workTime.id;
           workTime.date = new Date(workTime.date);
           return this.workTimeService.insert(workTime);
-        })
-      )
+        }),
+      ),
     ),
     map((entries) => entries.length),
     tap((count) => {
       this.snackbarService.open(`Imported ${count} entries successfully`);
-    })
+    }),
   );
 
   readonly viewModel$: Observable<ViewModel> = merge(
     this.fileName$.pipe(map((fileName) => ({ fileName }))),
     this.disableImport$.pipe(map((disableImport) => ({ disableImport }))),
     this.export$.pipe(map(() => ({}))),
-    this.import$.pipe(map(() => ({ fileName: '', disableImport: true })))
+    this.import$.pipe(map(() => ({ fileName: '', disableImport: true }))),
   ).pipe(
     scan(
       (state: ViewModel, command: Partial<ViewModel>) => {
@@ -104,8 +101,8 @@ export class BackupComponent {
       {
         disableImport: true,
         fileName: '',
-      }
-    )
+      },
+    ),
   );
 
   exportData() {