Upgraded to Angular v21

Removed tailwind

Moved to vitest from karma/jasmine

bookie/.editorconfig

@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
 
 [*.ts]
 quote_type = single
+ij_typescript_use_double_quotes = false
 
 [*.md]
 max_line_length = off

bookie/.gitignore

@@ -30,6 +30,7 @@ speed-measure-plugin*.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+!.vscode/mcp.json
 .history/*
 
 # Miscellaneous
@@ -40,6 +41,7 @@ speed-measure-plugin*.json
 /libpeerconnection.log
 testem.log
 /typings
+__screenshots__/
 
 # System files
 .DS_Store

bookie/.postcssrc.json

@@ -1,5 +0,0 @@
-{
-  "plugins": {
-    "@tailwindcss/postcss": {}
-  }
-}

bookie/.prettierrc.js

@@ -4,4 +4,12 @@ module.exports = {
   singleQuote: true,
   bracketSpacing: true,
   printWidth: 120,
+  overrides: [
+    {
+      files: '*.html',
+      options: {
+        parser: 'angular',
+      },
+    },
+  ],
 };

bookie/angular.json

@@ -23,13 +23,16 @@
             "outputPath": {
               "base": "../frontend"
             },
-            "index": "src/index.html",
+            "browser": "src/main.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "sass",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
-            "styles": ["src/styles.sass"],
+              {
-            "scripts": [],
+                "glob": "**/*",
-            "browser": "src/main.ts"
+                "input": "public"
+              }
+            ],
+            "styles": ["src/styles.sass"]
           },
           "configurations": {
             "production": {
@@ -41,8 +44,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "3kb",
+                  "maximumWarning": "4kb",
-                  "maximumError": "6kb"
+                  "maximumError": "8kb"
                 }
               ],
               "outputHashing": "all"
@@ -50,8 +53,7 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true,
+              "sourceMap": true
-              "namedChunks": true
             }
           },
           "defaultConfiguration": "production"
@@ -71,21 +73,8 @@
           },
           "defaultConfiguration": "development"
         },
-        "extract-i18n": {
-          "builder": "@angular/build:extract-i18n",
-          "options": {
-            "buildTarget": "bookie:build"
-          }
-        },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular/build:unit-test"
-          "options": {
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "sass",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["@angular/material/prebuilt-themes/azure-blue.css", "src/styles.sass"],
-            "scripts": []
-          }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",

bookie/eslint.config.js

@@ -1,28 +1,29 @@
 // @ts-check
 const eslint = require('@eslint/js');
+const { defineConfig } = require('eslint/config');
 const tseslint = require('typescript-eslint');
 const angular = require('angular-eslint');
 const eslintConfigPrettier = require('eslint-config-prettier');
 const unusedImports = require('eslint-plugin-unused-imports');
 const perfectionist = require('eslint-plugin-perfectionist');
 
-module.exports = tseslint.config(
+module.exports = defineConfig([
   {
     files: ['**/*.ts'],
+    ignores: ['**/*.spec.ts'],
     extends: [
       eslint.configs.recommended,
-      ...tseslint.configs.recommended,
+      tseslint.configs.recommended,
-      ...tseslint.configs.stylistic,
+      tseslint.configs.stylistic,
-      ...angular.configs.tsRecommended,
+      angular.configs.tsRecommended,
       eslintConfigPrettier,
     ],
     languageOptions: {
       parserOptions: {
-        project: './tsconfig.json', // <-- REQUIRED
+        project: './tsconfig.app.json', // <-- REQUIRED
         tsconfigRootDir: __dirname,
       },
     },
-
     processor: angular.processInlineTemplates,
     plugins: {
       unusedImports: unusedImports,
@@ -69,10 +70,7 @@ module.exports = tseslint.config(
   },
   {
     files: ['**/*.html'],
-    extends: [
+    extends: [angular.configs.templateRecommended, angular.configs.templateAccessibility],
-      ...angular.configs.templateRecommended,
-      // ...angular.configs.templateAccessibility,
-    ],
     rules: {},
   },
-);
+]);

bookie/package.json

@@ -7,56 +7,42 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "watch": "ng build --watch --configuration development",
+    "watch": "ng build --watch --configuration development"
-    "eslint": "eslint",
-    "prettier": "prettier",
-    "husky": "husky"
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^20.0.4",
+    "@angular/cdk": "^21.1.1",
-    "@angular/common": "^20.0.6",
+    "@angular/common": "^21.1.1",
-    "@angular/compiler": "^20.0.6",
+    "@angular/compiler": "^21.1.1",
-    "@angular/core": "^20.0.6",
+    "@angular/core": "^21.1.1",
-    "@angular/forms": "^20.0.6",
+    "@angular/forms": "^21.1.1",
-    "@angular/material": "^20.0.4",
+    "@angular/material": "^21.1.1",
-    "@angular/material-moment-adapter": "^20.0.4",
+    "@angular/material-moment-adapter": "^21.1.1",
-    "@angular/platform-browser": "^20.0.6",
+    "@angular/platform-browser": "^21.1.1",
-    "@angular/platform-browser-dynamic": "^20.0.6",
+    "@angular/platform-browser-dynamic": "^21.1.1",
-    "@angular/router": "^20.0.6",
+    "@angular/router": "^21.1.1",
-    "mathjs": "^14.0.1",
+    "mathjs": "^15.1.0",
     "moment": "^2.30.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.0.5",
+    "@angular/build": "^21.1.1",
-    "@angular/cli": "^20.0.5",
+    "@angular/cli": "^21.1.1",
-    "@angular/compiler-cli": "^20.0.6",
+    "@angular/compiler-cli": "^21.1.1",
-    "@angular/language-service": "^20.0.6",
+    "angular-eslint": "^21.1.0",
-    "@tailwindcss/postcss": "^4.1.11",
-    "@types/jasmine": "~5.1.4",
-    "angular-eslint": "^20.1.1",
-    "autoprefixer": "^10.4.19",
     "eslint": "^9.28.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-perfectionist": "^4.15.0",
+    "eslint-plugin-perfectionist": "^5.4.0",
     "eslint-plugin-unused-imports": "^4.1.4",
     "husky": "^9.1.7",
-    "jasmine-core": "^5.5.0",
-    "karma": "^6.4.3",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "^2.2.1",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
     "lint-staged": "^16.1.2",
-    "postcss": "^8.5.6",
     "prettier": "^3.4.2",
     "standard-version": "^9.5.0",
-    "tailwindcss": "^4.1.11",
+    "typescript": "~5.9.3",
-    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.33.1",
-    "typescript-eslint": "^8.33.1"
+    "vitest": "^4.0.8"
   },
   "husky": {
     "hooks": {

bookie/src/app/customers/customer-list/customer-list-datasource.ts

@@ -2,9 +2,9 @@ import { DataSource } from '@angular/cdk/collections';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { Observable, of as observableOf } from 'rxjs';
-import { PagedResult } from 'src/app/core/paged-result';
 
 import { Customer } from '../../core/customer';
+import { PagedResult } from '../../core/paged-result';
 
 export class CustomerListDatasource extends DataSource<Customer> {
   constructor(

bookie/src/app/customers/customer-list/customer-list.component.ts

@@ -9,9 +9,9 @@ import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { debounceTime, distinctUntilChanged, Observable } from 'rxjs';
-import { PagedResult } from 'src/app/core/paged-result';
 
 import { Customer } from '../../core/customer';
+import { PagedResult } from '../../core/paged-result';
 import { CustomerListDatasource } from './customer-list-datasource';
 
 @Component({
@@ -65,7 +65,7 @@ export class CustomerListComponent implements OnInit, AfterViewInit {
     }
     this.route.data.subscribe((value) => {
       const data = value as { data: PagedResult<Customer> };
-      data.data.items.forEach((c) => (c.discounts = c.discounts.filter((d) => d.discount !== 0)));
+      data.data.items.forEach((c: Customer) => (c.discounts = c.discounts.filter((d) => d.discount !== 0)));
       this.data = data.data;
       this.dataSource = new CustomerListDatasource(this.data, this.paginator, this.sort);
       this.cdr.detectChanges();

bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.html

@@ -25,6 +25,7 @@
     <mat-nested-tree-node *matTreeNodeDef="let node" class="mat-tree-node" [class.leaf-node]="!hasChild(0, node)">
       <li class="mat-tree-node">
         <!-- use a disabled button to provide padding for tree leaf -->
+        <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->
         <button mat-icon-button disabled></button>
         <mat-checkbox
           class="checklist-leaf-node"

bookie/src/app/product/product-detail/product-detail-dialog.component.ts

@@ -7,8 +7,8 @@ import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/materia
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { MenuCategory } from 'src/app/core/menu-category';
 
+import { MenuCategory } from '../../core/menu-category';
 import { StockKeepingUnit } from '../../core/product';
 
 @Component({

bookie/src/app/sales/bill-number/bill-number.component.ts

@@ -7,7 +7,8 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/materia
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { Regime } from 'src/app/core/regime';
+
+import { Regime } from '../../core/regime';
 
 @Component({
   selector: 'app-bill-number',

bookie/src/app/sales/running-tables/running-tables.component.ts

@@ -6,8 +6,8 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
 import { map } from 'rxjs/operators';
-import { Regime } from 'src/app/core/regime';
 
+import { Regime } from '../../core/regime';
 import { Table } from '../../core/table';
 import { BillNumberComponent } from '../bill-number/bill-number.component';
 

bookie/src/app/taxes/tax-detail/tax-detail.component.ts

@@ -9,8 +9,8 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { round } from 'mathjs';
-import { Regime } from 'src/app/core/regime';
 
+import { Regime } from '../../core/regime';
 import { Tax } from '../../core/tax';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { TaxService } from '../tax.service';

bookie/tailwind.config.js

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{html,ts}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

bookie/tsconfig.app.json

@@ -5,6 +5,6 @@
     "outDir": "../frontend",
     "types": []
   },
-  "files": ["src/main.ts"],
+  "include": ["src/**/*.ts"],
-  "include": ["src/**/*.d.ts"]
+  "exclude": ["src/**/*.spec.ts"]
 }

bookie/tsconfig.json

@@ -1,8 +1,8 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "../frontend",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
@@ -11,21 +11,25 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
+    "isolatedModules": true,
-    "sourceMap": true,
-    "declaration": false,
     "experimentalDecorators": true,
-    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022",
+    "module": "preserve"
-    "useDefineForClassFields": false,
-    "lib": ["ES2022", "dom"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
 }

bookie/tsconfig.spec.json

@@ -3,7 +3,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": ["jasmine"]
+    "types": ["vitest/globals"]
   },
   "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
 }